feat:商品卡片添加配送方式，支付添加货到付款

pages/commission/goods.vue

@@ -12,7 +12,7 @@
         priceColor="#333"
         @tap="sheep.$router.go('/pages/goods/index', { id: item.id })"
       >
-        <template #bottom>
+        <template #rightBottom>
           <view class="ss-flex ss-row-between">
             <view class="commission-num">预计佣金：￥{{ item.commission }}</view>
             <button

pages/commission/order.vue

@@ -111,7 +111,7 @@
           :price="item.order_item.goods_price"
           :num="item.order_item.goods_num"
         >
-          <template #bottom>
+          <template #rightBottom>
             <view class="ss-flex commission-box ss-row-between ss-m-t-10">
               <view class="ss-flex">
                 <text class="name">佣金：</text>

pages/order/confirm.vue

@@ -1,11 +1,15 @@
 <template>
   <s-layout title="确认订单">
-    <view class="bg-white address-box ss-m-b-14 ss-r-b-20" @tap="onSelectAddress">
+    <view
+      class="bg-white address-box ss-m-b-14 ss-r-b-10"
+      @tap="onSelectAddress"
+      v-if="state.orderInfo.need_address === 1"
+    >
       <s-address-item :item="state.addressInfo" :hasBorderBottom="false">
         <view class="ss-rest-button"><text class="_icon-forward"></text></view>
       </s-address-item>
     </view>
-    <view class="bg-white order-card-box ss-m-b-14">
+    <view class="order-card-box ss-m-b-14">
       <s-goods-item
         v-for="item in state.orderInfo.goods_list"
         :key="item.goods_id"
@@ -14,15 +18,19 @@
         :skuText="item.current_sku_price?.goods_sku_text"
         :price="item.current_sku_price.price"
         :num="item.goods_num"
-      ></s-goods-item>
+        marginBottom="10"
+      >
+        <template #top>
+          <view class="order-item ss-flex ss-col-center ss-row-between ss-p-x-20 bg-white">
+            <view class="item-title">配送方式</view>
+            <view class="ss-flex ss-col-center">
+              <text class="item-value">{{ item.dispatch_type_text }}</text>
+            </view>
+          </view>
+        </template>
+      </s-goods-item>
 
-      <view class="order-item ss-flex ss-col-center ss-row-between ss-p-x-20">
-        <view class="item-title">配送方式</view>
-        <view class="ss-flex ss-col-center">
-          <text class="item-value">物流快递</text>
-        </view>
-      </view>
-      <view class="order-item ss-flex ss-col-center ss-row-between ss-p-x-20">
+      <view class="order-item ss-flex ss-col-center ss-row-between ss-p-x-20 bg-white ss-r-10">
         <view class="item-title">订单备注</view>
         <view class="ss-flex ss-col-center">
           <uni-easyinput
@@ -36,7 +44,7 @@
       </view>
     </view>
     <!-- 合计 -->
-    <view class="bg-white total-card-box ss-p-20 ss-m-b-14">
+    <view class="bg-white total-card-box ss-p-20 ss-m-b-14 ss-r-10">
       <view class="total-box-content border-bottom">
         <view class="order-item ss-flex ss-col-center ss-row-between">
           <view class="item-title">商品金额</view>
