xsl/meida_applet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

【优化】订单发货方式切换逻辑

Browse Source
This commit is contained in:
puhui999
2024-08-06 16:09:53 +08:00
parent 1bc75b2ff5
commit 196a1b2235
4 changed files with 115 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/order/addressSelection.vue
+31 -12
View File
@@ -52,22 +52,41 @@
</template>
<script setup>
import { reactive } from 'vue';
import { computed } from 'vue';
import sheep from '@/sheep';
import { isEmpty } from 'lodash';
const state = reactive({
addressInfo: {}, // 选择的收货地址
deliveryType: 1, // 收货方式 1 - 快递配送；2 - 门店自提
isPickUp: true, // 门店自提是否开启 TODO puhui999: 默认开启，看看后端有开关的话接入
pickUpInfo: {}, // 选择的自提门店信息
const props = defineProps({
modelValue: {
type: Object,
default() {},
}
});
const emits = defineEmits(['update:modelValue']);
// computed 解决父子组件双向数据同步
const state = computed({
get(){
return new Proxy(props.modelValue, {
set(obj, name, val) {
emits('update:modelValue', {
...obj,
[name]: val,
});
return true;
}
})
},
set(val){
emits('update:modelValue', val);
}
})
// 选择地址
function onSelectAddress() {
let emitName = 'SELECT_ADDRESS'
let addressPage = '/pages/user/address/list'
if (state.deliveryType === 2){
if (state.value.deliveryType === 2){
emitName = 'SELECT_PICK_UP_INFO'
addressPage = '/pages/user/goods_details_store/index'
}
@@ -80,18 +99,18 @@
// 更改收货人地址&计算订单信息
async function changeConsignee(addressInfo = {}) {
if (!isEmpty(addressInfo)) {
if (state.deliveryType === 1){
state.addressInfo = addressInfo;
if (state.value.deliveryType === 1){
state.value.addressInfo = addressInfo;
}
if (state.deliveryType === 2){
state.pickUpInfo = addressInfo;
if (state.value.deliveryType === 2){
state.value.pickUpInfo = addressInfo;
}
}
}
// 收货方式切换
const switchDeliveryType = (type) =>{
state.deliveryType = type;
state.value.deliveryType = type;
}
</script>
pages/order/confirm.vue
+69 -30
View File
@@ -1,7 +1,7 @@
<template>
<s-layout title="确认订单">
<!-- 头部地址选择【配送地址】【自提地址】 -->
<AddressSelection></AddressSelection>
<AddressSelection v-model="addressState"></AddressSelection>
<!-- 商品信息 -->
<view class="order-card-box ss-m-b-14">
@@ -54,12 +54,37 @@
<text class="item-value ss-m-r-24">{{ state.orderInfo.score_amount }}</text>
</view>
</view>
<view class="order-item ss-flex ss-col-center ss-row-between">
<view class="order-item ss-flex ss-col-center ss-row-between" v-if='addressState.deliveryType === 1'>
<view class="item-title">运费</view>
<view class="ss-flex ss-col-center">
<text class="item-value ss-m-r-24">
<text class="item-value ss-m-r-24" v-if="state.orderInfo.price.deliveryPrice > 0">
+￥{{ fen2yuan(state.orderInfo.price.deliveryPrice) }}
</text>
<view class='item-value ss-m-r-24' v-else>免运费</view>
</view>
</view>
<view class="order-item ss-flex ss-col-center ss-row-between" v-if='addressState.deliveryType === 2'>
<view class="item-title">联系人</view>
<view class="ss-flex ss-col-center">
<uni-easyinput
maxlength="20"
placeholder="请填写您的联系姓名"
v-model="addressState.receiverName"
:inputBorder="false"
:clearable="false"
/>
</view>
</view>
<view class="order-item ss-flex ss-col-center ss-row-between" v-if='addressState.deliveryType === 2'>
<view class="item-title">联系电话</view>
<view class="ss-flex ss-col-center">
<uni-easyinput
maxlength="20"
placeholder="请填写您的联系电话"
v-model="addressState.receiverMobile"
:inputBorder="false"
:clearable="false"
/>
</view>
</view>
<!-- 优惠劵：只有 type = 0 普通订单（非拼团、秒杀、砍价），才可以使用优惠劵 -->
@@ -114,7 +139,7 @@
共{{ state.orderInfo.items.reduce((acc, item) => acc + item.count, 0) }}件
</view>
<view>合计：</view>
<view class="total-num text-red"> ￥{{ fen2yuan(state.orderInfo.price.payPrice) }} </view>
<view class="total-num text-red"> ￥{{ fen2yuan(state.orderInfo.price.payPrice) }}</view>
</view>
</view>
@@ -153,15 +178,13 @@
</template>
<script setup>
import { reactive } from 'vue';
import { reactive, ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import AddressSelection from '@/pages/order/addressSelection.vue';
import sheep from '@/sheep';
import { isEmpty } from 'lodash';
import OrderApi from '@/sheep/api/trade/order';
import CouponApi from '@/sheep/api/promotion/coupon';
import { fen2yuan } from '@/sheep/hooks/useGoods';
import { SubscribeTemplate } from '@/sheep/util/const';
const state = reactive({
orderPayload: {},
@@ -169,27 +192,19 @@
items: [], // 商品项列表
price: {}, // 价格信息
},
addressInfo: {}, // 选择的收货地址
showCoupon: false, // 是否展示优惠劵
couponInfo: [], // 优惠劵列表
showDiscount: false, // 是否展示营销活动
});
// 选择地址
function onSelectAddress() {
uni.$once('SELECT_ADDRESS', (e) => {
changeConsignee(e.addressInfo);
});
sheep.$router.go('/pages/user/address/list');
}
// 更改收货人地址&计算订单信息
async function changeConsignee(addressInfo = {}) {
if (!isEmpty(addressInfo)) {
state.addressInfo = addressInfo;
}
await getOrderInfo();
}
const addressState = ref({
addressInfo: {}, // 选择的收货地址
deliveryType: 1, // 收货方式 1 - 快递配送；2 - 门店自提
isPickUp: true, // 门店自提是否开启 TODO puhui999: 默认开启，看看后端有开关的话接入
pickUpInfo: {}, // 选择的自提门店信息
receiverName: '', // 收件人名称
receiverMobile: '', // 收件人手机
});
// 选择优惠券
async function onSelectCoupon(couponId) {
@@ -200,10 +215,28 @@
// 提交订单
function onConfirm() {
if (!state.addressInfo.id) {
if (addressState.value.deliveryType === 1 && !addressState.value.addressInfo.id) {
sheep.$helper.toast('请选择收货地址');
return;
}
if (addressState.value.deliveryType === 2) {
if (!addressState.value.pickUpInfo.id) {
sheep.$helper.toast('请选择自提门店地址');
return;
}
if (addressState.value.receiverName === '' || addressState.value.receiverMobile === '') {
sheep.$helper.toast('请填写联系人或联系人电话');
return;
}
if (!/^[\u4e00-\u9fa5\w]{2,16}$/.test(addressState.value.receiverName)) {
sheep.$helper.toast('请填写您的真实姓名');
return;
}
if (!/^1(3|4|5|7|8|9|6)\d{9}$/.test(addressState.value.receiverMobile)) {
sheep.$helper.toast('请填写正确的手机号');
return;
}
}
submitOrder();
}
@@ -213,12 +246,15 @@
items: state.orderPayload.items,
couponId: state.orderPayload.couponId,
remark: state.orderPayload.remark,
addressId: state.addressInfo.id,
deliveryType: 1, // TODO 芋艿：需要支持【门店自提】
deliveryType: addressState.value.deliveryType,
addressId: addressState.value.addressInfo.id, // 收件地址编号
pickUpStoreId: addressState.value.pickUpInfo.id,//自提门店编号
receiverName: addressState.value.receiverName,// 选择门店自提时，该字段为联系人名
receiverMobile: addressState.value.receiverMobile,// 选择门店自提时，该字段为联系人手机
pointStatus: false, // TODO 芋艿：需要支持【积分选择】
combinationActivityId: state.orderPayload.combinationActivityId,
combinationHeadId: state.orderPayload.combinationHeadId,
seckillActivityId: state.orderPayload.seckillActivityId
seckillActivityId: state.orderPayload.seckillActivityId,
});
if (code !== 0) {
return;
@@ -240,8 +276,11 @@
const { data, code } = await OrderApi.settlementOrder({
items: state.orderPayload.items,
couponId: state.orderPayload.couponId,
addressId: state.addressInfo.id,
deliveryType: 1, // TODO 芋艿：需要支持【门店自提】
deliveryType: addressState.value.deliveryType,
addressId: addressState.value.addressInfo.id, // 收件地址编号
pickUpStoreId: addressState.value.pickUpInfo.id,//自提门店编号
receiverName: addressState.value.receiverName,// 选择门店自提时，该字段为联系人名
receiverMobile: addressState.value.receiverMobile,// 选择门店自提时，该字段为联系人手机
pointStatus: false, // TODO 芋艿：需要支持【积分选择】
combinationActivityId: state.orderPayload.combinationActivityId,
combinationHeadId: state.orderPayload.combinationHeadId,
@@ -253,7 +292,7 @@
state.orderInfo = data;
// 设置收货地址
if (state.orderInfo.address) {
state.addressInfo = state.orderInfo.address;
addressState.value.addressInfo = state.orderInfo.address;
}
}