feat 手机收银台开发

src/router/routes/project.ts

@@ -55,7 +55,7 @@ export const OUTSIDE: AppRouteModule = {
       path: '/cashier',
       name: 'cashier',
       component: () => import('/@/views/demo/cashier/Cashier.vue'),
-      meta: { title: '结算台支付演示', ignoreAuth: true },
+      meta: { title: '收银台演示', ignoreAuth: true },
     },
   ],
 }

src/views/demo/cashier/Cashier.vue

@@ -6,7 +6,7 @@
           <div class="content" style="padding-top: 20px">
             <div style="width: 100%">
               <a-alert
-                message="本结算台是基于支付网关搭建的演示模块，支付后可以通过管理端进行退款操作，"
+                message="本收银台是基于DaxPay开源支付网关搭建的演示模块，支付后可以通过管理端进行退款操作，"
                 type="warning"
                 show-icon
                 style="margin-bottom: 20px; padding: 15px"
@@ -23,11 +23,11 @@
                   <div style="position: relative">
                     <div class="paydemo-type-h5" @mouseover="wxHover = true" @mouseleave="wxHover = false">
                       <img src="./imgs/wechat/wx_jsapi.svg" class="paydemo-type-img" />
-                      <span class="color-change">公众号支付</span>
+                      <span class="color-change">公众号</span>
                     </div>
                     <div class="paydemo-type-h5 codeImg_wx_h5" v-if="wxHover">
                       <qr-code :options="{ margin: 2 }" :width="150" :value="wxH5Url" />
-                      <span>请使用手机浏览器扫码</span>
+                      <span>使用微信扫码体验</span>
                     </div>
                   </div>
                 </div>
@@ -40,13 +40,13 @@
                     </div>
                   </div>
                   <div style="position: relative">
-                    <div class="paydemo-type-h5" code="ALI_WAP" @mouseover="aliHover = true" @mouseleave="aliHover = false">
+                    <div class="paydemo-type-h5" @mouseover="aliHover = true" @mouseleave="aliHover = false">
                       <img src="./imgs/ali/ali_jsapi.svg" class="paydemo-type-img" />
                       <span>h5支付</span>
                     </div>
                     <div class="paydemo-type-h5 codeImg_wx_h5" v-if="aliHover">
                       <qr-code :options="{ margin: 2 }" :width="150" :value="aliH5Url" />
-                      <span>请使用手机浏览器扫码</span>
+                      <span>使用支付宝扫码体验</span>
                     </div>
                   </div>
                 </div>
@@ -58,6 +58,10 @@
                       <span class="color-change">{{ item.title }}</span>
                     </div>
                   </div>
+                  <div class="paydemo-type-h5" @click="h5cashier">
+                    <img src="./imgs/aggregate/cashier-h5.svg" class="paydemo-type-img" style="margin-left: 8px" />
+                    <span>H5收银台</span>
+                  </div>
                 </div>
               </div>
               <div class="paydemo-type-content">
@@ -133,11 +137,13 @@
   let title = $ref('测试支付')
   let loading = $ref(false)
   // 微信 h5
-  let wxH5Url = $ref('cs')
+  let wxH5Url = $ref('初始化中...')
   let wxHover = $ref(false)
   // 支付宝 h5
-  let aliH5Url = $ref('cs')
+  let aliH5Url = $ref('初始化中...')
   let aliHover = $ref(false)
