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

pages/order/addressSelection.vue

@@ -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

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

sheep/api/trade/order.js

@@ -1,4 +1,5 @@
 import request from '@/sheep/request';
+import { isEmpty } from '@/sheep/helper/utils';
 
 const OrderApi = {
   // 计算订单信息
@@ -13,6 +14,15 @@ const OrderApi = {
     if (!(data.addressId > 0)) {
       delete data2.addressId;
     }
+    if (!(data.pickUpStoreId > 0)) {
+      delete data2.pickUpStoreId;
+    }
+    if (isEmpty(data.receiverName)) {
+      delete data2.receiverName;
+    }
+    if (isEmpty(data.receiverMobile)) {
+      delete data2.receiverMobile;
+    }
     if (!(data.combinationActivityId > 0)) {
       delete data2.combinationActivityId;
     }

sheep/helper/utils.js

@@ -23,6 +23,10 @@ export function isString(value) {
 }
 
 export function isEmpty(value) {
+  if (value === '' || value === undefined || value === null){
+    return true;
+  }
+
   if (isArray(value)) {
     return value.length === 0;
   }
@@ -31,7 +35,7 @@ export function isEmpty(value) {
     return Object.keys(value).length === 0;
   }
 
-  return value === '' || value === undefined || value === null;
+  return false
 }
 
 export function isBoolean(value) {