leromro-mini/pages_mine/components/setupUser/Add.vue

<template>
	<view>
		<up-form labelPosition="left" :model="modelForm" :rules="rulesForm" ref="formRef">
			<up-form-item label="姓名" prop="name" borderBottom>
				<up-input v-model="modelForm.name" border="none"></up-input>
			</up-form-item>
			<up-form-item label="性别" prop="sex" borderBottom @click="() => (sexFlag = true)">
				<up-input v-model="modelForm.sex" disabled disabledColor="#ffffff" placeholder="请选择性别"
					border="none"></up-input>
				<template #right>
					<up-icon name="arrow-right"></up-icon>
				</template>
			</up-form-item>
			<up-form-item label="关系" prop="label" borderBottom @click="() => labelFlag = true">
				<up-input v-model="modelForm.label" disabled disabledColor="#ffffff" placeholder="请选择关系"
					border="none"></up-input>
				<template #right>
					<up-icon name="arrow-right"></up-icon>
				</template>
			</up-form-item>
			<up-form-item label="年龄" prop="age" borderBottom>
				<up-input v-model="modelForm.age" border="none"></up-input>
			</up-form-item>
			<up-form-item label="手机号" prop="telephone" borderBottom
				:style="{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }">
				<up-input v-model="modelForm.telephone" border="none"></up-input>
			</up-form-item>

			<up-form-item label="是否有传染疾病" prop="isContagion" borderBottom>
				<up-radio-group v-model="modelForm.isContagion" placement="row" @change="groupChange">
					<up-radio :customStyle="{marginRight: '16px'}" v-for="(item, index) in isContagionOption" :key="index"
						:label="item.name" :name="item.name" @change="radioChange">
					</up-radio>
				</up-radio-group>
			</up-form-item>
			<up-form-item label="地区" prop="area" borderBottom @click="()=> addressShow = true">
				<up-icon name="arrow-right"></up-icon>
				<pickerAddress @change="addressChange" :selectValue="[ modelForm.area.provinceCode, modelForm.area.cityCode, modelForm.area.areaCode ]">
					<view class="inp" :class="modelForm.area.province&&modelForm.area.city&&modelForm.area.area?'':'address-inp'">
						{{modelForm.area.province ? modelForm.area.province:'省'}} / 
						{{modelForm.area.city ? modelForm.area.city:'市'}} / 
						{{modelForm.area.area ? modelForm.area.area:'区'}}
					</view>
				</pickerAddress>
			</up-form-item>
			<up-form-item label="地址" prop="address" borderBottom>
				<up-input v-model="modelForm.address" border="none"></up-input>
			</up-form-item>
		</up-form>
		<up-action-sheet :show="sexFlag" :actions="sexOptions" @select="sexSelect"
			@close="sexFlag = false"></up-action-sheet>
		<up-action-sheet :show="labelFlag" :actions="relaTionsHip" @select="sexSelectsHip"
			@close="labelFlag = false"></up-action-sheet>
	</view>
	
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import pickerAddress from '@/components/pickerAddress/pickerAddress.vue' // 地区选择器组件
	
	const formRef = ref(null)
	const modelForm = ref({
		name: '',
		sex: '',
		label: '',
		age: '',
		telephone: '',
		isContagion: '',
		area: { // xxxxCode 储存所在数据下标，用来映射回显数据
			province: '', // 省
			provinceCode: 0,
			city: '', // 市
			cityCode: 0,
			area: '', // 区
			areaCode: 0
		},
		address: ''
	})
	
	const rulesForm = ref({
		name: {
			type: 'string',
			required: true,
			message: '请填写姓名',
			trigger: ['blur', 'change'],
		},
		sex: {
			type: 'string',
			required: true,
			message: '请选择性别',
			trigger: ['change']
		},
		label: {
			type: 'string',
			required: true,
			message: '请选择关系',
			trigger: ['change'],
		},
		userInfo: {
			type: 'string',
			required: true,
			message: '请填写年龄',
			trigger: ['blur', 'change'],
		},
		telephone: {
				type: 'string',
				required: true,
				message: '请填写手机号',
				trigger: ['blur', 'change'],
			},
	})
	
	let sexFlag = ref(false)
	let labelFlag = ref(false)
	let addressShow = ref(false)
	
	const sexOptions = ref([
		{
			name: '男'
		}, {
			name: '女'
		},
	]);
	const isContagionOption = ref([
		{
			name: '是',
			key: 1,
			disabled: false,
		},
		{
			name: '否',
			key: 0,
			disabled: false,
		}
	])
	const relaTionsHip = ref([
		{
			name: '父母'
		}, {
			name: '子女'
		},
		{
			name: '兄弟'
		},
		{
			name: '朋友'
		},
		{
			name: '同学'
		},
		{
			name: '同事'
		},
		{
			name: '配偶'
		}
	]);
	
	
	function groupChange (n) {
		console.log('groupChange', n);
		
	}
	
	function radioChange (n) {
		console.log('radioChange', n);
	}
	
	function sexSelect(e) {
		modelForm.value.sex = e.name;
		sexFlag.value = false;
	}
	
	function sexSelectsHip(e) {
		modelForm.value.label = e.name;
		labelFlag.value = false;
	}
	
	function addressChange(data) {
		
		console.log(data, '>>>>data');
		
		let { data:date, index } = data
		modelForm.value.area.province = date[0]
		modelForm.value.area.provinceCode = index[0]
		
		modelForm.value.area.city = date[1]
		modelForm.value.area.cityCode = index[1]
		
		modelForm.value.area.area = date[2]
		modelForm.value.area.areaCode = index[2]
		
	}
	
	// 预留校验函数
	function handleVerify() {
		// formRef.value
	}
	
	defineExpose({
		modelForm: modelForm.value,
		handleVerify: handleVerify()
	})
	
</script>

<style>
</style>