fix 微信码牌不显示问题

Reviewed-on: https://gitea.yibeiguangnian.cn/daxpay/daxpay-multi-gateway-ui/pulls/2

.env.development

@@ -6,7 +6,7 @@ VITE_PUBLIC_PATH=/
 
 # 跨域代理，可以配置多个，请注意不要换行
 # VITE_PROXY=[["/server","http://daxpay-api.test.yibeiguangnian.cn/"]]
-  VITE_PROXY=[["/server","http://127.0.0.1:19999/"]]
+  VITE_PROXY=[["/server","http://192.168.11.229:19999/"]]
 
 # API 接口地址
 VITE_GLOB_API_URL=

src/views/daxpay/h5/aggregate/wechat/WechatAggregate.vue

@@ -205,10 +205,14 @@ function pay() {
     } as AggregatePayParam
     aggregatePay(from)
       .then(({ data }) => {
-        loading.value = false
-        // 拉起jsapi支付
-        const json = JSON.parse(data.payBody)
-        jsapiPay(json)
+        // 根据类型拉起对应的支付。 支持跳转和jsapi
+        if (orderAndConfig.value?.aggregateConfig.callType === GatewayCallTypeEnum.jsapi){
+          const json = JSON.parse(data.payBody)
+          jsapiPay(json)
+        }
+        if (orderAndConfig.value?.aggregateConfig.callType === GatewayCallTypeEnum.link){
+          location.replace(data.payBody as any)
+        }
       })
   }
 }

src/views/daxpay/h5/code/alipay/AlipayCashierCode.vue

@@ -25,6 +25,15 @@
         </div>
       </div>
     </div>
+    <!-- loading -->
+    <div v-if="loading" id="loadingMask" class="loadingMask hide">
+      <div class="content">
+        <img class="loadingImg" src="@/assets/images/loading.png" alt="">
+        <div class="loadingTxt">
+          处理中，请耐心等待
+        </div>
+      </div>
+    </div>
     <van-dialog
       v-model:show="showRemark"
       title="支付备注"
@@ -47,7 +56,7 @@
       />
     </van-dialog>
     <van-number-keyboard
-      :show="true"
+      :show="!loading"
       theme="custom"
       extra-key="."
       close-button-text="付款"
@@ -60,7 +69,7 @@
 
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { showNotify } from 'vant'
 import type { CashierPayParam, GatewayCashierConfig } from '../CashierCode.api'
 import { cashierPay, getCashierCodeConfig } from '../CashierCode.api'
@@ -68,6 +77,7 @@ import { AggregateEnum, CashierCodeTypeEnum } from '@/enums/daxpay/DaxPayEnum'
 import { useKeyboard } from '@/hooks/daxpay/useKeyboard'
 
 const route = useRoute()
+const router = useRouter()
 const { code } = route.params
 
 const showRemark = ref<boolean>(false) // 是否展示备注
@@ -93,9 +103,8 @@ function initData() {
       loading.value = false
       cashierInfo.value = data as any
     })
-    .catch((error) => {
-      console.log(error)
-      // router.push({ name: 'payFail', query: { msg: res.message } })
+    .catch((res) => {
+      router.push({ name: 'payFail', query: { msg: res.message } })
     })
 }
 
@@ -182,4 +191,66 @@ function pay() {
     cursor: pointer;
   }
 }
