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 labelWidth="70">
				<up-input v-model="modelForm.name" border="none" placeholder="请输入姓名"></up-input>
			</up-form-item>
			<up-form-item label="性别" prop="sex" borderBottom @click="() => (sexFlag = true)" labelWidth="70">
				<up-input v-model="displaySex" 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" labelWidth="70">
				<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 labelWidth="70">
				<up-input v-model="modelForm.age" border="none" placeholder="请输入年龄"></up-input>
			</up-form-item>
			<up-form-item label="手机号" prop="telephone" borderBottom
				:style="{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }" labelWidth="70">
				<up-input v-model="modelForm.telephone" border="none" placeholder="请输入手机号"></up-input>
			</up-form-item>
			<up-form-item label="是否有传染疾病" prop="isContagion" borderBottom labelWidth="150">
				<up-radio-group v-model="modelForm.isContagion" placement="row" @change="handleContagionChange">
					<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 v-show="showContagionContent" label="传染病内容" prop="haveContagion" borderBottom
				labelWidth="100">
				<up-input v-model="modelForm.haveContagion" border="none" placeholder="请输入传染病内容"></up-input>
			</up-form-item>
			<up-form-item label="地区" prop="area" borderBottom @click="()=> addressShow = true" labelWidth="70">
				<pickerAddress @change="addressChange"
					:selectValue="[ modelForm.provinceInd, modelForm.cityInd, modelForm.districtInd ]">
					<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 labelWidth="70">
				<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,
		computed
	} from 'vue';
	import pickerAddress from '@/components/pickerAddress/pickerAddress.vue' // 地区选择器组件
	const formRef = ref(null)
	const modelForm = ref({
		name: '',
		sex: '',
		label: '',
		age: '',
		telephone: '',
		isContagion: '',
		haveContagion: '',

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

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

		districtName: '',
		districtCode: '',
		districtInd: 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)
	let index = ref(0)
	// 新增一个响应式变量，控制传染病内容的显示
	const showContagionContent = ref(false);

	const sexOptions = ref([{
		name: '男',
		value: 0,
	}, {
		name: '女',
		value: 1,
	}, ]);

	const isContagionOption = ref([{
			name: '是',
			key: 1,
			disabled: false,
		},
		{
			name: '否',
			key: 0,
			disabled: false,
		}
	])
	const relaTionsHip = ref([{
			name: '父母'
		}, {
			name: '子女'
		},
		{
			name: '兄弟'
		},
		{
			name: '朋友'
		},
		{
			name: '同学'
		},
		{
			name: '同事'
		},
		{
			name: '配偶'
		}
	]);

	const displaySex = computed({
		get() {
			const option = sexOptions.value.find(item => item.value === modelForm.value.sex)
			return option ? option.name : ''
		},
		set(newValue) {
			const option = sexOptions.value.find(item => item.name === newValue)
			if (option) {
				modelForm.value.sex = option.value
			}
		}
	})
	// 性别选择处理
	function sexSelect(e) {
		modelForm.value.sex = e.value
		sexFlag.value = false
	}

	function sexSelectsHip(e) {
		modelForm.value.label = e.name;
		labelFlag.value = false;
	}

	function addressChange(info) {

		console.log(info, '>>>>data');

		const {
			data,
			code,
			index
		} = info

		modelForm.value.provinceName = data[0]
		modelForm.value.provinceCode = code[0]
		modelForm.value.provinceInd = index[0]

		modelForm.value.cityName = data[1]
		modelForm.value.cityCode = code[1]
		modelForm.value.cityInd = index[1]

		modelForm.value.districtName = data[2]
		modelForm.value.districtCode = code[2]
		modelForm.value.districtInd = index[2]

	}

	function handleContagionChange(value) {
		showContagionContent.value = value === 1; // 显示传染病内容输入框
		if (value === 0) {
			modelForm.value.haveContagion = ''; // 清空输入框
		}
	}
	// 预留校验函数
	function handleVerify() {
		// formRef.value
	}
	defineExpose({
		modelForm: modelForm.value,
		handleVerify: handleVerify()
	})
</script>

<style>
</style>