✨ 收银台：接入收银结果界面

pages/pay/index.vue

@@ -87,10 +87,11 @@
 
   // 检测支付环境
   const state = reactive({
-    payment: '',
-    orderInfo: {},
+    orderType: 'goods', // 订单类型; goods - 商品订单, recharge - 充值订单
+    orderInfo: {}, // 支付单信息
     payStatus: 0, // 0=检测支付环境, -2=未查询到支付单信息， -1=支付已过期， 1=待支付，2=订单已支付
-    payMethods: [],
+    payMethods: [], // 可选的支付方式
+    payment: '', // 选中的支付方式
   });
 
   const onPay = () => {
@@ -104,12 +105,12 @@
         content: '确定要支付吗?',
         success: function (res) {
           if (res.confirm) {
-            sheep.$platform.pay(state.payment, state.orderType, state.orderInfo.order_sn);
+            sheep.$platform.pay(state.payment, state.orderType, state.orderInfo.id);
           }
         },
       });
     } else {
-      sheep.$platform.pay(state.payment, state.orderType, state.orderInfo.order_sn);
+      sheep.$platform.pay(state.payment, state.orderType, state.orderInfo.id);
     }
   };
 
@@ -134,15 +135,16 @@
 
   // 状态转换：payOrder.status => payStatus
   function checkPayStatus() {
-    if (state.orderInfo.status === 10) {
+    if (state.orderInfo.status === 10
+      || state.orderInfo.status === 20 ) { // 支付成功
       state.payStatus = 2;
       return;
     }
-    if (state.orderInfo.status === 20) {
+    if (state.orderInfo.status === 30) { // 支付关闭
       state.payStatus = -1;
       return;
     }
-    state.payStatus = 1;
+    state.payStatus = 1; // 待支付
   }
 
   // 切换支付方式
@@ -167,24 +169,25 @@
 
   // 获得支付方式
   async function setPayMethods() {
-    const { data, code } = await PayChannelApi.getEnableChannelCodeList(state.orderInfo.appId);
+    const { data, code } = await PayChannelApi.getEnableChannelCodeList(state.orderInfo.appId)
     if (code !== 0) {
-      return;
+      return
     }
-    state.payMethods = getPayMethods(data);
+    state.payMethods = getPayMethods(data)
   }
 
   onLoad((options) => {
-    if (
-      sheep.$platform.name === 'WechatOfficialAccount' &&
-      sheep.$platform.os === 'ios' &&
-      !sheep.$platform.landingPage.includes('pages/pay/index')
-    ) {
+    if (sheep.$platform.name === 'WechatOfficialAccount'
+      && sheep.$platform.os === 'ios'
+      && !sheep.$platform.landingPage.includes('pages/pay/index')) {
       location.reload();
       return;
     }
     // 获得支付订单信息
     let id = options.id;
+    if (options.orderType) {
+      state.orderType = options.orderType;
+    }
     setOrder(id);
   });
 </script>
@@ -203,6 +206,7 @@
       position: relative;
       padding: 60rpx 20rpx 40rpx;
 
+
       .money-text {
         color: $red;
         font-size: 46rpx;

pages/pay/result.vue

@@ -2,34 +2,27 @@
 <template>
   <s-layout title="支付结果" :bgStyle="{ color: '#FFF' }">
     <view class="pay-result-box ss-flex-col ss-row-center ss-col-center">
-      <view class="pay-waiting ss-m-b-30" v-if="payResult === 'waiting'"> </view>
+      <!-- 信息展示 -->
+      <view class="pay-waiting ss-m-b-30" v-if="payResult === 'waiting'" />
       <image
         class="pay-img ss-m-b-30"
         v-if="payResult === 'success'"
         :src="sheep.$url.static('/static/img/shop/order/order_pay_success.gif')"
-      ></image>
+      />
       <image
         class="pay-img ss-m-b-30"
         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'">{{
-        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>
+      />
+      <view class="tip-text ss-m-b-30" v-if="payResult === 'success'">支付成功</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>
       <view class="pay-total-num ss-flex" v-if="payResult === 'success'">
-        <view v-if="Number(state.orderInfo.pay_fee) > 0">￥{{ state.orderInfo.pay_fee }}</view>
-        <view v-if="state.orderInfo.score_amount && Number(state.orderInfo.pay_fee) > 0">+</view>
-        <view class="price-text ss-flex ss-col-center" v-if="state.orderInfo.score_amount">
-          <image
-            :src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
-            class="score-img"
-          ></image>
-          <view>{{ state.orderInfo.score_amount }}</view>
-        </view>
+        <view>￥{{ fen2yuan(state.orderInfo.price) }}</view>
       </view>
+
+      <!-- 操作区 -->
       <view class="btn-box ss-flex ss-row-center ss-m-t-50">
         <button class="back-btn ss-reset-button" @tap="sheep.$router.go('/pages/index/index')">
           返回首页
@@ -37,30 +30,29 @@
         <button
           class="check-btn ss-reset-button"
           v-if="payResult === 'failed'"
-          @tap="sheep.$router.redirect('/pages/pay/index', { orderSN: state.orderId })"
+          @tap="
+            sheep.$router.redirect('/pages/pay/index', { id: state.id, orderType: state.orderType })
+          "
         >
           重新支付
         </button>
         <button class="check-btn ss-reset-button" v-if="payResult === 'success'" @tap="onOrder">
           查看订单
         </button>
+        <!-- TODO 芋艿：拼团接入 -->
         <button
           class="check-btn ss-reset-button"
-          v-if="
-            payResult === 'success' &&
-            ['groupon', 'groupon_ladder'].includes(state.orderInfo.activity_type)
-          "
+          v-if="payResult === 'success' && state.tradeOrder.type === 3"
           @tap="sheep.$router.redirect('/pages/activity/groupon/order')"
         >
           我的拼团
         </button>
       </view>
+
+      <!-- TODO 芋艿：订阅 -->
       <!-- #ifdef MP -->
       <view class="subscribe-box ss-flex ss-m-t-44">
-        <image
-          class="subscribe-img"
-          :src="sheep.$url.static('/static/img/shop/order/cargo.png')"
-        ></image>
+        <image class="subscribe-img" :src="sheep.$url.static('/static/img/shop/order/cargo.png')" />
         <view class="subscribe-title ss-m-r-48 ss-m-l-16">获取实时发货信息与订单状态</view>
         <view class="subscribe-start" @tap="subscribeMessage">立即订阅</view>
       </view>
@@ -74,15 +66,20 @@
   import { reactive, computed } from 'vue';
   import { isEmpty } from 'lodash';
   import sheep from '@/sheep';
+  import PayOrderApi from '@/sheep/api/pay/order';
+  import { fen2yuan } from '../../sheep/hooks/useGoods';
+  import OrderApi from '@/sheep/api/trade/order';
 
   const state = reactive({
-    orderId: 0,
-    orderType: 'goods',
+    id: 0, // 支付单号
+    orderType: 'goods', // 订单类型
     result: 'unpaid', // 支付状态
-    orderInfo: {}, // 订单详情
+    orderInfo: {}, // 支付订单信息
+    tradeOrder: {}, // 商品订单信息，只有在 orderType 为 goods 才会请求。目的：【我的拼团】按钮的展示
     counter: 0, // 获取结果次数
   });
 
+  // 支付结果 result => payResult
   const payResult = computed(() => {
     if (state.result === 'unpaid') {
       return 'waiting';
@@ -93,57 +90,65 @@
     if (state.result === 'failed') {
       return 'failed';
     }
-
     if (state.result === 'closed') {
       return 'closed';
     }
   });
-  async function getOrderInfo(orderId) {
-    let checkPayResult;
+
+  // 获得订单信息
+  async function getOrderInfo(id) {
     state.counter++;
-    if (state.orderType === 'recharge') {
-      checkPayResult = sheep.$api.trade.order;
-    } else {
-      checkPayResult = sheep.$api.order.detail;
-    }
-    const { data, error } = await checkPayResult(orderId);
-    if (error === 0) {
+    // 1. 加载订单信息
+    const { data, code } = await PayOrderApi.getOrder(id);
+    if (code === 0) {
       state.orderInfo = data;
-      if (state.orderInfo.status === 'closed') {
+      if (!state.orderInfo || state.orderInfo.status === 30) {
+        // 支付关闭
         state.result = 'closed';
         return;
       }
-      if (state.orderInfo.status !== 'unpaid') {
+      if (state.orderInfo.status !== 0) {
+        // 非待支付，可能是已支付，可能是已退款
         state.result = 'paid';
         // #ifdef MP
         subscribeMessage();
         // #endif
+        // 特殊：获得商品订单信息
+        if (state.orderType === 'goods') {
+          const { data, code } = await OrderApi.getOrder(state.orderInfo.merchantOrderId);
+          if (code === 0) {
+            state.tradeOrder = data;
+          }
+        }
         return;
       }
     }
+    // 2.1 情况三一：未支付，且轮询次数小于三次，则继续轮询
     if (state.counter < 3 && state.result === 'unpaid') {
       setTimeout(() => {
-        getOrderInfo(orderId);
+        getOrderInfo(id);
       }, 1500);
     }
-    // 超过三次检测才判断为支付失败
+    // 2.2 情况二：超过三次检测才判断为支付失败
     if (state.counter >= 3) {
       state.result = 'failed';
     }
   }
 
   function onOrder() {
-    if ((state.orderType === 'recharge')) {
+    // TODO 芋艿：待测试
+    if (state.orderType === 'recharge') {
       sheep.$router.redirect('/pages/pay/recharge-log');
     } else {
       sheep.$router.redirect('/pages/order/list');
     }
   }
 
+  // TODO 芋艿：待测试
   // #ifdef MP
   function subscribeMessage() {
     let event = ['order_dispatched'];
-    if (['groupon', 'groupon_ladder'].includes(state.orderInfo.activity_type)) {
+    if (state.tradeOrder.type === 3) {
       event.push('groupon_finish');
       event.push('groupon_fail');
     }
@@ -152,18 +157,13 @@
   // #endif
 
   onLoad(async (options) => {
-    let id = '';
     // 支付订单号
-    if (options.orderSN) {
-      id = options.orderSN;
-    }
     if (options.id) {
-      id = options.id;
+      state.id = options.id;
     }
-    state.orderId = id;
-
-    if (options.orderType === 'recharge') {
-      state.orderType = 'recharge';
+    // 订单类型
+    if (options.orderType) {
+      state.orderType = options.orderType;
     }
 
     // 支付结果传值过来是失败，则直接显示失败界面
@@ -171,14 +171,16 @@
       state.result = 'failed';
     } else {
       // 轮询三次检测订单支付结果
-      getOrderInfo(state.orderId);
+      await getOrderInfo(state.id);
     }
   });
 
   onShow(() => {
-    if(isEmpty(state.orderInfo)) return;
-    getOrderInfo(state.orderId);
-  })
+    if (isEmpty(state.orderInfo)) {
+      return;
+    }
+    getOrderInfo(state.id);
+  });
 
   onHide(() => {
     state.result = 'unpaid';

sheep/api/pay/order.js

@@ -9,6 +9,14 @@ const PayOrderApi = {
       params: { id }
     });
   },
+  // 提交支付订单
+  submitOrder: (data) => {
+    return request({
+      url: '/app-api/pay/order/submit',
+      method: 'POST',
+      data
+    });
+  }
 };
 
 export default PayOrderApi;

sheep/api/trade/order.js

@@ -5,16 +5,16 @@ const OrderApi = {
   settlementOrder: (data) => {
     const data2 = {
       ...data,
-    }
+    };
     // 移除多余字段
     if (!(data.couponId > 0)) {
-      delete data2.couponId
+      delete data2.couponId;
     }
     if (!(data.addressId > 0)) {
-      delete data2.addressId
+      delete data2.addressId;
     }
     // 解决 SpringMVC 接受 List<Item> 参数的问题
-    delete data2.items
+    delete data2.items;
     for (let i = 0; i < data.items.length; i++) {
       data2[encodeURIComponent('items[' + i + '' + '].skuId')] = data.items[i].skuId + '';
       data2[encodeURIComponent('items[' + i + '' + '].count')] = data.items[i].count + '';
@@ -22,20 +22,32 @@ const OrderApi = {
         data2[encodeURIComponent('items[' + i + '' + '].cartId')] = data.items[i].cartId + '';
       }
     }
-    const queryString= Object.keys(data2).map(key => key + '=' + data2[key]).join('&')
+    const queryString = Object.keys(data2)
+      .map((key) => key + '=' + data2[key])
+      .join('&');
     return request2({
       url: `trade/order/settlement?${queryString}`,
-      method: 'GET'
-    })
+      method: 'GET',
+    });
   },
   // 创建订单
   createOrder: (data) => {
     return request2({
       url: `trade/order/create`,
       method: 'POST',
-      data
-    })
-  }
+      data,
+    });
+  },
+  // 获得订单
+  getOrder: (id) => {
+    return request2({
+      url: `trade/order/get-detail`,
+      method: 'GET',
+      params: {
+        id,
+      },
+    });
+  },
 };
 
-export default OrderApi;
+export default OrderApi;

sheep/platform/pay.js

@@ -3,19 +3,20 @@ import sheep from '@/sheep';
 import $wxsdk from '@/sheep/libs/sdk-h5-weixin';
 // #endif
 import { getRootUrl } from '@/sheep/helper';
+import PayOrderApi from '@/sheep/api/pay/order';
 
 /**
  * 支付
  *
  * @param {String} payment = ['wechat','alipay','wallet','offline']  	- 支付方式
  * @param {String} orderType = ['goods','recharge','groupon']  	- 订单类型
- * @param {String} orderSN					- 订单号
+ * @param {String} id					- 订单号
  */
 
 export default class SheepPay {
-  constructor(payment, orderType, orderSN) {
+  constructor(payment, orderType, id) {
     this.payment = payment;
-    this.orderSN = orderSN;
+    this.id = id;
     this.orderType = orderType;
     this.payAction();
   }
@@ -83,18 +84,21 @@ export default class SheepPay {
   }
 
   // 预支付
-  prepay() {
+  prepay(channel) {
     return new Promise((resolve, reject) => {
       let data = {
-        order_sn: this.orderSN,
-        payment: this.payment,
+        id: this.id,
+        channelCode: channel,
+        channelExtras: {}
       };
       if (uni.getStorageSync('openid')) {
         data.openid = uni.getStorageSync('openid');
       }
-      sheep.$api.pay.prepay(data).then((res) => {
-        res.error === 0 && resolve(res);
-        if (res.error === -1 && res.msg === 'miss_openid') {
+      PayOrderApi.submitOrder(data).then((res) => {
+        // 成功时
+        res.code === 0 && resolve(res);
+        // 失败时
+        if (res.code !== 0 && res.msg === 'miss_openid') {
           uni.showModal({
             title: '微信支付',
             content: '请先绑定微信再使用微信支付',
@@ -134,7 +138,7 @@ 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?id=${this.id}&payment=${this.payment
         }&orderType=${this.orderType}`;
       location.href = `${data.pay_data.h5_url}&redirect_url=${encodeURIComponent(redirect_url)}`;
     }
@@ -144,7 +148,7 @@ 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?id=${this.id}&payment=${this.payment
         }&orderType=${this.orderType}`;
       location.href = data.pay_data + encodeURIComponent(redirect_url);
     }
@@ -172,10 +176,10 @@ export default class SheepPay {
     });
   }
 
-  // 余额支付  TODO 芋艿：待接入
+  // 余额支付
   async walletPay() {
-    const { error } = await this.prepay();
-    error === 0 && this.payResult('success');
+    const { code } = await this.prepay('wallet');
+    code === 0 && this.payResult('success');
   }
 
   // 货到付款  TODO 芋艿：待接入
@@ -246,10 +250,9 @@ export default class SheepPay {
   // 支付结果跳转,success:成功，fail:失败
   payResult(resultType) {
     sheep.$router.redirect('/pages/pay/result', {
-      orderSN: this.orderSN,
-      payment: this.payment, //重新支付的时候使用
-      payState: resultType,
+      id: this.id,
       orderType: this.orderType,
+      payState: resultType
     });
   }
 }