+/* loading */
+.loadingMask {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  margin: 0 auto;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 99;
+  border-radius: 0 0 0.2rem 0.2rem;
+
+  .content {
+    position: absolute;
+    width: 15rem;
+    border-radius: 0.2rem;
+    // box-shadow:
+    //   0px 12px 48px 16px rgba(0, 0, 0, 0.03),
+    //   0px 9px 28px 0px rgba(0, 0, 0, 0.05),
+    //   0px 6px 16px -8px rgba(0, 0, 0, 0.08);
+    display: flex;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .loadingImg {
+    width: 1.6rem;
+    height: 1.6rem;
+    margin-top: 2rem;
+    animation: 1.6s linear ratate infinite;
+  }
+
+  .loadingTxt {
+    font-size: 1.125rem;
+    color: #22242e;
+    margin-top: 1.2rem;
+    margin-bottom: 2rem;
+  }
+
+  @keyframes ratate {
+    0% {
+      transform: rotate(0deg);
+    }
+
+    40% {
+      transform: rotate(144deg);
+    }
+
+    80% {
+      transform: rotate(288deg);
+    }
+
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+}
 </style>

src/views/daxpay/h5/code/wechat/WechatCashierCode.vue

@@ -1,15 +1,39 @@
 <template>
   <div v-if="show">
     <div class="container">
+      <div class="payName">
+        <span>付款给</span>
+        <span class="paytext">{{ cashierInfo?.name }}</span>
+      </div>
       <div class="amount-display">
-        <p style="font-size: 20px">
-          付款给{{ cashierInfo?.name }}
+        <p class="title">
+          金额
         </p>
-        <p style="font-size: 32px;">
-          ¥ {{ amount }}
+        <p style="font-size: 32px">
+          ¥{{ amount }}
         </p>
       </div>
     </div>
+    <div class="notes">
+      <div class="remark" @click="showRemark = true">
+        <div v-if="!description">
+          添加备注
+        </div>
+        <div v-else style="max-width: 75vw">
+          <van-text-ellipsis :content="`备注: ${description}`" />
+          <div />
+        </div>
+      </div>
+    </div>
+    <!-- loading -->
+    <div v-if="loading" id="loadingMask" class="loadingMask hide">
+      <div class="content">
+        <img class="loadingImg" src="@/assets/images/loading.png" alt="">
+        <div class="loadingTxt">
+          处理中，请耐心等待
+        </div>
+      </div>
+    </div>
     <van-dialog
       v-model:show="showRemark"
       title="支付备注"
@@ -32,27 +56,14 @@
       />
     </van-dialog>
     <van-number-keyboard
-      :show="true"
+      :show="!loading"
       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="showRemark = true">
-            <div v-if="!description">
-              添加备注
-            </div>
-            <div v-else style="max-width: 75vw;">
-              <van-text-ellipsis :content="`备注: ${description}`" /><div />
-            </div>
-          </div>
-        </div>
-      </template>
-    </van-number-keyboard>
+    />
   </div>
 </template>
 
@@ -73,7 +84,7 @@ import {
   getCashierCodeConfig,
 } from '../CashierCode.api'
 
-import { AggregateEnum, CashierCodeTypeEnum } from '@/enums/daxpay/DaxPayEnum'
+import { AggregateEnum, CashierCodeTypeEnum, GatewayCallTypeEnum } from '@/enums/daxpay/DaxPayEnum'
 import router from '@/router'
 import { useKeyboard } from '@/hooks/daxpay/useKeyboard'
 
@@ -102,6 +113,7 @@ async function init() {
   loading.value = true
   getCashierCodeConfig(cashierCode, AggregateEnum.WECHAT)
     .then(({ data }) => {
+      loading.value = false
       cashierInfo.value = data as any
       // 判断是否需要获取OpenId
       if (data.needOpenId) {
@@ -125,9 +137,11 @@ async function init() {
           })
         }
       }
+      else {
+        show.value = true
+      }
     })
     .catch((error) => {
-      console.log(error)
       router.push({ name: 'payFail', query: { msg: error } })
     })
 }
@@ -153,9 +167,14 @@ function pay() {
   cashierPay(from)
     .then(({ data }) => {
       loading.value = false
-      // 拉起jsapi支付
-      const json = JSON.parse(data.payBody)
-      jsapiPay(json)
+      // 根据类型拉起对应的支付。 支持跳转和jsapi
+      if (cashierInfo.value?.callType === GatewayCallTypeEnum.jsapi) {
+        const json = JSON.parse(data.payBody)
+        jsapiPay(json)
+      }
+      if (cashierInfo.value?.callType === GatewayCallTypeEnum.link) {
+        location.replace(data.payBody as any)
+      }
     })
 }
 
