leromro-mini/pages_mine/pages/selectAddress/edit.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="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 class="Wrapper-Btn">
			<up-button @click="handleQux" type="error" :plain="true" :hairline="true" text="取消"
				:customStyle="hadlClickEdit"></up-button>
			<up-button type="error" @click="handleSubmit" text="编辑" :customStyle="hadlClickEdit" />
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed,
	} from 'vue';

	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		useraDdress,
	} from "@/api/userSettings.js"
	import pickerAddress from '@/components/pickerAddress/pickerAddress.vue' // 地区选择器组件

	const formRef = ref(null)


	// 获取页面传递的参数
	onLoad((options) => {
		if (options) {
			options.cityName = decodeURIComponent(decodeURIComponent(options.cityName || ''));
			options.districtName = decodeURIComponent(decodeURIComponent(options.districtName || ''));
			options.label = decodeURIComponent(decodeURIComponent(options.label || ''));
			options.provinceName = decodeURIComponent(decodeURIComponent(options.provinceName || ''));
			options.name = decodeURIComponent(decodeURIComponent(options.name || ''));
			options.address = decodeURIComponent(decodeURIComponent(options.address || ''));
			modelForm.value = {
				...modelForm.value,
				...options,
				sex: options.sex ? Number(options.sex) : '',
				age: options.age ? Number(options.age) : '',
				provinceName: options.provinceName || '',
				cityName: options.cityName || '',
				districtName: options.districtName || '',
			};
		}
	});

	const modelForm = ref({
		name: '',
		sex: '',
		label: '',
		age: '',
		telephone: '',

		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: 'number',
			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 sexOptions = ref([{
		name: '男',
		value: 0,
	}, {
		name: '女',
		value: 1,
	}, ]);

	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; // 确保是 0 或 1
		console.log('Selected sex:', e.value, 'Model sex:', modelForm.value.sex);
		sexFlag.value = false;
		// 手动触发验证
		formRef.value.validateField('sex');
	}

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

function addressChange(info) {
    console.log(info, '>>>>data');
    
    if (!info || !info.data) {
        console.error('Invalid address change info:', info);
        return;
    }
    
    if (!Array.isArray(info.data) || info.data.length < 3) {
        console.error('Invalid address data:', info.data);
        return;
    }
    
    const code = Array.isArray(info.code) ? info.code : ['', '', ''];
    
    let indexArray;
    if (Array.isArray(info.index)) {
        indexArray = info.index;
    } else if (info.index && typeof info.index[Symbol.iterator] === 'function') {
        indexArray = Array.from(info.index);
    } else {
        indexArray = [0, 0, 0];
    }
    
    modelForm.value.provinceName = info.data[0] || '';
    modelForm.value.provinceCode = code[0] || '';
    modelForm.value.provinceInd = indexArray[0] || 0;
    
    modelForm.value.cityName = info.data[1] || '';
    modelForm.value.cityCode = code[1] || '';
    modelForm.value.cityInd = indexArray[1] || 0;
    
    modelForm.value.districtName = info.data[2] || '';
    modelForm.value.districtCode = code[2] || '';
    modelForm.value.districtInd = indexArray[2] || 0;
}
	// 提交编辑
	async function handleSubmit() {
		try {
			// 1. 验证表单
			await formRef.value.validate();

			// 2. 准备提交数据
			const submitData = {
				...modelForm.value,
				sex: modelForm.value.sex,
			};

			// 3. 显示加载中提示（可选）
			uni.showLoading({
				title: '提交中...',
				mask: true
			});

			// 4. 调用接口
			const response = await useraDdress(submitData);

			// 5. 隐藏加载中
			uni.hideLoading();

			// 6. 处理响应
			if (response.code === 200) {
				await new Promise((resolve) => {
					uni.showToast({
						title: '编辑成功',
						icon: 'success',
						duration: 1500, // 默认1500ms
						mask: true,
						success: () => {
							// 等待Toast显示完成
							setTimeout(() => resolve(), 1500);
						}
					});
				});

				// 7. 跳转页面
				uni.navigateTo({
					url: '/pages_mine/pages/selectAddress/index'
				});
			} else {
				uni.showToast({
					title: response.msg || '编辑失败',
					icon: 'none'
				});
			}
		} catch (error) {
			uni.hideLoading();
			console.error('编辑失败', error);
			uni.showToast({
				title: '编辑失败: ' + (error.message || '未知错误'),
				icon: 'none'
			});
		}
	}
	const handleQux = () => {
		uni.navigateBack({
			delta: 1
		})
	}
	const hadlClickEdit = {
		width: '240rpx',
		marginTop: '30rpx'
	}
</script>

<style scoped>
	.Wrapper-Btn {
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>