408 lines
14 KiB
Vue
408 lines
14 KiB
Vue
<template>
|
|
<view class="address_add_warp">
|
|
<Header :leftTitle="titleText" leftPath="1" />
|
|
<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" maxlength="11"></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> -->
|
|
<AddressPopup @ok="onOk" :show="regionShow" @itemSelect="onItemSelect" @select="onSelect" :curSelect="curSelect"
|
|
:selectList="curSelectList" :dataList="addressList" @close="onClose"></AddressPopup>
|
|
<qiaobao-assistant page-key="pages/mine_package/mine_address_add/mine_address_add" title="编辑收货地址" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { editAddress, getAddressDetail } from "@/api/address.js";
|
|
import { getCascadeRegion } from "@/api/common.js";
|
|
import AddressPopup from '@/components/common/address-popup.vue'
|
|
import Header from "@/components/header.vue";
|
|
|
|
export default {
|
|
components: { Header, AddressPopup },
|
|
data() {
|
|
return {
|
|
titleText: '添加地址',
|
|
form: {
|
|
id: 0,
|
|
name: null, // 收货人
|
|
mobile: null, // 手机号码
|
|
regionStr: null, // 所属地区
|
|
countryId: null, // 国家ID
|
|
provinceId: null, // 省份ID
|
|
cityId: null, // 城市ID
|
|
areaId: null, // 区域ID
|
|
townshipId: null, // 街道ID
|
|
address: null, // 详细地址
|
|
},
|
|
regionShow: false,
|
|
curSelect: -1,
|
|
addressList: [],
|
|
curSelectList: [],
|
|
regionColumns: [],
|
|
regionLoading: false,
|
|
// leftPath: "/pages/mine_package/mine_address/mine_address",
|
|
leftPath: "",
|
|
};
|
|
},
|
|
onLoad(option) {
|
|
const id = option.id;
|
|
const detail = option.detail;
|
|
if (id && id !== 0) {
|
|
this.getById(id);
|
|
this.titleText = '修改地址';
|
|
}
|
|
},
|
|
methods: {
|
|
onItemSelect(item, xItem) {
|
|
this.curSelectList.push(xItem);
|
|
this.curSelect++;
|
|
this.getAddressList(xItem.id).then(() => {
|
|
if (!this.addressList.length) {
|
|
this.onOk();
|
|
}
|
|
});
|
|
},
|
|
onSelect(item, index) {
|
|
this.curSelectList.splice(index + 1);
|
|
this.curSelect = index;
|
|
this.getAddressList(this.curSelectList[this.curSelectList.length - 1].id);
|
|
},
|
|
async getAddressList(id = 0) {
|
|
const params = {
|
|
parentId: id,
|
|
};
|
|
const resp = await getCascadeRegion(params);
|
|
if (resp.bizcode === 100) {
|
|
|
|
this.addressList = [];
|
|
resp.data.forEach(item => {
|
|
if (this.addressList.length) {
|
|
let index = this.addressList.findIndex(i => i.zi == item.firstLetter);
|
|
if (index != -1) {
|
|
this.addressList[index].data.push({ id: item.id, pId: item.parentId, name: item.name });
|
|
} else {
|
|
this.addressList.push({ zi: item.firstLetter, data: [{ id: item.id, pId: item.parentId, name: item.name }] });
|
|
}
|
|
} else {
|
|
this.addressList.push({ zi: item.firstLetter, data: [{ id: item.id, pId: item.parentId, name: item.name }] });
|
|
}
|
|
})
|
|
this.addressList.sort((a, b) => {
|
|
if (a.zi < b.zi) return -1;
|
|
if (a.zi > b.zi) return 1;
|
|
return 0;
|
|
});
|
|
}
|
|
},
|
|
onOk() {
|
|
this.form.regionStr = [];
|
|
this.curSelectList.forEach((item, index) => {
|
|
if (index == 0) {
|
|
this.form.countryId = item.id;
|
|
this.form.regionStr.push(item.name);
|
|
} else if (index == 1) {
|
|
this.form.provinceId = item.id;
|
|
this.form.regionStr.push(item.name);
|
|
} else if (index == 2) {
|
|
this.form.cityId = item.id;
|
|
this.form.regionStr.push(item.name);
|
|
} else if (index == 3) {
|
|
this.form.areaId = item.id;
|
|
this.form.regionStr.push(item.name);
|
|
} else if (index == 4) {
|
|
this.form.townshipId = item.id;
|
|
this.form.regionStr.push(item.name);
|
|
}
|
|
})
|
|
|
|
console.log('areaId', this.form)
|
|
this.onClose();
|
|
},
|
|
onClose() {
|
|
this.regionShow = false;
|
|
this.curSelect = false;
|
|
this.addressList = [];
|
|
this.curSelectList = [];
|
|
},
|
|
/**
|
|
* 用作编辑
|
|
*/
|
|
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.townshipId = data.townshipId; // 街道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);
|
|
}
|
|
if (data.townshipName) {
|
|
regionStr.push(data.townshipName);
|
|
}
|
|
|
|
this.form.regionStr = regionStr; // 所属地区
|
|
}
|
|
},
|
|
|
|
// 选择地址的弹框
|
|
async regionShowCheck() {
|
|
this.curSelectList = [];
|
|
this.curSelect = -1;
|
|
if (this.form.townshipId) {
|
|
this.curSelectList.push({ id: this.form.countryId, name: this.form.regionStr[0] });
|
|
this.curSelectList.push({ id: this.form.provinceId, name: this.form.regionStr[1] });
|
|
this.curSelectList.push({ id: this.form.cityId, name: this.form.regionStr[2] });
|
|
this.curSelectList.push({ id: this.form.areaId, name: this.form.regionStr[3] });
|
|
this.curSelectList.push({ id: this.form.townshipId, name: this.form.regionStr[4] });
|
|
this.curSelect = 4;
|
|
await this.getAddressList(this.form.townshipId);
|
|
} else if (this.form.areaId) {
|
|
this.curSelectList.push({ id: this.form.countryId, name: this.form.regionStr[0] });
|
|
this.curSelectList.push({ id: this.form.provinceId, name: this.form.regionStr[1] });
|
|
this.curSelectList.push({ id: this.form.cityId, name: this.form.regionStr[2] });
|
|
this.curSelectList.push({ id: this.form.areaId, name: this.form.regionStr[3] });
|
|
this.curSelect = 3;
|
|
await this.getAddressList(this.form.areaId);
|
|
} else if (this.form.cityId) {
|
|
this.curSelectList.push({ id: this.form.countryId, name: this.form.regionStr[0] });
|
|
this.curSelectList.push({ id: this.form.provinceId, name: this.form.regionStr[1] });
|
|
this.curSelectList.push({ id: this.form.cityId, name: this.form.regionStr[2] });
|
|
this.curSelect = 2;
|
|
await this.getAddressList(this.form.cityId);
|
|
} else if (this.form.provinceId) {
|
|
this.curSelectList.push({ id: this.form.countryId, name: this.form.regionStr[0] });
|
|
this.curSelectList.push({ id: this.form.provinceId, name: this.form.regionStr[1] });
|
|
this.curSelect = 1;
|
|
await this.getAddressList(this.form.provinceId);
|
|
} else if (this.form.countryId) {
|
|
this.curSelectList.push({ id: this.form.countryId, name: this.form.regionStr[0] });
|
|
this.curSelect = 0;
|
|
await this.getAddressList(this.form.countryId);
|
|
} else {
|
|
await this.getAddressList();
|
|
}
|
|
this.regionShow = true;
|
|
},
|
|
// 数据交互
|
|
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);
|
|
}
|
|
});
|
|
console.log("提交地址--1", value);
|
|
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.form.townshipId = regionId[4] ? regionId[4] : 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 (!/^1[3-9]\d{9}$/.test(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.townshipId || params.townshipId === 0) {
|
|
delete params.townshipId;
|
|
}
|
|
if (!params.areaId || params.areaId === 0) {
|
|
delete params.areaId;
|
|
}
|
|
if (!params.cityId || params.cityId === 0) {
|
|
delete params.cityId;
|
|
}
|
|
if (!params.provinceId || params.provinceId === 0) {
|
|
delete params.provinceId;
|
|
}
|
|
if (!params.countryId || params.countryId === 0) {
|
|
delete params.countryId;
|
|
}
|
|
|
|
delete params.regionStr;
|
|
if (params.countryId != 47021) {
|
|
this.$refs.uToastRef.show({
|
|
type: "error",
|
|
message: '选择地址错误'
|
|
});
|
|
return;
|
|
}
|
|
const res = await editAddress(params);
|
|
if (res && res.bizcode === 100) {
|
|
uni.$emit("refreshAddressList");
|
|
this.$refs.uToastRef.show({
|
|
type: "success",
|
|
message: params.id && params.id !== 0 ? "修改成功" : "添加成功",
|
|
});
|
|
const leftPath = this.leftPath;
|
|
console.log("参数--111-", leftPath);
|
|
|
|
setTimeout(() => {
|
|
if (leftPath) {
|
|
uni.navigateTo({
|
|
url: leftPath,
|
|
});
|
|
} else {
|
|
uni.navigateBack();
|
|
}
|
|
}, 1500);
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped></style> |