pet-front-order/pages/newOrder/address.vue

<template>
	<view class="container">
		<view class="address-info ">
			<u--form labelPosition="left" ref="uForm">
				<u-form-item required label="联系人" prop="addressInfo.name" labelWidth="120" borderBottom>
					<u--input v-model="addressInfo.name" placeholder="请输入联系人姓名" placeholderStyle="text-align:right;color:#AAA" border="none"  inputAlign="right"></u--input>
				</u-form-item>
				<u-form-item required label="手机号码" prop="addressInfo.phone" labelWidth="120" borderBottom>
					<u--input v-model="addressInfo.phone" placeholder="请输入手机号码" placeholderStyle="text-align:right;color:#AAA"  border="none"  inputAlign="right"></u--input>
				</u-form-item>
				<u-form-item label="应急联络" prop="addressInfo.emergencyPhone" labelWidth="120" borderBottom>
					<u--input v-model="addressInfo.emergencyPhone" placeholder="请输入应急联络号码" placeholderStyle="text-align:right;color:#AAA" border="none"  inputAlign="right"></u--input>
				</u-form-item>
				
				<!-- <u-form-item label="所在城市" prop="addressInfo.city" labelWidth="120" borderBottom>
					<picker mode="multiSelector" @columnchange="columnchange" @change="bindMultiPickerColumnChange" :value="multiIndex"
						:range="multiArray">
						<view style="display: flex;justify-content: space-between;">
							<u--input :value="addressInfo.city? (addressInfo.city +'  '+ addressInfo.district):''" 
								disabled disabledColor="#ffffff" placeholder="请选择所在城市"  
								placeholderStyle="text-align:right;color:#AAA" border="none"  inputAlign="right">
							</u--input>
							
							<u-icon slot="right" name="arrow-right" color="#AAA"></u-icon>
						</view>
					</picker>
				</u-form-item> -->
				
				<u-form-item label="所在地区" prop="addressInfo.city" labelWidth="120" borderBottom>
					<view style="display: flex;justify-content: space-between;" @click="selectAddress">
						<u--input :value="addressInfo.selectAddress" 
							disabled disabledColor="#ffffff" placeholder="请选择所在地区"  
							placeholderStyle="text-align:right;color:#AAA" border="none"  inputAlign="right">
						</u--input>
						<u-icon slot="right" name="arrow-right" color="#AAA"></u-icon>
					</view>
				</u-form-item>
				
				<u-form-item label="详细地址" prop="addressInfo.detailAddress" labelWidth="120" borderBottom>
					<u--input v-model="addressInfo.detailAddress" placeholder="如楼栋、门牌号" placeholderStyle="text-align:right;color:#AAA;" border="none"  inputAlign="right"></u--input>
				</u-form-item>
				<u-form-item label="设为默认地址" prop="addressInfo.isDefault" labelWidth="120">
					<view>
						<u-radio-group :value="addressInfo.isDefault?'默认':''" placement="column"  @change="groupChange">
							<u-radio name="默认" activeColor="#ffbf60" labelColor="#ffbf60" label="默认"></u-radio>
						</u-radio-group>
					</view>
				</u-form-item>
			</u--form>
		</view>
		<view class="address-save">
			<button class="address-save-btn" @click="save" :loading="loading">保存并使用</button>
		</view>
	</view>
	
</template>