+  // 聚合支付
+  let h5cashierUrl = $ref('初始化中...')
   // 当前选择支付渠道和方式
   let currentActive = $ref({
     payChannel: null,
@@ -184,12 +190,12 @@
   ])
   let aggregationPayList = $ref([
     {
-      img: new URL('./imgs/qr/qr_cashier.svg', import.meta.url).href,
+      img: new URL('./imgs/aggregate/qr_cashier.svg', import.meta.url).href,
       title: '扫码支付',
       payInfo: { payChannel: payChannelEnum.AGGREGATION, payWay: payWayEnum.QRCODE },
     },
     {
-      img: new URL('./imgs/qr/auto_bar.svg', import.meta.url).href,
+      img: new URL('./imgs/aggregate/auto_bar.svg', import.meta.url).href,
       title: '条码支付',
       payInfo: { payChannel: payChannelEnum.AGGREGATION, payWay: payWayEnum.BARCODE },
     },
@@ -226,9 +232,10 @@
   /**
    * 初始化业务数据
    */
-  async function initData() {
+  function initData() {
     // 生成业务编码
     genBusinessNo()
+    // 获取微信H5、支付宝H5、手机收银台
   }
   /**
    * 支付金额变动
@@ -242,6 +249,14 @@
       payMoneyShow = false
     }
   }
+
+  /**
+   * h5收银台
+   */
+  function h5cashier() {
+    cashierQrCode.init(h5cashierUrl, '请使用浏览器、支付宝、微信等软件扫码体验')
+  }
+
   /**
    * 发起支付. 分别处理普通支付和聚合支付
    */
@@ -277,7 +292,7 @@
     // 获取聚合支付中间页地址
     const { data: qrUrl } = await createAggregatePayUrl(param)
     resume()
-    cashierQrCode.init(qrUrl, '请使用支付宝或微信"扫一扫"扫码支付')
+    cashierQrCode.init(qrUrl, '请使用支付宝或微信"扫一扫"进行支付')
   }
 
   /**
@@ -322,10 +337,10 @@
     if ([payWayEnum.WAP, payWayEnum.WEB].includes(payWay)) {
       window.open(data.payBody)
     } else if (payChannel === payChannelEnum.ALI) {
-      cashierQrCode.init(data.payBody, '请使用支付宝"扫一扫"扫码支付')
+      cashierQrCode.init(data.payBody, '请使用支付宝"扫一扫"进行支付')
       resume()
     } else {
-      cashierQrCode.init(data.payBody, '请使用微信"扫一扫"扫码支付')
+      cashierQrCode.init(data.payBody, '请使用微信"扫一扫"进行支付')
       resume()
     }
   }

src/views/demo/cashier/imgs/aggregate/cashier-h5.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1707661199518" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4077" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M853.341061 0a85.33331 85.33331 0 0 1 85.333309 85.33331v703.772249l46.079988-18.97244a28.444437 28.444437 0 0 1 21.646216 52.622208l-483.555421 199.111056a28.444437 28.444437 0 0 1-21.646217 0l-483.555421-199.111056a28.444437 28.444437 0 0 1 21.646216-52.622208l46.079988 18.97244V85.33331a85.33331 85.33331 0 0 1 85.333309-85.33331z m0 56.888873H170.674584a28.444437 28.444437 0 0 0-28.444437 28.444437v727.210464l369.777675 152.263069 369.777675-152.263069V85.33331a28.444437 28.444437 0 0 0-28.444436-28.444437z" fill="#464750" p-id="4078"></path><path d="M445.959841 516.351857h-72.95998a10.268442 10.268442 0 0 0-10.239997 10.239997v34.702212c0 5.603554 4.607999 10.239997 10.239997 10.239997h97.279973v49.919987h-97.279973a10.268442 10.268442 0 0 0-10.239997 10.239997v34.673768c0 5.631998 4.607999 10.239997 10.239997 10.239997h97.279973v81.151978c0 5.631998 4.607999 10.239997 10.239997 10.239997h63.85776c5.631998 0 10.239997-4.607999 10.239997-10.239997v-81.2942h97.678195c5.631998 0 10.239997-4.607999 10.239997-10.239997v-34.673768a10.268442 10.268442 0 0 0-10.239997-10.239998h-97.678195v-49.919986h97.678195c5.631998 0 10.239997-4.607999 10.239997-10.239997v-34.702212a10.268442 10.268442 0 0 0-10.239997-10.239998H578.567804l132.721741-245.219487a11.007997 11.007997 0 0 0 1.279999-4.863999 10.439108 10.439108 0 0 0-10.353775-10.126219h-69.774202a10.097775 10.097775 0 0 0-9.10222 5.631998l-108.373303 216.06394h-4.266666l-108.373303-216.06394a10.239997 10.239997 0 0 0-9.10222-5.631998h-71.310202a9.557331 9.557331 0 0 0-4.835554 1.28 10.183108 10.183108 0 0 0-4.124444 13.823996l133.006186 245.247932z" fill="#1890FF" p-id="4079"></path></svg>