feat 收银台接口对接

src/router/daxpay.ts

@@ -27,7 +27,7 @@ export const DaxPayRoute: RouteRecordRaw = {
       },
     },
     {
-      path: 'cashier/:code',
+      path: '/cashier/:code',
       name: 'CashierCode',
       component: () => import('@/views/daxpay/cashier/Cashier.vue'),
       meta: {
@@ -59,7 +59,7 @@ export const DaxPayRoute: RouteRecordRaw = {
       },
     },
     {
-      path: 'paySuccess',
+      path: '/paySuccess',
       name: 'PaySuccess',
       component: () => import('@/views/daxpay/result/PaySuccess.vue'),
       meta: {
@@ -67,12 +67,12 @@ export const DaxPayRoute: RouteRecordRaw = {
       },
     },
     {
-      path: 'payFail',
+      path: '/payFail',
       name: 'payFail',
       component: () => import('@/views/daxpay/result/PayFail.vue'),
       meta: {
         title: '支付失败页面',
       },
-    }
+    },
   ],
 }

src/utils/http/axios/index.ts

@@ -109,9 +109,9 @@ const transform: AxiosTransform = {
     if (!isUrlStr && joinPrefix) {
       config.url = `${urlPrefix}${config.url}`
     }
+    console.log(config.url)
 
     if (!isUrlStr && apiUrl && isString(apiUrl)) {
-      config.url = `${apiUrl}${config.url}`
     }
     const params = config.params || {}
     const data = config.data || false

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

@@ -0,0 +1,87 @@
+import { http } from '@/utils/http/axios'
+import type { Result } from '#/axios'
+
+/**
+ * 获取订单和收银台配置信息
+ */
+export function getOrderAndConfig(orderNo) {
+  return http.request<Result<OrderAndConfig>>({
+    url: '/unipay/gateway/getOrderAndConfig',
+    method: 'GET',
+    params: { orderNo, cashierType: 'h5' },
+  })
+}
+
+/**
+ * 收银台配置
+ */
+export interface OrderAndConfig {
+  /** 订单信息 */
+  order: GatewayOrder
+  /** 收银台配置信息 */
+  config: GatewayPayConfig
+  /** 收银台分类配置信息 */
+  groupConfigs: CashierGroupConfig[]
+}
+
+/**
+ * 订单信息
+ */
+export interface GatewayOrder {
+  /** 商户订单号 */
+  bizOrderNo?: string
+  /** 订单号 */
+  orderNo?: string
+  /** 标题 */
+  title?: string
+  /** 描述 */
+  description?: string
+  /** 金额(元) */
+  amount?: number
+
+}
+/**
+ * 聚合支付配置信息
+ */
+export interface GatewayPayConfig {
+  /** 收银台名称 */
+  name?: string
+  /** PC收银台是否同时显示聚合收银码 */
+  aggregateShow?: boolean
+  /** h5收银台自动升级聚合支付 */
+  h5AutoUpgrade?: boolean
+}
+
+/**
+ * 收银台分类配置
+ */
+export interface CashierGroupConfig {
+  /** 主键 */
+  id?: string
+  /** 名称 */
+  name?: string
+  /** 配置项列表 */
+  items?: CashierConfig[]
+}
+
+/**
+ * 收银台配置项
+ */
+export interface CashierConfig {
+  /** 主键 */
+  id?: string
+  /** 发起调用的类型 */
+  callType?: string
+  /** 名称 */
+  name?: string
+  /** 支付通道 */
+  channel?: string
+  /** 支付方式 */
+  payMethod?: string
+  /** 其他支付方式 */
+  otherMethod?: string
+  /** 图标 */
+  icon?: string
+  /** 是否推荐 */
+  recommend?: boolean
+}

src/views/daxpay/cashier/Cashier.vue

@@ -1,125 +1,123 @@
 <template>
-  <div class="cashier">
+  <div v-if="orderAndConfig" class="cashier">
     <div class="cash_topBox">
       <div class="payPrice">
         <span class="unit">￥</span>
-        <div class="price">1299.8</div>
+        <div class="price">
+          {{ orderAndConfig.order.amount }} 元
+        </div>
       </div>
       <div class="excessTime">
         <span class="exTitle">剩余支付时间</span>
-        <span class="number">{{ downTime.currentMiute }}</span>
+        <span class="number">{{ orderTime.currentMiute }}</span>
         <span class="point">:</span>
-        <span class="number">{{ downTime.currentSeconds }}</span>
+        <span class="number">{{ orderTime.currentSeconds }}</span>
       </div>
       <div class="payMessItem">
-        <div class="itemTitle">标题:</div>
+        <div class="itemTitle">
-        <div class="itemContent">商业版 1288 预购版</div>
+          标题:
+        </div>
+        <div class="itemContent">
+          {{ orderAndConfig.order.title }}
+        </div>
       </div>
       <div class="payMessItem">
-        <div class="itemTitle">订单编号:</div>
+        <div class="itemTitle">
-        <div class="itemContent">207084835007084835066</div>
+          订单编号:
+        </div>
+        <div class="itemContent">
+          {{ orderAndConfig.order.orderNo }}
+        </div>
       </div>
     </div>
     <div class="cash_bodyBox">
       <h2>请选择支付方式</h2>
       <div class="payGoupList">
         <div
+          v-for="item in orderAndConfig.groupConfigs[0].items"
+          :key="item.id"
           class="payMethodsItem"
-          v-for="item in paymentMethods"
-          :key="item"
           @click="payTypeClick(item)"
         >
           <div class="itemType">
-            <img :src="item.icon" alt="" />
+            <img :src="item.icon" alt="">
-            <p>{{ item.label }}</p>
+            <p>{{ item.name }}</p>
-            <span v-if="item.recommended"> 推荐</span>
+            <span v-if="item.recommend"> 推荐</span>
           </div>
           <div class="selectBox">
             <img
-              v-if="item.value == payType"
+              v-if="item.id === selectId"
               src="@/assets/images/selected-arrow-icon.png"
               alt=""
-            />
+            >
           </div>
         </div>
       </div>
-      <div class="payBtnBox">支付￥<span>1299.8</span></div>
+      <div class="payBtnBox">
+        支付￥<span>{{ orderAndConfig.order.amount }}</span>
+      </div>
     </div>
   </div>
 </template>
+
 <script setup lang="ts">
 // 导入图片文件
-import zfbPay from "@/assets/images/zfb_pay.png";
+import { onMounted, onUnmounted, reactive, ref } from 'vue'
-import wxPay from "@/assets/images/new_wx_pay.png";
+import { useRoute } from 'vue-router'
-import quickPay from "@/assets/images/quick_pay.png";
+import type { OrderAndConfig } from '@/views/daxpay/cashier/Cashier.api'
-import { ref, reactive, onMounted, onUnmounted } from "vue";
+import { getOrderAndConfig } from '@/views/daxpay/cashier/Cashier.api'
 
-//点击支付类型
+const route = useRoute()
-const payType = ref("alipay");
-const payTypeClick = (item) => {
-  console.log(item);
-  payType.value = item.value;
-};
 
-//支付方式列表
+const { code: orderNo } = route.params
-const paymentMethods = ref([
+const orderAndConfig = ref<OrderAndConfig>()
-  {
+
-    value: "alipay",
+// 选中的支付方式
-    label: "支付宝",
+const selectId = ref()
-    icon: zfbPay,
+function payTypeClick(item) {
-    recommended: true,
+  selectId.value = item.id
-  },
+}
-  {
-    value: "wechat",
-    label: "微信",
-    icon: wxPay,
-    recommended: false,
-  },
-  {
-    value: "quickpay",
-    label: "快捷支付",
-    icon: quickPay,
-    recommended: false,
-  },
-]);
 
 // 倒计时对象
-const downTime = reactive({
+const orderTime = reactive({
-  timer: null,
   totalTme: 300, // 总共时间
-  currentMiute: "05", //当前分钟
+  currentMinute: '05', // 当前分钟
-  currentSeconds: "00", //当前秒数
+  currentSeconds: '00', // 当前秒数
-  formatTime: (time: number) => {
+})
+
+const { pause, resume } = useIntervalFn(() => {
+  orderTime.totalTme--
+  orderTime.currentMinute = formatTime(Math.floor(orderTime.totalTme / 60))
+  orderTime.currentSeconds = formatTime(Math.floor(orderTime.totalTme % 60))
+}, 1000)
+
+function formatTime(time: number){
   // 格式化时间
-    return time.toString().padStart(2, "0");
+  return time.toString().padStart(2, '0')
-  },
-  startCountdown: () => {
-    //每秒渲染时间函数
-    if (downTime.totalTme == 0) {
-      clearInterval(timer);
-      downTime.timer = null;
 }
-    downTime.totalTme--;
+
-    downTime.currentMiute = downTime.formatTime(Math.floor(downTime.totalTme / 60));
-    downTime.currentSeconds = downTime.formatTime(Math.floor(downTime.totalTme % 60));
-  },
-});
 onMounted(() => {
-  downTime.timer = setInterval(() => {
+  init()
-    downTime.startCountdown();
+})
-  }, 1000);
-});
 onUnmounted(() => {
-  if (timer) {
+  pause()
-    clearInterval(timer);
+})
-    downTime.timer = null;
+
+/**
+ * 初始化
+ */
+function init() {
+  getOrderAndConfig(orderNo).then(({ data }) => {
+    orderAndConfig.value = data
+    // orderTime.totalTme = data.order.expireTime
+    resume()
+  })
 }
-});
 </script>
 
 <style scoped lang="less">
 .cashier {
-  font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
+  font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
   width: 100%;
   height: 100vh;
   background-color: #f5f5f5;

src/views/daxpay/result/PayFail.vue

@@ -1,22 +1,32 @@
 <template>
   <div class="payFail">
     <div class="payLogo">
-        <img src="@/assets/images/fail1.png" alt="" />
+      <img src="@/assets/images/fail1.png" alt="">
       <p>支付失败</p>
       <span>订单超时自动关闭，请重新发起支付</span>
     </div>
     <div class="payPrice">
       <span class="unit">￥</span>
-        <div class="price">793.21</div>
+      <div class="price">
+        793.21
+      </div>
     </div>
     <div class="payMessBox">
       <div class="payMessItem">
-          <div class="itemTitle">支付标题</div>
+        <div class="itemTitle">
-          <div class="itemContent">商业版 1288 预购版</div>
+          支付标题
+        </div>
+        <div class="itemContent">
+          商业版 1288 预购版
+        </div>
       </div>
       <div class="payMessItem">
-          <div class="itemTitle">订单编号</div>
+        <div class="itemTitle">
-          <div class="itemContent">20708483506</div>
+          订单编号
+        </div>
+        <div class="itemContent">
+          20708483506
+        </div>
       </div>
     </div>
 
@@ -54,22 +64,19 @@
       font-weight: 700;
     }
     span {
-        font-size:.75rem;
       letter-spacing: 2px;
-        font-size: .875rem;
+      font-size: 0.875rem;
       font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
     }
