uniProject/pages/admin/Jiazheng/gerenZiliao.vue

<template>
	<view class="jz-content-box">
			<view class="upload-img-box">
				<jiazhengUpload 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.phone" 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.name" 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 v-model="formData.birthday">
					<view class="form-radio-select">
						<view>请选择</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.idAddress" placeholder="请输入身份证地址" />
			</view>
			<view class="form-label-input">
				<view class="phone-form-label"><text class="form-label-require">*</text>民族</view>
				<uni-data-select v-model="formData.ethnic" :localdata="ethnicData" placeholder="请选择民族" />
			</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.currentAddress" 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="xingzuoRange" mode='selector' @change="xingzuoChange" @cancel="xingzuoCancel">
					<view class="form-radio-select">
						<view>请选择星座</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="shengxiaoRange" mode='selector' @change="shengxiaoChange" @cancel="shengxiaoCancel">
					<view class="form-radio-select">
						<view>请选择生肖</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" 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" class="phone-green-btn">下一步</button>
			</view>
	</view>
</template>

<script>
	import dataChecked from './common/dataChecked.vue';
		import jiazhengUpload from "./common/jiazhengUpload.vue"
	import {
		getJiazhengXueli,
		getJiazhengHunyin
	} from "@/api/jiazheng.js";
	export default {
		components: {
			dataChecked,
			jiazhengUpload
		},
		data() {
			return {
				formData: {
					phone: '',
					name: '',
					idCard: '',
					birthday: '',
					hometown: [],
					ethnic: '',
					idAddress: '',
					gender: '',
					currentAddress: '',
					agree: false
				},
				xueliList: [],
				hunyinList: [],
				xingzuoRange: [],
				shengxiaoRange: [],

				hometownData: [{
						text: '辽宁省',
						value: '210000',
						children: [{
							text: '大连市',
							value: '210200',
							children: [{
									text: '西岗区',
									value: '210203'
								},
								// 其他区县...
							]
						}]
					}
					// 其他省份...
				],
				ethnicData: [{
						value: '汉族',
						text: '汉族'
					},
					{
						value: '回族',
						text: '回族'
					},
					// 其他民族...
				]
			}
		},
		created() {
			this.getXueli()
			this.getHunyin()

		},
		methods: {
			getXueli() {
				getJiazhengXueli({}).then(res => {
					this.xueliList = res.data
					console.log('xueliList', this.xueliList);
				}).catch(error => {
					console.error('获取技能类型失败:', error);
				});
			},
			getHunyin() {
				getJiazhengHunyin({}).then(res => {
					this.hunyinList = res.data
					console.log('hunyinList', this.hunyinList);
				}).catch(error => {
					console.error('获取技能类型失败:', error);
				});
			},
			selectChangeXueliList() {

			},
			selectChangeHunyinList() {

			},
				switchXingzuoChange() {

			},

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