LandSurveyApplet/pages/farmer/index.vue

<template>
	<view class="p-[30rpx] bg-[#f5f5f5]">
		<!-- 页面标题 -->
		<view class="text-[36rpx] font-bold text-[#333] text-center mb-[20rpx]">
			农户信息
		</view>

		<!-- 提示信息 -->
		<view class="text-[28rpx] text-[#666] text-center mb-[30rpx]">
			通过上传身份证可识别姓名和身份证号码，错误请自行修改
		</view>

		<!-- 身份证上传区域 -->
		<view class="mb-[30rpx]">
			<view
				class="w-full h-[300rpx] bg-[#f0f7ff] rounded-[12rpx] flex flex-col items-center justify-center relative overflow-hidden">
				<image src="/static/avatar.png" class="w-[120rpx] h-[120rpx] rounded-full mb-[20rpx]"
					mode="aspectFill" />
				<view class="w-full p-[20rpx] text-center">
					<view class="text-[24rpx] text-[#666] mb-[6rpx]">姓名：<text
							class="text-[#333]">{{ userInfo.name || '未填写' }}</text></view>
					<view class="text-[24rpx] text-[#666]">公民身份证号码：<text
							class="text-[#333]">{{ userInfo.idCard || '未填写' }}</text></view>
				</view>
			</view>

			<button
				class="w-full h-[80rpx] bg-[#e6f7ff] text-[#007aff] text-[28rpx] rounded-[12rpx] mt-[20rpx] leading-[80rpx] text-center"
				@click="uploadIdCard">
				上传身份证人像面
			</button>
		</view>

		<!-- 表单区域 -->
		<view class="mb-[30rpx]">
			<!-- 所在地区 -->
			<view class="mb-[20rpx] bg-white rounded-[12rpx] p-[20rpx]">
				<view class="text-[28rpx] text-[#333] font-bold mb-[10rpx]">所在地区：</view>

				<picker @change="onRegionChange" :value="selectedRegionIndex" :range="regionList" mode="selector"
					class="h-[80rpx] border-solid border-1 border-black rounded-[12rpx] px-[20rpx] flex items-center justify-between text-[28rpx] text-[#333]">
					<view :class="selectedRegion ? 'text-[#333]' : 'text-[#999]'">
						{{ selectedRegion || '请选择您的所在地区' }}
					</view>
				</picker>
			</view>

			<!-- 姓名 -->
			<view class="mb-[20rpx] bg-white rounded-[12rpx] p-[20rpx]">
				<view class="text-[28rpx] text-[#333] font-bold mb-[10rpx]">姓名：</view>
				<input v-model="userInfo.name" type="text" placeholder="请填写确权承包方姓名"
					class="h-[80rpx] border-solid border-1 border-black rounded-[12rpx] px-[20rpx] text-[28rpx] text-[#333]" />
			</view>

			<!-- 身份证号码 -->
			<view class="mb-[20rpx] bg-white rounded-[12rpx] p-[20rpx]">
				<view class="text-[28rpx] text-[#333] font-bold mb-[10rpx]">身份证号码：</view>
				<input v-model="userInfo.idCard" type="text" placeholder="请填写确权承包方身份证号码"
					class="h-[80rpx] border-solid border-1 border-black rounded-[12rpx] px-[20rpx] text-[28rpx] text-[#333]" />
			</view>
		</view>

		<!-- 确认按钮 -->
		<view class="mt-[20rpx]">
			<button
				class="w-full h-[80rpx] bg-[#007aff] text-white text-[28rpx] rounded-[12rpx] leading-[80rpx] text-center"
				@click="confirmInfo">
				确认
			</button>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive } from 'vue'
	import { getXCXCbfData, getFarmerDetailData } from '@/api/farmerApi.js';
	// 用户信息
	// const userInfo = reactive({
	// 	name: '易茂松',
	// 	gender: '',
	// 	birth: '',
	// 	idCard: '432427196706261714'
	// })
	// 用户信息
	const userInfo = reactive({
		name: '田传平',
		gender: '',
		birth: '',
		idCard: '432427197312211719'
	})

	// 地区列表
	const regionList = ref([
		'湖南省常德市石门县'
	])

	// 当前选中的地区索引
	const selectedRegionIndex = ref(0)
	// 当前选中的地区名称
	const selectedRegion = ref(regionList.value[0])

	// 指示器样式
	const indicatorStyle = ref('height: 80rpx; line-height: 80rpx;')
	
	// const uploadIdCard = () => {
	//   // #ifdef MP-WEIXIN
	//   uni.chooseMedia({
	//     count: 1,
	//     mediaType: ['image'],
	//     sourceType: ['camera', 'album'], // 支持拍照和相册
	//     success: (res) => {
	//       const filePath = res.tempFiles[0].tempFilePath;
	//       // 引入微信OCR插件
	//       const ocr = requirePlugin('ocr-plugin');
	//       ocr.ocrCommon({
	//         imgUrl: filePath,
	//         ocrType: 'idcard', // 识别身份证
	//         success: (result) => {
	//           console.log('插件识别结果：', result);
	//           // 回填数据
	//           if (result.name) userInfo.name = result.name;
	//           if (result.id) userInfo.idCard = result.id;
	//           uni.showToast({ title: '识别成功', icon: 'success' });
	//         },
	//         fail: (err) => {
	//           console.error('插件识别失败：', err);
	//           uni.showToast({ 
	//             title: '识别失败，请调整光线重试', 
	//             icon: 'none' 
	//           });
	//         }
	//       });
	//     },
	//     fail: (err) => {
	//       uni.showToast({ title: '选择图片失败', icon: 'none' });
	//     }
	//   });
	//   // #endif
	  
	//   // #ifndef MP-WEIXIN
	//   // 非微信端（如App/H5）可以使用你原本的Tesseract逻辑
	//   uni.showToast({ title: '当前平台暂不支持', icon: 'none' });
	//   // #endif
	// };

	// 地区选择变化
	const onRegionChange = (e : any) => {
		selectedRegionIndex.value = e.detail.value
		selectedRegion.value = regionList.value[e.detail.value]
	}

	/**
	 * 页面跳转封装（统一处理跳转逻辑）
	 * @param pagePath 目标页面路径
	 */
	const navigateToPage = (pagePath : string) => {
		uni.hideLoading() // 确保关闭加载态
		uni.navigateTo({
			url: pagePath,
			fail: (err) => {
				console.error('页面跳转失败：', err)
				uni.showToast({
					title: '页面跳转失败',
					icon: 'none'
				})
			}
		})
	}

	/**
	 * 后续接口调用并处理页面跳转
	 * @param farmerData 第一步查询到的农户数据
	 */
	const callNextApi = async (farmerData : any) => {
		try {
			// 调用详情接口
			// console.log('调用后续接口，参数：', farmerData[0].cbfbm)
			const res = await getFarmerDetailData({ cbfbm: farmerData[0].cbfbm })

			// 修复代码（直接替换）
			const allEmpty = (function (obj) {
				// 安全遍历对象所有值
				let values = [];
				for (let key in obj) {
					if (obj.hasOwnProperty(key)) {
						values.push(obj[key]);
					}
				}
				// 判断所有数组是否为空
				return values.every(item => Array.isArray(item) && item.length === 0);
			})(res.data);

			console.log('农户详情接口返回：', allEmpty)
			if (allEmpty) {
				uni.navigateTo({
					url: `/pages/farmer/reportingByFarmers?groupInfo=${encodeURIComponent(JSON.stringify(farmerData[0]))}`
				})
			} else {
				uni.navigateTo({
					url: `/pages/investigator/Households/progress?groupInfo=${encodeURIComponent(JSON.stringify(farmerData[0]))}&index=${encodeURIComponent(JSON.stringify(res.data))}`
				})
			}
		} catch (err) {
			console.error('后续接口调用失败：', err)
			uni.hideLoading() // 异常时关闭加载态
			uni.showToast({
				title: '处理失败，请重试',
				icon: 'none'
			})
		}
	}

	/**
	 * 查询农户信息并处理结果
	 * @param name 姓名
	 * @param idCard 身份证号
	 */
	async function getTotal(name : string, idCard : string) {
		// 加载中提示
		uni.showLoading({
			title: '查询中...'
		})

		try {
			// 调用查询接口
			const res = await getXCXCbfData({
				cbfmc: name,
				cbfzjhm: idCard,
			});

			// console.log('农户信息查询结果：', res.data)

			// 1. 判断返回数据是否为空数组
			if (Array.isArray(res.data) && res.data.length === 0) {
				uni.hideLoading() // 关闭加载态
				uni.showToast({
					title: '库中不存在此人员信息',
					icon: 'none',
					duration: 2000
				})
				return // 终止后续逻辑
			}

			// 2. 数据非空时调用后续接口
			await callNextApi(res.data)

		} catch (err) {
			console.error('农户信息查询失败：', err)
			uni.hideLoading() // 异常时关闭加载态
			uni.showToast({
				title: '查询失败，请检查网络',
				icon: 'none'
			})
		}
	}

	// 确认信息提交
	const confirmInfo = () => {
		// 姓名校验
		if (!userInfo.name) {
			uni.showToast({
				title: '请输入姓名',
				icon: 'none'
			})
			return
		}

		// 身份证校验
		if (!userInfo.idCard) {
			uni.showToast({
				title: '请输入身份证号码',
				icon: 'none'
			})
			return
		}

		// 身份证格式简单校验（可选）
		const idCardReg = /^\d{17}[\dXx]$/
		if (!idCardReg.test(userInfo.idCard)) {
			uni.showToast({
				title: '请输入有效的18位身份证号码',
				icon: 'none'
			})
			return
		}

		// 调用查询方法
		getTotal(userInfo.name, userInfo.idCard)
	}
</script>