uniProject/pages/admin/Jiazheng/gerenZiliao.vue

<template>
	<view class="jz-content-box">
		<view class="upload-img-box">
			<jiazhengUpload @getFileUrl="getFileUrl" changjingType="shenfenzheng"></jiazhengUpload>
		</view>
		<view class="form-label-input">
			<view class="phone-form-label"><text class="form-label-require">*</text>手机号</view>
			<uni-easyinput type="number" v-model="formData.userName" placeholder="请输入手机号" maxlength="11" />
		</view>

		<view class="form-label-input">
			<view class="phone-form-label"><text class="form-label-require">*</text>姓名</view>
			<uni-easyinput v-model="formData.realName" placeholder="请输入姓名" />
		</view>

		<view class="form-label-input">
			<view class="phone-form-label"><text class="form-label-require">*</text>身份证号</view>
			<uni-easyinput v-model="formData.idCard" placeholder="请输入身份证号" maxlength="18" />
		</view>

		<view class="form-label-input">
			<view class="phone-form-label"><text class="form-label-require">*</text>生日</view>
			<uni-datetime-picker type="line" v-model="formData.birthday">
				<view class="form-radio-select">
					<view v-if="!formData.birthday">请选择出生日期</view>
					<view v-else>{{formData.birthday}}</view>
					<icon></icon>
				</view>
			</uni-datetime-picker>
		</view>

		<view class="form-label-input">
			<view class="phone-form-label"><text class="form-label-require">*</text>籍贯</view>
			<uni-data-picker v-model="formData.hometown" placeholder="请选择籍贯" :localdata="hometownData">
				{{formData.hometown}}
			</uni-data-picker>
		</view>
		<view class="form-label-input">
			<view class="phone-form-label"><text class="form-label-require">*</text>身份证地址</view>
			<uni-easyinput v-model="formData.hujiDizhi" placeholder="请输入身份证地址" />
		</view>
		<view class="form-label-input">
			<view class="phone-form-label"><text class="form-label-require">*</text>民族</view>
			<picker :range="minzuList" mode='selector' :value="formData.minzuIndex" range-key="name"
				@change="minzuChange" @cancel="minzuCancel">
				<view class="form-radio-select">
					<view>{{ formData.minzu.name || '请选择民族' }}</view>
					<icon></icon>
				</view>
			</picker>
		</view>
		<view class="form-label-radio">
			<view class="phone-form-label"><text class="form-label-require">*</text>性别</view>
			<view class="form-radio-group">
				<view class="form-radio-item" :class="{genderActive: formData.gender===1}" @click="genderSelect(1)">
					男</view>
				<view class="form-radio-item" :class="{genderActive: formData.gender===2}" @click="genderSelect(2)">
					女</view>
			</view>
		</view>
		<view class="form-label-radio form-top-margin flex-start-row">
			<view class="phone-form-label"><text class="form-label-require"></text>学历</view>
			<dataChecked :list="xueliList" mode="single" :showAdd="false" @change="selectChangeXueliList" />
		</view>
		<view class="form-label-radio flex-start-row">
			<view class="phone-form-label"><text class="form-label-require"></text>婚姻 </view>
			<dataChecked :list="hunyinList" mode="single" :showAdd="false" @change="selectChangeHunyinList" />
		</view>

		<view class="form-label-input form-top-margin flex-start-row">
			<view class="phone-form-label"><text class="form-label-require">*</text>通讯地址</view>
			<textarea v-model="formData.juzhuDizhi" placeholder="请输入通讯地址" class="form-textarea-box" />
		</view>

		<view class="form-label-select">
			<view class="phone-form-label"><text class="form-label-require"></text>星座</view>
			<picker :range="xingzuoList" mode='selector' :value="formData.xingzuoIndex" range-key="name"
				@change="xingzuoChange" @cancel="xingzuoCancel">
				<view class="form-radio-select">
					<view>{{ formData.xingzuo.name || '请选择星座' }}</view>
					<icon></icon>
				</view>
			</picker>
		</view>
		<view class="form-label-select">
			<view class="phone-form-label"><text class="form-label-require"></text>属相</view>
			<picker :range="shuxiangList" mode='selector' :value="formData.shuxiangIndex" range-key="name"
				@change="shuxiangChange" @cancel="shuxiangCancel">
				<view class="form-radio-select">
					<view>{{ formData.shuxiang.name || '请选择属相' }}</view>
					<icon></icon>
				</view>
			</picker>
		</view>

		<view class="form-label-switch">
			<view class="phone-form-label"> <text class="form-label-require"></text>星座属相展示到简历 </view>
			<view>展示
				<switch @change="switchXingzuoChange"  :checked="formData.xingzuoFlag"  color="#3fd2a1" style="transform:scale(0.7)" />
			</view>
		</view>
		<view class="agree-section-box form-top-margin">
			<checkbox-group @change="handleAgree">
				<label class="checkbox">
					<checkbox :checked="formData.agree" color="#3fd2a1" style="transform:scale(0.65)" />
					<text>已征得本人同意，将其个人资料信息录入平台</text>
				</label>
			</checkbox-group>
			<button type="default" @click="goNext" class="phone-green-btn">下一步</button>
		</view>
	</view>
