367 lines
12 KiB
Vue
367 lines
12 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 状态栏 -->
|
||
<status-nav :titleVal="'地址管理'" :statusTitle="true"></status-nav>
|
||
<view :style="{paddingTop:statusHNH+'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;">添加地址</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">确认保存</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 用户信息授权，手机号授权 -->
|
||
<auth-userInfo-mobileInfo></auth-userInfo-mobileInfo>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {lotusAddressJson} from '@/components/city/city.js';
|
||
export default {
|
||
data() {
|
||
return {
|
||
statusHNH:uni.getStorageSync('electric_nav_height'),
|
||
publicColor:uni.getStorageSync('publicColor'),//主题颜色
|
||
dataList:[],
|
||
idEdit:false,
|
||
userName:'',
|
||
userPhone:'',
|
||
userProvince:'',
|
||
userCity:'',
|
||
userCounty:'',
|
||
userAddress:'',
|
||
isChoose:'',//选中的id
|
||
delNum:0,//删除条件
|
||
loading:false,
|
||
provinceArr:[],
|
||
cityArr:[],
|
||
countyArr:[],
|
||
isAddress:0,
|
||
isWhere:1,
|
||
isMo:0
|
||
}
|
||
},
|
||
onShow() {
|
||
this.$toolAll.tools.isLogin()
|
||
},
|
||
onLoad(options) {
|
||
this.isWhere = options.isWhere;
|
||
if(uni.getStorageSync('phone_active')!=0){
|
||
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>
|