logpm/pagesTask/pages/checkTaskList/checkTaskList.vue

<template>
	<view>
		<!-- 顶部导航栏 -->
		<u-navbar :title="title" placeholder :autoBack="true" leftIconSize='35' bgColor='#d3832a' leftIconColor='#ffffff'
			titleStyle='color:#ffffff'></u-navbar>
	</view>

	<!-- 主体内容 -->
	<view class="main">

		<!-- 随机盘点 -->
		<template v-if="pageType === 1">
			<!-- 表格 -->
			<view class="table">
				<!-- 表格头部 -->
				<view class="thead">

				</view>

				<!-- 表格主体 -->
				<view class="tbody">

				</view>
			</view>
		</template>

		<!-- 按库位盘点 -->
		<template v-if="pageType === 2">
			<!-- 顶部 -->
			<view class="main_top">
				<input type="text" placeholder="请输入库位id" v-model="details.searchText.storageText" class="main_top_search" />
				<view class="button" @click="searchStorageLocation">搜索</view>
			</view>

			<!-- 表格 -->
			<view class="table">
				<!-- 表格头部 -->
				<view class="thead">

				</view>

				<!-- 表格主体 -->
				<view class="tbody">

				</view>
			</view>
		</template>

		<!-- 按合同号盘点 -->
		<template v-if="pageType === 3">
			<!-- 顶部 -->
			<view class="main_top">
				<input type="text" placeholder="请输入合同号" class="main_top_search" />
				<view class="button">搜索</view>
			</view>

			<!-- 表格 -->
			<view class="table">
				<!-- 表格头部 -->
				<view class="thead">

				</view>

				<!-- 表格主体 -->
				<view class="tbody">

				</view>
			</view>
		</template>

		<!-- 按托盘盘点 -->
		<template v-if="pageType === 4">
			<!-- 顶部 -->
			<view class="main_top">
				<input type="text" placeholder="请输入托盘码" class="main_top_search" />
				<view class="button">搜索</view>
			</view>

			<!-- 表格 -->
			<view class="table">
				<!-- 表格头部 -->
				<view class="thead">

				</view>

				<!-- 表格主体 -->
				<view class="tbody">

				</view>
			</view>
		</template>

		<view v-show="isEnd" class="footer-end">
			到底啦
		</view>
	</view>
	<saomiao2></saomiao2>
</template>

<script setup lang="ts">
	import {
		onShow,
		onLoad,
		onHide,
		onReachBottom,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	import { reactive, toRefs } from "vue";

	import { getWarehouseTaskAllocationList } from '@/api/user.js';

	const details = reactive({
		// 页面标题
		title: '',
		// 页面类型 1: 随机盘点; 2: 按库位盘点; 3: 按合同号盘点; 4: 按托盘盘点;
		pageType: 1,
		// 扫描后的值
		scancode: '',
		searchText: {
			storageText: '',
			taryText: ''
		},
		isscan: false,
		page: {
			// 当前页码
			current: 1,
			// 每页数量
			size: 10,
		},
		// 渲染列表
		renderList: [],
		// 数据是否加载完毕
		isEnd: false
	})

	// 页面初始化执行回调
	onLoad((info) => {
		const { pageType, data } = JSON.parse(info.data)
		details.title = data.title
		details.pageType = pageType

		// 库位盘点时, 允许扫码
		if (pageType === 2) details.isscan = true
		else details.isscan = false

		// 初始化请求页面数据
		initPage()
	})

	// 开启监听扫描
	onShow(() => {
		uni.$on('scancodedate', function (code) {
			if (code) {
				// console.log(code);
				details.scancode = code
				scandata()
			}
		})
	})

	// 关闭扫描监听
	onHide(() => {
		uni.$off('scancodedate')
	})

	// 添加防抖函数
	let antiShake : any = null
	// 触底加载
	onReachBottom(() => {
		// 数据请求完毕, 不再请求
		if (isEnd) return uni.showToast({
			title: '数据加载完毕',
			icon: 'success'
		})
		if (antiShake) {
			uni.hideLoading()
			// 清空定时器
			clearTimeout(antiShake)
			return antiShake = null
		}
		uni.showLoading({
			mask: true,
			title: '数据加载中'
		})
		antiShake = setTimeout(async () => {
			// 当前页码 +1
			details.page.current += 1
			// 请求页面数据
			await initPage()
			uni.hideLoading()
		}, 500)
	})

	// 下拉刷新
	onPullDownRefresh(async () => {
		// 重置页码
		details.page.current = 1
		// 恢复结束状态
		details.isEnd = false
		// 清空渲染列表
		details.renderList = []

		const res = await initPage()
		console.log('res :>> ', res);
	})

	// 请求页面数据
	async function initPage() {
		try {
			if (details.pageType === 2) {
				// 货位id
				// type: 搜索的type, 1是手输, 2是扫描
				const res = await getWarehouseTaskAllocationList({
					...details.page,
					code: details.scancode,
				})
				console.log('res :>> ', res);
				// if (code === 200)
				const { code, data: { records } } = res

				if (code === 200 && res.data) {
					details.renderList = [...details.renderList, ...records]

					// 当返回数组长度小于每页数量时, 将结束状态改为true
					if (records.length < details.page.size) details.isEnd = true
				}

				// 返回code码
				return code
			}
		} catch (error) {
			//TODO handle the exception
			console.log('error :>> ', error);
		}
	}

	// 扫描后执行的回调
	function scandata() {
		// 是否允许扫码
		if (details.isscan) return

		// 随机盘点
		if (details.pageType === 2) return
	}

	// 搜索库位
	const searchStorageLocation = () => {
		uni.navigateTo({
			url: `/pagesTask/pages/storageLocationCheckDetails/storageLocationCheckDetails?id=${details.searchText.storageText}`
		})
	}

	const {
		title,
		pageType,
		isEnd
	} = toRefs(details)
</script>

<style lang="scss" scoped>
	$buttonColor: #d3832a;

	// 本页按钮样式
	.button {
		font-size: 28upx;
		padding: 10upx 20upx;
		border: 1upx solid $buttonColor;
		background-color: #fff;
		color: #d3832a;
		border-radius: 5upx;
	}

	.main {
		padding: 10upx;
		font-size: 28upx; // 本页字体大小
	}

	.main_top {
		display: flex;
		// align-items: center;
		justify-content: space-between;
		margin-bottom: 10upx;

		// 顶部搜索框
		&_search {
			flex: 1;
			padding-left: 20upx;
			margin-right: 20upx;
			box-sizing: border-box;
			height: 28upx * 2;
			border-radius: 28upx;
			border: 1upx solid #000;
		}

		.button {
			background-color: $buttonColor;
			color: #fff;
			padding: 0 60upx;
			display: inline-flex;
			align-items: center;
		}
	}

	// 底部结束标语
	.footer-end {
		padding: 20upx 0;
		text-align: center;
	}
</style>