LandSurveyApplet/pages/investigator/employerModule/twoRoundExtension.vue

<template>
	<view class="container">
		<!-- 搜索栏 -->
		<view class="search-bar">
			<input class="search-input" type="text" placeholder="请输入承包方姓名/身份证号" />
			<button class="search-btn">搜索</button>
		</view>

		<!-- 数据卡片区域 - 增加数据存在性判断 -->
		<view class="card" v-if="groupInfo && groupInfo.fbfmc">
			<view class="card-title">{{ groupInfo.fbfmc }}</view>
			<view class="tag-group">
				<view class="tag orange" @click="toCollective()">集体地</view>
				<view class="tag gray">未开始</view>
			</view>
			<view class="stats-row">
				<view class="stat-item" @click="InformationDetails()">
					<view class="stat-num">0</view>
					<view class="stat-label">总户数</view>
				</view>
				<view class="stat-item" @click="InformationDetails()">
					<view class="stat-num">0</view>
					<view class="stat-label">已上报</view>
				</view>
				<view class="stat-item" @click="InformationDetails()">
					<view class="stat-num red">0</view>
					<view class="stat-label">未上报</view>
				</view>
			</view>
			<view class="stats-row">
				<view class="stat-item pink" @click="InformationDetails()">
					<view class="stat-num">0</view>
					<view class="stat-label">待审核</view>
				</view>
				<view class="stat-item red" @click="InformationDetails()">
					<view class="stat-num">0</view>
					<view class="stat-label">未通过</view>
				</view>
				<view class="stat-item orange" @click="InformationDetails()">
					<view class="stat-num">0</view>
					<view class="stat-label">待公示</view>
				</view>
				<view class="stat-item green" @click="InformationDetails()">
					<view class="stat-num">0</view>
					<view class="stat-label">已公示</view>
				</view>
			</view>
		</view>

		<!-- 现场调查任务 -->
		<!-- <view class="task-item" @click="goToTask()">
			<view class="task-text">现场调查任务</view>
			<view class="task-arrow">＞</view>
		</view> -->

		<!-- 空数据提示 - 优化显示逻辑 -->
		<view class="empty-area">
			<view class="empty-text">暂无承包方数据</view>
		</view>

		<!-- 新增按钮 -->
		<button class="add-btn" @click="handleAdd">新增</button>
	</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';

	// 初始化数据，避免undefined
	const groupInfo = ref({
		fbfmc: '' // 承包方名称默认值
	});

	// 封装参数解析逻辑，增加异常处理
	const parseOptions = (options) => {
		try {
			// 1. 校验参数是否存在
			if (!options || !options.groupInfo) {
				console.warn('未传入groupInfo参数');
				return {};
			}
			
			// 2. 解码并解析JSON，增加异常捕获
			const decodedData = decodeURIComponent(options.groupInfo);
			const parsedData = JSON.parse(decodedData);
			
			// 3. 校验解析后的数据结构
			if (!parsedData.fbfmc) {
				console.warn('groupInfo中缺少fbfmc字段', parsedData);
				return {};
			}
			
			return parsedData;
		} catch (error) {
			console.error('解析groupInfo失败:', error);
			return {};
		}
	};

	// 页面加载时解析参数
	onLoad((options) => {
		const data = parseOptions(options);
		groupInfo.value = { ...groupInfo.value, ...data };
		console.log('解析后的承包方数据:', groupInfo.value);
	});

	// 兼容不同平台的生命周期
	onMounted(() => {
		if (!groupInfo.value.fbfmc) {
			console.log('groupInfo数据未正确加载');
		}
	});

	// 处理导航栏操作（未使用的方法保留但注释说明）
	const handleMenu = () => {
		// 菜单逻辑暂未实现
	};
	const handleMinimize = () => {
		// 最小化逻辑暂未实现
	};
	const handleClose = () => {
		// 关闭逻辑暂未实现
	};

	// 信息详情跳转（增加提示友好性）
	const InformationDetails = () => {
		uni.showToast({
			title: '暂无相关数据',
			icon: 'none',
			duration: 1500
		});
	};

	// 跳转现场调查任务（增加页面存在性校验）
	const goToTask = () => {
		uni.navigateTo({
			url: '/pages/task/index',
			fail: (err) => {
				console.error('跳转现场调查任务失败:', err);
				uni.showToast({
					title: '页面不存在',
					icon: 'none'
				});
			}
		});
	};

	// 跳转集体地页面
	const toCollective = () => {
		uni.navigateTo({
			url: '/pages/map/collectively/index',
			fail: (err) => {
				console.error('跳转集体地页面失败:', err);
				uni.showToast({
					title: '页面不存在',
					icon: 'none'
				});
			}
		});
	};

	// 打开新增选项弹窗（优化用户体验）
	const handleAdd = () => {
		console.log(groupInfo.value)
		uni.showActionSheet({
			itemList: ['后台录入', '手动录入'],
			itemColor: '#007bff', // 统一主题色
			success: (res) => {
				const urlMap = [
					`/pages/EntryPage/backstageAdd?groupInfo=${encodeURIComponent(JSON.stringify(groupInfo))}`,
					'/pages/EntryPage/manualAdd'
				];
				uni.navigateTo({
					url: urlMap[res.tapIndex],
					fail: (err) => {
						console.error('跳转新增页面失败:', err);
						uni.showToast({
							title: '页面不存在',
							icon: 'none'
						});
					}
				});
			},
			fail: (err) => {
				console.log('取消选择', err);
			}
		});
	};