-      
-  
   }
   .payPrice {
     display: flex;
-      gap: .315rem;
+    gap: 0.315rem;
     align-items: center;
 
     .unit {
-          font-size:.75rem;
+      font-size: 0.75rem;
-          transform: translateY(.525rem);
+      transform: translateY(0.525rem);
     }
     .price {
       font-size: 2rem;
@@ -78,10 +85,10 @@
   }
   .payMessBox {
     width: 100%;
-      padding: 0px 1.25rem;
+    padding: 0 1.25rem;
     display: flex;
     flex-direction: column;
-      gap: .625rem;
+    gap: 0.625rem;
     .payMessItem {
       width: 100%;
       display: flex;
@@ -93,7 +100,6 @@
       .itemContent {
         font-size: 1rem;
         font-weight: 500;
-              font-size: "微软雅黑";
       }
     }
   }
@@ -107,10 +113,7 @@
     bottom: 3.75rem;
     text-align: center;
     line-height: 3.25rem;
-      border-radius:.625rem;
+    border-radius: 0.625rem;
   }
-  
-  
 }
 </style>
-  

src/views/daxpay/result/PaySuccess.vue

@@ -1,25 +1,39 @@
 <template>
   <div class="paySuccess">
     <div class="payLogo">
-      <img src="@/assets/images/success1.png" alt="" />
+      <img src="@/assets/images/success1.png" alt="">
       <p>支付成功</p>
     </div>
     <div class="payPrice">
       <span class="unit">￥</span>
