logpm/pagesTask/pages/dynamicCheck/dynamicCheck.vue

<template>
	<BasicContainer :option="option">
		<template v-if="renderList.length !== 0">
			<view class="taskList" v-for="item in renderList" :key="item.id">
				<view class="taskData">
					<view class="label">任务编号: </view>
					<view>{{item.questNum}}</view>
				</view>
				<view class="taskData">
					<view class="label">商城名称: </view>
					<view>{{item.marketName}}</view>
				</view>
				<view class="taskData">
					<view class="label">品牌: </view>
					<view>{{item.brandName}}</view>
				</view>
				<view class="taskData">
					<view class="label">任务开始时间: </view>
					<view>{{item.startTime}}</view>
				</view>
				<view class="taskData">
					<view class="label">任务结束时间: </view>
					<view>{{item.endTime}}</view>
				</view>
				<view class="row-button">
					<button class="button" @click="goCheckList(1, item)">随机盘点</button>
					<button class="button" @click="goCheckList(2, item)">按库位盘点</button>
				</view>
				<view class="row-button">
					<button class="button" @click="goCheckList(3, item)">按合同号盘点</button>
					<button class="button" @click="goCheckList(4, item)">按托盘盘点</button>
				</view>
			</view>
		</template>
	</BasicContainer>
	<saomiao2></saomiao2>

</template>

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

	/**
	 * 1 : 随机盘点
	 * 2 : 按库位盘点
	 * 3 : 按合同号盘点
	 * 4 : 按托盘盘点
	 */
	const details = reactive({
		checkType: {
			1: '随机盘点',
			2: '按库位盘点',
			3: '按合同号盘点',
			4: '按托盘盘点'
		},
		page: {
			// 当前页码
			current: 1,
			// 当前页数量
			size: 10
		},
		// 渲染列表
		renderList: [],

		// 是否到底
		isEnd: false,
	})

	const option = reactive({
		title: '任务列表',
		pullDownRefreshInitPage: async () => {
			// 重置页码
			details.page.current = 1
			// 重置渲染列表
			details.renderList = []
			await initPage()
			if (renderList.value.length === 0) return option.haveData = false
			option.haveData = true
		},
		reachBottomInitPage: () => {
			// 页码+1
			details.page.current += 1
			// 请求页面数据
			initPage()
		},
		haveData: false,
		isEnd: false
	})

	// 页面初始化执行
	onLoad((_info) => {
		// uni.startPullDownRefresh()
	})

	// 添加防抖函数
	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()
		if (res) {
			setTimeout(() => {
				// 关闭刷新动画
				uni.stopPullDownRefresh()
			}, 1000)
		}
	})

	const goCheckList = (pageType : number | string, item : any) => {
		// 订单开始时间和结束时间
		const { startTime, endTime } = item
		// 现在的时间戳
		const nowDate = new Date().getTime()

		// 当目前时间小于开始时间时
		/* if (new Date(startTime).getTime() > nowDate) {
			// 语音提示
			utils.ttsspke('盘点时间未到')
			// 弹窗提示
			return uni.showToast({
				title: '盘点时间未到',
				icon: 'error'
			})
		} */

		// 当目前时间大于结束时间时
		if (new Date(endTime).getTime() < nowDate) {
			// 语音提示
			utils.ttsspke('盘点时间已结束')
			// 弹窗提示
			return uni.showToast({
				title: '盘点时间已结束',
				icon: "error"
			})
		}

		const data = {
			pageType, data: {
				title: details.checkType[pageType]
			}
		}
		uni.navigateTo({
			url: `/pagesTask/pages/checkTaskList/checkTaskList?data=${JSON.stringify(data)}`
		})
	}

	// 请求页面数据
	async function initPage() {
		try {
			const res = await getWarehouseTask({ ...details.page })
			console.log('res :>> ', res);
			const { code, data: { records } } = res
			if (code === 200 && res.data) {
				console.log('records :>> ', records);
				details.renderList = [...details.renderList, ...records]

				details.renderList.forEach(item => {
					item.marketName = item.list.map(val => val.refName).join(',')
				})

				details.renderList.forEach(item => {
					item.brandName = item.list.map(val => val.brandName).join(',')
					if (item.brandName === ',') item.brandName = ''
				})

				if (records.length < details.page.size) option.isEnd = true
			}
			// 将code码返回
			return code
		} catch (error) {
			//TODO handle the exception
			console.log('error :>> ', error);
		}
	}

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

<style lang="scss">
	.taskList {
		padding: 10upx;
		border-bottom: 1upx solid #000;
		font-size: 28upx; // 本页字体大小

		.taskData {
			display: flex;
			flex-wrap: wrap;
			margin-bottom: 20upx;
		}

		.label {
			width: 180upx;
		}
	}

	.row-button {
		display: flex;
		justify-content: space-between;
		margin: 20upx 0;

		.button {
			margin: 0;
			font-size: 28upx;
		}
	}
</style>