279 lines
8.1 KiB
Vue
279 lines
8.1 KiB
Vue
<template>
|
|
<view class="pad-x170" v-if="isLoading">
|
|
<status-nav :ifReturn="true" navBarTitle="地址管理" :marginBottom="0"></status-nav>
|
|
<!-- 收件人信息 -->
|
|
<view class="settlement-content pad-zy20 border-box">
|
|
<view class="section background-white radius30 mar-x40 pad-all25 border-box font30" v-for="(item,index) in addressList" :key="index">
|
|
<view class="addr-info mar-s20" @tap.stop="changeAddr(item.id)">
|
|
<view class="txt mar-x20">
|
|
<view class="font30 mar-x10">{{item.name}}<text style="margin-left: 30rpx;">{{item.phone}}</text></view>
|
|
<text class="font24 color-8c">{{item.addressMsg}}</text>
|
|
</view>
|
|
<view class="addr-bottom font28 flex">
|
|
<label class="radio flex"><radio :checked="item.is_default" @tap.stop="chooseEv(item.id)" color="#febf00"/>设为默认地址</label>
|
|
<view class="btns flex">
|
|
<view class="btn" @tap="openEdit(item.id)">编辑</view>
|
|
<view class="btn" @tap="delAddress(item.id)">删除</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 尾部 -->
|
|
<view class="pull-btn background-white border-box">
|
|
<view class="btn background-orange font36 radius30 flex" @tap="openAdd">新增地址</view>
|
|
</view>
|
|
<!-- 地址编辑 -->
|
|
<view class="pull-bg" style="background-color: rgba(0,0,0,.3);" v-show="isShow"></view>
|
|
<view class="vip-box-bg border-box" v-if="isShow">
|
|
<view class="vip-box radius20 background-white font30">
|
|
<view class="title">收件人地址</view>
|
|
<view class="vip-list">
|
|
<view class="vip-item mar-s20">
|
|
<view class="tips color-99">姓名</view>
|
|
<input class="input" type="text" v-model="name" placeholder="请输入姓名" placeholder-style="color:#000000">
|
|
</view>
|
|
<view class="vip-item mar-s40">
|
|
<view class="tips color-99">电话</view>
|
|
<input class="input" type="number" v-model="phone" placeholder="请输入联系电话" placeholder-style="color:#000000">
|
|
</view>
|
|
<view class="vip-item mar-s40">
|
|
<view class="tips color-99">地址</view>
|
|
<picker mode="region" @change="change">
|
|
<view class="addr-input flex">
|
|
<view class="input-box flex">
|
|
<input class="input-flex clips1" type="text" v-model="province" disabled="true">
|
|
<image src="/static/icon/icon-shop.png" mode="widthFix"></image>
|
|
</view>
|
|
<view class="input-box flex">
|
|
<input class="input-flex clips1" type="text" v-model="city" disabled="true">
|
|
<image src="/static/icon/icon-shop.png" mode="widthFix"></image>
|
|
</view>
|
|
<view class="input-box flex">
|
|
<input class="input-flex clips1" type="text" v-model="county" disabled="true">
|
|
<image src="/static/icon/icon-shop.png" mode="widthFix"></image>
|
|
</view>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
<view class="vip-item mar-s40">
|
|
<view class="tips color-99">详细地址</view>
|
|
<input class="input" type="text" v-model="address" placeholder="请输入详细地址" placeholder-style="color:#000000">
|
|
</view>
|
|
</view>
|
|
<view class="submit-btn font36 background-orange radius30 mar-s60 flex" @tap="editAddress(id)">确认保存</view>
|
|
<view class="close-btn" @tap="closeEv">
|
|
<image src="/static/icon/close-btn.png" mode="widthFix"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
isShow:false, //地址编辑弹窗
|
|
addressList:[], //地址列表
|
|
name:'', //姓名
|
|
phone:'', //电话
|
|
province:'北京市', //省
|
|
city:'北京市', //市
|
|
county:'东城区',//区
|
|
address:'', //详细地址
|
|
id:'', //地址id
|
|
changeType:'', //进入方式
|
|
flag: true, //表单提交
|
|
isLoading:false,
|
|
}
|
|
},
|
|
onLoad(op) {
|
|
if(op.type!==''){
|
|
this.changeType = op.type;
|
|
}
|
|
},
|
|
onShow() {
|
|
this.getAddress();
|
|
},
|
|
mounted() {
|
|
this.getAddress();
|
|
},
|
|
methods: {
|
|
// 选择地址
|
|
changeAddr(id){
|
|
if(this.changeType == 'change'){
|
|
// 缓存地址id
|
|
uni.setStorageSync('addr_id',id);
|
|
// 返回
|
|
uni.navigateBack({
|
|
delta:1,
|
|
})
|
|
}else{
|
|
return false;
|
|
}
|
|
},
|
|
// 获取地址列表
|
|
getAddress(){
|
|
uni.showLoading({
|
|
title:'加载中'
|
|
})
|
|
this.$requst.post('/api/user/address').then(res=>{
|
|
if(res.code == 0){
|
|
console.log(res,'地址列表');
|
|
let addrArr = [];
|
|
res.data.forEach(item=>{
|
|
let addrObj = {
|
|
id:item.id,
|
|
name:item.name,
|
|
phone:item.phone,
|
|
addressMsg:item.province_str+item.city_str+item.county_str+item.address,
|
|
is_default:item.is_default
|
|
}
|
|
addrArr.push(addrObj);
|
|
})
|
|
this.addressList = addrArr;
|
|
}
|
|
uni.hideLoading();
|
|
this.isLoading = true;
|
|
})
|
|
},
|
|
// 新增&编辑地址
|
|
editAddress(){
|
|
if(this.checkEmpty() && this.flag){
|
|
let params ={
|
|
id:this.id==''?'':this.id,
|
|
name:this.name,
|
|
phone:this.phone,
|
|
province_str:this.province,
|
|
city_str:this.city,
|
|
county_str:this.county,
|
|
address:this.address
|
|
}
|
|
console.log(params,'地址信息');
|
|
this.$requst.post('/api/user/address-save',params).then(res=>{
|
|
if(res.code == 0){
|
|
if(this.id == ''){
|
|
this.$toolAll.tools.showToast('新增成功');
|
|
}else{
|
|
this.$toolAll.tools.showToast('编辑成功');
|
|
}
|
|
// 关闭弹窗
|
|
this.closeEv();
|
|
// 重新获取地址列表
|
|
this.getAddress();
|
|
|
|
setTimeout(()=>{
|
|
this.flag = true;
|
|
},1200)
|
|
}else{
|
|
this.$toolAll.tools.showToast(res.msg);
|
|
setTimeout(()=>{
|
|
this.flag = true;
|
|
},1200)
|
|
}
|
|
})
|
|
}
|
|
},
|
|
|
|
// 表单验证
|
|
checkEmpty(){
|
|
let result = false;
|
|
if(!this.name) {
|
|
this.$toolAll.tools.showToast('请填写联系人');
|
|
} else if(this.$toolAll.tools.isPhone(this.phone)) {
|
|
this.$toolAll.tools.showToast('请正确填写联系电话');
|
|
} else if(!this.province && !this.city && !this.county) {
|
|
this.$toolAll.tools.showToast('请选择地址');
|
|
} else if(!this.address) {
|
|
this.$toolAll.tools.showToast('请填写详细地址');
|
|
} else {
|
|
result = true;
|
|
}
|
|
return result;
|
|
},
|
|
|
|
// 获取地址详情
|
|
getAddressInfo(id){
|
|
this.$requst.post('/api/user/address-info',{id:id}).then(res=>{
|
|
if(res.code == 0){
|
|
this.name = res.data.name;
|
|
this.phone = res.data.phone;
|
|
this.province = res.data.province_str;
|
|
this.city = res.data.city_str;
|
|
this.county = res.data.county_str;
|
|
this.address = res.data.address;
|
|
this.isShow = true;
|
|
}
|
|
})
|
|
},
|
|
|
|
// 设置默认地址
|
|
chooseEv(id){
|
|
if(this.flag){
|
|
this.$requst.post('/api/user/address-set-default',{id:id}).then(res=>{
|
|
if(res.code == 0){
|
|
this.$toolAll.tools.showToast('设置成功');
|
|
// 重新获取地址列表
|
|
this.getAddress();
|
|
setTimeout(()=>{
|
|
this.flag = true;
|
|
},1200)
|
|
}
|
|
})
|
|
}
|
|
},
|
|
|
|
// 删除地址
|
|
delAddress(id){
|
|
if(this.flag){
|
|
this.$requst.post('/api/user/address-del',{id:id}).then(res=>{
|
|
if(res.code == 0){
|
|
this.$toolAll.tools.showToast('删除成功');
|
|
// 重新获取地址列表
|
|
this.getAddress();
|
|
setTimeout(()=>{
|
|
this.flag = true;
|
|
},1200)
|
|
}
|
|
})
|
|
}
|
|
},
|
|
// 打开编辑
|
|
openEdit(id){
|
|
if(id!==''){
|
|
this.id = id;
|
|
this.getAddressInfo(id);
|
|
}
|
|
},
|
|
|
|
// 打开新增
|
|
openAdd(){
|
|
this.isShow = true;
|
|
this.name = '';
|
|
this.phone = '';
|
|
this.province = '北京市';
|
|
this.city = '北京市';
|
|
this.county = '东城区';
|
|
this.address = '';
|
|
},
|
|
|
|
// 选择省市区
|
|
change(e){
|
|
this.province = e.detail.value[0];
|
|
this.city = e.detail.value[1];
|
|
this.county = e.detail.value[2];
|
|
},
|
|
|
|
// 关闭弹窗
|
|
closeEv(){
|
|
this.isShow = false;
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
|
|
</style>
|