refactor(router): 重构收银台路由和组件

- 更新路由配置，统一收银台相关路径
- 重命名收银台相关组件，提高代码可读性
- 新增结算台相关路由和组件
- 优化微信和支付宝收银台的逻辑
- 调整收银台 API 接口和数据结构

src/router/daxpay.ts

@@ -27,28 +27,52 @@ export const DaxPayRoute: RouteRecordRaw = {
       },
     },
     {
-      path: '/channel/cashier/:appId',
-      name: 'ChannelCashier',
-      component: () => import('@/views/daxpay/cashier/ChannelCashier.vue'),
+      path: '/cashier/:code',
+      name: 'CashierCode',
+      component: () => import('@/views/daxpay/cashier/CashierCode.vue'),
       meta: {
         title: '收银台',
       },
     },
     {
-      path: '/alipay/cashier/:appId',
-      name: 'AlipayCashier',
-      component: () => import('@/views/daxpay/cashier/alipay/AlipayCashier.vue'),
+      path: '/cashier/alipay/:code',
+      name: 'AlipayCashierCode',
+      component: () => import('@/views/daxpay/cashier/alipay/AlipayCashierCode.vue'),
       meta: {
         title: '支付宝收银台',
       },
     },
     {
-      path: '/wechat/cashier/:appId',
-      name: 'WechatCashier',
-      component: () => import('@/views/daxpay/cashier/wechat/WechatCashier.vue'),
+      path: '/cashier/wechat/:code',
+      name: 'WechatCashierCode',
+      component: () => import('@/views/daxpay/cashier/wechat/WechatCashierCode.vue'),
       meta: {
         title: '微信收银台',
       },
     },
+    {
+      path: '/checkout/:code',
+      name: 'ChannelCashier',
+      component: () => import('@/views/daxpay/cashier/ChannelCheckout.vue'),
+      meta: {
+        title: '结算台',
+      },
+    },
+    {
+      path: '/alipay/checkout/:appId/:orderId',
+      name: 'AlipayCashier',
+      component: () => import('@/views/daxpay/cashier/alipay/AlipayCheckout.vue'),
+      meta: {
+        title: '支付宝结算台',
+      },
+    },
+    {
+      path: '/wechat/checkout/:appId/:orderId',
+      name: 'WechatCheckout',
+      component: () => import('@/views/daxpay/cashier/wechat/WechatCheckout.vue'),
+      meta: {
+        title: '微信结算台',
+      },
+    },
   ],
 }

src/views/daxpay/cashier/CashierCode.api.ts

@@ -2,24 +2,23 @@ import type { AuthResult } from '../auth/ChannelAuth.api'
 import { http } from '@/utils/http/axios'
 import type { Result } from '#/axios'
 
-
 /**
- * 获取收银台信息
+ * 获取收银台配置信息
  */
