feat: 更新页面路由分布/调整配置支持PC显示/添加码牌收银台接口

postcss.config.js

@@ -34,7 +34,7 @@ const baseViewportOpts = {
   selectorBlackList: ['.ignore', 'keep-px'],
   // 下面配置表示属性值包含 '1px solid' 的内容不会转换
   valueBlackList: ['1px solid'],
-  // exclude: [/node_modules/], // 忽略某些文件夹下的文件或特定文件
+  exclude: [/src/], // 忽略某些文件夹下的文件或特定文件
   // include: [/src/], // 如果设置了include，那将只有匹配到的文件才会被转换
   mobileUnit: 'vw', // 指定需要转换成的视口单位，建议使用 vw
   rootContainingBlockSelectorList: ['van-popup--bottom'], // 指定包含块是根包含块的选择器，这种选择器的定位通常是 `fixed`，但是选择器内没有 `position: fixed`

src/router/daxpay.ts

@@ -3,17 +3,17 @@ import type { RouteRecordRaw } from 'vue-router'
 const Layout = () => import('@/layout/index.vue')
 
 /**
- * 支付模块路由
+ * 支付H5模块路由
  */
-export const DaxPayRoute: RouteRecordRaw = {
-  path: '/daxpay',
-  name: 'daxpay',
+export const DaxPayH5Route: RouteRecordRaw = {
+  path: '/h5',
+  name: 'h5',
   component: Layout,
   children: [
     {
       path: '/auth/alipay/:appId/:channel/:queryCode/:aliAppId',
       name: 'AlipayAuth',
-      component: () => import('@/views/daxpay/auth/alipay/AlipayAuth.vue'),
+      component: () => import('@/views/daxpay/h5/auth/alipay/AlipayAuth.vue'),
       meta: {
         title: '支付宝信息获取',
       },
@@ -21,23 +21,40 @@ export const DaxPayRoute: RouteRecordRaw = {
     {
       path: '/auth/wechat/:appId/:channel/:queryCode',
       name: 'WechatAuth',
-      component: () => import('@/views/daxpay/auth/wechat/WechatAuth.vue'),
+      component: () => import('@/views/daxpay/h5/auth/wechat/WechatAuth.vue'),
       meta: {
         title: '微信信息获取',
       },
     },
     {
       path: '/cashier/:orderNo',
-      name: 'CashierCode',
-      component: () => import('@/views/daxpay/cashier/Cashier.vue'),
+      name: 'Cashier',
+      component: () => import('@/views/daxpay/h5/cashier/Cashier.vue'),
       meta: {
         title: '收银台',
       },
     },
+
+    {
+      path: '/alipay/cashier/code/:orderNo',
+      name: 'AlipayCashierCode',
+      component: () => import('@/views/daxpay/h5/code/alipay/AlipayCashierCode.vue'),
+      meta: {
+        title: '支付宝收银台',
+      },
+    },
+    {
+      path: '/wechat/cashier/code/:orderNo',
+      name: 'WechatCashierCode',
+      component: () => import('@/views/daxpay/h5/code/wechat/WechatCashierCode.vue'),
+      meta: {
+        title: '微信收银台',
+      },
+    },
     {
       path: '/aggregate/:orderNo',
       name: 'CheckAggregate',
-      component: () => import('@/views/daxpay/aggregate/Aggregate.vue'),
+      component: () => import('@/views/daxpay/h5/aggregate/Aggregate.vue'),
       meta: {
         title: '聚合收银台',
       },
@@ -45,7 +62,7 @@ export const DaxPayRoute: RouteRecordRaw = {
     {
       path: '/aggregate/alipay/:orderNo',
       name: 'AliCheckout',
-      component: () => import('@/views/daxpay/aggregate/alipay/AlipayAggregate.vue'),
+      component: () => import('@/views/daxpay/h5/aggregate/alipay/AlipayAggregate.vue'),
       meta: {
         title: '支付宝收银台',
       },
@@ -53,7 +70,7 @@ export const DaxPayRoute: RouteRecordRaw = {
     {
       path: '/aggregate/wechat/:orderNo',
       name: 'WechatCheckout',
-      component: () => import('@/views/daxpay/aggregate/wechat/WechatAggregate.vue'),
+      component: () => import('@/views/daxpay/h5/aggregate/wechat/WechatAggregate.vue'),
       meta: {
         title: '微信收银台',
       },
@@ -61,7 +78,7 @@ export const DaxPayRoute: RouteRecordRaw = {
     {
       path: '/paySuccess/:orderNo',
       name: 'PaySuccess',
-      component: () => import('@/views/daxpay/result/PaySuccess.vue'),
+      component: () => import('@/views/daxpay/h5/result/PaySuccess.vue'),
       meta: {
         title: '支付成功页面',
       },
@@ -69,10 +86,44 @@ export const DaxPayRoute: RouteRecordRaw = {
     {
       path: '/payFail',
       name: 'payFail',
-      component: () => import('@/views/daxpay/result/PayFail.vue'),
+      component: () => import('@/views/daxpay/h5/result/PayFail.vue'),
       meta: {
         title: '支付失败页面',
       },
     },
   ],
 }
+/**
+ * pc页面
+ */
+export const DaxPayPcRoute: RouteRecordRaw = {
+  path: '/pc',
+  name: 'pc',
+  children: [
+    {
+      path: '/pc/cashier/:orderNo',
+      name: 'PcCashier',
+      component: () => import('@/views/daxpay/pc/cashier/Cashier.vue'),
+      meta: {
+        title: '收银台',
+      },
+    },
+    {
+      path: '/pc/paySuccess/:orderNo',
+      name: 'PcPaySuccess',
+      component: () => import('@/views/daxpay/pc/result/PaySuccess.vue'),
+      meta: {
+        title: '支付成功页面',
+      },
+    },
+    {
+      path: '/pc/payFail',
+      name: 'PcPayFail',
+      component: () => import('@/views/daxpay/pc/result/PayFail.vue'),
+      meta: {
+        title: '支付失败页面',
+      },
+    },
+
+  ],
+}

src/router/index.ts

@@ -5,11 +5,12 @@ import { BusinessRoute, ErrorPageRoute, routeModuleList } from '@/router/base'
 import { useRouteStoreWidthOut } from '@/store/modules/route'
 
 // 菜单
-import { DaxPayRoute } from '@/router/daxpay'
+import { DaxPayH5Route, DaxPayPcRoute } from '@/router/daxpay'
 
 // 普通路由
 export const constantRouter: RouteRecordRaw[] = [
-  DaxPayRoute,
+  DaxPayH5Route,
+  DaxPayPcRoute,
   ErrorPageRoute,
   BusinessRoute,
 ]

src/views/daxpay/h5/aggregate/Aggregate.api.ts

@@ -1,7 +1,7 @@
 import type { AuthResult } from '../auth/ChannelAuth.api'
 import { http } from '@/utils/http/axios'
 import type { Result } from '#/axios'
-import type { GatewayOrder, GatewayPayConfig } from '@/views/daxpay/cashier/Cashier.api'
+import type { GatewayOrder, GatewayPayConfig } from '@/views/daxpay/h5/cashier/Cashier.api'
 
 /**
  * 获取聚合支付相关订单和配置信息

src/views/daxpay/h5/aggregate/alipay/AlipayAggregate.vue

@@ -43,8 +43,8 @@ import { ref } from 'vue'
 import type {
   AggregateOrderAndConfig,
   AggregatePayParam,
-} from '@/views/daxpay/aggregate/Aggregate.api'
-import { aggregatePay, getAggregateConfig } from '@/views/daxpay/aggregate/Aggregate.api'
+} from '@/views/daxpay/h5/aggregate/Aggregate.api'
+import { aggregatePay, getAggregateConfig } from '@/views/daxpay/h5/aggregate/Aggregate.api'
 
 import { AggregateEnum, GatewayCallTypeEnum } from '@/enums/daxpay/DaxPayEnum'
 

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

@@ -38,7 +38,6 @@
 </template>
 
 <script setup lang="ts">
-import { title } from 'node:process'
 import { useRoute } from 'vue-router'
 import { ref } from 'vue'
 import type {
@@ -46,8 +45,8 @@ import type {
   AggregatePayParam,
   GatewayAuthCodeParam,
   WxJsapiSignResult,
-} from '@/views/daxpay/aggregate/Aggregate.api'
-import { aggregatePay, auth, generateAuthUrl, getAggregateConfig } from '@/views/daxpay/aggregate/Aggregate.api'
+} from '@/views/daxpay/h5/aggregate/Aggregate.api'
+import { aggregatePay, auth, generateAuthUrl, getAggregateConfig } from '@/views/daxpay/h5/aggregate/Aggregate.api'
 
 import { AggregateEnum, GatewayCallTypeEnum } from '@/enums/daxpay/DaxPayEnum'
 import router from '@/router'

src/views/daxpay/h5/auth/alipay/AlipayAuth.vue

@@ -12,8 +12,8 @@
 import { useRoute } from 'vue-router'
 import { ref } from 'vue'
 import { showDialog } from 'vant'
-import type { AuthCodeParam } from '@/views/daxpay/auth/ChannelAuth.api'
-import { authAndSet } from '@/views/daxpay/auth/ChannelAuth.api'
+import type { AuthCodeParam } from '@/views/daxpay/h5/auth/ChannelAuth.api'
+import { authAndSet } from '@/views/daxpay/h5/auth/ChannelAuth.api'
 
 const script = document.createElement('script')
 script.setAttribute(

src/views/daxpay/h5/auth/wechat/WechatAuth.vue

@@ -12,8 +12,8 @@
 import { useRoute } from 'vue-router'
 import { onMounted, ref } from 'vue'
 import { showDialog } from 'vant'
-import type { AuthCodeParam } from '@/views/daxpay/auth/ChannelAuth.api'
-import { authAndSet } from '@/views/daxpay/auth/ChannelAuth.api'
+import type { AuthCodeParam } from '@/views/daxpay/h5/auth/ChannelAuth.api'
+import { authAndSet } from '@/views/daxpay/h5/auth/ChannelAuth.api'
 
 const route = useRoute()
 const { appId, channel, queryCode } = route.params

src/views/daxpay/h5/cashier/Cashier.vue

@@ -113,8 +113,8 @@
 import { onMounted, onUnmounted, reactive, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { showFailToast } from 'vant'
-import type { OrderAndConfig } from '@/views/daxpay/cashier/Cashier.api'
-import { getOrderAndConfig, payOrder } from '@/views/daxpay/cashier/Cashier.api'
+import type { OrderAndConfig } from '@/views/daxpay/h5/cashier/Cashier.api'
+import { getOrderAndConfig, payOrder } from '@/views/daxpay/h5/cashier/Cashier.api'
 import { getBrowserUA } from '@/utils/uaUtil'
 import { GatewayCallTypeEnum } from '@/enums/daxpay/DaxPayEnum'
 

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

@@ -1,7 +1,7 @@
 import { http } from '@/utils/http/axios'
 import type { Result } from '#/axios'
-import type { AuthResult } from '@/views/daxpay/auth/ChannelAuth.api'
-import type { PayResult } from '@/views/daxpay/aggregate/Aggregate.api'
+import type { AuthResult } from '@/views/daxpay/h5/auth/ChannelAuth.api'
+import type { PayResult } from '@/views/daxpay/h5/aggregate/Aggregate.api'
 
 /**
  * 获取收银台订单和配置信息

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

@@ -31,11 +31,11 @@ import router from '@/router'
 import type {
   AggregateOrderAndConfigResult,
   CheckoutAggregatePayParam,
-} from '@/views/daxpay/checkout/CheckoutPay.api'
+} from '@/views/daxpay/h5/checkout/CheckoutPay.api'
 import {
   aggregatePay,
   getAggregateConfig,
-} from '@/views/daxpay/checkout/CheckoutPay.api'
+} from '@/views/daxpay/h5/checkout/CheckoutPay.api'
 
 const route = useRoute()
 const { orderNo } = route.params

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

@@ -29,13 +29,13 @@ import { useRoute } from 'vue-router'
 import { AggregateEnum } from '@/enums/daxpay/DaxPayEnum'
 import router from '@/router'
 import type {
-  AggregateOrderAndConfigResult, CheckoutAggregatePayParam,
-  CheckoutAuthCodeParam} from '@/views/daxpay/checkout/CheckoutPay.api';
-import { aggregatePay,
- auth, generateAuthUrl, getAggregateConfig } from '@/views/daxpay/checkout/CheckoutPay.api'
+  AggregateOrderAndConfigResult,
+  CheckoutAggregatePayParam,
+  CheckoutAuthCodeParam,
+} from '@/views/daxpay/h5/checkout/CheckoutPay.api'
+import { aggregatePay, auth, generateAuthUrl, getAggregateConfig } from '@/views/daxpay/h5/checkout/CheckoutPay.api'
 
-
-import type { WxJsapiSignResult } from '@/views/daxpay/aggregate/Aggregate.api'
+import type { WxJsapiSignResult } from '@/views/daxpay/h5/aggregate/Aggregate.api'
 
 const route = useRoute()
 const { orderNo } = route.params

src/views/daxpay/h5/code/CashierCode.api.ts

@@ -0,0 +1,134 @@
+import { http } from '@/utils/http/axios'
+import type { Result } from '#/axios'
+
+/**
+ * 获取商户名称
+ */
+export function getMchName(mchNo: string) {
+  return http.request<Result<string>>({
+    url: '/unipay/ext/channel/cashier/getMchName',
+    method: 'GET',
+    params: { mchNo },
+  })
+}
+
+/**
+ * 获取收银台信息
+ */
+export function getCashierInfo(cashierType: string, appId: string) {
+  return http.request<Result<ChannelCashierConfigResult>>({
+    url: '/unipay/ext/channel/cashier/getCashierType',
+    method: 'GET',
+    params: { cashierType, appId },
+  })
+}
+
+/**
+ * 获取收银台所需授权链接, 用于获取OpenId一类的信息
+ */
+export function generateAuthUrl(param: CashierAuthParam) {
+  return http.request<Result<string>>({
+    url: '/unipay/ext/channel/cashier/generateAuthUrl',
+    method: 'POST',
+    data: param,
+  })
+}
+
+/**
+ * 发起支付
+ */
+export function cashierPay(param: CashierPayParam) {
+  return http.request<Result<PayResult>>({
+    url: '/unipay/ext/channel/cashier/pay',
+    method: 'POST',
+    data: param,
+  })
+}
+
+/**
+ * 通道认证参数
+ */
+export interface CashierAuthParam {
+  // 商户号
+  mchNo?: string
+  // 应用号
+  appId?: string
+  // 收银台类型
+  cashierType?: string
+  // 授权码
+  authCode?: string
+}
+
+/**
+ * 通道收银支付参数
+ */
+export interface CashierPayParam {
+
+  // 商户号
+  mchNo?: string
+  // 应用号
+  appId?: string
+  // 收银台类型
+  cashierType?: string
+  // 支付金额
+  amount?: number
+  // 唯一标识
+  openId?: string
+  // 支付描述
+  description?: string
+}
+
+/**
+ * 支付结果
+ */
+export interface PayResult {
+
+  // 支付状态
+  status: string
+  // 支付参数体
+  payBody: string
+  // 商户订单号
+  bizOrderNo: string
+  // 订单号
+  orderNo: string
+}
+
+/**
+ * 微信Jsapi预支付签名返回信息
+ */
+export interface WxJsapiSignResult {
+  // 公众号ID，由商户传入
+  appId?: string
+  // 时间戳，自1970年以来的秒数
+  timeStamp?: string
+  // 随机串
+  nonceStr?: string
+  // 预支付ID
+  package?: string
+  // 微信签名方式：
+  signType?: string
+  // 微信签名
+  paySign?: string
+}
+
+/**
+ * 收银台配置信息
+ */
+export interface ChannelCashierConfigResult {
+  // 商户号
+  mchNo?: string
+  // 应用号
+  appId?: string
+  // 收银台类型
+  cashierType?: string
+  // 收银台名称
+  cashierName?: string
+  // 支付通道
+  channel?: string
+  // 支付方式
+  payMethod?: string
+  // 是否开启分账
+  allocation?: boolean
+  // 自动分账
+  autoAllocation?: boolean
+}

src/views/daxpay/h5/code/CashierCode.vue

@@ -0,0 +1,30 @@
+<template>
+  <div />
+</template>
+
+<script setup lang="ts">
+import { useRoute } from 'vue-router'
+import { getBrowserUA } from '@/utils/uaUtil'
+import router from '@/router'
+
+const route = useRoute()
+const { orderNo } = route.params
+
+const ua = getBrowserUA()
+if (ua === 'wechat') {
+  router.push({ path: `/wechat/cashier/code/${orderNo}`, replace: true })
+}
+else if (ua === 'alipay') {
+  router.push({ path: `/alipay/cashier/code/${orderNo}`, replace: true })
+}
+else {
+  router.replace({
+    path: '/payFail',
+    query: { msg: '请使用支付宝、微信等软件进行扫码支付' },
+  })
+}
+</script>
+
+<style scoped lang="less">
+
+</style>

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

@@ -0,0 +1,165 @@
+<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">
+          付款给{{ mchName }}
+        </p>
+        <p style="font-size: 32px;">
+          ¥ {{ amount }}
+        </p>
+      </div>
+    </div>
+    <van-dialog
+      v-model:show="showRemark"
+      title="支付备注"
+      confirm-button-text="保存"
+      cancel-button-text="清除"
+      confirm-button-color="#108ee9"
+      cancel-button-color="red"
+      show-cancel-button
+      @cancel="description = ''"
+    >
+      <van-field
+        v-model="description"
+        rows="2"
+        autosize
+        label=""
+        type="textarea"
+        :maxlength="50"
+        placeholder="请输入支付备注内容"
+        show-word-limit
+      />
+    </van-dialog>
+    <van-number-keyboard
+      :show="true"
+      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>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import { showNotify } from 'vant'
+import type {
+  CashierPayParam,
+  ChannelCashierConfigResult,
+} from '../CashierCode.api'
+import {
+  cashierPay,
+  getCashierInfo,
+  getMchName,
+} from '../CashierCode.api'
+
+import { AggregateEnum, CashierTypeEnum } from "@/enums/daxpay/DaxPayEnum";
+import router from '@/router'
+import { useKeyboard } from '@/hooks/daxpay/useKeyboard'
+
+const route = useRoute()
+const { mchNo, appId } = route.params
+
+const showRemark = ref<boolean>(false)
+const loading = ref<boolean>(false)
+const cashierInfo = ref<ChannelCashierConfigResult>({})
+const amount = ref<string>('0')
+const description = ref<string>('')
+const mchName = ref<string>('')
+
+const { input, del } = useKeyboard(amount)
+
+onMounted(() => {
+  // initData()
+})
+
+/**
+ * 初始化数据
+ */
+function initData() {
+  getCashierInfo(AggregateEnum.ALI, appId as string).then(({ data }) => {
+    cashierInfo.value = data
+  }).catch((res) => {
+    router.push({ name: 'ErrorResult', query: { msg: res.message } })
+  })
+  getMchName(mchNo as string).then(({ data }) => {
+    mchName.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,
+    appId,
+    cashierType: CashierTypeEnum.ALIPAY,
+    description: description.value,
+    mchNo,
+  } 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/h5/code/wechat/WechatCashierCode.vue

@@ -0,0 +1,231 @@
+<template>
+  <div v-if="show">
+    <div class="container">
+      <div style="font-size: 28px;margin-top: 10px;">
+        {{ cashierInfo.cashierName || '微信收银台' }}
+      </div>
+      <div class="amount-display">
+        <p style="font-size: 20px">
+          付款给{{ mchName }}
+        </p>
+        <p style="font-size: 32px;">
+          ¥ {{ amount }}
+        </p>
+      </div>
+    </div>
+    <van-dialog
+      v-model:show="showRemark"
+      title="支付备注"
+      confirm-button-text="保存"
+      cancel-button-text="清除"
+      confirm-button-color="#4CAF50"
+      cancel-button-color="red"
+      show-cancel-button
+      @cancel="description = ''"
+    >
+      <van-field
+        v-model="description"
+        rows="2"
+        autosize
+        label=""
+        type="textarea"
+        :maxlength="50"
+        placeholder="请输入支付备注内容"
+        show-word-limit
+      />
+    </van-dialog>
+    <van-number-keyboard
+      :show="true"
+      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>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import { showNotify } from 'vant'
+import type {
+  CashierAuthParam,
+  CashierPayParam,
+  ChannelCashierConfigResult,
+  WxJsapiSignResult,
+} from '../CashierCode.api'
+import {
+  cashierPay,
+  generateAuthUrl,
+  getCashierInfo,
+  getMchName,
+} from '../CashierCode.api'
+
+import { AggregateEnum, CashierTypeEnum } from "@/enums/daxpay/DaxPayEnum";
+import router from '@/router'
+import { useKeyboard } from '@/hooks/daxpay/useKeyboard'
+
+const route = useRoute()
+const { mchNo, appId } = route.params
+const { code } = route.query
+
+const show = ref<boolean>(false)
+const showRemark = ref<boolean>(false)
+const loading = ref<boolean>(false)
+const cashierInfo = ref<ChannelCashierConfigResult>({})
+const amount = ref<string>('0')
+const description = ref<string>('')
+const mchName = ref<string>('')
+const openId = ref<string>('')
+
+// 认证参数
+const authParam = ref<CashierAuthParam>({
+  mchNo: mchNo as string,
+  appId: appId as string,
+  cashierType: AggregateEnum.WECHAT,
+})
+
+const { input, del } = useKeyboard(amount)
+
+onMounted(() => {
+  // init()
+  show.value = true
+
+})
+
+/**
+ * 初始化
+ */
+function init() {
+  // 如果不是重定向跳转过来， 跳转到到重定向地址
+  if (!code) {
+    // 重定向跳转到微信授权地址
+    generateAuthUrl(authParam.value).then((res) => {
+      const url = res.data
+      location.replace(url)
+    }).catch((res) => {
+      router.push({ name: 'ErrorResult', query: { msg: res.message } })
+    })
+  }
+  else {
+    authParam.value.authCode = code as string
+    // 初始化数据
+    initData()
+  }
+}
+
+/**
+ * 初始化数据
+ */
+function initData() {
+  show.value = true
+  getCashierInfo(AggregateEnum.WECHAT, appId as string).then(({ data }) => {
+    cashierInfo.value = data
+  }).catch((res) => {
+    router.push({ name: 'ErrorResult', query: { msg: res.message } })
+  })
+  getMchName(mchNo as string).then(({ data }) => {
+    mchName.value = data
+  }).catch((res) => {
+    router.push({ name: 'ErrorResult', query: { msg: res.message } })
+  })
+  auth(authParam.value).then(({ data }) => {
+    openId.value = data.openId as string
+  }).catch((res) => {
+    router.push({ name: 'ErrorResult', query: { msg: res.message } })
+  })
+}
+
+/**
+ * 微信jsapi方式支付
+ */
+function pay() {
+  const amountValue = Number(amount.value)
+  if (amountValue === 0) {
+    showNotify({ type: 'warning', message: '金额不可为0' })
+    return
+  }
+
+  loading.value = true
+  const from = {
+    amount: amountValue,
+    appId,
+    openId: openId.value,
+    cashierType: CashierTypeEnum.WECHAT_PAY,
+    description: description.value,
+    mchNo,
+  } as CashierPayParam
+  cashierPay(from)
+    .then(({ data }) => {
+      loading.value = false
+      // 拉起jsapi支付
+      const json = JSON.parse(data.payBody)
+      jsapiPay(json)
+    })
+}
+
+/**
+ * 拉起Jsapi支付窗口
+ */
+function jsapiPay(data: WxJsapiSignResult) {
+  const form = {
+    appId: data.appId, // 公众号ID，由商户传入
+    timeStamp: data.timeStamp, // 时间戳，自1970年以来的秒数
+    nonceStr: data.nonceStr, // 随机串
+    package: data.package, // 预支付ID
+    signType: data.signType, // 微信签名方式：
+    paySign: data.paySign, // 微信签名
+  }
+  // 使用微信JsSdk拉起支付
+  WeixinJSBridge.invoke('getBrandWCPayRequest', form, (res) => {
+    if (res.err_msg === 'get_brand_wcpay_request:ok') {
+      // 跳转到成功页面
+      router.push({ name: 'SuccessResult', query: { msg: '支付成功' }, replace: true })
+    }
+  })
+}
+</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>

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

@@ -1,8 +1,8 @@
 <template>
   <div class="paySuccess">
     <div class="payLogo">
-      <img v-if="isWeiPay === 'wei'" src="@/assets/images/weiSuccess.png" alt="">
-      <img v-else src="@/assets/images/success1.png" alt="">
+      <img v-if="isWeiPay === 'wei'" src="../../../../assets/images/weiSuccess.png" alt="">
+      <img v-else src="../../../../assets/images/success1.png" alt="">
       <p :class="{ textColor: isWeiPay === 'wei' }">
         支付成功
       </p>
@@ -40,8 +40,8 @@
 
 <script setup lang="ts">
 import { useRoute } from 'vue-router'
-import { getSuccessOrder } from '@/views/daxpay/aggregate/Aggregate.api'
-import type { paySuccess } from '@/views/daxpay/aggregate/Aggregate.api'
+import { getSuccessOrder } from '@/views/daxpay/h5/aggregate/Aggregate.api'
+import type { paySuccess } from '@/views/daxpay/h5/aggregate/Aggregate.api'
 import { getBrowserUA } from '@/utils/uaUtil'
 // 获取路由参数
 

src/views/daxpay/pc/cashier/Cashier.vue

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

src/views/daxpay/pc/result/PayFail.vue

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

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

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

uno.config.ts

@@ -43,7 +43,7 @@ export default defineConfig({
     // 网络字体预设：https://unocss.dev/presets/web-fonts
     presetWebFonts({
       // 默认字体提供商 https://unocss.dev/presets/web-fonts#providers
-      provider: 'google',
+      provider: 'none',
       // https://unocss.dev/presets/web-fonts#example
       fonts: {
         mono: ['Fira Code'],