LandSurveyApplet/pages/official/index.vue

<template>
	<view class="min-h-screen bg-gray-50">
		<!-- 顶部导航栏 -->
		<view class="flex items-center justify-between bg-white p-4 border-b">
			<text class="text-xl font-bold">常德市</text>
		</view>
		<!-- 主要内容区域 -->
		<view class="p-4">
			<!-- 第一行数据卡片 -->
			<view class="grid grid-cols-2 md-grid-cols-4 gap-4 mb-6">
				<view v-for="(item, index) in statCardList" :key="index" class="rounded-lg p-4 shadow-sm"
					:class="`bg-${item.bgColor}`" @click="handleIconClick(urbanDistrictData[item.dataKey],item)">
					<text class="text-gray-500 text-sm block mb-1">{{ item.name }}</text>
					<text class="text-xl font-bold">{{ item.value }}</text>
				</view>
			</view>
			<!-- 第二行数据卡片 -->
			<view class="grid grid-cols-3 gap-4 mb-6">
				<view class="rounded-lg p-4 shadow-sm bg-[#F8FAFF]" @click="householdsPage()">
					<text class="text-gray-500 text-sm block mb-1">总户数</text>
					<text class="text-sm font-bold">暂未统计</text>
				</view>
				<view class="rounded-lg p-4 shadow-sm bg-[#F7FFF9]" @click="householdsPage()">
					<text class="text-gray-500 text-sm block mb-1">已上报</text>
					<text class="font-bold text-sm">暂未统计</text>
				</view>
				<view class="rounded-lg p-4 shadow-sm bg-[#FFF7F7]">
					<text class="text-gray-500 text-sm block mb-1" @click="householdsPage()">未上报</text>
					<text class="text-sm font-bold text-red-500">暂未统计</text>
				</view>
			</view>
			<!-- 第三行数据卡片 -->
			<view class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
				<!-- 待审核 -->
				<view class="rounded-lg p-4 shadow-sm hover:shadow-md transition-all duration-300 bg-pink-50">
					<text class="text-gray-500 text-sm block mb-1">待审核</text>
					<text class="text-sm font-bold text-pink-500">暂未统计</text>
				</view>
				<!-- 未通过 -->
				<view class="rounded-lg p-4 shadow-sm hover:shadow-md transition-all duration-300 bg-orange-50">
					<text class="text-gray-500 text-sm block mb-1">未通过</text>
					<text class="text-sm font-bold text-orange-500">暂未统计</text>
				</view>
				<!-- 待公示 -->
				<!-- 	<view class="rounded-lg p-4 shadow-sm hover:shadow-md transition-all duration-300 bg-amber-50">
					<text class="text-gray-500 text-sm block mb-1">待公示</text>
					<text class="text-xl font-bold text-amber-500">188260</text>
				</view> -->
				<!-- 已公示 -->
				<!-- <view class="rounded-lg p-4 shadow-sm hover:shadow-md transition-all duration-300 bg-green-50">
					<text class="text-gray-500 text-sm block mb-1">已公示</text>
					<text class="text-xl font-bold text-green-500">0</text>
				</view> -->
			</view>
			<!-- 功能按钮区域 -->
			<!-- <view class="grid grid-cols-2 gap-4 mb-6">
				<view
					class="bg-white rounded-lg p-4 flex items-center justify-between shadow-sm hover:shadow-md transition-shadow"
					@click="goToTask()">
					<text class="font-medium text-blue-600 underline">现场调查任务</text>
					<uni-icons type="right" color="#3B82F6" size="18"></uni-icons>
				</view>
				<view
					class="bg-white rounded-lg p-4 flex items-center justify-between shadow-sm hover:shadow-md transition-shadow"
					@click="goArchive">
					<text class="font-medium text-blue-600 underline">档案资料</text>
					<uni-icons type="right" color="#3B82F6" size="18"></uni-icons>
				</view>
			</view> -->
			<!-- 乡镇数据列表 -->
			<view class="space-y-4">
				<view class="bg-white rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow"
					v-for="(item,index) in dataList" :key="index" @click="handleCardClick(item)">
					<text class="font-medium text-base mb-3 block">{{item.fbfmc}}</text>
					<view class="grid grid-cols-4 gap-2 text-sm">
						<view>
							<text class="text-gray-500 block">总户数</text>
							<text class="font-medium bg-gray-100 px-2 py-1 rounded inline-block">未统计</text>
						</view>
						<view>
							<text class="text-gray-500 block">未上报</text>
							<text class="font-medium text-red-500 bg-red-50 px-2 py-1 rounded inline-block">未统计</text>
						</view>
						<view>
							<text class="text-gray-500 block">已上报</text>
							<text class="font-medium bg-gray-100 px-2 py-1 rounded inline-block">未统计</text>
						</view>
						<view class="flex items-end justify-between">
							<view>
								<text class="text-gray-500 block">已完成</text>
								<text class="font-medium bg-gray-100 px-2 py-1 rounded inline-block">未统计</text>
							</view>
							<uni-icons type="right" color="#999" size="16"></uni-icons>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { employerLogin } from '@/api/cgbList.js';

	const pageType = ref(null)
	// 状态卡片配置（统一管理，便于维护）
	const statCardList = [
		{
			name: '总发包方',
			value: '暂未统计',
			dataKey: 'mainEmployer',
			type: 'mainEmployer',
			bgColor: 'fffaff' // 对应原 bg-[#FFFAFF]
		},
		{
			name: '未开始',
			value: '暂未统计',
			dataKey: 'notStarted',
			type: 'notStarted',
			bgColor: 'fff7f8' // 对应原 bg-[#FFF7F8]
		},
		{
			name: '摸底中',
			value: '暂未统计',
			dataKey: 'underInvestigation',
			type: 'underInvestigation',
			bgColor: 'fffef9' // 对应原 bg-[#FFFEF9]
		},
		{
			name: '公示中',
			value: '暂未统计',
			dataKey: 'underPublicity',
			type: 'underPublicity',
			bgColor: 'fffeb2' // 对应原 bg-[#FFFEB2]
		}
	];
	// 接口数据
	const dataList = ref([]);
	const handleCardClick = (item) => {
		uni.navigateTo({
			url: `/pages/official/index_totalSHlist?groupInfo=${encodeURIComponent(JSON.stringify(item))}&type=${pageType.value}`
		})
	}

	/**
	 * 查询农户信息并处理结果
	 */
	async function getTotal() {
		// 加载中提示
		uni.showLoading({
			title: '查询中...'
		})
		try {
			// 调用查询接口
			const res = await employerLogin({
				fbfbm: uni.getStorageSync('investigator_FBFBM'),
			});
			dataList.value = res.data
			// 1. 判断返回数据是否为空数组
			if (Array.isArray(res.data) && res.data.length === 0) {
				uni.hideLoading() // 关闭加载态
				uni.showToast({
					title: '暂无次发包方的信息',
					icon: 'none',
					duration: 2000
				})
				return // 终止后续逻辑
			}
			uni.hideLoading() // 关闭加载态
		} catch (err) {
			console.error('暂无次发包方的信息：', err)
			uni.hideLoading() // 异常时关闭加载态
			uni.showToast({
				title: '查询失败，请检查网络',
				icon: 'none'
			})
		}
	}

	// ==================== 入口 ====================
	onLoad(async (options) => {
		console.log(12,options.type)
		pageType.value = options.type;
		getTotal()
	});
</script>

<style>
	/* 统一定义背景色（避免行内样式，提升可维护性） */
	.bg-fffaff {
		background-color: #FFFAFF;
	}

	.bg-fff7f8 {
		background-color: #FFF7F8;
	}

	.bg-fffef9 {
		background-color: #FFFEF9;
	}

	.bg-fffeb2 {
		background-color: #FFFEB2;
	}
</style>