feat 结算台增加云闪付演示

src/views/demo/cashier/Cashier.vue

@@ -1,7 +1,8 @@
 <template>
   <div style="background-color: #f5f5f7">
+    <div v-html="payForm"></div>
     <div class="page paydemo">
-      <div class="blog-container" id="container" style="margin-top: 80px">
+      <div class="blog-container" id="container">
         <a-spin :spinning="loading">
           <div class="content" style="padding-top: 20px">
             <div style="width: 100%">
@@ -50,6 +51,19 @@
                     </div>
                   </div>
                 </div>
+                <div class="paydemo-type-name">
+                  <span> 云闪付支付（沙箱环境） </span>
+                  <a target="_blank" href="https://open.unionpay.com/tjweb/support/faq/mchlist?id=4">测试卡信息</a>、
+                  <a target="_blank" href="https://open.unionpay.com/tjweb/ij/tool/qrcodeFormPage">条码仿真工具</a>
+                </div>
+                <div class="paydemo-type-body">
+                  <div v-for="item in UniPayList" :key="item.payInfo.payWay" @click="handleActive(item.payInfo)">
+                    <div :class="item.payInfo === currentActive ? 'colorChange' : 'paydemoType'">
+                      <img :src="item.img" class="paydemo-type-img" />
+                      <span class="color-change">{{ item.title }}</span>
+                    </div>
+                  </div>
+                </div>
                 <div class="paydemo-type-name">聚合支付</div>
                 <div class="paydemo-type-body">
                   <div v-for="item in aggregationPayList" :key="item.payInfo.payWay" @click="handleActive(item.payInfo)">
@@ -121,7 +135,7 @@
   import { aggregateBarCodePay, createAggregatePayUrl, findStatusByBusinessId, getUniCashierUrl, simplePayCashier } from './Cashier.api'
   import { useMessage } from '/@/hooks/web/useMessage'
   import { $ref } from 'vue/macros'
-  import { onMounted, onUnmounted } from 'vue'
+  import { nextTick, onMounted, onUnmounted } from 'vue'
   import QrCode from '/@/components/Qrcode/src/Qrcode.vue'
   import { useIntervalFn } from '@vueuse/core'
   import { payChannelEnum } from '/@/enums/payment/payChannelEnum'
@@ -132,6 +146,8 @@
   const cashierQrCode = $ref<any>()
   const cashierBarCode = $ref<any>()
 
+  let payForm = $ref<string>()
+
   // 业务单号
   let businessNo = $ref<string>('')
   let title = $ref<string>('测试支付')
@@ -188,6 +204,29 @@
       payInfo: { payChannel: payChannelEnum.WECHAT, payWay: payWayEnum.WAP },
     },
   ])
