375 lines
13 KiB
Vue
375 lines
13 KiB
Vue
<template>
|
|
<view class="pad-x180">
|
|
<!-- 状态栏 -->
|
|
<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: 180rpx;">添加地址</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>
|
|
<!-- 底部导航 -->
|
|
<view class="posixzy">
|
|
<bottom-tab></bottom-tab>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {lotusAddressJson} from '@/components/city/city.js';
|
|
import bottomTab from '@/components/bottom-tab.vue';
|
|
export default {
|
|
components: {
|
|
bottomTab,
|
|
},
|
|
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
|
|
}
|
|
},
|
|
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>
|