feat 收银台调试

src/hooks/daxpay/useKeyboard.ts

@@ -0,0 +1,60 @@
+import type { Ref } from 'vue'
+
+/**
+ * 键盘hooks
+ * @param amount
+ */
+export function useKeyboard(amount: Ref<string>) {
+  /**
+   * 输入
+   */
+  function input(value: string) {
+    const amountStr = amount.value
+    if (amountStr === '0') {
+      if (value === '.') {
+        amount.value = '0.'
+        return
+      }
+      amount.value = String(value)
+    }
+    else {
+      // 只允许有一个小数点
+      if (value === '.' && amountStr.includes('.')) {
+        return
+      }
+      // 小数最多两位
+      if (amountStr.includes('.') && amountStr.length - amountStr.indexOf('.') > 2) {
+        return
+      }
+      // 金额最高100万
+      if (amountStr.split('.')[0].length > 6) {
+        // 是否有小数,
+        if (amountStr.includes('.') && amountStr.split('.')[1].length > 1) {
+          return
+        }
+        if (!amountStr.includes('.') && value !== '.') {
+          return
+        }
+      }
+
+      amount.value = amountStr.concat(value)
+    }
+  }
+
+  /**
+   * 删除
+   */
+  function del() {
+    if (amount.value.length > 1) {
+      amount.value = amount.value.substring(0, amount.value.length - 1)
+    }
+    else {
+      amount.value = '0'
+    }
+  }
+
+  return {
+    input,
+    del,
+  }
+}

src/views/daxpay/channel/alipay/cashier/AlipayCashier.vue

@@ -69,6 +69,7 @@ import {
 
 import { CashierTypeEnum } from '@/enums/daxpay/DaxPayEnum'
 import router from '@/router'
+import { useKeyboard } from '@/hooks/daxpay/useKeyboard'
 
 const route = useRoute()
 const { mchNo, appId } = route.params
@@ -80,6 +81,8 @@ const amount = ref<string>('0')
 const description = ref<string>('')
 const mchName = ref<string>('')
 
+const { input, del } = useKeyboard(amount)
+
 onMounted(() => {
   initData()
 })
@@ -96,48 +99,6 @@ function initData() {
   })
 }
 
-/**
- * 输入
- */
-function input(value: string) {
-  const amountStr = amount.value
-  if (amountStr === '0') {
-    if (value === '.') {
-      amount.value = '0.'
-      return
-    }
-    amount.value = String(value)
-  }
-  else {
-    // 只允许有一个小数点
-    if (value === '.' && amountStr.includes('.')) {
-      return
-    }
-    // 小数最多两位
-    if (amountStr.includes('.') && amountStr.length - amountStr.indexOf('.') > 2) {
-      return
-    }
-    // 金额最高100万
-    if (amountStr.split('.')[0].length > 7 && value !== '.') {
-      return
-    }
-
-    amount.value = amountStr.concat(value)
-  }
-}
-
-/**
- * 删除
- */
-function del() {
-  if (amount.value.length > 1) {
-    amount.value = amount.value.substring(0, amount.value.length - 1)
-  }
-  else {
-    amount.value = '0'
-  }
-}
-
 /**
  * 支付
  */

src/views/daxpay/channel/wechat/cashier/WechatCashier.vue

@@ -1,12 +1,56 @@
 <template>
   <div>
     <div class="container">
-      <h2>收银台</h2>
+      <div style="font-size: 28px;margin-top: 10px;">
+        {{ cashierInfo.cashierName || '微信收银台' }}
+      </div>
       <div class="amount-display">
-        <p>付款给骏易</p>
-        <p class="amount">¥ 0</p>
+        <p style="font-size: 20px">
+          付款给{{ mchName }}
+        </p>
+        <p style="font-size: 32px;">
+          ¥ {{ amount }}
+        </p>
       </div>
     </div>
