refactor(daxpay): 重构收银台相关代码

- 修改枚举名称：将 AggregateTypeEnum重命名为 CheckoutAggregateEnum
- 更新路由配置：修改收银台相关页面的路由名称
- 优化支付宝和微信收银台页面：调整页面布局和支付逻辑
- 重构公共方法：统一处理订单和配置信息获取
-调整样式：优化收银台页面样式

components.d.ts

@@ -12,12 +12,7 @@ declare module 'vue' {
     SvgIcon: typeof import('./src/components/SvgIcon.vue')['default']
     VanButton: typeof import('vant/es')['Button']
     VanConfigProvider: typeof import('vant/es')['ConfigProvider']
-    VanDialog: typeof import('vant/es')['Dialog']
-    VanField: typeof import('vant/es')['Field']
     VanLoading: typeof import('vant/es')['Loading']
-    VanNumberKeyboard: typeof import('vant/es')['NumberKeyboard']
-    VanOverlay: typeof import('vant/es')['Overlay']
     VanSubmitBar: typeof import('vant/es')['SubmitBar']
-    VanTextEllipsis: typeof import('vant/es')['TextEllipsis']
   }
 }

src/enums/daxpay/DaxPayEnum.ts

@@ -37,7 +37,10 @@ export enum CheckoutTypeEnum {
   AGGREGATE = 'aggregate',
 }
 
