tcm-cloud-uin-app/pages/ypczk/index/leaderIndex.vue

<!-- 首页-组长 -->
<template>
	<view class="view_container leaderIndex">
		<!-- 头部 -->
		<view class="leaderIndex_header">
			<view class="info">
				<view class="info_img">
					<image :src="pageData.headImg" class="headImg"></image>
				</view>
				<text class="userName">{{pageData.userName}}</text>
				<image :src="eyeIcon.nowIcon" class="eyeIcon" @click="changeState('header')"></image>
			</view>
			<view class="slogan">
				<image src="/static/slogan_header_img.png" class="slogan_img"></image>
			</view>
		</view>
		<!-- 标题 -->
		<view class="leaderIndex_title">
			<view class="title_left">
				<text>任务列表</text>
				<!-- <uni-badge class="uni-badge-left-margin" :text="pageData.taskNum" /> -->
			</view>
			<view class="title_right" @click="toDetail">
				<text class="right_text">查看全部</text>
				<uni-icons type="right"></uni-icons>
			</view>
		</view>
		<!-- 列表 -->
		<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.taskNumber}}</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>
		<!-- 签收任务/开始质控对话框 -->
		<uni-popup ref="operatorDialog" type="dialog">
			<uni-popup-dialog type="info" confirmText="确定" cancelText="取消" :title="pageData.popupMessage.title" :content="pageData.popupMessage.showMessage" @confirm="operatorDialogConfirm" @close="operatorDialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

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

const pageData=reactive({
	headImg:'/static/logo.png',
	userName:'王军',
	taskNum:2,
	taskList:[],
	// 对话框
	popupMessage:{
		// 标题
		title:'',
		// 提示内容
		showMessage:''
	}
})

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 operatorDialog=ref()

// 定义质控提醒对话框
const remindDialog=ref()

// 签收任务/开始质控对话框确定事件
const operatorDialogConfirm=()=>{
	operatorDialog._value.close()
}

// 签收任务/开始质控对话框取消事件
const operatorDialogClose=()=>{
	operatorDialog._value.close()
}

// 切换显示与隐藏
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 toDetail=()=>{
	console.log("跳转到任务详情")
	// 提示-只有组长能够开始质控
	uni.showModal({
		title: '提示',
		content: '只有组长能够开始质控',
		confirmColor: 'rgba(190, 163, 117, 1)', //确定字体颜色
		showCancel: false,//没有取消按钮的弹框
		buttonText: '确定',
		success: function (res) {
			console.log(res)
		}
	})
}

// 签收
const signTask=()=>{
	console.log("签收")
	operatorDialog._value.open()
	pageData.popupMessage.title='签收'
	pageData.popupMessage.showMessage='是否确认签收任务？'
}

// 开始质控
const starTask=()=>{
	console.log("开始质控")
	operatorDialog._value.open()
	pageData.popupMessage.title='开始质控'
	pageData.popupMessage.showMessage='是否确认开始质控任务？'
}

onPullDownRefresh(()=>{
	console.log("下拉刷新")
	setTimeout(uni.stopPullDownRefresh(),2000)
	
})

const getTaskData=()=>{
	http.get("app-api/findList").then(res=>{
		console.log(res)
		pageData.taskList=res
		pageData.taskList.forEach(item=>{
			item.finishTime=item.wcrq1.slice(2) +' ~ '+item.wcrq2.slice(0,-2)
			if(item.status=='7003'){
				item.taskStatusIcon=statusIcon.daiIcon
			}else if(item.status=='7004'){
				item.taskStatusIcon=statusIcon.wanIcon
			}else{
				item.taskStatusIcon=statusIcon.zhiIcon
			}
		})
		console.log(pageData.taskList)
	})
}

onShow(()=>{
	eyeIcon.nowIcon=eyeIcon.hideIcon
	showIcon.nowIcon=showIcon.hideIcon
	getTaskData()
})
</script>


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