✨ 收银台：接入核心逻辑

pages/pay/index.vue

@@ -2,14 +2,17 @@
 <template>
   <s-layout title="收银台">
     <view class="bg-white ss-modal-box ss-flex-col">
+      <!-- 订单信息 -->
       <view class="modal-header ss-flex-col ss-col-center ss-row-center">
         <view class="money-box ss-m-b-20">
-          <text class="money-text">{{ state.orderInfo.pay_fee }}</text>
+          <text class="money-text">{{ fen2yuan(state.orderInfo.price) }}</text>
         </view>
         <view class="time-text">
           <text>{{ payDescText }}</text>
         </view>
       </view>
+
+      <!-- 支付方式 -->
       <view class="modal-content ss-flex-1">
         <view class="pay-title ss-p-l-30 ss-m-y-30">选择支付方式</view>
         <radio-group @change="onTapPay">
@@ -17,7 +20,6 @@
             <view
               class="pay-item ss-flex ss-col-center ss-row-between ss-p-x-30 border-bottom"
               :class="{ 'disabled-pay-item': item.disabled }"
-              v-if="allowedPayment.includes(item.value)"
             >
               <view class="ss-flex ss-col-center">
                 <image
@@ -25,25 +27,19 @@
                   v-if="item.disabled"
                   :src="sheep.$url.static('/static/img/shop/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">
-                <view class="userInfo-money ss-m-r-10" v-if="item.value == 'money'">
+                <view class="userInfo-money ss-m-r-10" v-if="item.value === 'wallet'">
                   余额: {{ userInfo.money }}元
                 </view>
-                <view
-                  class="userInfo-money ss-m-r-10"
-                  v-if="item.value == 'offline' && item.disabled"
-                >
-                  部分商品不支持
-                </view>
                 <radio
                   :value="item.value"
                   color="var(--ui-BG-Main)"
@@ -56,6 +52,7 @@
           </label>
         </radio-group>
       </view>
+
       <!-- 工具 -->
       <view class="modal-footer ss-flex ss-row-center ss-col-center ss-m-t-80 ss-m-b-40">
         <button v-if="state.payStatus === 0" class="ss-reset-button past-due-btn">
@@ -81,65 +78,27 @@
   import { computed, reactive } from 'vue';
   import { onLoad } from '@dcloudio/uni-app';
   import sheep from '@/sheep';
-  import { useDurationTime } from '@/sheep/hooks/useGoods';
+  import { fen2yuan, useDurationTime } from '@/sheep/hooks/useGoods';
+  import PayOrderApi from '@/sheep/api/pay/order';
+  import PayChannelApi from '@/sheep/api/pay/channel';
+  import { getPayMethods } from '@/sheep/platform/pay';
 
   const userInfo = computed(() => sheep.$store('user').userInfo);
 
   // 检测支付环境
   const state = reactive({
-    orderType: 'goods',
     payment: '',
     orderInfo: {},
     payStatus: 0, // 0=检测支付环境, -2=未查询到支付单信息， -1=支付已过期， 1=待支付，2=订单已支付
     payMethods: [],
   });
 
-  const allowedPayment = computed(() => {
-    if(state.orderType === 'recharge') {
-      return sheep.$store('app').platform.recharge_payment
-    }
-    return sheep.$store('app').platform.payment
-    });
-
-  const payMethods = [
-    {
-      icon: '/static/img/shop/pay/wechat.png',
-      title: '微信支付',
-      value: 'wechat',
-      disabled: false,
-    },
-    {
-      icon: '/static/img/shop/pay/alipay.png',
-      title: '支付宝支付',
-      value: 'alipay',
-      disabled: false,
-    },
-    {
-      icon: '/static/img/shop/pay/wallet.png',
-      title: '余额支付',
-      value: 'money',
-      disabled: false,
-    },
-    {
-      icon: '/static/img/shop/pay/apple.png',
-      title: 'Apple Pay',
-      value: 'apple',
-      disabled: false,
-    },
-    {
-      icon: '/static/img/shop/pay/cod.png',
-      title: '货到付款',
-      value: 'offline',
-      disabled: false,
-    },
-  ];
-
   const onPay = () => {
     if (state.payment === '') {
       sheep.$helper.toast('请选择支付方式');
       return;
     }
-    if (state.payment === 'money') {
+    if (state.payment === 'wallet') {
       uni.showModal({
         title: '提示',
         content: '确定要支付吗?',
@@ -149,27 +108,18 @@
           }
         },
       });
-    } else if (state.payment === 'offline') {
-      uni.showModal({
-        title: '提示',
-        content: '确定要下单吗?',
-        success: function (res) {
-          if (res.confirm) {
-            sheep.$platform.pay(state.payment, state.orderType, state.orderInfo.order_sn);
-          }
-        },
-      });
     } else {
       sheep.$platform.pay(state.payment, state.orderType, state.orderInfo.order_sn);
     }
   };
 
