248 lines
9.6 KiB
Vue
248 lines
9.6 KiB
Vue
|
<template>
|
|||
|
|
<view class="">
|
|||
|
|
<!-- 使用标题栏 -->
|
|||
|
|
<status-nav :statusBackw="true" :statusTitle="true" :whereCome="0" :title-val="'地址管理'" :tabcolor="'#ffffff'"></status-nav>
|
|||
|
|
<!-- 地址信息 -->
|
|||
|
|
<view class="bacb padding-zy20 posir padding-sx30" :style="{paddingTop:statusHNH+'px'}">
|
|||
|
|
<view class="disba fon24 color33 borbot padding-sx20">
|
|||
|
|
<view style="width: 16%;" class="flexs margin-y10">收货人</view>
|
|||
|
|
<input class="width100 fon24" style="" type="text" v-model="name" placeholder="请填写收货人姓名" placeholder-style="font-size:24rpx;"/>
|
|||
|
|
</view>
|
|||
|
|
<view class="disac fon24 color33 borbot padding-sx20">
|
|||
|
|
<view class="flexs" style="width: 16%;">手机号码</view>
|
|||
|
|
<view class="disac width100">
|
|||
|
|
<view class="flexs">+86</view>
|
|||
|
|
<input class="width100 margin-z10 fon24" type="number" maxlength="11" v-model="phone" placeholder="请填写收货人的手机号码" placeholder-style="font-size:24rpx;"/>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="disba fon24 color33 borbot padding-sx20">
|
|||
|
|
<view style="width: 16%;" class="flexs margin-y10">所在地区</view>
|
|||
|
|
<input @tap="openPicker" disabled class="width100 fon24" style="" type="text" v-model="region" placeholder="省市区县、乡镇等" placeholder-style="font-size:24rpx;"/>
|
|||
|
|
</view>
|
|||
|
|
<view class="dis fon24 color33 borbot padding-sx20">
|
|||
|
|
<view style="width: 16%;" class="flexs margin-y10">详细地址</view>
|
|||
|
|
<textarea class="width100 fon24" v-model="address" style="height: 200rpx;" placeholder="街道、楼牌号等" placeholder-style="font-size:24rpx;"/>
|
|||
|
|
</view>
|
|||
|
|
<view class="borbot"></view>
|
|||
|
|
</view>
|
|||
|
|
<view class="bacb margin-s20 padding-zy20 padding-sx30">
|
|||
|
|
<view class="disba">
|
|||
|
|
<view class="fon28">设置为默认地址</view>
|
|||
|
|
<liSwitch :checked="switch_state" @change="switchChange1"></liSwitch>
|
|||
|
|
</view>
|
|||
|
|
<view class="fon24 color9">提醒：每次下单会默认推荐使用该地址</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="disbc" style="position: fixed;bottom: 40px;left: 60px;right: 60px;">
|
|||
|
|
<view @tap="saveAddress" class="colorb fon30 addbtn">保存</view>
|
|||
|
|
</view>
|
|||
|
|
<city @choseVal="choseValue" :lotusAddressData="lotusAddressData"></city>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import liSwitch from '@/components/li-switch.vue';
|
|||
|
|
import city from '@/components/city/city.js';
|
|||
|
|
import amap from '../../jsFile/amap-wx.js'
|
|||
|
|
export default {
|
|||
|
|
components:{
|
|||
|
|
liSwitch,
|
|||
|
|
city
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
name:'',
|
|||
|
|
phone:'',
|
|||
|
|
address:'',
|
|||
|
|
switch_state: true,
|
|||
|
|
updateId:'',
|
|||
|
|
lotusAddressData:{
|
|||
|
|
visible:false,
|
|||
|
|
provinceName:'',
|
|||
|
|
cityName:'',
|
|||
|
|
townName:'',
|
|||
|
|
},
|
|||
|
|
region:'',
|
|||
|
|
regionObj:{
|
|||
|
|
province:'',
|
|||
|
|
provinceCode:'',
|
|||
|
|
city:'',
|
|||
|
|
cityCode:'',
|
|||
|
|
town:'',
|
|||
|
|
townCode:''
|
|||
|
|
},
|
|||
|
|
amapPlugin: null, //new地图
|
|||
|
|
key: '20e98934067a5cf96d8da862fe561787',
|
|||
|
|
lat:'',//纬度
|
|||
|
|
lng:'',//经度
|
|||
|
|
statusHNH:uni.getStorageSync('statusHNH'),
|
|||
|
|
newProvice:'',
|
|||
|
|
newCity:'',
|
|||
|
|
newDistrict:''
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad() {
|
|||
|
|
let obj = uni.getStorageSync('updataAddress');
|
|||
|
|
if(obj!=''){
|
|||
|
|
this.updateId = obj.id
|
|||
|
|
this.name = obj.name
|
|||
|
|
this.phone = obj.phone
|
|||
|
|
this.address = obj.address
|
|||
|
|
this.regionObj.provinceCode = obj.province
|
|||
|
|
this.regionObj.cityCode = obj.city
|
|||
|
|
this.regionObj.townCode = obj.county
|
|||
|
|
this.regionObj.province = obj.province_str
|
|||
|
|
this.regionObj.city = obj.city_str
|
|||
|
|
this.regionObj.town = obj.county_str
|
|||
|
|
if(obj.is_default==0){
|
|||
|
|
this.switch_state = false
|
|||
|
|
}
|
|||
|
|
this.region = `${obj.province_str} ${obj.city_str} ${obj.county_str} `
|
|||
|
|
}
|
|||
|
|
// uni.getLocation({
|
|||
|
|
// type: 'wgs84',
|
|||
|
|
// geocode:true,
|
|||
|
|
// success: function (res) {
|
|||
|
|
// console.log('位置信息：'+JSON.stringify(res));
|
|||
|
|
// }
|
|||
|
|
// });
|
|||
|
|
},
|
|||
|
|
onUnload() {
|
|||
|
|
uni.removeStorageSync('updataAddress');
|
|||
|
|
},
|
|||
|
|
onShow() {
|
|||
|
|
this.$toolAll.tools.guoq()
|
|||
|
|
let ya = this
|
|||
|
|
wx.getLocation({
|
|||
|
|
success:function(res) {
|
|||
|
|
ya.getDistrict(res.latitude, res.longitude)
|
|||
|
|
},
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
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.newProvice = res.data.result.address_component.province
|
|||
|
|
ya.newCity = res.data.result.address_component.city
|
|||
|
|
ya.newDistrict = res.data.result.address_component.district
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
//打开picker
|
|||
|
|
openPicker() {
|
|||
|
|
this.lotusAddressData.visible = true;
|
|||
|
|
this.lotusAddressData.provinceName = this.newProvice;
|
|||
|
|
this.lotusAddressData.cityName = this.newCity;
|
|||
|
|
this.lotusAddressData.townName = this.newDistrict;
|
|||
|
|
},
|
|||
|
|
//回传已选的省市区的值
|
|||
|
|
choseValue(res){
|
|||
|
|
//res数据源包括已选省市区与省市区code
|
|||
|
|
// console.log(res);
|
|||
|
|
this.lotusAddressData.visible = res.visible;//visible为显示与关闭组件标识true显示false隐藏
|
|||
|
|
//res.isChose = 1省市区已选 res.isChose = 0;未选
|
|||
|
|
if(res.isChose){
|
|||
|
|
this.lotusAddressData.provinceName = res.province;//省
|
|||
|
|
this.lotusAddressData.cityName = res.city;//市
|
|||
|
|
this.lotusAddressData.townName = res.town;//区
|
|||
|
|
this.region = `${res.province} ${res.city} ${res.town}`; //region为已选的省市区的值
|
|||
|
|
this.regionObj = {
|
|||
|
|
province:res.province,
|
|||
|
|
provinceCode:res.provinceCode,
|
|||
|
|
city:res.city,
|
|||
|
|
cityCode:res.cityCode,
|
|||
|
|
town:res.town,
|
|||
|
|
townCode:res.townCode
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
saveAddress(){
|
|||
|
|
if(!this.name){
|
|||
|
|
this.$toolAll.tools.showToast('请输入收货人');
|
|||
|
|
} else if(!this.phone){
|
|||
|
|
this.$toolAll.tools.showToast('请输入手机号');
|
|||
|
|
} else if(this.$toolAll.tools.isPhone(this.phone)){
|
|||
|
|
this.$toolAll.tools.showToast('请输入正确的手机号');
|
|||
|
|
} else if(!this.region){
|
|||
|
|
this.$toolAll.tools.showToast('请输入所在地区');
|
|||
|
|
} else if(!this.address){
|
|||
|
|
this.$toolAll.tools.showToast('请输入详细地址');
|
|||
|
|
} else if(!this.switch_state){
|
|||
|
|
uni.showModal({
|
|||
|
|
title:'提示：',
|
|||
|
|
content:'是否设为默认地址',
|
|||
|
|
cancelText:'取消默认',
|
|||
|
|
cancelColor:'#999999',
|
|||
|
|
confirmText:'设为默认',
|
|||
|
|
confirmColor:'#164396',
|
|||
|
|
success: (res) => {
|
|||
|
|
if(res.confirm){
|
|||
|
|
this.switch_state = true
|
|||
|
|
} else {
|
|||
|
|
this.saveEv()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
uni.showModal({
|
|||
|
|
title:'提示：',
|
|||
|
|
content:'确定要保存当前地址信息吗？',
|
|||
|
|
cancelText:'取消',
|
|||
|
|
cancelColor:'#999999',
|
|||
|
|
confirmText:'确定',
|
|||
|
|
confirmColor:'#164396',
|
|||
|
|
success: (res) => {
|
|||
|
|
if(res.confirm){
|
|||
|
|
this.saveEv()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
saveEv(){//保存地址执行事件
|
|||
|
|
let ya = this
|
|||
|
|
let num = 1
|
|||
|
|
if(!ya.switch_state){num = 0}
|
|||
|
|
let paramsadd = {
|
|||
|
|
id: ya.updateId,
|
|||
|
|
name:ya.name,//姓名
|
|||
|
|
phone:ya.phone,//电话
|
|||
|
|
province:ya.regionObj.provinceCode,//省级行政编码 如110000
|
|||
|
|
city:ya.regionObj.cityCode,//市级行政编码 如110100
|
|||
|
|
county:ya.regionObj.townCode,//县乡级行政编码 如110101
|
|||
|
|
province_str:ya.regionObj.province,//省级名称 如北京
|
|||
|
|
city_str:ya.regionObj.city,//市级名称 如北京市
|
|||
|
|
county_str:ya.regionObj.town,//县乡区域名称 如东城区
|
|||
|
|
address:ya.address,//具体地址 如XX路xx街
|
|||
|
|
is_default:num,//是否默认地址 0=否 1=是
|
|||
|
|
postcode:'',//邮编 如610200
|
|||
|
|
tag:''//地址标签 如 家 公司
|
|||
|
|
}
|
|||
|
|
this.$requst.post('user/address-save',paramsadd).then(res=>{
|
|||
|
|
if(res.msg=='success'){
|
|||
|
|
this.$toolAll.tools.showToast('地址保存成功');
|
|||
|
|
setTimeout(function(){
|
|||
|
|
uni.navigateBack({delta:1})
|
|||
|
|
},2000)
|
|||
|
|
}
|
|||
|
|
},error=>{})
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
switchChange1: function(e){
|
|||
|
|
// console.log(e);
|
|||
|
|
this.switch_state = !e.checked;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
|
|||
|
|
</style>
|