ygoa_miniapp/pages/mine/waitWork/waitWork.vue

<template>
	<view class="container">
		<view class="stats-container">
			<view class="stat-item" @click="goToTodos">


				<image :src="waitWorkImg" style="width: 120rpx;height: 120rpx;"></image>
				<text class="stat-label">
					待办任务
					<text class="stat-value">{{ todoCount }}</text>
					</text>
			</view>
			<view class="divider"></view>
			<view class="stat-item" @click="goToProcesses">
				<image :src="processImg" style="width: 60px;height: 60px;"></image>

				<text class="stat-label">
					发布流程
					<text class="stat-value">{{ processCount }}</text>
				</text>
			</view>
		</view>
		<view class="tasks-section">
			<view class="section-header">
				<text class="section-title">任务列表</text>
			</view>
			<scroll-view class="task-list" scroll-y>
				<view class="task-item" v-for="(todo, index) in todos" :key="index" @click="showTaskDetail(todo)">
					<view>
						<image :src="waitWorkImg" style="width: 30rpx;height: 30rpx;margin-right: 30rpx;"></image>
						<text class="task-content">{{ todo.content }}</text>
					</view>
					
					<text class="task-detail-icon">›</text>
				</view>
			</scroll-view>
		</view>
		<view class="processes-section">
			<view class="section-header">
				<text class="section-title">流程列表</text>
			</view>
			<scroll-view class="process-list" scroll-y>
				<view class="process-item" v-for="(process, index) in processes" :key="index"
					@click="showProcessDetail(process)">
					<view>
						<image :src="processImg" style="width: 30rpx;height: 30rpx;margin-right: 30rpx;"></image>
						<text class="process-content">{{ process.content }}</text>
					</view>
					
					<text class="process-detail-icon">›</text>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		reactive,
	} from 'vue';

import waitWorkImg from "/static/images/mine/waitWork2.png";
import processImg from "/static/images/mine/process.png";

	const todos = reactive([{
			id: 1,
			content: '完成报告1',
			detail: '完成11月5日的今日报告'
		},
		{
			id: 2,
			content: '参加会议2',
			detail: '参加11月5日下午5点的会议'
		},
		{
			id: 3,
			content: '回复邮件3',
			detail: '详细描述...'
		},
		{
			id: 4,
			content: '完成报告4',
			detail: '详细描述...'
		},
		{
			id: 5,
			content: '参加会议5',
			detail: '详细描述...'
		},
		{
			id: 6,
			content: '回复邮件6',
			detail: '详细描述...'
		},
	]);

	const processes = ref([{
			id: 1,
			content: '审批流程',
			detail: '来自张三的请假申请'
		},
		{
			id: 2,
			content: '财务流程',
			detail: '详细描述...'
		},
	]);

	const todoCount = computed(() => todos.length);
	const processCount = computed(() => processes.value.length);

	function goToTodos() {
		// 跳转到待办任务列表页面
	}

	function goToProcesses() {
		// 跳转到流程列表页面
	}

	function showTaskDetail(todo) {
		// 显示待办任务详情
		uni.showModal({
			title: '任务详情',
			content: todo.detail,
			cancelText:'完成',
			success: function (res) {
					if (res.confirm) {
						console.log('用户点击确定');
					} else if (res.cancel) {
						console.log('用户点击完成',todo);
						// 找到要移除的对象的索引
						let index = todos.findIndex(item => item.id === todo.id);
						// 如果找到了，使用splice移除它
						if (index > -1) {
						  todos.splice(index, 1);
						}
						
					}
				}
			
		});
	}

	function showProcessDetail(process) {
		// 显示流程详情
		uni.showModal({
			title: '流程详情',
			content: process.detail,
			showCancel: false
		});
	}
</script>

<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #f5f5f5;
		height: 100%;
	}


	.stats-container {
		display: flex;
		justify-content: space-around;
		width: 100%;
		margin-top: 20px;
		background-color: white;
		border-radius: 10px;
		padding: 10px 0;
	}

	.stat-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 50%;
	}

	.stat-value {
		font-size: 24px;
		font-weight: bold;
		color: #333;
	}

	.stat-label {
		font-size: 16px;
		color: #666;
	}

	.divider {
		width: 1px;
		height: 40px;
		background-color: #e5e5e5;
	}

	.tasks-section,
	.processes-section {
		width: 100%;
		margin-top: 20px;
	}

	.section-header {
		padding: 10px;
		background-color: #f8f8f8;
		border-bottom: 1px solid #e5e5e5;
	}

	.section-title {
		font-size: 20px;
		font-weight: bold;
	}

	.task-list,
	.process-list {
		height: 200px;
		background-color: white;
	}

	.task-item,
	.process-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15px;

	}
</style>