+    <van-dialog
+      v-model:show="show"
+      title="支付备注"
+      confirm-button-text="保存"
+      cancel-button-text="清除"
+      confirm-button-color="#4CAF50"
+      cancel-button-color="red"
+      show-cancel-button
+      @cancel="description = ''"
+    >
+      <van-field
+        v-model="description"
+        rows="2"
+        autosize
+        label=""
+        type="textarea"
+        :maxlength="50"
+        placeholder="请输入支付备注内容"
+        show-word-limit
+      />
+    </van-dialog>
+    <van-number-keyboard
+      :show="true"
+      theme="custom"
+      extra-key="."
+      close-button-text="付款"
+      @close="pay"
+      @input="input"
+      @delete="del"
+    >
+      <template #title-left>
+        <div style="width: 100vw;display: flex; justify-content: center">
+          <div class="remark" @click="show = true">
+            添加备注
+          </div>
+        </div>
+      </template>
+    </van-number-keyboard>
   </div>
 </template>
 
@@ -16,22 +60,25 @@ import { useRoute } from 'vue-router'
 import type {
   CashierAuthCodeParam,
   CashierPayParam,
+  ChannelCashierConfigResult,
   WxJsapiSignResult,
 } from '@/views/daxpay/channel/ChannelCashier.api'
-import {
-  cashierPay,
-  generateAuthUrl,
-} from '@/views/daxpay/channel/ChannelCashier.api'
+import { cashierPay, generateAuthUrl, getCashierInfo, getMchName } from '@/views/daxpay/channel/ChannelCashier.api'
 
 import { CashierTypeEnum } from '@/enums/daxpay/DaxPayEnum'
 import router from '@/router'
+import { useKeyboard } from '@/hooks/daxpay/useKeyboard'
 
 const route = useRoute()
 const { mchNo, appId } = route.params
 const { code } = route.query
 
+const show = ref<boolean>(false)
 const loading = ref<boolean>(false)
-const amount = ref<number>(0.0)
+const cashierInfo = ref<ChannelCashierConfigResult>({})
+const amount = ref<string>('0')
+const description = ref<string>('')
+const mchName = ref<string>('')
 
 // 认证参数
 const authParam = ref<CashierAuthCodeParam>({
@@ -40,6 +87,8 @@ const authParam = ref<CashierAuthCodeParam>({
   cashierType: CashierTypeEnum.WECHAT_PAY,
 })
 
+const { input, del } = useKeyboard(amount)
+
 onMounted(() => {
   init()
 })
@@ -57,21 +106,34 @@ function init() {
     })
   }
   else {
-    // 发起收银台支付
-    wechatPay()
+    // 初始化数据
+    initData()
   }
 }
 
+/**
+ * 初始化数据
+ */
+function initData() {
+  getCashierInfo(CashierTypeEnum.ALIPAY, appId as string).then(({ data }) => {
+    cashierInfo.value = data
+  })
+  getMchName(mchNo as string).then(({ data }) => {
+    mchName.value = data
+  })
+}
+
 /**
  * 微信jsapi方式支付
  */
-function wechatPay() {
+function pay() {
   loading.value = true
   const from = {
-    amount: amount.value,
+    amount: Number(amount.value),
     appId,
     authCode: code,
     cashierType: CashierTypeEnum.WECHAT_PAY,
+    description: description.value,
     mchNo,
   } as CashierPayParam
   cashierPay(from)
@@ -79,7 +141,7 @@ function wechatPay() {
       loading.value = false
       // 拉起jsapi支付
       const json = JSON.parse(data.payBody)
-      doJsapiPay(json)
+      jsapiPay(json)
     })
     .catch((err) => {
       // 跳转到错误页
@@ -93,7 +155,7 @@ function wechatPay() {
 /**
  * 拉起Jsapi支付窗口
  */
-function doJsapiPay(data: WxJsapiSignResult) {
+function jsapiPay(data: WxJsapiSignResult) {
   const form = {
     appId: data.appId, // 公众号ID，由商户传入
     timeStamp: data.timeStamp, // 时间戳，自1970年以来的秒数
@@ -113,5 +175,30 @@ function doJsapiPay(data: WxJsapiSignResult) {
 </script>
 
 <style scoped lang="less">
+@color: #4caf50;
 
+:deep(.van-key--blue) {
+  background: @color;
+}
+.container {
+  background-color: @color;
+  width: 100%;
+  padding: 10px;
+  border-radius: 10px;
+  text-align: center;
+  color: white;
+  .amount-display {
+    background-color: white;
+    color: @color;
+    border-radius: 20px;
+    padding: 20px;
+    margin: 20px 0;
+  }
+  .amount-display p {
+    margin: 5px 0;
+  }
+}
+.remark {
+  color: @color;
+}
 </style>