first

pages/quickMoney/quickMoney.vue

@@ -0,0 +1,258 @@
+<template>
+  <view class="quick-wrapper">
+    <view>
+      <view class="quick-money">
+        <text class="quick-title">收款金额</text>
+        <view class="quick-input">
+          <view class="quick-number">{{ vdata.payAmount }}</view>
+          <text>（元）</text>
+        </view>
+      </view>
+      <view class="quick-remarks-wrapper"><text class="quick-remarks" @tap="jeepayPopupInputRef.open()">添加备注</text></view>
+    </view>
+
+    <!-- 键盘页面 -->
+    <JKeyboard @selectedStore="selectedStore" @boardDown="boardDown" v-model:value="vdata.payAmount" :storeName="vdata.store.storeName" />
+  </view>
+
+  <!-- 备注弹层 -->
+  <JeepayPopupInput ref="jeepayPopupInputRef" label="备注" :maxLength="12" v-model:value="vdata.payRemark" />
+  <PaymentSuccess ref="paymentSuccessRef" @close="resetData" />
+
+  <JeepayBizinfoSelect ref="jeepayBizinfoSelect" />
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+import { onUnload, onShow } from '@dcloudio/uni-app'
+import PaymentSuccess from './components/PaymentSuccess.vue'
+import { req, reqLoad, API_URL_MCH_STORE_LIST, $appPay, API_URL_PAY_ORDER_LIST } from '@/http/apiManager.js'
+import infoBox from '@/commons/utils/infoBox.js'
+import timer from '@/commons/utils/timer.js'
+import go from '@/commons/utils/go.js'
+import emit from '@/commons/utils/emit.js'
+
+const jeepayPopupInputRef = ref()
+const paymentSuccessRef = ref()
+const jeepayBizinfoSelect = ref()
+
+const vdata = reactive({
+  payRemark: '', // 支付备注
+  payAmount: 0, // 支付金额
+  store: {}, //选择的门店
+  isUnload: false, // 页面是否已销毁。
+  isOpenScan: false, // 是否直接打开相机
+})
+
+// 页面销毁需要将 定时任务结束。
+onUnload(() => {
+  vdata.isUnload = true
+  uni.$off(emit.ENAME_E_PAY_SCAN)
+  uni.$off(emit.ENAME_RESET_PAY_AMOUNT)
+})
+
+onShow(() => {
+  if (vdata.isOpenScan) {
+    // 打开相机
+    funObj.scan()
+    vdata.isOpenScan = false
+  } else {
+    // 其他页面进入， 需要金额初始化。
+    // 调起扫一扫， 会重新 onShow， 暂时不重置金额。
+    // vdata.payAmount = 0; // 金额初始化
+  }
+})
+
+// 监听扫一扫, 之后需要在 onShow中调用。
+uni.$on(emit.ENAME_E_PAY_SCAN, function (data) {
+  vdata.isOpenScan = true
+})
+uni.$on(emit.ENAME_RESET_PAY_AMOUNT, function (data) {
+  vdata.payAmount = 0
+  vdata.payRemark = ''
+})
+
+function reqTableDataByStoreFunc(params) {
+  return reqLoad.list(API_URL_MCH_STORE_LIST, params)
+}
+
+// 预先检查
+function preCheckFunc(callbackFunc) {
+  if (isNaN(vdata.payAmount) || vdata.payAmount <= 0) {
+    infoBox.showToast('请输入金额')
+    return false
+  }
+
+  if (!vdata.store.storeId) {
+    infoBox.showToast('请选择门店')
+    selectedStore().then(() => {
+      if (callbackFunc) {
+        callbackFunc()
+      }
+    })
+    return false
+  }
+
+  return true
+}
+
+const funObj = {
+  scan: () => {
+    if (!preCheckFunc(funObj.scan)) {
+      return false
+    }
+    uni.scanCode().then(({ result }) => {
+      // 调起支付
+      $appPay(vdata.store.storeId, vdata.payAmount, vdata.payRemark, 'AUTO_BAR', result).then(({ bizData }) => {
+        processPayData(bizData, true)
+      })
+    })
+  },
+  code: () => {
+    if (!preCheckFunc(funObj.code)) {
+      return false
+    }
+    // 调起支付
+    $appPay(vdata.store.storeId, vdata.payAmount, vdata.payRemark, 'QR_CASHIER').then(({ bizData }) => {
+      // 处理支付结果
+      processPayData(bizData, false)
+    })
+  },
+}
+
+// 选择门店
+const selectedStore = () => {
+  return jeepayBizinfoSelect.value.open(vdata.store).then((selected) => {
+    if (selected) {
+      vdata.store = selected
+      return Promise.resolve()
+    } else {
+      vdata.store = {}
+      return Promise.reject()
+    }
+  })
+}
+
+// 处理调起下单接口的返回数据
+function processPayData(bizData, isScan) {
+  if (bizData.orderState == 2) {
+    // 成功
+
+    // 跳转到支付成功页面, 兼容payOrderInfo没有数据的情况。
+    let payOrderInfo = Object.assign(bizData, { state: bizData.orderState, amount: vdata.payAmount * 100 })
+    if (bizData.payOrderInfo) {
+      payOrderInfo = JSON.parse(bizData.payOrderInfo)
+    }
+    vdata.payAmount = 0
+    return paymentSuccessRef.value.open(payOrderInfo)
+  } else if (bizData.orderState == 3) {
+    // 成功
+
+    // 失败
+    return infoBox.showToast('失败：' + bizData.errMsg, 3)
+  } else {
+    // 聚合二维码方式 - 显示弹层
+    if (!isScan) {
+      return go.to('PAGES_QR_CASHIER', { qrImgUrl: bizData.payData, payOrderId: bizData.payOrderId, payAmount: vdata.payAmount })
+    }
+
+    // 仅scan 需要 轮询查单
+    return orderPollingByScan(bizData.payOrderId)
+  }
+}
+
+// 轮询查单 ( 扫一扫方式 )
+function orderPollingByScan(payOrderId) {
+  // 总共查询几次
+  let allCount = 10
+
+  timer.startTimeoutTask(2, allCount, (subTime) => {
+    // 页面已销毁。
+    if (vdata.isUnload) {
+      return false
+    }
+
+    infoBox.showLoading(`等待付款, 第[${allCount - subTime}/${allCount}]次查单中...`)
+
+    // 任务结束
+    if (subTime <= 0) {
+      return infoBox.showToast('请于订单列表查询结果').then(() => {
+        emit.pageEmit(emit.ENAME_REF_PAY_ORDER) // 刷新订单数据
+        go.to('PAGES_PAY_ORDER', {}, go.GO_TYPE_SWITCHTAB)
+      })
+    }
+
+    return req.getById(API_URL_PAY_ORDER_LIST, payOrderId).then(({ bizData }) => {
+      switch (bizData.state) {
+        case 2:
+          infoBox.showSuccessToast('支付成功')
+          paymentSuccessRef.value.open(bizData)
+          return Promise.reject()
+          break
+        case 3:
+          infoBox.showToast('支付失败')
+          return Promise.reject()
+          break
+        case 4:
+          infoBox.showErrorToast('订单撤销')
+          return Promise.reject()
+          break
+        default:
+          return Promise.resolve()
+          break
+      }
+    })
+  })
+}
+
+const boardDown = (key) => {
+  if (['scan', 'code'].includes(key)) return funObj[key]()
+}
+// 成功清除数据
+const resetData = () => {
+  vdata.payAmount = 0
+  vdata.payRemark = ''
+}
+</script>
+
+<style lang="scss" scoped>
+.quick-wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-height: calc(100vh - 90rpx);
+  .quick-money {
+    margin: 0 auto;
+    margin-top: 50rpx;
+    width: 630rpx;
+    border-bottom: 1rpx solid rgba(0, 0, 0, 0.2);
+    .quick-title {
+      color: rgba(0, 0, 0, 0.5);
+      font-size: 30rpx;
+    }
+    .quick-input {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      height: 130rpx;
+      margin-top: 10rpx;
+      .quick-number {
+        flex: 1;
+        font-size: 60rpx;
+        font-weight: 500;
+      }
+      text {
+        align-self: flex-end;
+        transform: translateY(-30rpx);
+        font-weight: 700;
+      }
+    }
+  }
+  .quick-remarks-wrapper {
+    margin-top: 58rpx;
+    text-align: center;
+    font-size: 30rpx;
+    color: $J-color-t29;
+  }
+}
+</style>