-export enum AggregateTypeEnum {
+/**
+ * 收银台聚合支付类型
+ */
+export enum CheckoutAggregateEnum {
   ALI = 'alipay',
   WECHAT = 'wechat_pay',
 }

src/router/daxpay.ts

@@ -52,7 +52,7 @@ export const DaxPayRoute: RouteRecordRaw = {
     },
     {
       path: '/checkout/:orderNo',
-      name: 'ChannelCashier',
+      name: 'CheckoutPay',
       component: () => import('@/views/daxpay/checkout/CheckoutPay.vue'),
       meta: {
         title: '手机收银台',
@@ -60,7 +60,7 @@ export const DaxPayRoute: RouteRecordRaw = {
     },
     {
       path: '/aggregate/:orderNo',
-      name: 'ChannelCashier',
+      name: 'CheckAggregate',
       component: () => import('@/views/daxpay/checkout/CheckAggregate.vue'),
       meta: {
         title: '手机收银台',
@@ -71,7 +71,7 @@ export const DaxPayRoute: RouteRecordRaw = {
       name: 'AliCheckout',
       component: () => import('@/views/daxpay/checkout/alipay/AliAggregate.vue'),
       meta: {
-        title: '微信收银台',
+        title: '支付宝收银台',
       },
     },
     {

src/views/daxpay/checkout/CheckAggregate.vue

@@ -6,14 +6,14 @@ import { useRoute } from 'vue-router'
 import router from '@/router'
 
 const route = useRoute()
-const { code: orderNo } = route.params
+const { orderNo } = route.params
 
 const ua = navigator.userAgent
 if (ua.includes('MicroMessenger')) {
-  router.push({ path: `/checkout/wechat/${orderNo}`, replace: true })
+  router.push({ path: `/aggregate/wechat/${orderNo}`, replace: true })
 }
 else if (ua.includes('Alipay')) {
-  router.push({ path: `/checkout/alipay/${orderNo}`, replace: true })
+  router.push({ path: `/aggregate/alipay/${orderNo}`, replace: true })
 }
 else {
   router.push({ name: 'ErrorResult', query: { msg: '请使用支付宝、微信等软件进行扫码支付' }, replace: true })

src/views/daxpay/checkout/CheckoutPay.api.ts

@@ -155,7 +155,7 @@ export interface CheckoutOrderResult {
   /** 描述 */
   description?: string
   /** 金额(元) */
-  amount?: string
+  amount?: number
 
 }
 /**

src/views/daxpay/checkout/CheckoutPay.vue

@@ -1,6 +1,6 @@
 <template>
-  <div>
+  <div v-if="show">
-
+  123
   </div>
 </template>
 
@@ -16,7 +16,7 @@ const route = useRoute()
 
 const { orderNo } = route.params
 const ua = navigator.userAgent
-
+const show = ref(false)
 const orderAndConfig = ref<CheckoutOrderAndConfigResult>({
   order: {},
   config: {},
@@ -40,8 +40,9 @@ async function initData() {
   })
   // 判断是否自动升级为聚合控制台
   if (orderAndConfig.value.config.h5AutoUpgrade) {
-    goAggregate()
+    await goAggregate()
   }
+  show.value = true
 }
 
 /**
@@ -49,10 +50,10 @@ async function initData() {
  */
 function goAggregate() {
   if (ua.includes('MicroMessenger')) {
-    router.push({ path: `/checkout/wechat/${orderNo}`, replace: true })
+    router.push({ path: `/aggregate/wechat/${orderNo}`, replace: true })
   }
   else if (ua.includes('Alipay')) {
-    router.push({ path: `/checkout/alipay/${orderNo}`, replace: true })
+    router.push({ path: `/aggregate/alipay/${orderNo}`, replace: true })
   }
 }
 

src/views/daxpay/checkout/alipay/AliAggregate.vue

@@ -13,7 +13,7 @@
         </p>
       </div>
     </div>
-    <van-submit-bar :price="aggregateInfo.order.amount || 0.00" button-text="支付" @submit="pay" />
+    <van-submit-bar :price="(aggregateInfo.order.amount || 0)*100" button-text="支付" @submit="pay" />
   </div>
 </template>
 
@@ -21,7 +21,7 @@
 import { onMounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
 
-import { AggregateTypeEnum } from '@/enums/daxpay/DaxPayEnum'
+import { CheckoutAggregateEnum } from '@/enums/daxpay/DaxPayEnum'
 import router from '@/router'
 import type {
   AggregateOrderAndConfigResult,
@@ -51,7 +51,7 @@ onMounted(() => {
  */
 async function initData() {
   // 查询订单和配置
-  await getAggregateConfig(orderNo, AggregateTypeEnum.ALI).then(({ data }) => {
+  await getAggregateConfig(orderNo, CheckoutAggregateEnum.ALI).then(({ data }) => {
     aggregateInfo.value = data
   }).catch((res) => {
     router.push({ name: 'ErrorResult', query: { msg: res.message } })
@@ -69,7 +69,7 @@ function pay() {
   loading.value = true
   const from = {
     orderNo: aggregateInfo.value.order.orderNo,
-    aggregateType: AggregateTypeEnum.ALI,
+    aggregateType: CheckoutAggregateEnum.ALI,
   } as CheckoutAggregatePayParam
   aggregatePay(from)
     .then(({ data }) => {

src/views/daxpay/checkout/wechat/WechatAggregate.vue

@@ -1,18 +1,19 @@
 <template>
-  <div>
+  <div v-if="show">
     <div class="container">
       <div style="font-size: 28px;margin-top: 10px;">
         {{ aggregateInfo.config.name || '微信收银台' }}
       </div>
       <div class="amount-display">
         <p style="font-size: 20px">
-          付款金额
+          金额
         </p>
         <p style="font-size: 32px;">
           ¥ {{ aggregateInfo.order.amount || 0.00 }}
         </p>
       </div>
     </div>
+    <van-submit-bar :price="(aggregateInfo.order.amount || 0)*100" button-text="支付" @submit="pay" />
   </div>
 </template>
 
@@ -20,10 +21,10 @@
 import { onMounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
 
-import { AggregateTypeEnum } from '@/enums/daxpay/DaxPayEnum'
+import { CheckoutAggregateEnum } from '@/enums/daxpay/DaxPayEnum'
 import router from '@/router'
-import type {
+import {
-  AggregateOrderAndConfigResult,
+  AggregateOrderAndConfigResult, aggregatePay, CheckoutAggregatePayParam,
   CheckoutAuthCodeParam,
   CheckoutPayParam,
 } from '@/views/daxpay/checkout/CheckoutPay.api'
@@ -42,7 +43,8 @@ const openId = ref<string>('')
 
 // 认证参数
 const authParam = ref<CheckoutAuthCodeParam>({
-  aggregateType: AggregateTypeEnum.WECHAT,
+  orderNo: orderNo as string,
+  aggregateType: CheckoutAggregateEnum.WECHAT,
 })
 
 const aggregateInfo = ref<AggregateOrderAndConfigResult>({
@@ -62,7 +64,7 @@ function init() {
   // 如果不是重定向跳转过来， 跳转到到重定向授权地址
   if (!authCode) {
     // 重定向跳转到微信授权地址
-    generateAuthUrl({ orderNo: orderNo as string, aggregateType: AggregateTypeEnum.WECHAT }).then((res) => {
+    generateAuthUrl({ orderNo: orderNo as string, aggregateType: CheckoutAggregateEnum.WECHAT }).then((res) => {
       const url = res.data
       location.replace(url)
     }).catch((res) => {
@@ -82,7 +84,7 @@ function init() {
 async function initData() {
   show.value = true
   // 获取聚合配置
-  getAggregateConfig(orderNo, AggregateTypeEnum.WECHAT).then(({ data }) => {
+  getAggregateConfig(orderNo, CheckoutAggregateEnum.WECHAT).then(({ data }) => {
     aggregateInfo.value = data
   }).catch((res) => {
     router.push({ name: 'ErrorResult', query: { msg: res.message } })
@@ -107,9 +109,10 @@ function pay() {
   loading.value = true
   const from = {
     orderNo: orderNo as string,
+    aggregateType: CheckoutAggregateEnum.WECHAT,
     openId: openId.value,
-  } as CheckoutPayParam
+  } as CheckoutAggregatePayParam
-  checkoutPay(from)
+  aggregatePay(from)
     .then(({ data }) => {
       loading.value = false
       // 拉起jsapi支付
@@ -141,5 +144,30 @@ function jsapiPay(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>