feat: 集成h5端收银台

package.json

@@ -77,6 +77,7 @@
     "flyio": "^0.6.2",
     "lodash": "^4.17.21",
     "uview-ui": "^2.0.35",
+    "decimal.js": "^10.4.3",
     "vue": "^2.6.11",
     "vuex": "^3.2.0"
   },

src/pages/my/my.vue

@@ -208,15 +208,18 @@ export default {
     },
     // 跳转订单
     navigateToOrder() {
-      if (!this.isLogin) {
-        this.handleLogin()
-        return
-      }
-      const url = `${hostPrefix}/h5-course/my/components/Buylist`
-
       uni.navigateTo({
-        url: `/pages/web/web?title=已购订单&loadUrl=${encodeURIComponent(url)}`,
+        url: `/pages/pay/pay?title=支付&id=${1123}`,
       })
+      // if (!this.isLogin) {
+      //   this.handleLogin()
+      //   return
+      // }
+      // const url = `${hostPrefix}/h5-course/my/components/Buylist`
+
+      // uni.navigateTo({
+      //   url: `/pages/web/web?title=已购订单&loadUrl=${encodeURIComponent(url)}`,
+      // })
     },
   },
 }

src/pages/pay/pay.vue

 <template>
   <view class="pay-page">
-    <view class="order-info">
-      <view class="info-item">
-        <view class="label">倾诉服务</view>
-        <text class="value">￥{{ price }}</text>
-      </view>
-      <view class="info-item">
-        <view class="label">优惠</view>
-        <text class="value">{{ coupon > 0 ? `-￥${coupon}` : '暂无可用优惠' }}</text>
-      </view>
-      <view class="info-item">
-        <view class="label">可用余额</view>
-        <text class="value">￥{{ balance }}</text>
-      </view>
-      <view class="info-item">
-        <view class="label">还需支付</view>
-        <text class="value finally">￥{{ payAmount }}</text>
-      </view>
-    </view>
-    <view class="tips">
-      <view class="tips-content">付款保障</view>
-      <view class="tips-content">1.专业可信赖，国家认证团队，7*24小时在线</view>
-      <view class="tips-content">2.1对1指导，量身定制解决方案，服务客户300多万</view>
-      <view class="tips-content">3.安全保障，严格隐私保护，不满意100%退款</view>
-    </view>
-    <view class="footer">
-      <button
-        class="pay-button"
-        :loading="loading"
-        @click="onPay"
-      >
-        确认支付
-      </button>
-    </view>
+    <div>正在支付中.12...</div>
+    <div>正在支付中.22...</div>
+    <div>正在支付中.32...</div>
   </view>
 </template>
 
 <script>
-import { setTrackData } from '@/utils/util'
 import { hostPrefix } from '@/config'
