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

pages/order/addressSelection.vue

@@ -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 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,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;
   }

pages/order/confirm.vue

@@ -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 监听地址和配送方式的变化