@@ -175,7 +194,10 @@ function jsapiPay(data: WxJsapiSignResult) {
   WeixinJSBridge.invoke('getBrandWCPayRequest', form, (res) => {
     if (res.err_msg === 'get_brand_wcpay_request:ok') {
       // 跳转到成功页面
-      router.push({ name: 'SuccessResult', query: { msg: '支付成功' }, replace: true })
+      router.replace({
+        path: '/paySuccess',
+        query: { title: '支付成功' },
+      })
     }
   })
 }
@@ -188,24 +210,118 @@ function jsapiPay(data: WxJsapiSignResult) {
   background: @color;
 }
 .container {
-  background-color: @color;
+  background: linear-gradient(to bottom, #07c160, #07c160, #ffffff); // 从蓝色渐变到白色
   width: 100%;
-  padding: 10px;
+  padding: 40px;
+  height: 40%;
   border-radius: 10px;
   text-align: center;
   color: white;
+
+  .payName {
+    margin: 5px 0;
+    font-size: 16px;
+
+    .paytext {
+      font-size: 20px;
+      margin-left: 5px;
+      font-weight: 600;
+    }
+  }
+
   .amount-display {
     background-color: white;
     color: @color;
     border-radius: 20px;
     padding: 20px;
     margin: 20px 0;
-  }
-  .amount-display p {
-    margin: 5px 0;
+    display: flex;
+    gap: 1.875rem;
+    align-items: center;
+
+    p {
+      font-size: 32px;
+    }
+
+    .title {
+      font-size: 20px;
+    }
   }
 }
-.remark {
-  color: @color;
+
+.notes {
+  width: 100%;
+  height: 10%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .remark {
+    color: @color;
+    cursor: pointer;
+  }
+}
+
+/* loading */
+.loadingMask {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  margin: 0 auto;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 99;
+  border-radius: 0 0 0.2rem 0.2rem;
+
+  .content {
+    position: absolute;
+    width: 15rem;
+    border-radius: 0.2rem;
+    // box-shadow:
+    //   0px 12px 48px 16px rgba(0, 0, 0, 0.03),
+    //   0px 9px 28px 0px rgba(0, 0, 0, 0.05),
+    //   0px 6px 16px -8px rgba(0, 0, 0, 0.08);
+    display: flex;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .loadingImg {
+    width: 1.6rem;
+    height: 1.6rem;
+    margin-top: 2rem;
+    animation: 1.6s linear ratate infinite;
+  }
+
+  .loadingTxt {
+    font-size: 1.125rem;
+    color: #22242e;
+    margin-top: 1.2rem;
+    margin-bottom: 2rem;
+  }
+
+  @keyframes ratate {
+    0% {
+      transform: rotate(0deg);
+    }
+
+    40% {
+      transform: rotate(144deg);
+    }
+
+    80% {
+      transform: rotate(288deg);
+    }
+
+    100% {
+      transform: rotate(360deg);
+    }
+  }
 }
 </style>

src/views/daxpay/h5/result/PaySuccess.vue

@@ -7,13 +7,13 @@
         支付成功
       </p>
     </div>
-    <div class="payPrice">
+    <div v-if="orderAndConfig?.amount" class="payPrice">
       <span class="unit">￥</span>
       <div class="price">
         {{ orderAndConfig?.amount }}
       </div>
     </div>
-    <div class="payMessBox">
+    <div v-if="orderAndConfig?.amount" class="payMessBox">
       <div class="payMessItem">
         <div class="itemTitle">
           支付标题
@@ -70,9 +70,11 @@ onMounted(() => {
 })
 
 function init() {
-  getSuccessOrderMessage(orderNo).then(({ data }) => {
-    orderAndConfig.value = data
-  })
+  if (orderNo) {
+    getSuccessOrderMessage(orderNo).then(({ data }) => {
+      orderAndConfig.value = data
+    })
+  }
 }
 const ua = getBrowserUA()
 if (ua === 'wechat') {

src/views/daxpay/pc/cashier/Cashier.api.ts

@@ -129,7 +129,7 @@ export interface payParam {
   // 唯一标识
   openId?: string
   // 付款码
-  anthCode?: string
+  authCode?: string
 }
 /**
  * 支付配置项参数返回值