LandSurveyApplet/pages/login/officialLogin.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 { employerLogin } from '@/api/cgbList.js';

	// 用户信息
	const userInfo = reactive({
		name: '杨万全',
		gender: '',
		birth: '',
		idCard: '432427196210271716'
	})

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

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

	// 指示器样式
	const indicatorStyle = ref('height: 80rpx; line-height: 80rpx;')

	// 上传身份证
	const uploadIdCard = () => {
		uni.chooseImage({
			count: 1,
			sizeType: ['compressed'],
			sourceType: ['album', 'camera'],
			success: (res) => {
				console.log('选择图片结果：', res)
				const tempFilePaths = res.tempFilePaths
				// 模拟身份证识别结果
				userInfo.name = '张三'
				userInfo.gender = '男'
				userInfo.birth = '1980年1月1日'
				userInfo.idCard = '430102198001011234'

				// 上传图片（示例）
				uni.uploadFile({
					url: 'https://example.com/upload', // 替换为实际上传地址
					filePath: tempFilePaths[0],
					name: 'file',
					formData: {
						'user': 'test'
					},
					success: (uploadRes) => {
						console.log('图片上传成功：', uploadRes.data)
					},
					fail: (err) => {
						console.error('图片上传失败：', err)
						uni.showToast({
							title: '图片上传失败',
							icon: 'none'
						})
					}
				})
			},
			fail: (err) => {
				console.error('选择图片失败：', err)
				uni.showToast({
					title: '选择图片失败',
					icon: 'none'
				})
			}
		})
	}

	// 地区选择变化
	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 name 姓名
	 * @param idCard 身份证号
	 */
	async function getTotal(name : string, idCard : string) {
		// 加载中提示
		uni.showLoading({
			title: '查询中...'
		})

		try {
			// 调用查询接口
			const res = await employerLogin({
				fbffzrxm: name,
				fzrzjhm: 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 // 终止后续逻辑
			}
			uni.hideLoading() // 关闭加载态

			uni.navigateTo({
				url: `/pages/official/index?groupInfo=${encodeURIComponent(JSON.stringify(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>