From 12ad242f637fae34af8198afa2a24c0aee510822 Mon Sep 17 00:00:00 2001
From: linfso <linfso@sina.com>
Date: Fri, 20 Jun 2025 13:38:19 +0800
Subject: [PATCH] md

---
 src/views/openpage/onlinePay.vue | 123 +++++++++++++++++++++----------
 1 file changed, 85 insertions(+), 38 deletions(-)

diff --git a/src/views/openpage/onlinePay.vue b/src/views/openpage/onlinePay.vue
index 85a8498..dfa995f 100644
--- a/src/views/openpage/onlinePay.vue
+++ b/src/views/openpage/onlinePay.vue
@@ -1,10 +1,36 @@
 <template>
   <div class="wechat-payment-container" style="background: #fff;padding: 1rem;">
-    <!-- <OnlinePayJsApi v-if="isWx"></OnlinePayJsApi> -->
-    <!-- <OnlinePayQr v-else></OnlinePayQr> -->
      <!-- <div v-if="!isWx">请在微信浏览器中打开此页面进行支付</div> -->
+     <!-- <div v-if="resultVisible&&!paymentSuccess">{{ errorMessage }}</div> -->
+
+     <div v-if="resultVisible" >
+      <!-- 失败状态提示 -->
+      <div v-if="resultVisible&&!paymentSuccess" class="text-center"  >
+        <i class="el-icon-circle-check"></i>
+        <h1 style="font-size: 24px; color: #303133; margin-bottom: 10px;">支付失败</h1>
+        <p style="color: #606266; margin-bottom: 30px;">{{ errorMessage }}</p>
+      </div>
+
+      <div  v-if="paymentSuccess" class="text-center">
+        <i class="el-icon-circle-check success-icon"></i>
+        <h1 style="font-size: 24px; color: #303133; margin-bottom: 10px;">支付成功</h1>
+        <p style="color: #606266; margin-bottom: 30px;">感谢您的支持，我们将竭诚为您服务</p>
+      </div>
+      
+      <!-- 操作按钮 -->
+      <div class="action-buttons">
+        <el-button type="primary" @click="goToSapp">
+           确认
+        </el-button>
+      </div>
+      
+      <!-- 辅助信息 -->
+      <div style="text-align: center; color: #909399; margin-top: 40px; font-size: 14px;">
+        <p>如有问题，请联系客服</p>
+        <p style="margin-top: 5px;">客服电话: 400-025-7080</p>
+      </div>
+    </div>
 
-     <div v-if="resultVisible">{{ errorMessage }}</div>
      <div>
         <el-form id="payPage" v-if="settleBillItem!=null"  ref="form"  :model="form" size="mini" label-width="80px">
             <el-row :gutter="0" style="display: flex;flex-wrap: wrap;">
@@ -109,7 +135,7 @@
               </el-col>
             </el-row>
         </el-form>
-        <div style="margin-bottom: 20px;">
+        <div v-if="settleBillItem!=null&&payStatus==0" style="margin-bottom: 20px;">
           <el-button  type="primary" style="width: 100%;" @click="handleWeixinPay" >确认付款</el-button>
         </div>
     </div>
@@ -118,16 +144,12 @@
 </template>
 
 <script>
