charles/frontend-app
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

feat: 收货地址

Browse Source
This commit is contained in:
黄泽群
2025-10-28 14:24:47 +08:00
committed by charles
parent bec363fcbf
commit 7f42cb7859
4 changed files with 1499 additions and 1174 deletions
Download Patch File Download Diff File Expand all files Collapse all files
api/cart.js
+8
View File
@@ -64,3 +64,11 @@ export function settlementOrder(data) {
data, data,
}); });
} }
export function getPostageQuery(data) {
return request({
url: "/cart/getPostage",
method: "post",
data,
});
}
components/address.vue
+3
View File
@@ -35,6 +35,9 @@ export default {
mounted() { mounted() {
this.getAddressList(); this.getAddressList();
}, },
activated () {
this.getAddressList();
},
methods: { methods: {
// 添加地址 // 添加地址
jumpAddAddress() { jumpAddAddress() {
pages/mine_package/mine_address_add/mine_address_add.vue
+304 -263
View File
@@ -1,36 +1,62 @@
<template> <template>
<view class="address_add_warp"> <view class="address_add_warp">
<Header :leftTitle="$t('address.add.title')" left-path-type="navigateTo" :leftPath="leftPath" /> <Header
<view class="address_form"> :leftTitle="$t('address.add.title')"
<view class="add_form_item add_form_item_but"> left-path-type="navigateTo"
<view class="add_form_title">收货人</view> :leftPath="leftPath"
<up-input placeholder="收货人" border="surround" v-model="form.name" :customStyle="{ />
'border': '0rpx', <view class="address_form">
}"></up-input> <view class="add_form_item add_form_item_but">
</view> <view class="add_form_title">收货人</view>
<view class="add_form_item add_form_item_but"> <up-input
<view class="add_form_title">手机号码</view> placeholder="收货人"
<up-input placeholder="请填写收货人手机号" border="surround" v-model="form.mobile" :customStyle="{ border="surround"
'border': '0rpx', v-model="form.name"
}" type="number"></up-input> :customStyle="{
</view> border: '0rpx',
<view class="add_form_item add_form_item_but"> }"
<view class="add_form_title">所在地区</view> ></up-input>
<view class="region_warp" @click="regionShowCheck(true)"> </view>
<view style="color: #808080;margin-left: 22rpx;font-size: 28rpx;">{{ (form.regionStr && <view class="add_form_item add_form_item_but">
form.regionStr.join("/")) || "所在地区" }}</view> <view class="add_form_title">手机号码</view>
<up-image src="/static/common/right_soild.png" width="14" height="14" bgColor="#f1f6ff00"></up-image> <up-input
</view> placeholder="请填写收货人手机号"
</view> border="surround"
<view class="add_form_item"> v-model="form.mobile"
<view class="add_form_title">详细地址</view> :customStyle="{
<up-input placeholder="门牌号、小区、楼栋号、单元室等" border="surround" v-model="form.address" :customStyle="{ border: '0rpx',
'border': '0rpx', }"
'height': '100rpx', type="number"
}"></up-input> ></up-input>
</view> </view>
</view> <view class="add_form_item add_form_item_but">
<!-- <view class="address_default"> <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> <view class="title">设为默认地址</view>
<up-switch <up-switch
v-model="form.isDefault" v-model="form.isDefault"
@@ -39,249 +65,264 @@
> >
</up-switch> </up-switch>
</view> --> </view> -->
<view class="add_but" @click="addAddress"> <view class="add_but" @click="addAddress"> 保存地址 </view>
保存地址 <up-toast ref="uToastRef"></up-toast>
</view> <up-picker
<up-toast ref="uToastRef"></up-toast> :show="regionShow"
<up-picker :show="regionShow" ref="uPickerRef" :columns="regionColumns" @confirm="regionConfirm" ref="uPickerRef"
:loading="regionLoading" @change="regionChange" keyName="label" itemHeight="34" @cancel="regionShow = false" :columns="regionColumns"
@close="regionShow = false"></up-picker> @confirm="regionConfirm"
</view> :loading="regionLoading"
@change="regionChange"
keyName="label"
itemHeight="34"
@cancel="regionShow = false"
@close="regionShow = false"
></up-picker>
</view>
</template> </template>
<script> <script>
import { editAddress, getAddressDetail } from '@/api/address.js' import { editAddress, getAddressDetail } from "@/api/address.js";
import { getCascadeRegion } from '@/api/common.js' import { getCascadeRegion } from "@/api/common.js";
import Header from '@/components/header.vue'; import Header from "@/components/header.vue";
export default { export default {
components: { Header }, components: { Header },
data() { data() {
return { return {
form: { form: {
id: 0, id: 0,
name: null,// 收货人 name: null, // 收货人
mobile: null,// 手机号码 mobile: null, // 手机号码
regionStr: null,// 所属地区 regionStr: null, // 所属地区
countryId: null,// 国家ID countryId: null, // 国家ID
provinceId: null,// 省份ID provinceId: null, // 省份ID
cityId: null,// 城市ID cityId: null, // 城市ID
areaId: null,// 区域ID areaId: null, // 区域ID
townshipId: null,// 街道ID townshipId: null, // 街道ID
address: null,// 详细地址 address: null, // 详细地址
}, },
regionShow: false, regionShow: false,
regionColumns: [], regionColumns: [],
regionLoading: false, regionLoading: false,
leftPath: "/pages/mine_package/mine_address/mine_address", // leftPath: "/pages/mine_package/mine_address/mine_address",
} leftPath: "",
}, };
onLoad(option) { },
const id = option.id; onLoad(option) {
if (id && id !== 0) { const id = option.id;
this.getById(id); const detail = option.detail;
} if (id && id !== 0) {
const ids = option.ids; this.getById(id);
if (ids && ids !== 0) { }
this.leftPath = "/pages/order_package/order_submit/order_submit?ids=" + ids + "&addressShow=true"; const ids = option.ids;
} if (ids && ids !== 0) {
}, this.leftPath =
methods: { "/pages/order_package/order_submit/order_submit?ids=" +
/** ids +
* 用作编辑 "&addressShow=true";
*/ } else if (detail) {
async getById(id) { this.leftPath = "";
const parasm = { } else {
id, this.leftPath = "/pages/mine_package/mine_address/mine_address";
} }
const resp = await getAddressDetail(parasm); },
if (resp && resp.bizcode === 100) { methods: {
const data = resp.data; /**
* 用作编辑
this.form.id = id; */
this.form.name = data.name;// 收货人 async getById(id) {
this.form.mobile = data.phone;// 手机号码 const parasm = {
this.form.countryId = data.countryId;// 国家ID id,
this.form.provinceId = data.provinceId;// 省份ID };
this.form.cityId = data.cityId;// 城市ID const resp = await getAddressDetail(parasm);
this.form.areaId = data.areaId;// 区域ID if (resp && resp.bizcode === 100) {
this.form.townshipId = data.townshipId;// 街道ID const data = resp.data;
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;// 所属地区 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 = [];
async regionShowCheck(status) { if (data.countryName) {
if (status) { regionStr.push(data.countryName);
const nation = await this.getRegion(0); }
const province = nation && nation.length !== 0 ? await this.getRegion(nation[0].id) : []; if (data.provinceName) {
const city = province && province.length !== 0 ? await this.getRegion(province[0].id) : []; regionStr.push(data.provinceName);
const area = city && city.length !== 0 ? await this.getRegion(city[0].id) : []; }
console.log('选择地址的弹框', nation, province, city, area,status) if (data.cityName) {
this.regionColumns = [nation, province, city, area,]; regionStr.push(data.cityName);
} else { }
this.regionColumns = [[], [], [], []]; if (data.areaName) {
} regionStr.push(data.areaName);
this.regionShow = status; }
}, if (data.townshipName) {
// 数据交互 regionStr.push(data.townshipName);
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;
}
},
// 提交地址 this.form.regionStr = regionStr; // 所属地区
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() { async regionShowCheck(status) {
const params = { if (status) {
...this.form, const nation = await this.getRegion(0);
} const province =
if (!params.name) { nation && nation.length !== 0
this.$refs.uToastRef.show({ ? await this.getRegion(nation[0].id)
type: 'error', : [];
message: "请输入收货人", const city =
}); province && province.length !== 0
return; ? await this.getRegion(province[0].id)
} : [];
if (!params.mobile) { const area =
this.$refs.uToastRef.show({ city && city.length !== 0 ? await this.getRegion(city[0].id) : [];
type: 'error', console.log("选择地址的弹框", nation, province, city, area, status);
message: "请输入收货人手机号", this.regionColumns = [nation, province, city, area];
}); } else {
return; this.regionColumns = [[], [], [], []];
} }
if (!params.regionStr) { this.regionShow = status;
this.$refs.uToastRef.show({ },
type: 'error', // 数据交互
message: "请选择所在地区", async getRegion(pId) {
}); this.regionLoading = true;
return; const params = {
} parentId: pId,
if (!params.address) { };
this.$refs.uToastRef.show({ const resp = await getCascadeRegion(params);
type: 'error', const arrOption = [];
message: "请输入详细地址", if (resp.bizcode === 100) {
}); const data = resp.data;
return; if (data && data.length !== 0) {
} data.map((item) => {
if (!params.id || params.id === 0) { arrOption.push({
delete params.id; id: item.id,
} label: item.name,
if (!params.townshipId || params.townshipId === 0) { pId: pId,
delete params.townshipId; });
} });
if (!params.areaId || params.areaId === 0) { }
delete params.areaId; }
} this.regionLoading = false;
if (!params.cityId || params.cityId === 0) { return arrOption;
delete params.cityId; },
} // 地区改变
if (!params.provinceId || params.provinceId === 0) { async regionChange(e) {
delete params.provinceId; const { columnIndex, index, picker } = e;
} const selectData = this.regionColumns[columnIndex][index];
if (!params.countryId || params.countryId === 0) { const resultData = await this.getRegion(selectData.id);
delete params.countryId; if (resultData && resultData.length !== 0) {
} const index = columnIndex + 1;
delete params.regionStr; this.regionColumns[index] = resultData;
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({ regionConfirm(e) {
url: leftPath, const { columnIndex, value, values, index } = e;
}) const regionStr = [];
}, 2000) 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);
setTimeout(() => {
} if (leftPath) {
} uni.navigateTo({
url: leftPath,
});
} else {
uni.navigateBack();
}
}, 2000);
}
},
},
};
</script> </script>
<style lang="scss" scoped></style> <style lang="scss" scoped></style>
pages/other_package/productInfo/productInfo.vue
+1184 -911
View File
File diff suppressed because one or more lines are too long