<script>
	import {
		getCity
	} from '@/api/system/user.js'
	import {
		getAddressDetails,addAddress,updateAddress
	} from '@/api/system/address.js'
	export default{
		data(){
			return{
				loading:false,
				needRelocate: false, // 是否需要重新定位
				addressInfo:{
					name:"",
					phone:"",
					emergencyPhone:"",
					province:"",
					city:"",
					district:'',
					detailAddress:"",
					openId:"",
					isDefault:0,
					latitude:"",
					longitude:"",
					selectAddress:""
				},
				multiArray: [],
				cityList:[],
				multiIndex: [0, 0],
				addressId:'',
			}
		},
		onLoad(option) {
			this.optionType=option.optionType;
			this.needRelocate = option.needRelocate === 'true'; // 是否需要重新定位
			if(this.optionType=='edit'){
				this.addressId=option.addressId;
				this.getAddressDetails(option.addressId);
			}
		},
		mounted() {
			this.getCityList()
		},
		methods:{
			getAddressDetails(id){
				getAddressDetails(id).then(res=>{
					if(res&& res.id){
						const { 
							name,
							phone,
							emergencyPhone,
							province,
							city,
							district,
							detailAddress,
							openId,
							isDefault,
							latitude,
							longitude,
						} = res;
						
						// 检查是否需要重新定位或缺少经纬度信息
						const needClearLocation = this.needRelocate || !latitude || !longitude;
						
						this.addressInfo = {
								name,
								phone,
								emergencyPhone,
								province: needClearLocation ? '' : province,
								city: needClearLocation ? '' : city,
								district: needClearLocation ? '' : district,
								detailAddress,
								openId,
								isDefault,
								latitude: needClearLocation ? '' : latitude,
								longitude: needClearLocation ? '' : longitude,
								selectAddress: needClearLocation ? '' : `${province}${city}${district}`,
							};
							
							// 如果需要重新定位，提示用户
							if(needClearLocation) {
								setTimeout(() => {
									this.$modal.showToast('请重新选择所在地区进行定位');
								}, 500);
							}
					}else{
						this.$modal.showToast('获取地址详情失败')
					}
				})
			},
			
			// 选择地区
			selectAddress(){
				uni.chooseLocation({
					success: res => {
						
						console.log(res);
						
						this.addressInfo.latitude = res.latitude
						this.addressInfo.longitude = res.longitude
						
						// 获取完整地址
						let address = ''
						if (!res.address && res.name) { 
							address = res.name
						} else if (res.address || res.name) {
							address = (res.address || '') + (res.name || '')
						}
						
						if(!address){
							return
						}
						
						// 解析地址信息
						const addressInfo = this.parseAddress(address);
						
						this.addressInfo.province = addressInfo.province
						this.addressInfo.city = addressInfo.city
						this.addressInfo.district = addressInfo.district
						this.addressInfo.detailAddress = addressInfo.detailAddress
						this.addressInfo.selectAddress = addressInfo.selectAddress
					},
					fail(e) {
						console.log("获取位置信息失败!", e)
					}
				})
			},
			save(){
				let params = this.addressInfo
				if(params.phone){
					if(!(/^1[3456789]\d{9}$/.test(params.phone))){ 
						this.$modal.showToast('手机号码有误')
						return false; 
					}
				} else {
					this.$modal.showToast('请输入手机号')
					return false;
				}
				if(params.emergencyPhone){
					if(!(/^1[3456789]\d{9}$/.test(params.emergencyPhone))){ 
						this.$modal.showToast('手机号码有误')
						return false; 
					}
				}
				if(!params.name){
					this.$modal.showToast('请输入联系人')
					return false;
				}
				// 所在地区与详细地址必填校验
				if(!params.province && !params.city && !params.district){
					this.$modal.showToast('请选择所在地区')
					return false;
				}
				// 需具备定位信息（经纬度）
				if(!params.latitude || !params.longitude){
					this.$modal.showToast('定位信息缺失，请重新选择所在地区')
                    this.addressInfo.province = ''
                    this.addressInfo.city = ''
                    this.addressInfo.district = ''
                    this.addressInfo.selectAddress = ''
					return false;
				}
				if(!params.detailAddress){
					this.$modal.showToast('请输入详细地址')
					return false;
				}
				this.loading=true
				if(this.optionType=='edit'){
					params.id = this.addressId;
					updateAddress(params).then(res=>{
						if(res&&res==1){
							this.$globalData.newOrderData.currentAddress={
								id:params.id,
								name:params.name,
								phone:params.phone,
								province:params.province,
								city:params.city,
								district:params.district,
								detailAddress:params.detailAddress,
								latitude:params.latitude,
								longitude:params.longitude,
							}
							this.loading=false
							uni.redirectTo({
								url: `/pages/newOrder/serviceNew`
							});
						}else {
							this.loading=false
							this.$modal.showToast('更新地址失败')
						}
					})
				} else if(this.optionType=='add'){
					addAddress(params).then(res=>{
						if(res&&res>0){
							this.$globalData.newOrderData.currentAddress={
								id:res,
								name:params.name,
								phone:params.phone,
								province:params.province,
								city:params.city,
								district:params.district,
								detailAddress:params.detailAddress,
								latitude:params.latitude,
								longitude:params.longitude,
							}
							this.loading=false
							uni.redirectTo({
								url: `/pages/newOrder/serviceNew`
							});
						}else {
							this.loading=false
							this.$modal.showToast('新增地址失败')
						}
					})
				}
			},
			getCityList() {
				getCity().then(res => {
					if (res.code == 200) {
						console.log('city', JSON.parse(res.msg));
						this.cityList = JSON.parse(res.msg)
						const cityLabels = this.cityList.map(item =>item.city)
						this.multiArray[0] = cityLabels
						this.multiArray[1] = this.cityList[0].region.map(e=> e.region)
			
					} else {
						this.$modal.showToast('获取城市失败，请联系系统管理员！');
					}
			
			
				})
			},
			columnchange(e){
				console.log(e)
				// 当滚动切换一级分类时，为当前的一级分类添加它的子类
				if (e.detail.column == 0) {
					const currentCity = this.cityList[e.detail.value]
					// #ifdef H5
					// 在小程序中直接赋值无效  H5 可直接赋值
					this.multiArray[1] = currentCity.region.map(e=>e.region)
					// #endif
					// #ifdef MP-WEIXIN
					// 在 H5 环境下 $set 会导致一级分类无法滚动， 小程序正常运行
					this.$set(this.multiArray, 1, currentCity.region.map(e=>e.region))
					// #endif
					this.multiIndex=[e.detail.value,0]
				}
			},
			bindMultiPickerColumnChange(e) {
				console.log('值为：' + e.detail.value)
				this.multiIndex = e.detail.value
				this.addressInfo.province = this.multiArray[0][this.multiIndex[0]]
				this.addressInfo.city = this.multiArray[0][this.multiIndex[0]]
				this.addressInfo.district = this.multiArray[1][this.multiIndex[1]]
				this.isSelected = true
				this.$forceUpdate()
			},
			 groupChange(n) {
				console.log('groupChange', n);
				this.addressInfo.isDefault=+(!this.addressInfo.isDefault)
			  },
			  
			  // 智能解析地址信息
			  parseAddress(address) {
				  if (!address) {
					  return {
						  province: '',
						  city: '',
						  district: '',
						  detailAddress: '',
						  selectAddress: ''
					  };
				  }

                  console.log(address);
                  
				  
				  // 直辖市列表
				  const municipalities = ['北京市', '上海市', '天津市', '重庆市'];
				  
				  // 省级行政区正则
				  const provinceReg = /(.*?(?:省|自治区|特别行政区))/;
				  // 市级行政区正则
				  const cityReg = /(.*?(?:市|自治州|地区|盟))/;
				  // 区县级行政区正则
				  const districtReg = /(.*?(?:区|县|市|旗|自治县|自治旗))/;
				  
				  let province = '';
				  let city = '';
				  let district = '';
				  let detailAddress = '';
				  let remainingAddress = address;
				  
				  // 检查是否为直辖市
				  const municipality = municipalities.find(m => address.includes(m));
				  if (municipality) {
					  province = municipality;
					  city = municipality;
					  remainingAddress = address.substring(address.indexOf(municipality) + municipality.length);
					  
					  // 对于直辖市，需要特殊处理区县解析
					  // 先尝试匹配区县名称
					  const districtMatch = remainingAddress.match(/^(.*?(?:区|县|市|旗|自治县|自治旗))/);
					  if (districtMatch) {
						  district = districtMatch[1];
						  detailAddress = remainingAddress.substring(districtMatch[0].length).trim();
					  } else {
						  // 如果没有匹配到区县，整个剩余部分作为详细地址
						  detailAddress = remainingAddress.trim();
					  }
				  } else {
					  // 非直辖市，按省市区县顺序解析
					  
					  // 解析省份
					  const provinceMatch = remainingAddress.match(provinceReg);
					  if (provinceMatch) {
						  province = provinceMatch[1];
						  remainingAddress = remainingAddress.substring(provinceMatch[0].length);
					  }
					  
					  // 解析城市
					  const cityMatch = remainingAddress.match(cityReg);
					  if (cityMatch) {
						  city = cityMatch[1];
						  remainingAddress = remainingAddress.substring(cityMatch[0].length);
					  }
					  
					  // 解析区县
					  const districtMatch = remainingAddress.match(districtReg);
					  if (districtMatch) {
						  district = districtMatch[1];
						  remainingAddress = remainingAddress.substring(districtMatch[0].length);
					  }
					  
					  detailAddress = remainingAddress.trim();
				  }
				  
				  // 如果没有解析到省份，但有城市，可能是省级市
				  if (!province && city) {
					  province = city;
				  }
				  
				  const selectAddress = `${province}${city !== province ? city : ''}${district}`;
				  
				  return {
					  province,
					  city,
					  district,
					  detailAddress,
					  selectAddress
				  };
			  }
		}
	}
</script>

<style lang="scss">
	.container {
		position: relative;
		height: 100%;
		padding-bottom: 90px;
		.address-save {
			background-color: #FFFFFF;
			padding: 10px 20px 40px;
			width: 100%;
			height: 90px;
			position: fixed;
			bottom: 0;
			z-index: 100;
		
			.address-save-btn {
				width: 100%;
				border-radius: 6px;
				background: #FFB13F;
				font-size: 16px;
				color: #FFFFFF;
			}
		}
	}
	.address-info{
		background-color: #fff;
		padding: 10px 20px;
		.u-radio-group{
			float: right;
		}
	}
</style>