290 lines
7.2 KiB
Vue
290 lines
7.2 KiB
Vue
<template>
|
|
<view class="address_add_warp">
|
|
<Header :leftTitle="$t('address.add.title')" left-path-type="navigateTo" :leftPath="leftPath"/>
|
|
<view class="address_form">
|
|
<view class="add_form_item add_form_item_but">
|
|
<view class="add_form_title">收货人</view>
|
|
<up-input
|
|
placeholder="收货人"
|
|
border="surround"
|
|
v-model="form.name"
|
|
:customStyle="{
|
|
'border':'0rpx',
|
|
}"
|
|
></up-input>
|
|
</view>
|
|
<view class="add_form_item add_form_item_but">
|
|
<view class="add_form_title">手机号码</view>
|
|
<up-input
|
|
placeholder="请填写收货人手机号"
|
|
border="surround"
|
|
v-model="form.mobile"
|
|
:customStyle="{
|
|
'border':'0rpx',
|
|
}"
|
|
type="number"
|
|
></up-input>
|
|
</view>
|
|
<view class="add_form_item add_form_item_but" >
|
|
<view class="add_form_title">所在地区</view>
|
|
<view class="region_warp" @click="regionShowCheck(true)">
|
|
<view style="color: #808080;margin-left: 22rpx;font-size: 28rpx;">{{(form.regionStr && form.regionStr.join("/")) || "所在地区"}}</view>
|
|
<up-image src="/static/common/right_soild.png" width="14" height="14" bgColor="#f1f6ff00"></up-image>
|
|
</view>
|
|
</view>
|
|
<view class="add_form_item">
|
|
<view class="add_form_title">详细地址</view>
|
|
<up-input
|
|
placeholder="门牌号、小区、楼栋号、单元室等"
|
|
border="surround"
|
|
v-model="form.address"
|
|
:customStyle="{
|
|
'border':'0rpx',
|
|
'height':'100rpx',
|
|
}"
|
|
></up-input>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="address_default">
|
|
<view class="title">设为默认地址</view>
|
|
<up-switch
|
|
v-model="form.isDefault"
|
|
activeColor="#FF7C41"
|
|
size="20"
|
|
>
|
|
</up-switch>
|
|
</view> -->
|
|
<view class="add_but" @click="addAddress">
|
|
保存地址
|
|
</view>
|
|
<up-toast ref="uToastRef"></up-toast>
|
|
<up-picker
|
|
:show="regionShow"
|
|
ref="uPickerRef"
|
|
:columns="regionColumns"
|
|
@confirm="regionConfirm"
|
|
:loading="regionLoading"
|
|
@change="regionChange"
|
|
keyName="label"
|
|
itemHeight="34"
|
|
@cancel="regionShow=false"
|
|
@close="regionShow=false"
|
|
></up-picker>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { editAddress,getAddressDetail } from '@/api/address.js'
|
|
import { getCascadeRegion } from '@/api/common.js'
|
|
import Header from '@/components/header.vue';
|
|
|
|
export default {
|
|
components:{Header},
|
|
data() {
|
|
return {
|
|
form:{
|
|
id:0,
|
|
name:null,// 收货人
|
|
mobile:null,// 手机号码
|
|
regionStr:null,// 所属地区
|
|
countryId:null,// 国家ID
|
|
provinceId:null,// 省份ID
|
|
cityId:null,// 城市ID
|
|
areaId:null,// 区域ID
|
|
address:null,// 详细地址
|
|
},
|
|
regionShow:false,
|
|
regionColumns:[],
|
|
regionLoading:false,
|
|
leftPath:"/pages/mine_address/mine_address",
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
const id = option.id;
|
|
if(id && id!==0){
|
|
this.getById(id);
|
|
}
|
|
const ids = option.ids;
|
|
if(ids && ids!==0){
|
|
this.leftPath = "/pages/order_submit/order_submit?ids="+ids+"&addressShow = true";
|
|
}
|
|
},
|
|
methods: {
|
|
/**
|
|
* 用作编辑
|
|
*/
|
|
async getById(id){
|
|
const parasm ={
|
|
id,
|
|
}
|
|
const resp = await getAddressDetail(parasm);
|
|
if(resp && resp.bizcode === 100){
|
|
const data = resp.data;
|
|
this.form.id = id;
|
|
this.form.name=data.name;// 收货人
|
|
this.form.mobile=data.phone;// 手机号码
|
|
this.form.countryId=data.countryId;// 国家ID
|
|
this.form.provinceId=data.provinceId;// 省份ID
|
|
this.form.cityId=data.cityId;// 城市ID
|
|
this.form.areaId=data.areaId;// 区域ID
|
|
this.form.address=data.address;//
|
|
const regionStr = [];
|
|
if(data.countryName){
|
|
regionStr.push(data.countryName);
|
|
}
|
|
if(data.provinceName){
|
|
regionStr.push(data.provinceName);
|
|
}
|
|
if(data.cityName){
|
|
regionStr.push(data.cityName);
|
|
}
|
|
if(data.areaName){
|
|
regionStr.push(data.areaName);
|
|
}
|
|
|
|
this.form.regionStr=regionStr;// 所属地区
|
|
}
|
|
},
|
|
|
|
// 选择地址的弹框
|
|
async regionShowCheck(status){
|
|
if(status){
|
|
const nation = await this.getRegion(0);
|
|
const province = nation && nation.length !==0 ? await this.getRegion(nation[0].id):[];
|
|
const city = province && province.length !==0 ? await this.getRegion(province[0].id):[];
|
|
const area = city && city.length !==0 ? await this.getRegion(city[0].id):[];
|
|
this.regionColumns = [nation,province,city,area];
|
|
}else{
|
|
this.regionColumns = [[],[],[],[]];
|
|
}
|
|
this.regionShow = status;
|
|
},
|
|
// 数据交互
|
|
async getRegion(pId){
|
|
this.regionLoading = true
|
|
const params={
|
|
parentId:pId,
|
|
}
|
|
const resp = await getCascadeRegion(params);
|
|
const arrOption=[];
|
|
if(resp.bizcode === 100){
|
|
const data = resp.data;
|
|
if(data && data.length !==0){
|
|
data.map(item=>{
|
|
arrOption.push({
|
|
id:item.id,
|
|
label:item.name,
|
|
pId:pId,
|
|
})
|
|
})
|
|
}
|
|
}
|
|
this.regionLoading = false;
|
|
return arrOption
|
|
},
|
|
// 地区改变
|
|
async regionChange(e){
|
|
const {
|
|
columnIndex,
|
|
index,
|
|
picker
|
|
} = e;
|
|
const selectData = this.regionColumns[columnIndex][index];
|
|
const resultData = await this.getRegion(selectData.id);
|
|
if(resultData && resultData.length !==0){
|
|
const index = columnIndex+1;
|
|
this.regionColumns[index] = resultData;
|
|
}
|
|
},
|
|
|
|
// 提交地址
|
|
regionConfirm(e){
|
|
const {
|
|
columnIndex,
|
|
value,
|
|
values,
|
|
index,
|
|
} = e;
|
|
const regionStr = [];
|
|
const regionId = [];
|
|
value.map(item=>{
|
|
if(item){
|
|
regionStr.push(item.label);
|
|
regionId.push(item.id);
|
|
}
|
|
})
|
|
this.form.regionStr = regionStr;
|
|
if(regionId && regionId.length !==0){
|
|
this.form.countryId = regionId[0] ? regionId[0] : null;
|
|
this.form.provinceId = regionId[1] ? regionId[1] : null;
|
|
this.form.cityId = regionId[2] ? regionId[2] : null;
|
|
this.form.areaId = regionId[3] ? regionId[3] : null;
|
|
}
|
|
this.regionShowCheck(false);
|
|
},
|
|
|
|
// 添加地址
|
|
async addAddress(){
|
|
const params = {
|
|
...this.form,
|
|
}
|
|
if(!params.name){
|
|
this.$refs.uToastRef.show({
|
|
type: 'error',
|
|
message: "请输入收货人",
|
|
});
|
|
return;
|
|
}
|
|
if(!params.mobile){
|
|
this.$refs.uToastRef.show({
|
|
type: 'error',
|
|
message: "请输入收货人手机号",
|
|
});
|
|
return;
|
|
}
|
|
if(!params.regionStr){
|
|
this.$refs.uToastRef.show({
|
|
type: 'error',
|
|
message: "请选择所在地区",
|
|
});
|
|
return;
|
|
}
|
|
if(!params.address){
|
|
this.$refs.uToastRef.show({
|
|
type: 'error',
|
|
message: "请输入详细地址",
|
|
});
|
|
return;
|
|
}
|
|
if(!params.id || params.id === 0){
|
|
delete params.id;
|
|
}
|
|
if(!params.areaId || params.areaId === 0){
|
|
delete params.areaId;
|
|
}
|
|
delete params.regionStr;
|
|
const res = await editAddress(params);
|
|
if(res && res.bizcode === 100){
|
|
this.$refs.uToastRef.show({
|
|
type: 'success',
|
|
message: params.id && params.id !==0 ? '修改成功':"添加成功",
|
|
});
|
|
const leftPath = this.leftPath;
|
|
setTimeout(()=>{
|
|
uni.navigateTo({
|
|
url:leftPath,
|
|
})
|
|
},2000)
|
|
}
|
|
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
</style>
|