leromro-mini/pages_home/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 labelWidth="70">
        <up-input v-model="modelForm.telephone" border="none" placeholder="请输入手机号"></up-input>
      </up-form-item>
      <up-form-item label="地区" prop="area" borderBottom @click="onCityWx" labelWidth="70">
        <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>
        <template #right>
          <up-icon name="map" size="22" @click="onCityWx"></up-icon>
        </template>
      </up-form-item>
      <up-form-item label="地址" prop="address" borderBottom labelWidth="70" @click="onCityWx">
        <up-input v-model="modelForm.address" border="none" placeholder="请输入地址"></up-input>
      </up-form-item>
      <up-form-item label="门牌号" prop="detailAddress" borderBottom labelWidth="70">
        <up-input v-model="modelForm.detailAddress" 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' // 地区选择器组件
	import pickerAddress from '@/pages_home/components/pickerAddress/pickerAddress.vue' // 地区选择器组件
	import {
		splitAddress
	} from '@/utils/adress'
	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 || ''));
      options.detailAddress = decodeURIComponent(decodeURIComponent(options.detailAddress || ''));
			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 || '',
				districtCode:options.districtCode,
				provinceCode:options.provinceCode
			};
		}
	});

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

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

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

		districtName: '',
		districtCode: '',
		districtInd: 0,

		address: ''
	})

const rulesForm = ref({
  name: [{
    type: 'string',
    required: true,
    message: '请填写姓名',
    trigger: ['blur', 'change'],
  },
  {
    // 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
    validator: (rule, value, callback) => {
      // 调用uview-plus自带的js验证规则，详见：https://uview-plus.jiangruyi.com/js/test.html
      return uni.$u.test.chinese(value)
    },
    message: '姓名必须为中文',
    // 触发器可以同时用blur和change，二者之间用英文逗号隔开
    trigger: ['change', 'blur'],
  },
  ],
  // sex: {
  //   type: 'number',
  //   required: true,
  //   message: '请选择性别',
  //   trigger: ['change', 'blur'],

  age: [{
    type: 'string',
    required: true,
    message: '请填写年龄',
    trigger: ['blur', 'change'],
  }
    ,
  {
    validator: (rule, value, callback) => {
      return uni.$u.test.digits(value)
    },
    message: '年龄必须为数字',
    // 触发器可以同时用blur和change，二者之间用英文逗号隔开
    trigger: ['change', 'blur'],
  },
  ],

  telephone: [{
    type: 'string',
    required: true,
    message: '请填写手机号',
    trigger: ['blur', 'change'],
  },
  {
    validator: (rule, value, callback) => {
      return uni.$u.test.mobile(value)
    },
    message: '请输入正确的11位手机号',
    trigger: ['change', 'blur'],
  }
  ],
  detailAddress: {
    type: 'string',
    required: true,
    message: '请填写门牌号',
    trigger: ['blur', 'change'],
  },
  address: {
    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);
		console.log('地区编码:', info.code);
		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;
	}

	function onCityWx(row) {
		console.log('地区选点', row);
		wx.chooseLocation({
			success: function(res) {
				const result = splitAddress(res.address);
				console.log(res, result);
				modelForm.value.provinceName = result.province
				modelForm.value.cityName = result.city
				modelForm.value.districtName = result.district
				modelForm.value.address = result.detail
				modelForm.value.longitude = res.longitude
				modelForm.value.latitude = res.latitude


			},
			fail: function(err) {
				console.log(err);
				uni.showToast({
					title: '获取地址失败',
					icon: 'error',
				});
			},
		})
	}

	// 提交编辑
	async function handleSubmit() {
		try {
	
			await formRef.value.validate();

		
			const submitData = {
				...modelForm.value,
				sex: modelForm.value.sex,
			};

		
			uni.showLoading({
				title: '提交中...',
				mask: true
			});

		
			const response = await useraDdress(submitData);

		
			uni.hideLoading();

		
			if (response.code === 200) {
				await new Promise((resolve) => {
					uni.showToast({
						title: '编辑成功',
						icon: 'success',
						duration: 1500, 
						mask: true,
						success: () => {
							setTimeout(() => resolve(), 1500);
						}
					});
				});
				uni.navigateBack({
					delta: 1
				})
			} 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>