-
-// import OnlinePayQr from '@/views/openpage/onlinePayQr.vue';
-// import OnlinePayJsApi from '@/views/openpage/onlinePayJsApi.vue';
 import axios from 'axios'
 import shortLogoImg from '@/assets/logo/short_logo.png'
 import { parseTime } from "@/utils/custom";
 
 export default {
   name: 'OnlinePay',
-  // components: {OnlinePayQr,OnlinePayJsApi },
   components: {},
   data() {
     return {
@@ -137,11 +159,11 @@ export default {
       wxPayQrImageUrl:null,
 
       isWx:false,
+      payStatus:0,
 
       loadingVisible: false,
       resultVisible: false,
       paymentSuccess: false,
-
       errorMessage: '',
       wechatPaymentParams: null,
       // 表单参数
@@ -152,9 +174,11 @@ export default {
   created() {
     let code=this.$route.query.code;
     let state=this.$route.query.state;
-    console.log("====>created==code=state=>",code,state);
+    // console.log("====>created==code=state=>",code,state);
     if (code) {
           this.requestPayment(code,state);
+          this.this.billNo=state;
+          this.initPayOrder();
     }else{
       this.reset();
       const ua = window.navigator.userAgent.toLowerCase();
@@ -230,41 +254,27 @@ export default {
       axios.get(process.env.VUE_APP_BASE_API+'/oms2c/common/getBillPayInfo?settleBillNo='+this.billNo)
       .then(response => {
         this.loadingVisible = false;
-        console.log("===>response==>",response);
         if (response.data.code === 200) {
           this.settleBillItem = response.data.data;
-          console.log("===>this.settleBillItem==>",this.settleBillItem);
-          // this.invokeWechatPayment();
+          // console.log("===>this.settleBillItem==>",this.settleBillItem);
         } else {
-          this.showPaymentResult(false, response.message || '获取账单失败');
+          this.showPaymentResult(false, response.data.msg || '获取账单失败');
         }
       })
       .catch(error => {
         this.loadingVisible = false;
         this.showPaymentResult(false, '网络错误，请稍后重试');
-        console.error('获取账单失败:', error);
+        // console.error('获取账单失败:', error);
       });
     },
-    initQrUrl(){
-      this.wxPayQrImageUrl = response.data;
-      axios.get(process.env.VUE_APP_BASE_API+'/oms2c/common/getBillPayInfo?settleBillNo='+this.billNo)
-      .then(response => {
-        this.loadingVisible = false;
-        console.log("===>response==>",response);
-        if (response.data.code === 200) {
-          this.settleBillItem = response.data.data;
-        } else {
-          this.showPaymentResult(false, response.message || '获取账单失败');
-        }
-      })
-      .catch(error => {
-        this.loadingVisible = false;
-        console.error('获取QR失败:', error);
-      });
+    goToSapp(){
+      let sappUrl="weixin://dl/business/?appid=wx52e07a62a2f80000&path=pages/post/post"
+      window.location.href = sappUrl;
+
     },
     handleWeixinPay(){
       this.billNo = this.$route.query.bid;
-      const authUrl = this.generateAuthUrl("https://oms.tanex56.com/onlinePay","snsapi_base",this.billNo);
+      const authUrl = this.generateAuthUrl("https://oms.tanex56.com/onlinePay/","snsapi_base",this.billNo);
       window.location.href = authUrl;
     },
     requestPayment(code,state) {
@@ -276,12 +286,9 @@ export default {
         settleBillNo: state
       })
       .then(response => {
-        console.log("===>requestPayment==response=>",response);
-        console.log("===>requestPayment==response.data=>",response.data);
         this.loadingVisible = false;
         if (response.data.code === 200) {
           this.wechatPaymentParams = response.data.data;
-          console.log("===>wechatPaymentParams==wechatPaymentParams=>",  this.wechatPaymentParams);
           this.invokeWechatPayment();
         } else {
           this.showPaymentResult(false, response.message || '获取支付参数失败');
@@ -330,11 +337,13 @@ export default {
     },
     verifyPaymentStatus() {
       this.loadingVisible = true;
-      
       // 调用后端API验证支付状态
       setTimeout(() => {
         // 实际项目中应该调用后端API验证支付状态
         // 这里使用模拟数据
+
+        // 调用接口查询是否成功
+
         this.loadingVisible = false;
         this.showPaymentResult(true);
       }, 1500);
@@ -347,10 +356,9 @@ export default {
     handleResultAction() {
       this.resultVisible = false;
       if (this.paymentSuccess) {
-        this.$router.push({ name: 'OrderSuccess', params: { orderId: this.orderInfo.orderId } });
+        // this.$router.push({ name: 'OrderSuccess', params: { orderId: this.orderInfo.orderId } });
       }
     },
-    
      /**
      * 生成微信授权URL
      * @param {string} redirectUri - 授权后重定向的URL
@@ -421,4 +429,43 @@ export default {
     color: #2e2f33;
 }
 
+
+.success-container {
+      max-width: 600px;
+      margin: 100px auto;
+      padding: 30px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+      border-radius: 8px;
+    }
+    .success-icon {
+      font-size: 64px;
+      color: #67c23a;
+      margin-bottom: 20px;
+    }
+    .order-info {
+      margin: 20px 0;
+      padding: 15px;
+      background-color: #f5f7fa;
+      border-radius: 4px;
+    }
+    .action-buttons {
+      display: flex;
+      justify-content: center;
+      gap: 15px;
+      margin-top: 30px;
+    }
+    @media (max-width: 576px) {
+      .success-container {
+        margin: 30px 20px;
+        padding: 20px;
+      }
+      .action-buttons {
+        flex-direction: column;
+        gap: 10px;
+      }
+      .action-buttons .el-button {
+        width: 100%;
+      }
+    }
+
 </style>  
\ No newline at end of file