uniProject/pages/admin/Jiazheng/gerenZiliao.vue

<template>
	<view class="container">

		<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" type="date" :clear-icon="false" />
			</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" />
			</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>
				<view>
					学历
				</view>
				<dataChecked :list="xueliList" mode="single" :showAdd="false" @change="selectChangeXueliList" />
			</view>
			<view>
				<view>
					婚姻
				</view>
				<dataChecked :list="hunyinList" mode="single" :showAdd="false" @change="selectChangeHunyinList" />
			</view>



			<view class="form-label-input">
				<view class="phone-form-label"><text class="form-label-require">*</text>详细地址</view>
				<textarea v-model="formData.currentAddress" placeholder="请输入详细地址" class="textarea" />
			</view>

			<view>
				<picker :range="xingzuoRange" mode='selector' @change="xingzuoChange" @cancel="xingzuoCancel">
					<view>星座</view>
				</picker>

			</view>
			<view>
				<picker :range="shengxiaoRange" mode='selector' @change="shengxiaoChange" @cancel="shengxiaoCancel">
					<view>生肖</view>
				</picker>

			</view>

			<view class="zhaopianZiliao-shenfenzheng">
				<view>
					星座属相展示到简历
				</view>
				展示<switch @change="switchXingzuoChange" />
			</view>
			<view class="agree-section">
				<checkbox-group @change="handleAgree">
					<label class="checkbox">
						<checkbox :checked="formData.agree" color="#007AFF" />
						已征得本人同意，将其个人资料信息录入平台
					</label>
				</checkbox-group>
			</view>
			<view>
				下一步
			</view>
		</view>
	</view>
</template>

<script>
	import dataChecked from './common/dataChecked.vue';
	import {
		getJiazhengXueli,
		getJiazhengHunyin
	} from "@/api/jiazheng.js";
	export default {
		components: {
			dataChecked
		},
		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>

<style scoped>
	.container {
		padding: 20px;
	}

	.textarea {
		width: 100%;
		height: 80px;
		padding: 10px;
		border: 1px solid #e5e5e5;
		border-radius: 4px;
	}

	.agree-section {
		margin: 20px 0;
	}

	.submit-btn {
		margin-top: 30px;
	}
</style>