LandSurveyApplet/pages/investigator/employerModule/index.vue

<!-- 总发包方 -->
<template>
	<!-- 页面容器 -->
	<view class="page-container">
		<!-- 总计数据行 -->
		<view class="total-row">
			<text class="total-text">共计 {{ totalCount }} 条</text>
		</view>

		<!-- 村民小组列表 -->
		<view class="group-list">
			<view class="group-item" v-for="(item, index) in groupList" :key="index" @click="pageClick(item)">
				<!-- 小组名称 + 状态标签 -->
				<view class="group-header">
					<text class="group-name">{{ item.fbfmc }}</text>
					<text class="status-tag" :class="getStatusClass(item.status)">
						{{ item.status }}
					</text>
				</view>

				<!-- 数据统计行 -->
				<view class="data-row">
					<!-- 总户数 -->
					<view class="data-item">
						<text class="data-value">{{ item.total }}</text>
						<text class="data-label">总户数</text>
					</view>
					<!-- 未上报（红色高亮） -->
					<view class="data-item unreported">
						<text class="data-value">{{ item.unreported }}</text>
						<text class="data-label">未上报</text>
					</view>
					<!-- 已上报 -->
					<view class="data-item">
						<text class="data-value">{{ item.reported }}</text>
						<text class="data-label">已上报</text>
					</view>
					<!-- 已完成 -->
					<view class="data-item">
						<text class="data-value">{{ item.completed }}</text>
						<text class="data-label">已完成</text>
					</view>
					<!-- 箭头图标 -->
					<view class="arrow-icon">
						<uni-icons type="right" size="16"></uni-icons>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';
	// 从 uni-app 中导入页面生命周期钩子
	import { onLoad } from '@dcloudio/uni-app';
	import { getTotalLauncher } from '@/api/employer.js';
	
	const groupInfo = ref({});
	
	// 导入后即可正常使用 onLoad
	onLoad((options) => {
	  // 解码 + 解析JSON
	  groupInfo.value = JSON.parse(decodeURIComponent(options.groupInfo));
	   uni.setNavigationBarTitle({
	      title: groupInfo.value.name
	    });
	});
	// 模拟数据（与截图一致）
	const groupList = ref([]);

	// 计算总计数量（列表长度）
	const totalCount = computed(() => groupList.value.length);



	//暂时获取所有发包方统计数
	//暂时获取所有发包方的total
	async function getTotal() {
		try {
			// 传入参数
			const res = await getTotalLauncher({
				fbfbm:'',
				fbfmc:'',
				pageNum: '1',
				pageSize:'10'
			});
			console.log(res)
			groupList.value = res.data.records;
		} catch (err) {
			console.error('获取失败：', err);
		}
	}
	// 状态对应的样式类
	const getStatusClass = computed(() => (status) => {
		switch (status) {
			case '摸底中':
				return 'status-blue';
			case '未开始':
				return 'status-gray';
			default:
				return 'status-blue';
		}
	});
	// 图标点击处理
	const pageClick = (value) => {
		uni.navigateTo({
			url: `/pages/investigator/employerModule/twoRoundExtension?groupInfo=${encodeURIComponent(JSON.stringify(value))}`
		})
	}
	
	getTotal()
</script>

<style scoped lang="scss">
	.page-container {
		background-color: #f5f5f5;
		min-height: 100vh;

		// 导航栏
		.nav-bar {
			height: 88rpx;
			line-height: 88rpx;
			background-color: #fff;
			text-align: center;
			border-bottom: 1rpx solid #eee;
			padding: 0 24rpx;
			font-size: 32rpx;
			font-weight: 500;
		}

		// 总计行
		.total-row {
			background-color: #fff;
			padding: 16rpx 24rpx;
			font-size: 28rpx;
			color: #666;
			border-bottom: 1rpx solid #f5f5f5;
		}

		// 列表容器
		.group-list {
			padding: 20rpx 24rpx 0;
		}

		// 列表项
		.group-item {
			background-color: #fff;
			border-radius: 16rpx;
			padding: 24rpx;
			margin-bottom: 20rpx;

			// 小组名称+状态
			.group-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 24rpx;

				.group-name {
					font-size: 30rpx;
					font-weight: 500;
					color: #333;
					line-height: 40rpx;
				}

				// 状态标签基础样式
				.status-tag {
					font-size: 24rpx;
					padding: 4rpx 16rpx;
					border-radius: 12rpx;
					font-weight: 400;
				}

				// 摸底中（蓝色）
				.status-blue {
					color: #409eff;
					background-color: #ecf5ff;
				}

				// 未开始（灰色）
				.status-gray {
					color: #909399;
					background-color: #f5f5f5;
				}
			}

			// 数据行
			.data-row {
				display: flex;
				justify-content: space-between;
				align-items: center;

				// 数据项
				.data-item {
					text-align: center;
					flex: 1;

					.data-value {
						font-size: 32rpx;
						font-weight: 500;
						color: #333;
						display: block;
					}

					.data-label {
						font-size: 24rpx;
						color: #999;
						margin-top: 8rpx;
					}

					// 未上报（红色高亮）
					&.unreported {
						.data-value {
							color: #f56c6c;
						}

						.data-label {
							color: #f56c6c;
						}

						background-color: #fff2f2;
						border-radius: 8rpx;
						padding: 8rpx 0;
						margin: 0 4rpx;
					}
				}

				// 箭头图标
				.arrow-icon {
					color: #999;
					margin-left: 12rpx;
				}
			}
		}
	}
</style>