+  // 支付文案提示
   const payDescText = computed(() => {
     if (state.payStatus === 2) {
       return '该订单已支付';
     }
-    if (state.payStatus === 1 && state.orderInfo.ext.expired_time !== 0) {
-      const time = useDurationTime(state.orderInfo.ext.expired_time);
+    if (state.payStatus === 1) {
+      const time = useDurationTime(state.orderInfo.expireTime);
       if (time.ms <= 0) {
         state.payStatus = -1;
         return '';
@@ -179,59 +129,49 @@
     if (state.payStatus === -2) {
       return '未查询到支付单信息';
     }
-
     return '';
   });
 
+  // 状态转换：payOrder.status => payStatus
   function checkPayStatus() {
-    if (state.orderInfo.status === 'unpaid') {
-      state.payStatus = 1;
+    if (state.orderInfo.status === 10) {
+      state.payStatus = 2;
       return;
     }
-    if (state.orderInfo.status === 'closed') {
+    if (state.orderInfo.status === 20) {
       state.payStatus = -1;
       return;
     }
-    state.payStatus = 2;
+    state.payStatus = 1;
   }
 
+  // 切换支付方式
   function onTapPay(e) {
     state.payment = e.detail.value;
   }
 
-  async function setRechargeOrder(id) {
-    const { data, error } = await sheep.$api.trade.order(id);
-    if (error === 0) {
-      state.orderInfo = data;
-      state.payMethods = payMethods;
-      checkPayStatus();
-    } else {
+  // 设置支付订单信息
+  async function setOrder(id) {
+    // 获得支付订单信息
+    const { data, code } = await PayOrderApi.getOrder(id);
+    if (code !== 0 || !data) {
       state.payStatus = -2;
+      return;
     }
+    state.orderInfo = data;
+    // 获得支付方式
+    await setPayMethods();
+    // 设置支付状态
+    checkPayStatus();
   }
 
-  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;
+  // 获得支付方式
+  async function setPayMethods() {
+    const { data, code } = await PayChannelApi.getEnableChannelCodeList(state.orderInfo.appId);
+    if (code !== 0) {
+      return;
     }
+    state.payMethods = getPayMethods(data);
   }
 
   onLoad((options) => {
@@ -243,22 +183,9 @@
       location.reload();
       return;
     }
-    let id = '';
-    if (options.orderSN) {
-      id = options.orderSN;
-    }
-    if (options.id) {
-      id = options.id;
-    }
-    if (options.type === 'recharge') {
-      state.orderType = 'recharge';
-      // 充值订单
-      setRechargeOrder(id);
-    } else {
-      state.orderType = 'goods';
-      // 商品订单
-      setGoodsOrder(id);
-    }
+    // 获得支付订单信息
+    let id = options.id;
+    setOrder(id);
   });
 </script>
 
@@ -276,7 +203,6 @@
       position: relative;
       padding: 60rpx 20rpx 40rpx;
 
-
       .money-text {
         color: $red;
         font-size: 46rpx;

sheep/api/pay/channel.js

@@ -0,0 +1,14 @@
+import request from '@/sheep/request';
+
+const PayChannelApi = {
+  // 获得指定应用的开启的支付渠道编码列表
+  getEnableChannelCodeList: (appId) => {
+    return request({
+      url: '/app-api/pay/channel/get-enable-code-list',
+      method: 'GET',
+      params: { appId }
+    });
+  },
+};
+
+export default PayChannelApi;

sheep/api/pay/order.js

@@ -0,0 +1,14 @@
+import request from '@/sheep/request';
+
+const PayOrderApi = {
+  // 获得支付订单
+  getOrder: (id) => {
+    return request({
+      url: '/app-api/pay/order/get',
+      method: 'GET',
+      params: { id }
+    });
+  },
+};
+
+export default PayOrderApi;

sheep/platform/pay.js

@@ -29,8 +29,8 @@ export default class SheepPay {
         alipay: () => {
           this.redirectPay(); // 现在公众号可以直接跳转支付宝页面
         },
-        money: () => {
-          this.moneyPay();
+        wallet: () => {
+          this.walletPay();
         },
         offline: () => {
           this.offlinePay();
@@ -43,8 +43,8 @@ export default class SheepPay {
         alipay: () => {
           this.copyPayLink();
         },
-        money: () => {
-          this.moneyPay();
+        wallet: () => {
+          this.walletPay();
         },
         offline: () => {
           this.offlinePay();
@@ -57,8 +57,8 @@ export default class SheepPay {
         alipay: () => {
           this.alipay();
         },
-        money: () => {
-          this.moneyPay();
+        wallet: () => {
+          this.walletPay();
         },
         offline: () => {
           this.offlinePay();
@@ -71,8 +71,8 @@ export default class SheepPay {
         alipay: () => {
           this.redirectPay();
         },
-        money: () => {
-          this.moneyPay();
+        wallet: () => {
+          this.walletPay();
         },
         offline: () => {
           this.offlinePay();
@@ -109,7 +109,7 @@ export default class SheepPay {
     });
   }
   // #ifdef H5
-  // 微信公众号JSSDK支付
+  // 微信公众号JSSDK支付 TODO 芋艿：待接入
   async wechatOfficialAccountPay() {
     let that = this;
     let { error, data, msg } = await this.prepay();
@@ -130,7 +130,7 @@ export default class SheepPay {
     });
   }
 
-  //浏览器微信H5支付
+  //浏览器微信H5支付 TODO 芋艿：待接入
   async wechatWapPay() {
     const { error, data } = await this.prepay();
     if (error === 0) {
@@ -140,7 +140,7 @@ export default class SheepPay {
     }
   }
 
-  // 支付链接
+  // 支付链接  TODO 芋艿：待接入
   async redirectPay() {
     let { error, data } = await this.prepay();
     if (error === 0) {
@@ -152,7 +152,7 @@ export default class SheepPay {
 
   // #endif
 
-  // 微信小程序支付
+  // 微信小程序支付  TODO 芋艿：待接入
   async wechatMiniProgramPay() {
     let that = this;
     let result = await this.prepay();
@@ -172,19 +172,19 @@ export default class SheepPay {
     });
   }
 
-  // 余额支付
-  async moneyPay() {
+  // 余额支付  TODO 芋艿：待接入
+  async walletPay() {
     const { error } = await this.prepay();
     error === 0 && this.payResult('success');
   }
 
-  // 货到付款
+  // 货到付款  TODO 芋艿：待接入
   async offlinePay() {
     const { error } = await this.prepay();
     error === 0 && this.payResult('success');
   }
 
-  // 支付宝复制链接支付
+  // 支付宝复制链接支付  TODO 芋艿：待接入
   async copyPayLink() {
     let that = this;
     let { error, data } = await this.prepay();
@@ -203,7 +203,7 @@ export default class SheepPay {
     }
   }
 
-  // 支付宝支付
+  // 支付宝支付  TODO 芋艿：待接入
   async alipay() {
     let that = this;
     const { error, data } = await this.prepay();
@@ -225,7 +225,7 @@ export default class SheepPay {
     }
   }
 
-  // 微信支付
+  // 微信支付  TODO 芋艿：待接入
   async wechatAppPay() {
     let that = this;
     let { error, data } = await this.prepay();
@@ -253,3 +253,66 @@ export default class SheepPay {
     });
   }
 }
+
+export function getPayMethods(channels) {
+  const payMethods = [
+    {
+      icon: '/static/img/shop/pay/wechat.png',
+      title: '微信支付',
+      value: 'wechat',
+      disabled: true,
+    },
+    {
+      icon: '/static/img/shop/pay/alipay.png',
+      title: '支付宝支付',
+      value: 'alipay',
+      disabled: true,
+    },
+    {
+      icon: '/static/img/shop/pay/wallet.png',
+      title: '余额支付',
+      value: 'wallet',
+      disabled: true,
+    },
+    {
+      icon: '/static/img/shop/pay/apple.png',
+      title: 'Apple Pay',
+      value: 'apple',
+      disabled: true,
+    },
+    {
+      icon: '/static/img/shop/pay/wallet.png',
+      title: '模拟支付',
+      value: 'mock',
+      disabled: true,
+    }
+  ];
+  const platform = sheep.$platform.name
+
+  // 1. 处理【微信支付】
+  const wechatMethod = payMethods[0];
+  if ((platform === 'WechatOfficialAccount' && channels.includes('wx_pub'))
+    || platform === 'WechatMiniProgram' && channels.includes('wx_lite')
+    || platform === 'App' && channels.includes('wx_app')) {
+    wechatMethod.disabled = false;
+  }
+  // 2. 处理【支付宝支付】
+  const alipayMethod = payMethods[1];
+  if ((platform === 'WechatOfficialAccount' && channels.includes('alipay_wap'))
+    || platform === 'WechatMiniProgram' && channels.includes('alipay_wap')
+    || platform === 'App' && channels.includes('alipay_app')) {
+    alipayMethod.disabled = false;
+  }
+  // 3. 处理【余额支付】
+  const walletMethod = payMethods[2];
+  if (channels.includes('wallet')) {
+    walletMethod.disabled = false;
+  }
+  // 4. 处理【苹果支付】TODO 芋艿：未来接入
+  // 5. 处理【模拟支付】
+  const mockMethod = payMethods[4];
+  if (channels.includes('mock')) {
+    mockMethod.disabled = false;
+  }
+  return payMethods;
+}

sheep/store/app.js

@@ -23,8 +23,8 @@ const app = defineStore({
       copytime: '', // 版权信息 II
     },
     platform: {
-      payment: [], // 支持的支付方式
-      recharge_payment: [], // 支持的充值支付方式
+      payment: [], // 支持的支付方式 TODO 芋艿：可删除
+      recharge_payment: [], // 支持的充值支付方式 TODO 芋艿：可删除
       share: {
         methods: [], // 支持的分享方式
         forwardInfo: {}, // 默认转发信息