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

<template>
	<view class="view_container leaderIndex">
		<!-- 列表 -->
		<view>
			<uni-card v-for="(item,index) in pageData.taskList" padding="0" spacing="0" class="leaderIndex_list">
				<view  @click="showDetail(item)">
					<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">
						<view class="list_item">任务编号</view>
						<view class="list_item_text">{{item.id}}</view>
					</view>
					<view class="list_content">
						<view class="list_item">组长</view>
						<view class="list_item_text">{{item.zzName}}</view>
					</view>
					<view class="list_content">
						<view class="list_item">待质控代煎企业</view>
						<view class="list_item_text">{{item.bzkOrgName}}</view>
					</view>
					<view class="list_content">
						<view class="list_item">地址</view>
						<view class="list_item_text">{{item.address}}</view>
					</view>
					<view class="list_content">
						<view class="list_item">完成日期</view>
						<view class="list_item_text">{{item.finishTime}}</view>
					</view>
				</view>
				<view class="button_group" v-if="item.status=='7002' || item.status=='7003'">
					<view class="button_sign" @click="signTask(item)">签收</view>
					<view class="button_start" @click="startTask(item)">开始质控</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 {ref,onMounted,reactive} from "vue";
	import {onLoad,onShow,onUnload,onPageScroll,onReachBottom,onPullDownRefresh} from "@dcloudio/uni-app";

	const props = defineProps({
		//接受父组件参数，当前要接质控任务状态
		state:  String,
		// 完成质控标志
		finishFlag:String
	});

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

	const formData = reactive({
		pageSize: 10,
		pageNum: 1,
		status:props.state
	})

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

	const pageData = reactive({
		headImg: '/static/logo.png',
		userName: '王军',
		taskNum: 2,
		taskList: [],
		// 任务编号
		taskId:'',
	})

	// 签收接口输入参数
	const signFormData=reactive({
		// 任务id
		taskId:''
	})
	
	// 开始质控接口输入参数
	const startFormData=reactive({
		// 任务id
		taskId:''
	})

	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 signTask=(e)=>{
		console.log("签收")
		uni.$emit("signTask",e)
	}
	
	// 开始质控
	const startTask=(e)=>{
		console.log("开始质控")
		uni.$emit("startTask",e)
	}

	const getTaskData = () => {
		uni.showLoading({
			title: '',
			mask: true
		});
		http.get("app-api/zkzy/findZkzyList",formData).then(res => {
			uni.hideLoading()
			console.log(res)
			pageData.taskList = pageData.taskList.concat(res.data)
			if(props.finishFlag=='1'){
				pageData.taskList=pageData.taskList.filter(item=>{
					return item.status!='7001' && item.status!='7002' && item.status!='7003'
				})
			}
			pageData.taskList.forEach(item => {
				if (item.wcrq1 != null && item.wcrq2 != null) {
					item.finishTime = item.wcrq1 + ' ~ ' + item.wcrq2
				}
				if(item.status=='7002'){
					// 7002待质控
					item.taskStatusIcon=statusIcon.daiIcon
				}else if(item.status=='7003'){
					// 7003质控中
					item.taskStatusIcon=statusIcon.zhiIcon
				}else{
					item.taskStatusIcon=statusIcon.wanIcon
				}
			})
			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);
		})
	}
	
	// 存入taskData(taskId)
	const setTaskId=(id)=>{
		uni.setStorageSync("saveTaskId",{taskId:id})
	}
	
	const showDetail=(e)=>{
		setTaskId(e.id)
		uni.navigateTo({
			url: '/pages/ypczk/zkTask/zkTaskDetail/detailsList?taskInfo='+encodeURIComponent(JSON.stringify(e))
		});
	}
	
	// 上拉加载
	const reachBottom = ()=>{
		console.log("上拉加载");
		if (loadingData.reload) {
			formData.pageNum++;
			loadingData.status = 'loading'
			getTaskData();
		}
	}
	
	const propsState = ref("")
	onShow(() => {
		eyeIcon.nowIcon = eyeIcon.hideIcon
		showIcon.nowIcon = showIcon.hideIcon
		formData.pageNum = 1;
		loadingData.reload = true
		propsState.value = props.state
	})

	//下拉刷新
	const pullDownRefresh = () => {
		console.log("下拉刷新");
		formData.pageNum = 1;
		loadingData.reload = true
		pageData.taskList = []
		getTaskData();
	}
	
	const fetch = ()=>{
		console.log(pageData.taskList);
		if(pageData.taskList == null || pageData.taskList.length == 0){
			pullDownRefresh()
		}
	}
	
	// 页面滚动触发事件
	onPageScroll((detail) => {
		//页面滚动事件
		uni.pageScrollTo({
			scrollTop: detail.scrollTop,
			duration: 0
		})
	})
	defineExpose({reachBottom,pullDownRefresh,fetch,getTaskData})
</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>