feat: 收货地址
This commit is contained in:
黄泽群
@@ -64,3 +64,11 @@ export function settlementOrder(data) {
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
export function getPostageQuery(data) {
|
||||
return request({
|
||||
url: "/cart/getPostage",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
@@ -35,6 +35,9 @@ export default {
|
||||
mounted() {
|
||||
this.getAddressList();
|
||||
},
|
||||
activated () {
|
||||
this.getAddressList();
|
||||
},
|
||||
methods: {
|
||||
// 添加地址
|
||||
jumpAddAddress() {
|
||||
|
||||
@@ -1,36 +1,62 @@
|
||||
<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="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"
|
||||
@@ -39,249 +65,264 @@
|
||||
>
|
||||
</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>
|
||||
<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';
|
||||
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
|
||||
townshipId: null,// 街道ID
|
||||
address: null,// 详细地址
|
||||
},
|
||||
regionShow: false,
|
||||
regionColumns: [],
|
||||
regionLoading: false,
|
||||
leftPath: "/pages/mine_package/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_package/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;
|
||||
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
|
||||
townshipId: null, // 街道ID
|
||||
address: null, // 详细地址
|
||||
},
|
||||
regionShow: false,
|
||||
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);
|
||||
}
|
||||
const ids = option.ids;
|
||||
if (ids && ids !== 0) {
|
||||
this.leftPath =
|
||||
"/pages/order_package/order_submit/order_submit?ids=" +
|
||||
ids +
|
||||
"&addressShow=true";
|
||||
} else if (detail) {
|
||||
this.leftPath = "";
|
||||
} else {
|
||||
this.leftPath = "/pages/mine_package/mine_address/mine_address";
|
||||
}
|
||||
},
|
||||
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.townshipId = data.townshipId;// 街道ID
|
||||
this.form.address = data.address;//
|
||||
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);
|
||||
}
|
||||
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;// 所属地区
|
||||
}
|
||||
},
|
||||
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) : [];
|
||||
console.log('选择地址的弹框', nation, province, city, area,status)
|
||||
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;
|
||||
}
|
||||
},
|
||||
// 选择地址的弹框
|
||||
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) : [];
|
||||
console.log("选择地址的弹框", nation, province, city, area, status);
|
||||
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);
|
||||
}
|
||||
})
|
||||
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);
|
||||
},
|
||||
// 提交地址
|
||||
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 (!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;
|
||||
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;
|
||||
console.log("参数--111-", leftPath)
|
||||
// 添加地址
|
||||
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.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;
|
||||
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;
|
||||
console.log("参数--111-", leftPath);
|
||||
|
||||
setTimeout(() => {
|
||||
uni.navigateTo({
|
||||
url: leftPath,
|
||||
})
|
||||
}, 2000)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
setTimeout(() => {
|
||||
if (leftPath) {
|
||||
uni.navigateTo({
|
||||
url: leftPath,
|
||||
});
|
||||
} else {
|
||||
uni.navigateBack();
|
||||
}
|
||||
}, 2000);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user