+  // 云闪付
+  let UniPayList = $ref([
+    {
+      img: new URL('./imgs/wechat/wx_native.svg', import.meta.url),
+      title: '扫码支付',
+      payInfo: { payChannel: payChannelEnum.UNION_PAY, payWay: payWayEnum.QRCODE },
+    },
+    {
+      img: new URL('./imgs/wechat/wx_bar.svg', import.meta.url),
+      title: '条码支付',
+      payInfo: { payChannel: payChannelEnum.UNION_PAY, payWay: payWayEnum.BARCODE },
+    },
+    {
+      img: new URL('./imgs/wechat/wx_h5.svg', import.meta.url).href,
+      title: 'wap支付',
+      payInfo: { payChannel: payChannelEnum.UNION_PAY, payWay: payWayEnum.WAP },
+    },
+    {
+      img: new URL('./imgs/ali/ali_pc.svg', import.meta.url).href,
+      title: 'web支付',
+      payInfo: { payChannel: payChannelEnum.UNION_PAY, payWay: payWayEnum.WEB },
+    },
+  ])
   let aggregationPayList = $ref([
     {
       img: new URL('./imgs/aggregate/qr_cashier.svg', import.meta.url).href,
@@ -271,7 +310,7 @@
     // 聚合支付
     if (payChannel === payChannelEnum.AGGREGATION) {
       if (payWay === payWayEnum.BARCODE) {
-        cashierBarCode.init('请输入支付宝条码或微信条码')
+        cashierBarCode.init('请输入支付宝、微信或云闪付条码')
       } else {
         aggregationQr()
       }
@@ -280,7 +319,15 @@
 
     // 普通支付
     if (payWay === payWayEnum.BARCODE) {
-      cashierBarCode.init(payChannel === payChannelEnum.ALI ? '请输入支付宝条码' : '请输入微信条码')
+      let msg: string
+      if (payChannel === payChannelEnum.ALI) {
+        msg = '请输入支付宝条码'
+      } else if (payChannel === payChannelEnum.WECHAT) {
+        msg = '请输入微信条码'
+      } else {
+        msg = '请输入云闪付条码，使用二维码仿真工具获取'
+      }
+      cashierBarCode.init(msg)
     } else {
       qrPay(payChannel, payWay)
     }
@@ -298,7 +345,7 @@
     // 获取聚合支付中间页地址
     const { data: qrUrl } = await createAggregatePayUrl(param)
     resume()
-    cashierQrCode.init(qrUrl, '请使用支付宝或微信"扫一扫"进行支付')
+    cashierQrCode.init(qrUrl, '请使用支付宝、微信扫码支付')
   }
 
   /**
@@ -340,15 +387,27 @@
     const { data } = await simplePayCashier(param).finally(() => {
       loading = false
     })
-    // pc支付
-    if ([payWayEnum.WAP, payWayEnum.WEB].includes(payWay)) {
+    // 云闪付wap和web支付
+    if ([payWayEnum.WAP, payWayEnum.WEB].includes(payWay) && payChannel === payChannelEnum.UNION_PAY) {
+      payForm = data.payBody
+      // 本地提交提交支付表单
+      nextTick(() => {
+        console.log(document.forms[0])
+        document.forms[0].submit()
+      })
+    }
+    // pc支付(微信/支付宝)
+    else if ([payWayEnum.WAP, payWayEnum.WEB].includes(payWay)) {
       window.open(data.payBody)
     } else if (payChannel === payChannelEnum.ALI) {
       cashierQrCode.init(data.payBody, '请使用支付宝"扫一扫"进行支付')
       resume()
-    } else {
+    } else if (payChannel === payChannelEnum.WECHAT) {
       cashierQrCode.init(data.payBody, '请使用微信"扫一扫"进行支付')
       resume()
+    } else {
+      cashierQrCode.init(data.payBody, '请解析二维码后使用二维码仿真工具进行支付')
+      resume()
     }
   }
   /**

src/views/demo/cashier/FromPay.vue

@@ -0,0 +1,11 @@
+<template>
+
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped lang="less">
+
+</style>

src/views/demo/cashier/style.less

@@ -1,8 +1,8 @@
 .page {
   box-sizing: border-box;
   min-height: 100%;
-  padding-bottom: 80px;
-  margin-top: 81px;
+  //padding-bottom: 80px;
+  //margin-top: 81px;
 }
 .paydemo {
   .content {
@@ -11,7 +11,7 @@
   }
   .paydemo-type-content {
     padding: 20px;
-    margin-bottom: 20px;
+    margin-bottom: 10px;
     background-color: #FFFFFF;
     border-radius: 6px;
     p {
@@ -47,7 +47,7 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    margin-bottom: 20px;
+    margin-bottom: 10px;
   }
   .paydemo-type-h5 {
     padding: 12px;

src/views/payment/channel/wechat/config/WechatPayConfig.api.ts

@@ -40,6 +40,8 @@ export interface WechatPayConfig extends BaseEntity {
   wxMchId?: string
   // 是否启用
   enable: boolean
+  // API 版本
+  apiVersion: string
   // 商户平台「API安全」中的 APIv2 密钥
   apiKeyV2?: string
   // 商户平台「API安全」中的 APIv3 密钥

src/views/payment/channel/wechat/config/WechatPayConfigEdit.vue

@@ -51,6 +51,12 @@
         <a-form-item label="沙箱环境" name="sandbox">
           <a-switch checked-children="是" un-checked-children="否" v-model:checked="form.sandbox" />
         </a-form-item>
+        <a-form-item label="API版本" name="apiVersion">
+          <a-radio-group v-model:value="form.apiVersion" button-style="solid">
+            <a-radio-button value="apiV2"> Api_V2 </a-radio-button>
+            <a-radio-button value="apiV3"> Api_V3 </a-radio-button>
+          </a-radio-group>
+        </a-form-item>
         <a-form-item label="APIv2密钥" name="apiKeyV2">
           <a-textarea :rows="3" :disabled="showable" v-model:value="form.apiKeyV2" placeholder="请输入APIv2密钥" />
         </a-form-item>
@@ -122,6 +128,7 @@
   let form = $ref<WechatPayConfig>({
     id: null,
     enable: false,
+    apiVersion: 'apiV2',
     wxMchId: '',
     wxAppId: '',
     appSecret: '',
@@ -143,10 +150,10 @@
       enable: [{ required: true, message: '请选择是否启用' }],
       notifyUrl: [{ required: true, message: '请输入异步通知页面地址' }],
       returnUrl: [{ required: true, message: '请输入同步通知页面地址' }],
-      apiVersion: [{ required: true, message: '请选择支付API版本' }],
-      apiKeyV2: [{ required: true, message: '请输入V2秘钥' }],
       sandbox: [{ required: true, message: '请选择是否为沙箱环境' }],
-      // apiKeyV3: [{ required: true, message: '请输入V3秘钥' }],
+      apiVersion: [{ required: true, message: '请选择支付API版本' }],
+      apiKeyV2: [{ required: form.apiVersion === 'apiV2', message: '请输入V2秘钥' }],
+      apiKeyV3: [{ required: form.apiVersion === 'apiV3', message: '请输入V3秘钥' }],
       // p12: [{ required: true, message: '请上传p12证书' }],
       payWays: [{ required: true, message: '请选择支持的支付类型' }],
     } as Record<string, Rule[]>