-      <div class="price">793.21</div>
+      <div class="price">
+        793.21
+      </div>
     </div>
     <div class="payMessBox">
       <div class="payMessItem">
-        <div class="itemTitle">支付标题</div>
+        <div class="itemTitle">
-        <div class="itemContent">商业版 1288 预购版</div>
+          支付标题
+        </div>
+        <div class="itemContent">
+          商业版 1288 预购版
+        </div>
       </div>
       <div class="payMessItem">
-        <div class="itemTitle">订单编号</div>
+        <div class="itemTitle">
-        <div class="itemContent">20708483506</div>
+          订单编号
+        </div>
+        <div class="itemContent">
+          20708483506
+        </div>
       </div>
       <div class="payMessItem">
-        <div class="itemTitle">支付时间</div>
+        <div class="itemTitle">
-        <div class="itemContent">2021-06-25 11:21</div>
+          支付时间
+        </div>
+        <div class="itemContent">
+          2021-06-25 11:21
+        </div>
       </div>
     </div>
 
@@ -56,17 +70,15 @@
       color: #0d6eff;
       font-weight: 700;
     }
-    
-
   }
   .payPrice {
     display: flex;
-    gap: .315rem;
+    gap: 0.315rem;
     align-items: center;
 
     .unit {
-        font-size:.75rem;
+      font-size: 0.75rem;
-        transform: translateY(.525rem);
+      transform: translateY(0.525rem);
     }
     .price {
       font-size: 2rem;
@@ -78,7 +90,7 @@
     padding: 0px 1.25rem;
     display: flex;
     flex-direction: column;
-    gap: .625rem;
+    gap: 0.625rem;
     .payMessItem {
       width: 100%;
       display: flex;
@@ -90,7 +102,7 @@
       .itemContent {
         font-size: 1rem;
         font-weight: 500;
-            font-size: "微软雅黑";
+        font-size: '微软雅黑';
       }
     }
   }
@@ -104,9 +116,7 @@
     bottom: 3.75rem;
     text-align: center;
     line-height: 3.25rem;
-    border-radius:.625rem;
+    border-radius: 0.625rem;
   }
-
-
 }
 </style>