@@ -225,7 +233,7 @@
 
   // 提交订单/立即兑换
   function onConfirm() {
-    if (!state.orderPayload.address_id) {
+    if (!state.orderPayload.address_id && state.orderInfo.need_address === 1) {
       sheep.$helper.toast('请选择收货地址');
       return;
     }

pages/order/detail.vue

@@ -49,17 +49,17 @@
     </view>
 
     <!-- 收货地址 -->
-    <view class="order-address-box">
+    <view class="order-address-box" v-if="state.orderInfo.address">
       <view class="ss-flex ss-col-center">
         <text class="address-username">
-          {{ state.orderInfo.address?.consignee }}
+          {{ state.orderInfo.address.consignee }}
         </text>
-        <text class="address-phone">{{ state.orderInfo.address?.mobile }}</text>
+        <text class="address-phone">{{ state.orderInfo.address.mobile }}</text>
       </view>
       <view class="address-detail">{{ addressText }}</view>
     </view>
 
-    <view class="detail-goods">
+    <view class="detail-goods" :style="[{ marginTop: state.orderInfo.address ? '0' : '-40rpx' }]">
       <!-- 订单信息 -->
       <view class="order-list" v-for="item in state.orderInfo.items" :key="item.goods_id">
         <view class="order-card">
@@ -72,6 +72,14 @@
             :score="state.orderInfo.score_amount"
             :num="item.goods_num"
           >
+            <template #top>
+              <view class="order-item ss-flex ss-col-center ss-row-between ss-p-x-20 bg-white">
+                <view class="item-title">配送方式</view>
+                <view class="ss-flex ss-col-center">
+                  <text class="item-value">{{ item.dispatch_type_text }}</text>
+                </view>
+              </view>
+            </template>
             <template #priceSuffix>
               <button class="ss-reset-button tag-btn" v-if="item.status_text">
                 {{ item.status_text }}
@@ -95,7 +103,7 @@
           <text class="title">下单时间：</text>
           <text class="detail">{{ state.orderInfo.create_time }}</text>
         </view>
-        <view class="notice-item">
+        <view class="notice-item" v-if="state.orderInfo.paid_time">
           <text class="title">支付时间：</text>
           <text class="detail">{{ state.orderInfo.paid_time || '-' }}</text>
         </view>
@@ -140,17 +148,27 @@
       </view>
       <view class="notice-item all-rpice-item ss-flex ss-m-t-20">
         <text class="title">{{
-          ['unpaid', 'cancel', 'closed'].includes(state.orderInfo.status) ? '需付款' : '已付款'
+          ['unpaid', 'cancel', 'closed','pending'].includes(state.orderInfo.status) ? '需付款' : '已付款'
         }}</text>
         <text class="detail all-price" v-if="Number(state.orderInfo.pay_fee) > 0"
           >￥{{ state.orderInfo.pay_fee }}</text
         >
         <view
-          v-if="state.orderInfo.score_amount && Number(state.orderInfo.pay_fee) > 0 && !['unpaid', 'cancel', 'closed'].includes(state.orderInfo.status)"
+          v-if="
+            state.orderInfo.score_amount &&
+            Number(state.orderInfo.pay_fee) > 0 &&
+            !['unpaid', 'cancel', 'closed'].includes(state.orderInfo.status)
+          "
           class="detail all-price"
           >+</view
         >
-        <view class="price-text ss-flex ss-col-center" v-if="state.orderInfo.score_amount && !['unpaid', 'cancel', 'closed'].includes(state.orderInfo.status)">
+        <view
+          class="price-text ss-flex ss-col-center"
+          v-if="
+            state.orderInfo.score_amount &&
+            !['unpaid', 'cancel', 'closed'].includes(state.orderInfo.status)
+          "
+        >
           <image
             :src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
             class="score-img"

pages/pay/index.vue

@@ -13,17 +13,33 @@
       </view>
       <view class="modal-content ss-flex-1">
         <view class="pay-title ss-p-l-30 ss-m-y-30">选择支付方式</view>
-        <view class="pay-type-item border-bottom" v-for="item in payMethods" :key="item.title">
+        <view
+          class="pay-type-item border-bottom"
+          v-for="item in state.payMethods"
+          :key="item.title"
+        >
           <view
             class="pay-item ss-flex ss-col-center ss-row-between ss-p-x-30"
+            :class="{ 'disabled-pay-item': item.disabled }"
             v-if="
               allowedPayment.includes(item.value) &&
               !(state.orderType === 'recharge' && item.value === 'money')
             "
-            @tap="state.payment = item.value"
+            @tap="onTapPay(item.disabled, item.value)"
           >
             <view class="ss-flex ss-col-center">
-              <image class="pay-icon" :src="sheep.$url.static(item.icon)" mode="aspectFit"></image>
+              <image
+                class="pay-icon"
+                v-if="item.disabled"
+                :src="sheep.$url.static('/assets/addons/shopro/frontend_img/pay/cod_disabled.png')"
+                mode="aspectFit"
+              ></image>
+              <image
+                class="pay-icon"
+                v-else
+                :src="sheep.$url.static(item.icon)"
+                mode="aspectFit"
+              ></image>
               <text class="pay-title">{{ item.title }}</text>
             </view>
             <view class="check-box ss-flex ss-col-center ss-p-l-10">
@@ -75,6 +91,7 @@
     payment: '',
     orderInfo: {},
     payStatus: 0, // 0=检测支付环境, -2=未查询到支付单信息， -1=支付已过期， 1=待支付，2=订单已支付
+    payMethods: [],
   });
   const allowedPayment = computed(() => sheep.$store('app').platform.payment);
   const payMethods = [
@@ -82,21 +99,31 @@
       icon: '/static/img/shop/wechat_pay.png',
       title: '微信支付',
       value: 'wechat',
+      disabled: false,
     },
     {
       icon: '/static/img/shop/ali_pay.png',
       title: '支付宝支付',
       value: 'alipay',
+      disabled: false,
     },
     {
       icon: '/static/img/shop/wallet_pay.png',
       title: '余额支付',
       value: 'money',
+      disabled: false,
     },
     {
       icon: '/static/img/shop/apple_pay.png',
       title: 'Apple Pay',
       value: 'apple',
+      disabled: false,
+    },
+    {
+      icon: '/assets/addons/shopro/frontend_img/pay/cod.png',
+      title: '线下支付',
+      value: 'offline',
+      disabled: false,
     },
   ];
 