-export function getCashierInfo(cashierType: string, appId: string) {
-  return http.request<Result<ChannelCashierConfigResult>>({
-    url: '/unipay/ext/channel/cashier/getCashier',
+export function getCashierTypeConfig(cashierType: string, cashierCode: string) {
+  return http.request<Result<CashierTypeConfigResult>>({
+    url: '/unipay/cashier/code/findByCashierType',
     method: 'GET',
-    params: { cashierType, appId },
+    params: { cashierType, cashierCode },
   })
 }
 
 /**
  * 获取收银台所需授权链接, 用于获取OpenId一类的信息
  */
-export function generateAuthUrl(param: CashierAuthParam) {
+export function generateAuthUrl(param: CashierAuthUrlParam) {
   return http.request<Result<string>>({
-    url: '/unipay/ext/channel/cashier/generateAuthUrl',
+    url: '/unipay/cashier/code/generateAuthUrl',
     method: 'POST',
     data: param,
   })
@@ -28,9 +27,9 @@ export function generateAuthUrl(param: CashierAuthParam) {
 /**
  * 获取授权信息
  */
-export function auth(param: CashierPayParam) {
+export function auth(param: CashierAuthParam) {
   return http.request<Result<AuthResult>>({
-    url: '/unipay/ext/channel/cashier/auth',
+    url: '/unipay/cashier/code/auth',
     method: 'POST',
     data: param,
   })
@@ -41,18 +40,28 @@ export function auth(param: CashierPayParam) {
  */
 export function cashierPay(param: CashierPayParam) {
   return http.request<Result<PayResult>>({
-    url: '/unipay/ext/channel/cashier/pay',
+    url: '/unipay/cashier/code/pay',
     method: 'POST',
     data: param,
   })
 }
 
 /**
- * 通道认证参数
+ * 获取认证URL参数
+ */
+export interface CashierAuthUrlParam {
+  // 应用号
+  cashierCode?: string
+  // 收银台类型
+  cashierType?: string
+}
+
+/**
+ * 认证参数
  */
 export interface CashierAuthParam {
   // 应用号
-  appId?: string
+  cashierCode?: string
   // 收银台类型
   cashierType?: string
   // 授权码
@@ -64,7 +73,7 @@ export interface CashierAuthParam {
  */
 export interface CashierPayParam {
   // 应用号
-  appId?: string
+  cashierCode?: string
   // 收银台类型
   cashierType?: string
   // 支付金额
@@ -79,7 +88,6 @@ export interface CashierPayParam {
  * 支付结果
  */
 export interface PayResult {
-
   // 支付状态
   status: string
   // 支付参数体
@@ -109,21 +117,17 @@ export interface WxJsapiSignResult {
 }
 
 /**
- * 收银台配置信息
+ * 收银码牌配置信息
  */
-export interface ChannelCashierConfigResult {
+export interface CashierTypeConfigResult {
   // 应用号
   appId?: string
-  // 收银台类型
-  cashierType?: string
-  // 收银台名称
-  cashierName?: string
+  // 码牌名称
+  name?: string
   // 支付通道
   channel?: string
   // 支付方式
   payMethod?: string
   // 是否开启分账
   allocation?: boolean
-  // 自动分账
-  autoAllocation?: boolean
 }

src/views/daxpay/cashier/CashierCode.vue

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

src/views/daxpay/cashier/ChannelCheckout.vue

@@ -0,0 +1,24 @@
+<template>
+</template>
+
+<script setup lang="ts">
+import { useRoute } from 'vue-router'
+import router from '@/router'
+
+const route = useRoute()
+const { appId, orderId } = route.params
+
+const ua = navigator.userAgent
+if (ua.includes('MicroMessenger')) {
+  router.push({ path: `/wechat/checkout/${appId}/${orderId}`, replace: true })
+}
+else if (ua.includes('Alipay')) {
+  router.push({ path: `/alipay/checkout/${appId}/${orderId}`, replace: true })
+}
+else {
+  router.push({ name: 'ErrorResult', query: { msg: '请使用支付宝、微信等支付程序进行扫码支付' }, replace: true })
+}
+</script>
+
+<style scoped lang="less">
+</style>

src/views/daxpay/cashier/alipay/AlipayCashierCode.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="container">
       <div style="font-size: 28px;margin-top: 10px;">
-        {{ cashierInfo.cashierName || '支付宝收银台' }}
+        {{ cashierTypeConfig.name || '支付宝收银台' }}
       </div>
       <div class="amount-display">
         <p style="font-size: 20px">
@@ -65,23 +65,23 @@ import { useRoute } from 'vue-router'
 import { showNotify } from 'vant'
 import type {
   CashierPayParam,
-  ChannelCashierConfigResult,
-} from '@/views/daxpay/cashier/ChannelCashier.api'
+  CashierTypeConfigResult,
+} from '@/views/daxpay/cashier/CashierCode.api'
 import {
   cashierPay,
-  getCashierInfo,
-} from '@/views/daxpay/cashier/ChannelCashier.api'
+  getCashierTypeConfig,
+} from '@/views/daxpay/cashier/CashierCode.api'
 
 import { CashierTypeEnum } from '@/enums/daxpay/DaxPayEnum'
 import router from '@/router'
 import { useKeyboard } from '@/hooks/daxpay/useKeyboard'
 
 const route = useRoute()
-const { appId } = route.params
+const { code } = route.params
 
 const showRemark = ref<boolean>(false)
 const loading = ref<boolean>(false)
-const cashierInfo = ref<ChannelCashierConfigResult>({})
+const cashierTypeConfig = ref<CashierTypeConfigResult>({})
 const amount = ref<string>('0')
 const description = ref<string>('')
 
@@ -95,8 +95,8 @@ onMounted(() => {
  * 初始化数据
  */
 function initData() {
-  getCashierInfo(CashierTypeEnum.ALIPAY, appId as string).then(({ data }) => {
-    cashierInfo.value = data
+  getCashierTypeConfig(CashierTypeEnum.ALIPAY, code as string).then(({ data }) => {
+    cashierTypeConfig.value = data
   }).catch((res) => {
     router.push({ name: 'ErrorResult', query: { msg: res.message } })
   })
@@ -114,7 +114,7 @@ function pay() {
   loading.value = true
   const from = {
     amount: amountValue,
-    appId,
+    cashierCode: code,
     cashierType: CashierTypeEnum.ALIPAY,
     description: description.value,
   } as CashierPayParam

src/views/daxpay/cashier/alipay/AlipayCheckout.vue

@@ -0,0 +1,111 @@
+<template>
+  <div>
+    <div class="container">
+      <div style="font-size: 28px;margin-top: 10px;">
+        {{ cashierInfo.cashierName || '支付宝收银台' }}
+      </div>
+      <div class="amount-display">
+        <p style="font-size: 20px">
+          付款金额
+        </p>
+        <p style="font-size: 32px;">
+          ¥ {{ amount }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import { showNotify } from 'vant'
+import type {
+  CashierPayParam,
+  CashierTypeConfigResult,
+} from '@/views/daxpay/cashier/CashierCode.api'
+import {
+  cashierPay,
+  getCashierTypeConfig,
+} from '@/views/daxpay/cashier/CashierCode.api'
+
+import { CashierTypeEnum } from '@/enums/daxpay/DaxPayEnum'
+import router from '@/router'
+
+const route = useRoute()
+const { appId, orderId } = route.params
+
+const loading = ref<boolean>(false)
+const cashierInfo = ref<CashierTypeConfigResult>({})
+const amount = ref<string>('0')
+const description = ref<string>('')
+
+
+onMounted(() => {
+  initData()
+})
+
+/**
+ * 初始化数据
+ */
+function initData() {
+  // getCashierInfo(CashierTypeEnum.ALIPAY, appId as string).then(({ data }) => {
+  //   cashierInfo.value = data
+  // }).catch((res) => {
+  //   router.push({ name: 'ErrorResult', query: { msg: res.message } })
+  // })
+}
+
+/**
+ * 支付
+ */
+function pay() {
+  const amountValue = Number(amount.value)
+  if (amountValue === 0) {
+    showNotify({ type: 'warning', message: '金额不可为0' })
+    return
+  }
+  loading.value = true
+  const from = {
+    amount: amountValue,
+    Code: code,
+    cashierType: CashierTypeEnum.ALIPAY,
+    description: description.value,
+  } as CashierPayParam
+  cashierPay(from)
+    .then(({ data }) => {
+      loading.value = false
+      // 跳转到H5/付款码支付页面
+      location.replace(data.payBody)
+    })
+}
+</script>
+
+<style scoped lang="less">
+@color: #108ee9;
+
+: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>

src/views/daxpay/cashier/wechat/WechatCashierCode.vue

@@ -2,7 +2,7 @@
   <div v-if="show">
     <div class="container">
       <div style="font-size: 28px;margin-top: 10px;">
-        {{ cashierInfo.cashierName || '微信收银台' }}
+        {{ cashierTypeConfig.cashierName || '微信收银台' }}
       </div>
       <div class="amount-display">
         <p style="font-size: 20px">
@@ -66,38 +66,37 @@ import { showNotify } from 'vant'
 import type {
   CashierAuthParam,
   CashierPayParam,
-  ChannelCashierConfigResult,
+  CashierTypeConfigResult,
   WxJsapiSignResult,
-} from '@/views/daxpay/cashier/ChannelCashier.api'
+} from '@/views/daxpay/cashier/CashierCode.api'
 import {
   auth
   , cashierPay,
   generateAuthUrl,
-  getCashierInfo,
-} from '@/views/daxpay/cashier/ChannelCashier.api'
+  getCashierTypeConfig,
+} from '@/views/daxpay/cashier/CashierCode.api'
 
 import { CashierTypeEnum } from '@/enums/daxpay/DaxPayEnum'
 import router from '@/router'
 import { useKeyboard } from '@/hooks/daxpay/useKeyboard'
 
 const route = useRoute()
-const { appId } = route.params
-const { code } = route.query
+const { code } = route.params
+const { code : authCode } = route.query
 
 const show = ref<boolean>(false)
 const showRemark = ref<boolean>(false)
 const loading = ref<boolean>(false)
-const cashierInfo = ref<ChannelCashierConfigResult>({})
+const cashierTypeConfig = ref<CashierTypeConfigResult>({})
 const amount = ref<string>('0')
 const description = ref<string>('')
 const openId = ref<string>('')
 
 // 认证参数
 const authParam = ref<CashierAuthParam>({
-  appId: appId as string,
-  cashierType: CashierTypeEnum.WECHAT_PAY,
+  code: code as string,
+  type: CashierTypeEnum.WECHAT_PAY,
 })
-
 const { input, del } = useKeyboard(amount)
 
 onMounted(() => {
@@ -105,13 +104,13 @@ onMounted(() => {
 })
 
 /**
- * 初始化
+ * 进入页面的初始化
  */
 function init() {
-  // 如果不是重定向跳转过来， 跳转到到重定向地址
-  if (!code) {
+  // 如果不是重定向跳转过来， 跳转到到重定向授权地址
+  if (!authCode) {
     // 重定向跳转到微信授权地址
-    generateAuthUrl(authParam.value).then((res) => {
+    generateAuthUrl({ cashierType: CashierTypeEnum.WECHAT_PAY, cashierCode: code as string}).then((res) => {
       const url = res.data
       location.replace(url)
     }).catch((res) => {
@@ -119,7 +118,7 @@ function init() {
     })
   }
   else {
-    authParam.value.authCode = code as string
+    authParam.value.authCode = authCode as string
     // 初始化数据
     initData()
   }
@@ -130,11 +129,14 @@ function init() {
  */
 function initData() {
   show.value = true
-  getCashierInfo(CashierTypeEnum.ALIPAY, appId as string).then(({ data }) => {
-    cashierInfo.value = data
+  // 获取配置参数
+  getCashierTypeConfig(CashierTypeEnum.WECHAT_PAY, code as string).then(({ data }) => {
+    cashierTypeConfig.value = data
   }).catch((res) => {
     router.push({ name: 'ErrorResult', query: { msg: res.message } })
   })
+
+  // 认证获取OpenId
   auth(authParam.value).then(({ data }) => {
     openId.value = data.openId as string
   }).catch((res) => {
@@ -154,8 +156,8 @@ function pay() {
 
   loading.value = true
   const from = {
+    cashierCode: code,
     amount: amountValue,
-    appId,
     openId: openId.value,
     cashierType: CashierTypeEnum.WECHAT_PAY,
     description: description.value,

src/views/daxpay/cashier/wechat/WechatCheckout.vue

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