</template>

<script>
	import dataChecked from './common/dataChecked.vue';
	import jiazhengUpload from "./common/jiazhengUpload.vue"
	import {
		getJiazhengXueli,
		getJiazhengHunyin,
		getJiazhengMinzu,
		getJiazhengShuxiang,
		getJiazhengXingzuo
	} from "@/api/jiazheng.js";
	export default {
		components: {
			dataChecked,
			jiazhengUpload
		},
		data() {
			return {
				formData: {
					userName: '',
					realName: '',
					idCard: '',
					birthday: '',
					hometown: [],
					hujiDizhi: '',
					gender: '',
					juzhuDizhi: '',
					minzu: {},
					shuxiang: {},
					xingzuo: {},
					hunyin: {},
					xueli: {},
					agree: false,
					xingzuoIndex: 0,
					minzuIndex: 0,
					shuxiangIndex: 0,
					xingzuoFlag:false

				},
				xueliList: [],
				hunyinList: [],
				shuxiangList: [],
				xingzuoList: [],
				minzuList: [],


				hometownData: [{
						text: '辽宁省',
						value: '210000',
						children: [{
							text: '大连市',
							value: '210200',
							children: [{
									text: '西岗区',
									value: '210203'
								},
								// 其他区县...
							]
						}]
					}
					// 其他省份...
				],

			}
		},
		created() {
			this.getXueli()
			this.getHunyin()
			this.getMinzu()
			this.getXingzuo()
			this.getShuxiang()

		},
		methods: {
			 validate() {
			      return new Promise((resolve) => {
			        // 实际验证逻辑
			        const isValid = this.formData.realName 
			        if (!isValid) {
			          this.showError = true
			          resolve(false)
			        } else {
			          resolve(true)
			        }
			      })
			    },
			getXueli() {
				getJiazhengXueli({}).then(res => {
					this.xueliList = res.data
				//	console.log('xueliList', this.xueliList);
				}).catch(error => {
					console.error('获取技能类型失败:', error);
				});
			},
			getXingzuo() {
				getJiazhengXingzuo({}).then(res => {
					this.xingzuoList = res.data
		//			console.log('xingzuoList', this.xingzuoList);
				}).catch(error => {
					console.error('获取技能类型失败:', error);
				});
			},
			getShuxiang() {
				getJiazhengShuxiang({}).then(res => {
					this.shuxiangList = res.data
			//		console.log('shuxiangList', this.shuxiangList);
				}).catch(error => {
					console.error('获取技能类型失败:', error);
				});
			},
			getHunyin() {
				getJiazhengHunyin({}).then(res => {
					this.hunyinList = res.data
				//	console.log('hunyinList', this.hunyinList);
				}).catch(error => {
					console.error('获取技能类型失败:', error);
				});
			},
			getMinzu() {
				getJiazhengMinzu({}).then(res => {
					this.minzuList = res.data
			//		console.log('minzuList', this.minzuList);
				}).catch(error => {
					console.error('获取技能类型失败:', error);
				});
			},
			getFileUrl(data) {
				this.formData.icon = data
				console.log('data', data);
			},
			minzuChange(e) {
				const index = e.detail.value
				this.formData.minzu = this.minzuList[index]
				//console.log('this.formData.minzu', this.formData.minzu);

			},
			minzuCancel() {
				this.formData.minzuIndex = 0
			},
			xingzuoChange(e) {
				const index = e.detail.value
				this.formData.xingzuo = this.xingzuoList[index]
			//	console.log('this.formData.xingzuo', this.formData.xingzuo);

			},
			xingzuoCancel() {
				this.formData.xingzuoIndex = 0
			},
			shuxiangChange(e) {
				const index = e.detail.value
				this.formData.shuxiang = this.shuxiangList[index]
				//console.log('this.formData.shuxiang', this.formData.shuxiang);

			},
			shuxiangCancel() {
				this.formData.shuxiangIndex = 0
			},
			selectChangeXueliList(data) {
				console.log('data', data);
			},
			genderSelect(data) {
				this.formData.gender = data
			},
			selectChangeHunyinList(data) {
				this.formData.hunyin = data
			},
			switchXingzuoChange(e) {
				this.formData.xingzuoFlag  =  e.detail.value
			},
			goNext() {
				console.log('formData', this.formData);
				//this.$emit('goNext',0);
			},

			handleAgree(e) {
				this.formData.agree = e.detail.value.length > 0
			},
		}
	}
</script>