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>
|