@@ -151,19 +178,48 @@
     state.payStatus = 2;
   }
 
+  function onTapPay(disabled, value) {
+    if (disabled) {
+      state.payment = '';
+    } else {
+      state.payment = value;
+    }
+  }
+
   async function setRechargeOrder(id) {
     const { data, error } = await sheep.$api.trade.order(id);
     if (error === 0) {
       state.orderInfo = data;
+      payMethods.forEach((item, index, array) => {
+        if (item.value === 'offline') {
+          array.splice(index, 1);
+        }
+      });
+      state.payMethods = payMethods;
       checkPayStatus();
     } else {
       state.payStatus = -2;
     }
   }
+
   async function setGoodsOrder(id) {
     const { data, error } = await sheep.$api.order.detail(id);
     if (error === 0) {
       state.orderInfo = data;
+      if (state.orderInfo.ext.offline_status === 'none') {
+        payMethods.forEach((item, index, array) => {
+          if (item.value === 'offline') {
+            array.splice(index, 1);
+          }
+        });
+      } else if (state.orderInfo.ext.offline_status === 'disabled') {
+        payMethods.forEach((item) => {
+          if (item.value === 'offline') {
+            item.disabled = true;
+          }
+        });
+      }
+      state.payMethods = payMethods;
       checkPayStatus();
     } else {
       state.payStatus = -2;
@@ -259,6 +315,11 @@
       .pay-item {
         height: 86rpx;
       }
+      .disabled-pay-item {
+        .pay-title {
+          color: #999999;
+        }
+      }
 
       .userInfo-money {
         font-size: 26rpx;

pages/pay/result.vue

@@ -13,7 +13,9 @@
         v-if="['failed', 'closed'].includes(payResult)"
         :src="sheep.$url.static('/static/img/shop/order/order_paty_fail.gif')"
       ></image>
-      <view class="tip-text ss-m-b-30" v-if="payResult == 'success'">支付成功</view>
+      <view class="tip-text ss-m-b-30" v-if="payResult == 'success'">{{
+        state.orderInfo.pay_mode === 'offline' ? '下单成功' : '支付成功'
+      }}</view>
       <view class="tip-text ss-m-b-30" v-if="payResult == 'failed'">支付失败</view>
       <view class="tip-text ss-m-b-30" v-if="payResult == 'closed'">该订单已关闭</view>
       <view class="tip-text ss-m-b-30" v-if="payResult == 'waiting'">检测支付结果...</view>

sheep/components/s-goods-item/s-goods-item.vue

@@ -1,7 +1,10 @@
 <template>
+  <view>
+    <slot name="top"></slot>
+  </view>
   <view
     class="ss-order-card-warp ss-flex ss-col-stretch ss-row-between bg-white"
-    :style="[{ borderRadius: radius + 'rpx' }]"
+    :style="[{ borderRadius: radius + 'rpx', marginBottom: marginBottom + 'rpx' }]"
   >
     <view class="img-box ss-m-r-24">
       <image class="order-img" :src="sheep.$url.cdn(img)" mode="aspectFill"></image>
@@ -39,8 +42,8 @@
       <view class="tool-box">
         <slot name="tool"></slot>
       </view>
-      <view class="bottom-box">
-        <slot name="bottom"></slot>
+      <view>
+        <slot name="rightBottom"></slot>
       </view>
     </view>
   </view>
@@ -98,6 +101,10 @@
       type: [String],
       default: '',
     },
+    marginBottom: {
+      type: [String],
+      default: '',
+    },
   });
   const skuString = computed(() => {
     if (!props.skuText) {

sheep/platform/pay.js

@@ -7,7 +7,7 @@ import { getRootUrl } from '@/sheep/helper';
 /**
  * 支付
  *
- * @param {String} payment = ['wechat','alipay','wallet']  	- 支付方式
+ * @param {String} payment = ['wechat','alipay','wallet','offline']  	- 支付方式
  * @param {String} orderType = ['goods','recharge','groupon']  	- 订单类型
  * @param {String} orderSN					- 订单号
  */
@@ -32,6 +32,9 @@ export default class SheepPay {
         money: () => {
           this.moneyPay();
         },
+        offline: () => {
+          this.offlinePay();
+        }
       },
       WechatMiniProgram: {
         wechat: () => {
@@ -43,6 +46,9 @@ export default class SheepPay {
         money: () => {
           this.moneyPay();
         },
+        offline: () => {
+          this.offlinePay();
+        }
       },
       App: {
         wechat: () => {
@@ -54,6 +60,9 @@ export default class SheepPay {
         money: () => {
           this.moneyPay();
         },
+        offline: () => {
+          this.offlinePay();
+        }
       },
       H5: {
         wechat: () => {
@@ -65,6 +74,9 @@ export default class SheepPay {
         money: () => {
           this.moneyPay();
         },
+        offline: () => {
+          this.offlinePay();
+        }
       },
     };
     return payAction[sheep.$platform.name][this.payment]();
@@ -122,9 +134,8 @@ export default class SheepPay {
   async wechatWapPay() {
     const { error, data } = await this.prepay();
     if (error === 0) {
-      const redirect_url = `${getRootUrl()}pages/pay/result?orderSN=${this.orderSN}&payment=${
-        this.payment
-      }`;
+      const redirect_url = `${getRootUrl()}pages/pay/result?orderSN=${this.orderSN}&payment=${this.payment
+        }`;
       location.href = `${data.pay_data.h5_url}&redirect_url=${encodeURIComponent(redirect_url)}`;
     }
   }
@@ -133,9 +144,8 @@ export default class SheepPay {
   async redirectPay() {
     let { error, data } = await this.prepay();
     if (error === 0) {
-      const redirect_url = `${getRootUrl()}pages/pay/result?orderSN=${this.orderSN}&payment=${
-        this.payment
-      }`;
+      const redirect_url = `${getRootUrl()}pages/pay/result?orderSN=${this.orderSN}&payment=${this.payment
+        }`;
       location.href = data.pay_data + encodeURIComponent(redirect_url);
     }
   }
@@ -168,6 +178,12 @@ export default class SheepPay {
     error === 0 && this.payResult('success');
   }
 
+  // 货到付款
+  async offlinePay() {
+    const { code } = await this.prepay();
+    code === 1 && this.payResult('success');
+  }
+
   // 支付宝复制链接支付
   async copyPayLink() {
     let that = this;