tcm-cloud-uin-app/pages/ypczk/zkTask/zkTaskListView.vue

<template>
	<view class="view_container leaderIndex">
		<!-- 列表 -->
		<view class="leaderIndex_list">
			<uni-card v-for="(item,index) in pageData.taskList" padding="10rpx 0">
				<view class="list_title">
					<image :src="item.taskStatusIcon" class="statusIcon"></image>
					<view>{{item.name}}</view>
					<image :src="showIcon.nowIcon" class="showIcon" @click="changeState('list')"></image>
				</view>
				<view class="list_content">
					<text class="list_item">任务编号<text class="list_item_text">{{item.id}}</text></text>
					<text class="list_item">组长<text class="list_item_text">{{item.zzName}}</text></text>
					<text class="list_item">待质控代煎企业<text class="list_item_text">{{item.bzkOrgName}}</text></text>
					<text class="list_item">地址<text class="list_item_text">{{item.address}}</text></text>
					<text class="list_item">完成日期<text class="list_item_text">{{item.finishTime}}</text></text>
				</view>
				<view class="list_button">
					<view class="button_group">
						<view class="button_item" @click="signTask">签收</view>
						<view class="button_item" @click="starTask">开始质控</view>
					</view>
				</view>
			</uni-card>
		</view>
		<view>
			<uni-load-more :status="loadingData.status" :contentText="loadingData.contentText"></uni-load-more>
		</view>
	</view>
</template>

<script setup>
	import http from '@/utils/request';
	import {
		onMounted,
		reactive
	} from "vue";
	import {
		onLoad,
		onShow,
		onUnload,
		onPageScroll,
		onReachBottom,
		onPullDownRefresh
	} from "@dcloudio/uni-app";

	const props = defineProps({
		//接受父组件参数，当前要接质控任务状态
		state: {
			type: Object,
			default: ''
		}
	});

	const loadingData = reactive({
		// 加载true，到底false
		reload: false,
		status: 'more',
		contentText: {
			contentdown: '上拉加载更多',
			contentrefresh: '加载中',
			contentnomore: '已经全部加载完毕'
		}
	})

	const formData = reactive({
		pageSize: 10,
		pageIndex: 1,
		status:''
	})

	const pageInfo = reactive({
		// 判断列表是否为空
		isEmpty: true,
		total: 0,
		value: 0,
		orderList: [],
		activeIndex: 0,
		orderId: '',
		detailStatus: ''
	});

	const pageData = reactive({
		headImg: '/static/logo.png',
		userName: '王军',
		taskNum: 2,
		taskList: [],

	})

	const eyeIcon = reactive({
		nowIcon: '',
		showIcon: '/static/whiteDisplay.png',
		hideIcon: '/static/whiteHide.png'
	})

	const showIcon = reactive({
		nowIcon: '',
		showIcon: '/static/blackDisplay.png',
		hideIcon: '/static/blackHide.png'
	})

	const statusIcon = reactive({
		daiIcon: '/static/dai_icon.png',
		wanIcon: '/static/wan_icon.png',
		zhiIcon: '/static/zhi_icon.png'
	})

	// 切换显示与隐藏
	const changeState = (type) => {
		if (type == 'header') {
			console.log("头部切换")
			if (eyeIcon.nowIcon == eyeIcon.hideIcon) {
				eyeIcon.nowIcon = eyeIcon.showIcon
			} else {
				eyeIcon.nowIcon = eyeIcon.hideIcon
			}
		} else if (type == 'list') {
			console.log("列表切换")
			if (showIcon.nowIcon == showIcon.hideIcon) {
				showIcon.nowIcon = showIcon.showIcon
			} else {
				showIcon.nowIcon = showIcon.hideIcon
			}
		}
	}


	const getTaskData = () => {
		if(props.state=='wait'){
			formData.status="7003"
		}else if(props.state=='intask'){
			formData.status="7007"
		}else if(props.state=='complete'){
			formData.status="7004"
		}
		
		http.get("app-api/zkzy/findZkzyList?pageNum=" + formData.pageIndex + "&pageSize=" + formData.pageSize+ "&status=" + formData.status).then(
			res => {
				console.log(res)
				// pageData.taskList = res.data
				for (let i = 0; i < res.data.length; i++) {
					pageData.taskList.push(res.data[i])
				}
				pageData.taskList.forEach(item => {
					if (item.wcrq1 != null && item.wcrq2 != null) {
						item.finishTime = item.wcrq1 + ' ~ ' + item.wcrq2
					}
					if (item.status == '7003') {
						item.taskStatusIcon = statusIcon.daiIcon
					} else if (item.status == '7004') {
						item.taskStatusIcon = statusIcon.wanIcon
					} else {
						item.taskStatusIcon = statusIcon.zhiIcon
					}
				})

				if (formData.pageSize > res.data.length) {
					loadingData.reload = false
					loadingData.status = 'noMore'
					uni.stopPullDownRefresh();
				} else {
					loadingData.status = 'more'
					loadingData.reload = true
				}
				
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 1000);
			})
	}

	onShow(() => {
		eyeIcon.nowIcon = eyeIcon.hideIcon
		showIcon.nowIcon = showIcon.hideIcon
		
		formData.pageIndex = 1;
		loadingData.reload = true
		getTaskData();
		pageData.taskList = []
	})
	
	// 上拉加载
	onReachBottom(() => {
		if (loadingData.reload) {
			formData.pageIndex++;
			loadingData.status = 'loading'
			getTaskData();
		}
	})
	
	//下拉刷新
	onPullDownRefresh(() => {
		formData.pageIndex = 1;
		loadingData.reload = true
		getTaskData();
		pageData.taskList = []
	})
	
	// 页面滚动触发事件
	onPageScroll((detail) => {
		//页面滚动事件
		uni.pageScrollTo({
			scrollTop: detail.scrollTop,
			duration: 0
		})
	})
</script>

<style lang="scss" scoped>
	@import 'indexList.scss';

	.yui-tabs {
		position: relative;
	}

	::v-deep.uni-view.yui-tabs__wrap {
		margin-top: 25px !important;
	}

	.yui-tabs__wrap {
		top: 50px !important;
	}
</style>