退出弹窗 和关闭弹窗添加

src/router/daxpay.ts

@@ -74,13 +74,5 @@ export const DaxPayRoute: RouteRecordRaw = {
         title: '支付失败页面',
       },
     },
-    {
-      path: '/PayExcessTime',
-      name: 'PayExcessTime',
-      component: () => import('@/views/daxpay/result/PayExcessTime.vue'),
-      meta: {
-        title: '支付超时页面',
-      },
-    },
   ],
 }

src/views/daxpay/cashier/Cashier.vue

@@ -66,13 +66,53 @@
         </div>
       </div>
     </div>
+    <!-- 取消支付 -->
+    <div v-if="cancelObj.showCancelMask" id="cancelPay" class="cancelMask">
+      <div class="confirmDialog">
+        <div class="confirmHeader">
+          确定离开收银台
+        </div>
+        <div class="confimContent">
+          <p class="contentTxt">
+            订单尚未完成支付，请尽快支付。
+          </p>
+        </div>
+        <div class="confimFooter">
+          <div id="confirmLeaveBtn" class="confimBtn" @click="cancelObj.handleConfirmLeave">
+            确认离开
+          </div>
+          <div id="continuePay" class="confimBtn payBtn" style="color: #E41937" @click="cancelObj.handleContinuePay">
+            继续支付
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 关闭页面 -->
+    <div v-if="closeObj.showCloseMask" id="cancelPay" class="cancelMask">
+      <div class="confirmDialog">
+        <div class="confirmHeader">
+          确定关闭该页面？
+        </div>
+        <div class="confimContent">
+          <p class="contentTxt" />
+        </div>
+        <div class="confimFooter">
+          <div id="confirmLeaveBtn" class="confimBtn" @click="closeObj.handleConfirmClose">
+            确认关闭
+          </div>
+          <div id="continuePay" class="confimBtn payBtn" style="color: #E41937" @click="closeObj.handleContinueClose">
+            继续支付
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { onMounted, onUnmounted, reactive, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import type { OrderAndConfig } from '@/views/daxpay/cashier/Cashier.api'
+import type { OrderAndConfig, payConfig } from '@/views/daxpay/cashier/Cashier.api'
 import { getOrderAndConfig, payOrder } from '@/views/daxpay/cashier/Cashier.api'
 
 const route = useRoute()
@@ -88,7 +128,6 @@ const selectId = ref<string>()
 function payTypeClick(item) {
   selectId.value = item.id
 }
-
 // 倒计时对象
 const orderTime = reactive({
   totalTme: 0, // 总共时间
@@ -135,7 +174,7 @@ watch(
     }
   },
 )
-
+// 控制加载弹窗
 const loading = ref(false)
 // 发起支付
 function payClick() {
@@ -145,21 +184,87 @@ function payClick() {
     itemId: selectId.value,
   }
   payOrder(form as any)
-    .then(({ data }) => {
-      console.log(data)
-      // loading.value = false
-      // location.replace(data.payBody as any)
+    .then(({ data, code, msg }) => {
+      if (code !== 0) {
+        // 如果异常，跳转错误页面
+        router.replace({
+          path: '/payFail',
+          query: { msg },
+        })
+        return
+      }
+      loading.value = false
+      location.replace(data.payBody as any)
     })
     .catch((error) => {
       console.log(error)
     })
 }
 
+// 返回弹窗对象
+const cancelObj = reactive({
+  // 控制弹窗
+  showCancelMask: false,
+  // 处理确认离开
+  handleConfirmLeave: () => {
+    cancelObj.showCancelMask = false // 隐藏弹窗
+    router.go(-1) // 返回上一页
+  },
+  // 处理继续支付
+  handleContinuePay: () => {
+    cancelObj.showCancelMask = false // 隐藏弹窗
+    history.pushState(null, '', location.href) // 阻止返回行为
+  },
+  // 监听事件处理
+  handlePopstate: () => {
+    cancelObj.showCancelMask = true // 显示取消支付弹窗
+  },
+
+})
+
+// 关闭弹窗对象
+const closeObj = reactive({
+  // 控制弹窗
+  showCloseMask: false,
+  // 处理确认关闭
+  handleConfirmClose: () => {
+    closeObj.showCloseMask = false // 隐藏弹窗
+    // 尝试关闭页面
+    try {
+      window.close() // 尝试关闭当前页面
+      console.log('给访谈法')
+    }
+    catch {
+      // eslint-disable-next-line no-alert
+      alert('无法关闭页面，请手动关闭。')
+      router.replace('/')
+    }
+  },
+  // 处理继续支付
+  handleContinueClose: () => {
+    closeObj.showCloseMask = false // 隐藏弹窗
+    history.pushState(null, '', location.href) // 阻止返回行为
+  },
+  // 监听关闭事件处理
+  handleBeforeUnload: (event: BeforeUnloadEvent) => {
+    event.preventDefault()
+    closeObj.showCloseMask = true
+  },
+
+})
+
 onMounted(() => {
   init()
+  // 初始化历史记录栈
+  history.pushState({ page: 'cashier' }, '', location.href)
+  // 监听点击浏览器返回
+  window.addEventListener('popstate', cancelObj.handlePopstate)
+  window.addEventListener('beforeunload', closeObj.handleBeforeUnload)
 })
 onUnmounted(() => {
   pause()
+  window.removeEventListener('popstate', cancelObj.handlePopstate)
+  window.removeEventListener('beforeunload', closeObj.handleBeforeUnload)
 })
 
 /**
@@ -170,7 +275,7 @@ function init() {
     if (code !== 0) {
       // 如果异常，跳转异常页面
       router.replace({
-        path: '/PayExcessTime',
+        path: '/payFail',
         query: { msg },
       })
       return
@@ -390,5 +495,90 @@ function init() {
       }
     }
   }
+
+  /* 取消支付 */
+  .cancelMask {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 9999;
+
+    .confirmDialog {
+      width: 15rem;
+      background: #ffffff;
+      border-radius: 0.2rem;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    .confirmHeader {
+      font-size: 0.9rem;
+      line-height: 1.2rem;
+      color: #22242e;
+      padding: 1.55rem 0.6rem 0;
+    }
+
+    .confimContent {
+      width: 100%;
+      font-size: 0.7rem;
+      font-weight: 400;
+      color: #6c6e75;
+      padding: 0.55rem 1rem 1.55rem;
+      display: flex;
+      justify-content: center;
+      text-align: justify;
+    }
+
+    .contentTxt {
+      line-height: 1.05rem;
+    }
+
+    .confimFooter {
+      width: 100%;
+      height: 2.5rem;
+      display: flex;
+      align-items: center;
+      border-top: 1px solid #eeeeee;
+      position: relative;
+    }
+
+    .confimFooter::after {
+      position: absolute;
+      content: '';
+      height: 100%;
+      width: 1px;
+      background: #eeeeee;
+      left: 50%;
+      top: 0;
+    }
+
+    .confimBtn {
+      height: 100%;
+      flex: 1;
+      color: #22242e;
+      text-align: center;
+      font-size: 0.7rem;
+      line-height: 0.95rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .payBtn {
+      color: #5568d5;
+    }
+  }
 }
 </style>

src/views/daxpay/result/PayExcessTime.vue

@@ -1,76 +0,0 @@
-<template>
-  <div class="payExcess">
-    <div class="payLogo">
-      <img src="@/assets/images/fail1.png" alt="">
-      <p>支付失败</p>
-      <span>{{errorMsg?errorMsg:"订单超时自动关闭，请重新发起支付"}}</span>
-    </div>
-
-    <div class="payBtnBox" @click="closeClick">
-      关闭
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useRoute, useRouter } from "vue-router";
-
-//获取路由参数
-const route=useRoute()
-const { msg: errorMsg} = route.params;
-
-//点击关闭 
-const closeClick=()=>{
-  window.close()
-}
-
-</script>
-
-  <style scoped lang="less">
-  .payExcess {
-  padding: 3.5rem 0rem;
-  width: 100%;
-  height: 100vh;
-  background-color: #fff;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 3rem;
-  position: relative;
-  .payLogo {
-    display: flex;
-    flex-direction: column;
-    gap: 1.25rem;
-    align-items: center;
-    transform: translateY(-50%);
-    img {
-      width: 3.125rem;
-      height: 3.125rem;
-    }
-    p {
-      font-size: 1.5rem;
-      color: #e74e4e;
-      font-weight: 700;
-    }
-    span {
-      letter-spacing: 2px;
-      font-size: 0.875rem;
-      font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
-    }
-  }
-
-  .payBtnBox {
-    width: 90%;
-    margin: 0 auto;
-    background-color: #e74e4e;
-    color: #fff;
-    height: 3.25rem;
-    position: absolute;
-    bottom: 3.75rem;
-    text-align: center;
-    line-height: 3.25rem;
-    border-radius: 0.625rem;
-  }
-}
-</style>

src/views/daxpay/result/PayFail.vue

@@ -3,34 +3,10 @@
     <div class="payLogo">
       <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>
-    <div class="payMessBox">
-      <div class="payMessItem">
-        <div class="itemTitle">
-          支付标题
-        </div>
-        <div class="itemContent">
-          商业版 1288 预购版
-        </div>
-      </div>
-      <div class="payMessItem">
-        <div class="itemTitle">
-          订单编号
-        </div>
-        <div class="itemContent">
-          20708483506
-        </div>
-      </div>
+      <span>{{ errorMsg ? errorMsg : "支付失败,请重试!" }}</span>
     </div>
 
-    <div class="payBtnBox">
+    <div class="payBtnBox" @click="closeClick">
       关闭
     </div>
   </div>
@@ -38,6 +14,14 @@
 
 <script setup lang="ts">
 import { useRoute, useRouter } from 'vue-router'
+// 获取路由参数
+const route = useRoute()
+const { msg: errorMsg } = route.query
+
+// 点击关闭
+function closeClick() {
+  window.close()
+}
 </script>
 
 <style scoped lang="less">
@@ -49,6 +33,7 @@ import { useRoute, useRouter } from 'vue-router'
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: center;
   gap: 3rem;
   position: relative;
 
@@ -57,6 +42,7 @@ import { useRoute, useRouter } from 'vue-router'
     flex-direction: column;
     gap: 1.25rem;
     align-items: center;
+    transform: translateY(-50%);
 
     img {
       width: 3.125rem;
@@ -70,54 +56,12 @@ import { useRoute, useRouter } from 'vue-router'
     }
 
     span {
-      font-size: 0.75rem;
       letter-spacing: 2px;
       font-size: 0.875rem;
       font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
     }
   }
 
-  .payPrice {
-    display: flex;
-    gap: 0.315rem;
-    align-items: center;
-
-    .unit {
-      font-size: 0.75rem;
-      transform: translateY(0.525rem);
-    }
-
-    .price {
-      font-size: 2rem;
-      font-weight: 700;
-    }
-  }
-
-  .payMessBox {
-    width: 100%;
-    padding: 0px 1.25rem;
-    display: flex;
-    flex-direction: column;
-    gap: 0.625rem;
-
-    .payMessItem {
-      width: 100%;
-      display: flex;
-      justify-content: space-between;
-
-      .itemTitle {
-        font-size: 1rem;
-        color: #797d81;
-      }
-
-      .itemContent {
-        font-size: 1rem;
-        font-weight: 500;
-        font-size: '微软雅黑';
-      }
-    }
-  }
-
   .payBtnBox {
     width: 90%;
     margin: 0 auto;