【功能完善】下单界面，接入门店自提的开关
YunaiV
parent
55131bf0c3
commit
49e8b9f5c3
|
|
@ -1,52 +1,69 @@
|
|||
<!-- 下单界面，收货地址 or 自提门店的选择组件 -->
|
||||
<template>
|
||||
<view class="allAddress" :style="state.isPickUp ? '':'padding-top:10rpx;'">
|
||||
<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>
|
||||
<view class="line1"> {{ state.pickUpInfo.areaName }}{{ ', ' + state.pickUpInfo.detailAddress }}
|
||||
</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>
|
||||
<view class='addressCon' v-else>
|
||||
<view class='setaddress'>选择自提门店</view>
|
||||
<view class="line1">
|
||||
{{ state.pickUpInfo.areaName }}{{ ', ' + state.pickUpInfo.detailAddress }}
|
||||
</view>
|
||||
<view class='iconfont'>
|
||||
<view class="ss-rest-button">
|
||||
<text class="_icon-forward" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="addressCon" v-else>
|
||||
<view class="setaddress">选择自提门店</view>
|
||||
</view>
|
||||
<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,13 +78,13 @@
|
|||
modelValue: {
|
||||
type: Object,
|
||||
default() {},
|
||||
}
|
||||
},
|
||||
});
|
||||
const emits = defineEmits(['update:modelValue']);
|
||||
|
||||
// computed 解决父子组件双向数据同步
|
||||
const state = computed({
|
||||
get(){
|
||||
get() {
|
||||
return new Proxy(props.modelValue, {
|
||||
set(obj, name, val) {
|
||||
emits('update:modelValue', {
|
||||
|
|
@ -75,21 +92,21 @@
|
|||
[name]: val,
|
||||
});
|
||||
return true;
|
||||
}
|
||||
})
|
||||
},
|
||||
});
|
||||
},
|
||||
set(val){
|
||||
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'
|
||||
if (state.value.deliveryType === 2) {
|
||||
emitName = 'SELECT_PICK_UP_INFO';
|
||||
addressPage = '/pages/user/goods_details_store/index';
|
||||
}
|
||||
uni.$once(emitName, (e) => {
|
||||
changeConsignee(e.addressInfo);
|
||||
|
|
@ -100,26 +117,26 @@
|
|||
// 更改收货人地址&计算订单信息
|
||||
async function changeConsignee(addressInfo = {}) {
|
||||
if (!isEmpty(addressInfo)) {
|
||||
if (state.value.deliveryType === 1){
|
||||
if (state.value.deliveryType === 1) {
|
||||
state.value.addressInfo = addressInfo;
|
||||
}
|
||||
if (state.value.deliveryType === 2){
|
||||
if (state.value.deliveryType === 2) {
|
||||
state.value.pickUpInfo = addressInfo;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 收货方式切换
|
||||
const switchDeliveryType = (type) =>{
|
||||
const switchDeliveryType = (type) => {
|
||||
state.value.deliveryType = type;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.allAddress .font-color{
|
||||
color: #E93323!important
|
||||
.allAddress .font-color {
|
||||
color: #e93323 !important;
|
||||
}
|
||||
.line2{
|
||||
.line2 {
|
||||
width: 504rpx;
|
||||
}
|
||||
.textR {
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 监听地址和配送方式的变化
|
||||
|
|
|
|||
Loading…
Reference in New Issue