hm-examples/pagesA/myAddress/myAddress.vue

<template>
	<view>
		<!-- 状态栏 -->
		<status-nav :titleVal="'地址管理'" :statusTitle="true"></status-nav>
		<view :style="{paddingTop:statusHeight+'px'}" class="mar-sx20 pad-zy32" style="padding-bottom: 150rpx;">
			<view v-if="loading">
				<view @tap="goBack(index)" v-for="(item,index) in dataList" :key="index" class="bacf radius20 pad20 mar-x20">
					<view class="pad-y20 disjbac">
						<view class="fon28 col3 bold">{{item.userName}} {{item.userPhone}}</view>
						<image v-if="item.isActive" src="/static/public/chooseQuan.png" class="address_active" mode=""></image>
					</view>
					<view class="fon24 col9 mar-s25">{{item.userAddress}}</view>
					<view class="disjbac fon28 col3 mar-s32">
						<view @tap.stop="setMo(index)" class="disac">
							<image v-if="item.isActive" src="/static/public/chooseQuan.png" class="address_active" mode=""></image>
							<image v-else src="/static/public/cancle-FS.png" class="address_active" mode=""></image>
							<view class="mar-z10" :class="item.isActive?'':'col9'">设为默认地址</view>
						</view>
						<view class="disac" style="color: #808080;">
							<view @tap.stop="editAddress(index)">编辑</view>
							<view @tap.stop="delAddress(index)" class="mar-y10 mar-z50">删除</view>
						</view>
					</view>
				</view>
				<view @tap.stop="obtainLngLat" class="posixzy address_add" style="bottom: 20rpx;" :style="{background: publicColor}">添加地址</view>
				<view style="margin-top: 50%;">
					<nothing-page v-if="dataList.length==0" :content="'暂无可用地址'"></nothing-page>
				</view>
			</view>
		</view>
		<!-- 添加地址、修改地址 -->
		<view v-if="idEdit" @tap.stop="idEdit=false" class="posAll disjcac" style="padding: 0 46rpx;z-index: 3;">
			<view class="bacf width100" @tap.stop="idEdit=true" style="padding: 0 55rpx;border-radius: 23rpx;">
				<view class="pad-sx20 posir">
					<view class="fon28 bold col3 width100 tc">收件人地址</view>
					<image class="posia address-close-btn" @tap.stop="idEdit=false" src="/static/public/addressClose.png" mode="aspectFill"></image>
				</view>
				<view class="pad-sx20 fon28 col3">
					<view class="fon26 col9 mar-s30">收件人</view>
					<view class="bbot mar-s30 pad-x10">
						<input type="text" class="width100" v-model="userName" placeholder="请输入姓名" />
					</view>
					<view class="fon26 col9 mar-s30">手机号码</view>
					<view class="bbot mar-s30 pad-x10">
						<input type="num" maxlength="11" class="width100" v-model="userPhone" placeholder="请输入联系电话" />
					</view>
					<view class="fon26 col9 mar-s30">地址</view>
					<view class="disjbac">
						<view class="bbot mar-s30 pad-x10 posir disac" @tap="chooseProvinceCityCounty(0)">
							<input type="text" class="width100 pad-y20" disabled v-model="userProvince" placeholder="四川" />
							<view class="posia disjcac fc xiao-sanj" style="right: 0;">
								<image src="/static/public/address-top.png" mode=""></image>
								<image src="/static/public/address-down.png" mode=""></image>
							</view>
							<view :class="isAddress==1?'dong':''" class="posia info-box">
								<view @tap.stop="chooseProvince(index)" class="clips1" v-for="(item,index) in provinceArr" :key="index">{{item.name}}</view>
							</view>
						</view>
						<view class="bbot mar-s30 pad-x10 posir disac mar-zy30" @tap="chooseProvinceCityCounty(1)">
							<input type="text" class="width100 pad-y20" disabled v-model="userCity" placeholder="成都" />
							<view class="posia disjcac fc xiao-sanj" style="right: 0;">
								<image src="/static/public/address-top.png" mode=""></image>
								<image src="/static/public/address-down.png" mode=""></image>
							</view>
							<view :class="isAddress==2?'dong':''" class="posia info-box">
								<view @tap.stop="chooseCity(index)" class="clips1" v-for="(item,index) in cityArr" :key="index">{{item.name}}</view>
							</view>
						</view>
						<view class="bbot mar-s30 pad-x10 posir disac" @tap="chooseProvinceCityCounty(2)">
							<input type="text" class="width100 pad-y20" disabled v-model="userCounty" placeholder="成华区" />
							<view class="posia disjcac fc xiao-sanj" style="right: 0;">
								<image src="/static/public/address-top.png" mode=""></image>
								<image src="/static/public/address-down.png" mode=""></image>
							</view>
							<view :class="isAddress==3?'dong':''" class="posia info-box">
								<view @tap.stop="chooseCounty(index)" class="clips1" v-for="(item,index) in countyArr" :key="index">{{item.name}}</view>
							</view>
						</view>
					</view>
					<view class="fon26 col9 mar-s30">详细地址</view>
					<view class="bbot mar-s30 pad-x10">
						<input type="text" class="width100" v-model="userAddress" placeholder="请输入详细地址" />
					</view>
					<!-- 确认保存按钮 -->
					<view @tap.stop="addAddress" class="address-btn-add" :style="{background: publicColor}">确认保存</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {lotusAddressJson} from '@/components/city/city.js';
	export default {
		data() {
			return {
				dataList:[],
				idEdit:false,
				userName:'',
				userPhone:'',
				userProvince:'',
				userCity:'',
				userCounty:'',
				userAddress:'',
				isChoose:'',//选中的id
				delNum:0,//删除条件
				loading:false,
				provinceArr:[],
				cityArr:[],
				countyArr:[],
				isAddress:0,
				isWhere:1,
				isMo:0
			}
		},
		computed: {
			statusHeight() {
				return this.$store.state.statusHeight
			},
			// 主题颜色
			publicColor() {
				return this.$store.state.publicColor
			},
		},
		onShow() {
			// 禁用小程序分享
			this.$toolAll.tools.disableShareEv();
		},
		onLoad(options) {
			this.isWhere = options.isWhere;
			this.checkList();
		},
		methods: {
			goBack(index){//返回到订单准备页
				if(this.isWhere==0) {
					uni.setStorageSync('chooseAddress',this.dataList[index]);
					uni.navigateBack({delta:1})
				}
			},
			obtainLngLat(){//添加地址事件
				this.idEdit = true;
				this.isMo = 0;
				this.clearAll();
				// 获取当前位置的经纬度
				wx.getLocation({
					success:(res)=> {
						// 逆解析经纬度
						this.getDistrict(res.latitude, res.longitude)
					},
				})
				
			},
			getDistrict(latitude, longitude) {//获取当前位置的省市区县
				let ya = this
			    wx.request({
					url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${latitude},${longitude}&key=B2ABZ-SIDKS-WD2O3-6CJ2U-CDZOT-U3FKF`,
					header: {
						'Content-Type':'application/json'
					},
					success:function(res) {
						// console.log('地址数据：',res)
						ya.userProvince = res.data.result.address_component.province
						ya.userCity = res.data.result.address_component.city
						ya.userCounty = res.data.result.address_component.district
						lotusAddressJson.forEach((itema,index)=>{
							if(ya.userProvince==itema.name) {
								ya.chooseProvinceCityCounty(0);
								ya.chooseProvince(index);
							}
						})
					}
			    })
			},
			chooseProvinceCityCounty(index){
				if(index==0){//获取省数据
					this.isAddress = 1;
					this.provinceArr = []
					lotusAddressJson.forEach((item,index)=>{
						if(item.value.slice(2) =='0000'){
							this.provinceArr.push(item)
						}
					})
				} 
				if(index==1){//获取市数据
					if(this.cityArr.length!=0){
						this.isAddress = 2;
					}
				}
				if(index==2){//获取区数据
					if(this.countyArr.length==0){
						this.$toolAll.tools.showToast('暂无可选项');
					} else {
						this.isAddress = 3;
					}
				}
			},
			chooseProvince(index){//选择省
				this.countyArr = this.cityArr = [];
				this.userProvince = this.provinceArr[index].name;
				lotusAddressJson.forEach(itema=>{
					if(this.provinceArr[index].value==itema.parent) {
						this.cityArr.push(itema)
					}
				})
				this.isAddress = 0;
				this.userCity = this.cityArr[0].name;//默认市的第一个
				this.chooseCity(0);
			},
			chooseCity(index){//选择市
				this.countyArr = [];
				this.userCity = this.cityArr[index].name;
				lotusAddressJson.forEach(itema=>{
					if(this.cityArr[index].value==itema.parent) {
						this.countyArr.push(itema)
					}
				})
				this.isAddress = 0;
				if(this.countyArr.length!=0) {
					this.userCounty = this.countyArr[0].name;//默认选中第一个区
				} else this.userCounty = '未知';
			},
			chooseCounty(index){//选择区
				this.isAddress = 0;
				this.userCounty = this.countyArr[index].name;
			},
			async checkList(){//查询地址列表
				this.$requst.post('user/address').then(res=>{
					if(res.code==0){
						this.dataList = [];
						if(res.data.length!=0){
							res.data.forEach(item=>{
								let newActive = false;
								if(item.is_default==1) newActive = true
								let obj = {
									id:item.id,
									user_id:item.user_id,
									userName:item.name,
									userPhone:item.phone,
									userAddress:item.province_str + item.city_str + item.county_str + item.address,
									province:item.province_str,
									city:item.city_str,
									county:item.county_str,
									address:item.address,
									isActive:newActive,
									is_default:item.is_default
								}
								this.dataList.push(obj);
							})
							this.checkActive();
						}
						this.loading = true;
					}
				})
			},
			checkActive(){//把默认地址放到第一位
				let have = this.dataList.findIndex((res)=>{
					return res.isActive == true;
				});
				this.dataList.unshift(this.dataList[have]);
				this.dataList.splice(have+1,1);
			},
			async addAddress(){//新增编辑地址
				if(this.userName=='') {
					this.$toolAll.tools.showToast('请输入姓名');
				} else if(this.userPhone=='') {
					this.$toolAll.tools.showToast('请输入联系电话');
				} else if(this.$toolAll.tools.isPhone(this.userPhone)) {
					this.$toolAll.tools.showToast('请输入正确的联系电话');
				} else if(this.userAddress=='') {
					this.$toolAll.tools.showToast('请输入详细地址');
				} else {
					let params = {
						id:this.isChoose,
						name:this.userName,
						phone:this.userPhone,
						city:'',//城市编码
						county:'',//区县编码
						province_str:this.userProvince,//省
						city_str:this.userCity,//市
						county_str:this.userCounty,//区
						address:this.userAddress,
						is_default:this.isMo//是否默认
					}
					this.$requst.post('user/address-save',params).then(res=>{
						if(res.code==0){
							this.idEdit = false;
							if(this.isChoose!='') {
								this.$toolAll.tools.showToast('地址修改成功');
							} else {
								this.$toolAll.tools.showToast('新增地址成功');
							}
							setTimeout(()=>{
								this.checkList();
								this.clearAll();
							},1000)
						}
					})
				}
			},
			setMo(index){//设置默认地址
				let params = {
					id:this.dataList[index].id,
					name:this.dataList[index].userName,
					phone:this.dataList[index].userPhone,
					city:'',//城市编码
					county:'',//区县编码
					province_str:this.dataList[index].province,//省
					city_str:this.dataList[index].city,//市
					county_str:this.dataList[index].county,//区
					address:this.dataList[index].address,
					is_default:1//是否默认
				}
				this.$requst.post('user/address-save',params).then(res=>{
					if(res.code==0){
						this.$toolAll.tools.showToast('设置默认地址成功');
						this.dataList.forEach(item=>{
							item.isActive = false;
						});
						this.dataList[index].isActive = true;
						this.dataList[index].is_default = 1;
						this.checkActive();
					}
				})
			},
			editAddress(index){//编辑按钮
				this.idEdit = true;
				this.isChoose = this.dataList[index].id,
				this.userName = this.dataList[index].userName;
				this.userPhone = this.dataList[index].userPhone;
				this.userProvince = this.dataList[index].province;
				this.userCity = this.dataList[index].city;
				this.userCounty = this.dataList[index].county;
				this.userAddress = this.dataList[index].address;
				this.isMo = this.dataList[index].is_default
			},
			delAddress(index){//删除地址事件
				this.delNum++
				setTimeout(()=>{
					this.delNum = 0;
				},3000)
				if(this.delNum==1) {
					this.$toolAll.tools.showToast('双击即可删除');
				}
				if(this.delNum==2) {
					this.$requst.post('user/address-del',{id:this.dataList[index].id}).then(res=>{
						if(res.code==0){
							this.$toolAll.tools.showToast('删除成功');
							setTimeout(()=>{
								this.checkList();
							},1500)
						}
					})
				}
			},
			clearAll(){//清空输入框
				this.isChoose = '',
				this.userName = '';
				this.userPhone = '';
				this.userProvince = '';
				this.userCity = '';
				this.userCounty = '';
				this.userAddress = '';
			}
		}
	}
</script>

<style>
	
</style>