提交新内容

.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/router/daxpay.ts

@@ -83,7 +83,7 @@ export const DaxPayH5Route: RouteRecordRaw = {
       },
     },
     {
-      path: '/paySuccess/:orderNo',
+      path: '/paySuccess/:orderNo?',
       name: 'PaySuccess',
       component: () => import('@/views/daxpay/h5/result/PaySuccess.vue'),
       meta: {

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) => {
+    .catch((res) => {
-      console.log(error)
+      router.push({ name: 'payFail', query: { msg: res.message } })
-      // 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">
+        <p class="title">
-          付款给{{ cashierInfo?.name }}
+          金额
         </p>
-        <p style="font-size: 32px;">
+        <p style="font-size: 32px">
-          ¥ {{ amount }}
+          ¥{{ 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>
 
@@ -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) {
@@ -127,7 +139,6 @@ async function init() {
       }
     })
     .catch((error) => {
-      console.log(error)
       router.push({ name: 'payFail', query: { msg: error } })
     })
 }
@@ -180,7 +191,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: '支付成功' },
+      })
     }
   })
 }
@@ -193,24 +207,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;
-  }
+    display: flex;
-  .amount-display p {
+    gap: 1.875rem;
-    margin: 5px 0;
+    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 }) => {
+  if (orderNo) {
-    orderAndConfig.value = data
+    getSuccessOrderMessage(orderNo).then(({ data }) => {
-  })
+      orderAndConfig.value = data
+    })
+  }
 }
 const ua = getBrowserUA()
 if (ua === 'wechat') {