|
|
@@ -0,0 +1,186 @@
|
|
|
+<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] mb-[6rpx]">性别：<text class="text-[#333]">{{ userInfo.gender || '未填写' }}</text></view>
|
|
|
+ <view class="text-[24rpx] text-[#666] mb-[6rpx]">出生：<text class="text-[#333]">{{ userInfo.birth || '未填写' }}</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'
|
|
|
+
|
|
|
+// 用户信息
|
|
|
+const userInfo = reactive({
|
|
|
+ name: '',
|
|
|
+ gender: '',
|
|
|
+ birth: '',
|
|
|
+ idCard: ''
|
|
|
+})
|
|
|
+
|
|
|
+// 地区列表
|
|
|
+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) => {
|
|
|
+ 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)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+// 地区选择变化
|
|
|
+const onRegionChange = (e) => {
|
|
|
+ selectedRegionIndex.value = e.detail.value
|
|
|
+ selectedRegion.value = regionList.value[e.detail.value]
|
|
|
+}
|
|
|
+
|
|
|
+// 确认信息
|
|
|
+const confirmInfo = () => {
|
|
|
+ if (!userInfo.name) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '请输入姓名',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!userInfo.idCard) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '请输入身份证号码',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ // 这里可以调用接口保存用户信息
|
|
|
+ uni.showToast({
|
|
|
+ title: '信息提交成功',
|
|
|
+ icon: 'success'
|
|
|
+ })
|
|
|
+}
|
|
|
+</script>
|
