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" placeholder="请输入姓名"></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' }" labelWidth="60">
				<up-input v-model="modelForm.telephone" border="none" placeholder="请输入手机号"></up-input>
			</up-form-item>

			<up-form-item label="是否有传染疾病" prop="isContagion" borderBottom labelWidth="240">
				<up-radio-group v-model="modelForm.isContagion" placement="row">
					<up-radio :customStyle="{marginRight: '16px'}" v-for="(item, index) in isContagionOption"
						:key="index" :label="item.name" :name="item.key">
					</up-radio>
				</up-radio-group>
			</up-form-item>
			<up-form-item label="地区" prop="area" borderBottom @click="()=> addressShow = true">
				<pickerAddress @change="addressChange"
					:selectValue="[ modelForm.provinceCode, modelForm.cityCode, modelForm.districtCode ]">
					<view class="inp"
						:class="modelForm.provinceName&&modelForm.cityName&&modelForm.districtName?'':'address-inp'">
						{{modelForm.provinceName ? modelForm.provinceName:'省'}} /
						{{modelForm.cityName ? modelForm.cityName:'市'}} /
						{{modelForm.districtName ? modelForm.districtName:'区'}}
					</view>
				</pickerAddress>
				<template #right>
					<up-icon name="arrow-right"></up-icon>
				</template>
			</up-form-item>
			<up-form-item label="地址" prop="address" borderBottom>
				<up-input v-model="modelForm.address" border="none" placeholder="请输入地址"></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: '',

		provinceName: '', // 省
		provinceCode: 0,

		cityName: '', // 市
		cityCode: 0,

		districtName: '',
		districtCode: 0,

		address: ''
	})
	// 回显把provinceName,cityName,districtName字段拼接
	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 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');

		modelForm.value.provinceName = date[0]
		modelForm.value.provinceCode = index[0]

		modelForm.value.cityName = date[1]
		modelForm.value.cityCode = index[1]

		modelForm.value.districtName = date[2]
		modelForm.value.districtCode = index[2]

	}

	// 预留校验函数
	function handleVerify() {
		// formRef.value
	}
	defineExpose({
		modelForm: modelForm.value,
		handleVerify: handleVerify()
	})
</script>

<style>
</style>