yudao
/
mall-uniapp
mirror of https://gitee.com/yudaocode/yudao-mall-uniapp.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

【功能完善】下单界面，接入门店自提的开关

pull/98/MERGE
YunaiV 2024-09-13 19:21:22 +08:00
parent 55131bf0c3
commit 49e8b9f5c3
2 changed files with 75 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
pages/order/addressSelection.vue
View File

@ -2,51 +2,68 @@
<template>
<view class="allAddress" :style="state.isPickUp ? '' : 'padding-top:10rpx;'">
<view class="nav flex flex-wrap">
<view class="item font-color" :class="state.deliveryType === 1 ? 'on' : 'on2'"
@tap="switchDeliveryType(1)" v-if='state.isPickUp' />
<view class="item font-color" :class="state.deliveryType === 2 ? 'on' : 'on2'"
@tap="switchDeliveryType(2)" v-if='state.isPickUp' />
<view
class="item font-color"
:class="state.deliveryType === 1 ? 'on' : 'on2'"
@tap="switchDeliveryType(1)"
v-if="state.isPickUp"
/>
<view
class="item font-color"
:class="state.deliveryType === 2 ? 'on' : 'on2'"
@tap="switchDeliveryType(2)"
v-if="state.isPickUp"
/>
</view>
<!-- 情况一：收货地址的选择 -->
<view class='address flex flex-wrap flex-center ss-row-between' @tap='onSelectAddress' v-if='state.deliveryType === 1'
:style="state.isPickUp ? '':'border-top-left-radius: 14rpx;border-top-right-radius: 14rpx;'">
<view class='addressCon' v-if="state.addressInfo.name">
<view class='name'>{{ state.addressInfo.name }}
<text class='phone'>{{ state.addressInfo.mobile }}</text>
<view
class="address flex flex-wrap flex-center ss-row-between"
@tap="onSelectAddress"
v-if="state.deliveryType === 1"
:style="state.isPickUp ? '' : 'border-top-left-radius: 14rpx;border-top-right-radius: 14rpx;'"
>
<view class="addressCon" v-if="state.addressInfo.name">
<view class="name"
>{{ state.addressInfo.name }}
<text class="phone">{{ state.addressInfo.mobile }}</text>
</view>
<view class="flex flex-wrap">
<text class='default font-color' v-if="state.addressInfo.defaultStatus">[默认]</text>
<text class="line2">{{ state.addressInfo.areaName }} {{ state.addressInfo.detailAddress }}</text>
<text class="default font-color" v-if="state.addressInfo.defaultStatus">[默认]</text>
<text class="line2"
>{{ state.addressInfo.areaName }} {{ state.addressInfo.detailAddress }}</text
>
</view>
</view>
<view class='addressCon' v-else>
<view class='setaddress'>设置收货地址</view>
<view class="addressCon" v-else>
<view class="setaddress">设置收货地址</view>
</view>
<view class='iconfont'>
<view class="iconfont">
<view class="ss-rest-button">
<text class="_icon-forward" />
</view>
</view>
</view>
<!-- 情况二：门店的选择 -->
<view class='address flex flex-wrap flex-center ss-row-between' v-else @tap="onSelectAddress">
<view class='addressCon' v-if="state.pickUpInfo.name">
<view class='name'>{{ state.pickUpInfo.name }}
<text class='phone'>{{ state.pickUpInfo.phone }}</text>
<view class="address flex flex-wrap flex-center ss-row-between" v-else @tap="onSelectAddress">
<view class="addressCon" v-if="state.pickUpInfo.name">
<view class="name"
>{{ state.pickUpInfo.name }}
<text class="phone">{{ state.pickUpInfo.phone }}</text>
</view>
<view class="line1"> {{ state.pickUpInfo.areaName }}{{ ', ' + state.pickUpInfo.detailAddress }}
<view class="line1">
{{ state.pickUpInfo.areaName }}{{ ', ' + state.pickUpInfo.detailAddress }}
</view>
</view>
<view class='addressCon' v-else>
<view class='setaddress'>选择自提门店</view>
<view class="addressCon" v-else>
<view class="setaddress">选择自提门店</view>
</view>
<view class='iconfont'>
<view class="iconfont">
<view class="ss-rest-button">
<text class="_icon-forward" />
</view>
</view>
</view>
<view class='line'>
<view class="line">
<image :src="sheep.$url.static('/static/images/line.png', 'local')" />
</view>
</view>
@ -61,7 +78,7 @@
modelValue: {
type: Object,
default() {},
}
},
});
const emits = defineEmits(['update:modelValue']);
@ -75,21 +92,21 @@
[name]: val,
});
return true;
}
})
},
});
},
set(val) {
emits('update:modelValue', val);
}
})
},
});
// 选择地址
function onSelectAddress() {
let emitName = 'SELECT_ADDRESS'
let emitName = 'SELECT_ADDRESS';
let addressPage = '/pages/user/address/list?type=select';
if (state.value.deliveryType === 2) {
emitName = 'SELECT_PICK_UP_INFO'
addressPage = '/pages/user/goods_details_store/index'
emitName = 'SELECT_PICK_UP_INFO';
addressPage = '/pages/user/goods_details_store/index';
}
uni.$once(emitName, (e) => {
changeConsignee(e.addressInfo);
@ -112,12 +129,12 @@
// 收货方式切换
const switchDeliveryType = (type) => {
state.value.deliveryType = type;
}
};
</script>
<style scoped lang="scss">
.allAddress .font-color {
color: #E93323!important
color: #e93323 !important;
}
.line2 {
width: 504rpx;
@ -202,7 +219,7 @@
.allAddress .nav .item.on::before {
position: absolute;
bottom: 0;
content: "快递配送";
content: '快递配送';
font-size: 28rpx;
display: block;
height: 0;
@ -217,7 +234,7 @@
}
.allAddress .nav .item:nth-of-type(2).on::before {
content: "到店自提";
content: '到店自提';
border-width: 0 0 80rpx 20rpx;
border-radius: 36rpx 14rpx 0 0;
}
@ -229,7 +246,7 @@
.allAddress .nav .item.on2::before {
position: absolute;
bottom: 0;
content: "到店自提";
content: '到店自提';
font-size: 28rpx;
display: block;
height: 0;
@ -243,7 +260,7 @@
}
.allAddress .nav .item:nth-of-type(1).on2::before {
content: "快递配送";
content: '快递配送';
border-width: 0 60rpx 60rpx 0;
border-radius: 14rpx 36rpx 0 0;
}

8
pages/order/confirm.vue
View File

@ -212,6 +212,7 @@
import AddressSelection from '@/pages/order/addressSelection.vue';
import sheep from '@/sheep';
import OrderApi from '@/sheep/api/trade/order';
import TradeConfigApi from '@/sheep/api/trade/config';
import { fen2yuan } from '@/sheep/hooks/useGoods';
const state = reactive({
@ -230,7 +231,7 @@
const addressState = ref({
addressInfo: {}, // 选择的收货地址
deliveryType: 1, // 收货方式：1-快递配送，2-门店自提
isPickUp: true, // 门店自提是否开启 TODO puhui999: 默认开启，看看后端有开关的话接入
isPickUp: true, // 门店自提是否开启
pickUpInfo: {}, // 选择的自提门店信息
receiverName: '', // 收件人名称
receiverMobile: '', // 收件人手机
@ -343,6 +344,11 @@
}
state.orderPayload = JSON.parse(options.data);
await getOrderInfo();
// 获取交易配置
const { data, code } = await TradeConfigApi.getTradeConfig();
if (code === 0) {
addressState.value.isPickUp = data.deliveryPickUpEnabled;
}
});
// 使用 watch 监听地址和配送方式的变化