+import Decimal from 'decimal.js'
+
+// 要付款的前 要付款totalAmount
+// balance 可用余额
+const computeAmountForCombination = (totalAmount, balance) => {
+  let payBalance = 0
+  let payAmount = 0
+  if (balance === 0) {
+    payAmount = totalAmount
+  } else if (balance > 0 && balance < totalAmount) {
+    payBalance = balance
+    const x = new Decimal(totalAmount)
+    const y = new Decimal(balance)
+    payAmount = Number(x.minus(y))
+  } else {
+    payBalance = totalAmount
+  }
+  // 真实要额外付款微信，从余额扣款
+  return { payAmount, payBalance }
+}
 
 export default {
   name: 'OrderPay',
   data() {
     return {
-      price: '0', // 原价
-      coupon: '0', // 优惠金额
-      balance: '0', // 余额
       orderId: '', // 订单id
-      payId: '', // 支付id
+      payType: 1, // 支付方式，1: 余额  5: 微信  7: 微信 + 余额
+      payAmount: 0, // 支付方式 还需支付（除去余额扣款后，微信需要支付）
+      payBalance: 0, // 从余额扣款
       loading: false,
-      from: '', // 来源页面
     }
   },
-  computed: {
-    // 实际支付金额
-    payAmount() {
-      return Math.max(this.price - this.coupon - this.balance, 0).toFixed(2)
-    },
-  },
   onLoad(options) {
     // 赋值
-    const { price, coupon, balance, orderId, payId, from } = options
-    this.price = price
-    this.coupon = coupon
-    this.balance = balance
+    const { orderId, payType, payAmount, payBalance } = options
     this.orderId = orderId
-    this.payId = payId
-    this.from = from
-    // 页面访问埋点
-    setTrackData({
-      events: [
-        {
-          event_id: 'page_visit',
-          event_custom_properties: {
-            part: 'order_middle_page',
-            position: '',
-            element: '',
-          },
+    this.payType = Number(payType)
+    this.payAmount = Number(payAmount)
+    this.payBalance = Number(payBalance)
+    // // 页面访问埋点
+    // setTrackData({
+    //   events: [
+    //     {
+    //       event_id: 'page_visit',
+    //       event_custom_properties: {
+    //         part: 'order_middle_page',
+    //         position: '',
+    //         element: '',
+    //       },
+    //     },
+    //   ],
+    // })
   },
-      ],
-    })
+  mounted() {
+    this.onPay()
   },
   methods: {
     // 调用后端接口得到支付参数
@@ -89,9 +71,6 @@ export default {
         return
       }
 
-      // todo
-      this.handleSuccess()
-
       // setTrackData({
       //   events: [
       //     {
@@ -106,38 +85,34 @@ export default {
       //   ],
       // })
       this.loading = true
-      const { uid, accessToken, openId } = this.$store.state.user
-      // 组合支付从余额里面扣除的金额
-      const payBalance = Math.min(Math.max(0, this.price - this.coupon), this.balance)
-      // 支付方式，1: 余额  5: 微信  7: 微信 + 余额
-      const payType = this.payAmount > 0 ? (this.balance > 0 ? 7 : 5) : 1
+
+      const { orderId, payType } = this
+      // eslint-disable-next-line no-unused-vars
+      const { payAmount, payBalance } = computeAmountForCombination(this.totalAmount, this.balance)
       try {
-        // todo 这是一个什么页面？，一定要传吗
         const wxUrl = encodeURIComponent('http://m.ydl.com?backPayId=' + this.payId)
-        const res = await this.$request.post(
-          '/auth/cashierV2/unityPay',
-          {
-            payId: this.payId,
-            orderId: this.orderId,
-            payAmount: this.payAmount,
-            openId: openId,
+        const parmas = {
+          returnUrl: wxUrl, // 支付完成
+          quitUrl: wxUrl, // 中断支付
+          orderId,
+          payType,
           // todo
-            payType: 1,
-            payBalance: 0.1,
+          payAmount: 0.01,
+          // payAmount,
+          payBalance,
           payChannel: 'WX_MINI_APP',
-            quitUrl: wxUrl,
-            returnUrl: wxUrl,
-            uid: uid || '',
-            accessToken: accessToken || '',
-          },
-          {
+
+          // appId: appId,??
+        }
+        console.log('请求parmas：：', parmas)
+
+        const res = await this.$request.post('/auth/cashierV2/unityPay', parmas, {
           raw: true,
-          },
-        )
+        })
         this.loading = false
         if (+res.code === 200) {
           // 金额为0，直接调用成功方法
-          if (+this.payAmount === 0) {
+          if (+payAmount === 0) {
             this.handleSuccess()
             return
           }
@@ -170,10 +145,12 @@ export default {
         signType,
         package: data.package,
         paySign: paySign,
-        success: () => {
+        success: r => {
+          console.log('------sucss', r)
           this.handleSuccess()
         },
-        fail: () => {
+        fail: e => {
+          console.log('------error--', e)
           uni.showToast({
             title: '支付失败',
             icon: 'none',
@@ -220,56 +197,4 @@ export default {
   background: #f8f8f8;
   overflow: auto;
 }
-.order-info {
-  margin: 0 16px;
-  border-radius: 8px;
-  background: #fff;
-  padding: 10px 16px;
-  .info-item {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    color: #666;
-    font-size: 13px;
-    line-height: 30px;
-    .value {
-      &.finally {
-        font-size: 18px;
-        color: red;
-      }
-    }
-  }
-}
-.tips {
-  margin: 16px;
-  .tips-content {
-    font-size: 13px;
-    line-height: 18px;
-    font-weight: 500;
-    color: #999;
-    margin-bottom: 8px;
-  }
-}
-.footer {
-  height: 99px;
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  box-sizing: border-box;
-  padding-top: 19px;
-  box-shadow: 0px -1px 0px 0px rgba(235, 235, 235, 1);
-  .pay-button {
-    background-color: #ff6b5d;
-    border: none;
-    color: #fff;
-    font-size: 17px;
-    font-weight: 500;
-    border-radius: 8px;
-    margin: 0 16px;
-    &:after {
-      border: none;
-    }
-  }
-}
 </style>