</script>

<style scoped>
	.container {
		padding: 16rpx;
		background-color: #f8f9fa;
		min-height: 100vh;
		box-sizing: border-box;
	}

	.search-bar {
		display: flex;
		align-items: center;
		background-color: #fff;
		border-radius: 8rpx;
		padding: 12rpx 16rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}

	.search-input {
		flex: 1;
		height: 60rpx;
		font-size: 28rpx;
		padding: 0 10rpx;
	}

	.search-btn {
		width: 120rpx;
		height: 60rpx;
		line-height: 60rpx;
		background-color: #007bff;
		color: #fff;
		border-radius: 8rpx;
		font-size: 28rpx;
		border: none;
	}

	.card {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
	}

	.card-title {
		font-size: 30rpx;
		font-weight: 600;
		margin-bottom: 16rpx;
		color: #333;
	}

	.tag-group {
		display: flex;
		gap: 12rpx;
		margin-bottom: 24rpx;
	}

	.tag {
		padding: 4rpx 12rpx;
		border-radius: 6rpx;
		font-size: 24rpx;
	}

	.tag.orange {
		background-color: #ff9933;
		color: #fff;
	}

	.tag.gray {
		background-color: #cccccc;
		color: #fff;
	}

	.stats-row {
		display: flex;
		justify-content: space-between;
		margin-bottom: 16rpx;
	}

	.stat-item {
		text-align: center;
		flex: 1;
		margin: 0 10rpx;
	}

	.stat-num {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 4rpx;
	}

	.stat-num.red {
		color: #ff3333;
	}

	.stat-label {
		font-size: 24rpx;
		color: #666;
	}

	.stat-item.pink {
		background-color: #ffcccc;
		border-radius: 8rpx;
		padding: 8rpx 0;
	}

	.stat-item.red {
		background-color: #ff9999;
		border-radius: 8rpx;
		padding: 8rpx 0;
	}

	.stat-item.orange {
		background-color: #ffcc99;
		border-radius: 8rpx;
		padding: 8rpx 0;
	}

	.stat-item.green {
		background-color: #ccffcc;
		border-radius: 8rpx;
		padding: 8rpx 0;
	}

	.task-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		border-radius: 8rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}

	.task-text {
		font-size: 28rpx;
		color: #007bff;
	}

	.task-arrow {
		font-size: 32rpx;
		color: #999;
	}

	.empty-area {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 100rpx;
	}

	.empty-icon {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 20rpx;
	}

	.empty-text {
		font-size: 28rpx;
		color: #999;
	}

	.add-btn {
		position: fixed;
		bottom: 40rpx;
		right: 40rpx;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background-color: #007bff;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		white-space: nowrap;
		border: none;
		box-shadow: 0 4rpx 12rpx rgba(0, 123, 255, 0.3);
	}
</style>