pet-front-order/pages/personalCenter/addressInfo.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,
				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;
			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;
						this.addressInfo = {
								name,
								phone,
								emergencyPhone,
								province,
								city,
								district,
								detailAddress,
								openId,
								isDefault,
								latitude,
								longitude,
								selectAddress: `${province}${city}${district}`,
							};
					}else{
						this.$modal.showToast('获取地址详情失败')
					}
				})
			},
			// 选择地区
			selectAddress(){
				uni.chooseLocation({
					success: res => {
						
						this.addressInfo.latitude = res.latitude
						this.addressInfo.longitude = res.longitude
                        
						var reg = /.+?(省|市|自治区|自治州|县|区)/g;
						
						let address = ''
						
						if (!res.address && res.name) { //用户直接选择城市的逻辑
							address = res.name
						}
						if (res.address || res.name) {
							address = res.address + res.name
						}
						
						if(!address){
							return
						}
						
						let arr = address.match(reg)
                        
						this.addressInfo.province = arr[0] || ''
						this.addressInfo.city = arr[1] || ''
						this.addressInfo.district = arr[2] || ''
						
						let detail = arr[2] || arr[1] || arr[0] || ''
						
						this.addressInfo.detailAddress = address.substring(address.indexOf(detail) + detail.length)
						
						this.addressInfo.selectAddress = `${arr[0] || ''}${arr[1] || ''}${arr[2] || ''}`
						
						return
						
						// console.log(res);
						
						// this.addressInfo.latitude = res.latitude
						// this.addressInfo.longitude = res.longitude
						// // this.addressInfo.district = ''
						// // this.addressInfo.province = ''
						
						// var reg = /.+?(省|市|自治区|自治州|县|区)/g;
						
						// let arr = res.address.match(reg)
						
						// // var add1 = '四川省成都市都江堰市天马镇34号';
						// // var add2 = '北京市北京市东城区前门大街1号'
						// // var add3 = '新疆维吾尔自治区乌鲁木齐市天山区中山路479号';
						// // var add4 = '四川省成都市双流县幸福社区23号';
						// // var add5 = '香港特别行政区中西区尖沙嘴路';
						// // console.log(add1 + ': ', add1.match(reg));
						// // console.log(add2 + ': ', add2.match(reg));
						// // console.log(add3 + ': ', add3.match(reg));
						// // console.log(add4 + ': ', add4.match(reg));
						// // console.log(add5 + ': ', add5.match(reg));

						
						// this.addressInfo.province = arr[0]
						// this.addressInfo.city = arr[1]
						// this.addressInfo.district = arr[2]
						
						// if (!res.address && res.name) { //用户直接选择城市的逻辑
						// 	return this.addressInfo.selectAddress = res.name
						// }
						// if (res.address || res.name) {
						// 	return this.addressInfo.selectAddress = res.address + res.name
						// }
						// this.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
				console.log(params);
				if(this.optionType=='edit'){
					params.id = this.addressId;
					updateAddress(params).then(res=>{
						if(res&&res==1){
							setTimeout(() => {
								let len = getCurrentPages().length;
								this.loading=false
								if(len >= 2) {  
								    uni.navigateBack();  
								}else {  
								    uni.redirectTo({url:'/pages/personalCenter/address'});  
								}
							}, 2000);
						}else {
							this.loading=false
							this.$modal.showToast('更新地址失败')
						}
					})
				} else if(this.optionType=='add'){
					addAddress(params).then(res=>{
						if(res&&res>0){
							setTimeout(() => {
								let len = getCurrentPages().length;
								this.loading=false
								if(len >= 2) {  
								    uni.navigateBack();  
								}else {  
								    uni.redirectTo({url:'/pages/personalCenter/address'});  
								}
							}, 2000);
						}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)
			  },
		}
	}
</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>