解决冲突

src/components/pay/wepay.vue

 <template>
-  <div class="text-center">
-    <q-inner-loading :showing="loading" label="正在加載中"></q-inner-loading>
-    <div v-if="$q.platform.is.desktop && orderNo && payUrl!='' && !loading" class="q-my-xl">
-        <QrcodeVue level="H" size="256" :value="payUrl"></QrcodeVue>
-        <div class="text-body2 q-mt-lg">請打開微信（WeChat），使用 [掃一掃]，掃描上方二維碼進行支付</div>
-    </div>
-    <div class="q-my-xl" v-if="!orderNo && !loading">
-        創建付款連接失敗，請刷新頁面重試
-    </div>
+  <div>
+    <q-dialog v-model="$q.platform.is.desktop" persistent>
+        <q-card flat class="q-pa-lg" style="width:600px !important;max-width:600px !important">
+            <div class="text-h6 text-weight-bold q-mb-lg">微信支付</div>
+            <div class="text-center">
+                <q-inner-loading :showing="loading" label="正在加載中"></q-inner-loading>
+                <div v-if="$q.platform.is.desktop && orderNo && payUrl!='' && !loading">
+                    <div class="row justify-center">
+                        <QrcodeVue level="H" size="200" :value="payUrl" class="light-shadow"></QrcodeVue>
+                        <img src="../../assets/img/pay/wx_tip.jpg" class="q-ml-md" style="height:200px;">
+                        
+                    </div>
+                    <div class="text-body2 q-mt-lg text-grey-6">請打開微信（WeChat），使用 [掃一掃]掃描上方二維碼進行支付</div>
+                    <div class="q-mt-lg text-right">
+                        <q-btn outline dense label="取消支付" color="primary" class="q-px-md q-mr-md" @click="cancelPayHandler"></q-btn>
+                        <q-btn unelevated dense label="已完成付款" :loading="checkLoading" color="primary" class="q-px-md" @click="checkPaySatausHandler"></q-btn>
+                    </div>
+                </div>
+                <div class="q-ma-xl" v-if="!orderNo && !loading">
+                    創建付款連接失敗，請刷新頁面重試
+                </div>
+              </div>
+              
+        </q-card>
+        
+      </q-dialog>
   </div>
+  
 </template>
 
 <script>
@@ -17,7 +35,9 @@ export default {
     data() {
         return {
             loading:true,
-            payUrl:'weixin://wxpay/bizpayurl?pr=CDXqaD1zz'
+            showDialog:true,
+            payUrl:'weixin://wxpay/bizpayurl?pr=CDXqaD1zz',
+            checkLoading:false
         }
     },
     props:{
@@ -45,6 +65,26 @@ export default {
                 }
                 this.loading=false
             })
+        },
+        checkPaySatausHandler(){
+            this.checkLoading=true
+            this.apipost("GetDetailsByOrderNo_post",{OrderNo:this.orderNo},r=>{
+                if(r.data.resultCode==1){
+                    if(r.data.data.OrderStatus==2||r.data.data.OrderStatus==3){
+                        this.CommonJump("/paysuccess/" + this.orderNo, {});
+                    }else{
+                        this.$message.error("當前訂單未支付，請您繼續完成訂單支付")
+                    }
+                }else{
+                    location.reload()
+                }
+                this.checkLoading=false
+            },e=>{
+                this.checkLoading=false
+            })
+        },
+        cancelPayHandler(){
+            this.$emit("cancel")
         }
     },
 }

src/pages/pay.vue → src/pages/pay/pay.vue

@@ -65,7 +65,7 @@
           @click="showPayFormHandler('wechat')"
         >
           <q-img
-            src="../assets/img/pay/wepay.png"
+            src="../../assets/img/pay/wepay.png"
             spinner-color="white"
             style="width: 100px"
           />
@@ -75,7 +75,7 @@
         </div> -->
       </div>
       <div class="q-mt-md" v-if="showPay != ''">
-        <wechatpay v-if="showPay == 'wechat'" :order-no="orderNo"></wechatpay>
+        <wechatpay @cancel="cancelPayHandler" v-if="showPay == 'wechat'" :order-no="orderNo"></wechatpay>
       </div>
     </q-card>
 
@@ -114,7 +114,7 @@
 </template>
 
 <script>
-import wechatpay from "../components/pay/wepay";
+import wechatpay from "../../components/pay/wepay";
 import NoneData from "src/components/common/noneData.vue";
 export default {
   data() {
@@ -147,6 +147,7 @@ export default {
           this.orderNo=OrderNo
           this.orderInfo=r.data.data
           this.loading=false
+          
         }else{
           this.goHomeHandler()
         }
@@ -157,6 +158,10 @@ export default {
       // setTimeout(() => {
       //     location.href = location.origin;
       //   }, 3000);
+    },
+    cancelPayHandler(){
+      this.showPay=''
+      location.reload()
     }
   },
 };

src/pages/pay/paysuccess.vue

+<template>
+    <div class="content-page order-preview" style="min-height:60vh;">
+    
+        <q-stepper v-model="step" ref="stepper" color="primary" inactive-color="grey-5 " done-color="primary" class="bg-transparent" flat animated>
+    
+            <q-step :name="1" title="確認訂單" icon="settings" :done="step > 1"></q-step>
+    
+            <q-step :name="2" title="付款" icon="iconfont iconPayment-1" :done="step > 2"></q-step>
+    
+            <q-step :name="3" title="訂購完成" icon="iconfont iconicon_finish_R" :done="step == 3"></q-step>
+    
+        </q-stepper>
+    
+        <q-inner-loading :showing="loading" label="正在加載中"></q-inner-loading>
+    
+        <q-card flat class="q-pa-lg q-mb-lg" :class="{ 'q-mx-md': $q.platform.is.mobile }" v-if="!loading && orderInfo">
+    
+            <div style="width:350px;margin:0 auto;">
+    
+                <div class="row items-center">
+    
+                    <q-icon name="iconfont iconsuccess" color="positive" size="40px"></q-icon>
+    
+                    <span class="q-ml-lg text-subtitle1">支付成功</span>
+    
+                </div>
+    
+                <div class="q-mt-lg">
+    
+                    <div class="row">
+    
+                        <div style="width:80px;" class="text-subtitle2">商品訂單：</div>
+    
+                        <div class="q-ml-md text-grey-6">{{ orderNo }}</div>
+    
+                    </div>
+    
+                    <div class="row q-mt-md">
+    
+                        <div style="width:80px;padding-top:5px;" class="text-subtitle2">支付金額：</div>
+    
+                        <div class="q-ml-md col">
+    
+                            <div class="row items-center">
+    
+                                <span class="text-positive text-subtitle1 col">CNY 8960.00</span>
+    
+                                <div class="text-grey-6 q-mr-sm cursor-pointer" @click="$event=>isExplends=!isExplends">訂單詳情</div>
+    
+                                <q-icon :name="isExplends?'keyboard_arrow_up':'keyboard_arrow_down'" @click="$event=>isExplends=!isExplends" size="14px" color="grey-6" class="cursor-pointer" />
+    
+                            </div>
+    
+                            <div v-if="isExplends">
+    
+                                <div class="q-mt-md text-grey-6">商品名称： {{ orderInfo.GoodsName }}</div>
+    
+                                <div class="q-mt-md text-grey-6">出行摘要： {{ orderInfo.OrderMake }}</div>
+    
+                                <div class="q-mt-md text-grey-6">应付金额： CNY {{(moneyFormat(orderInfo.TotalPrice,2))}}</div>
+    
+                                <div class="q-mt-md text-grey-6">购买时间： {{ orderInfo.CreateTime }}</div>
+    
+                            </div>
+    
+                        </div>
+    
+    
+    
+                    </div>
+    
+                </div>
+
+                <div class="q-mt-lg">
+                    <q-btn unelevated dense color="primary" label="回到首頁" @click="CommonJump('/',{})" class="q-px-md"></q-btn>
+                </div>
+    
+            </div>
+    
+        </q-card>
+    
+        <div v-if="(!orderNo || orderNo == '') && !loading" class="text-center q-my-xl">
+    
+            <none-data iconType="order" title="沒有找到您的訂單信息哦" subtitle="趕緊去挑選心儀的旅遊產品吧,三秒後自動跳轉到首頁"></none-data>
+    
+        </div>
+    
+    </div>
+</template>
+
+<script>
+import { date } from "quasar";
+export default {
+    data() {
+        return {
+            step: 3,
+            orderNo: "",
+            loading: true,
+            orderInfo: null,
+            isExplends: false
+        };
+    },
+    created() {
+        this.checkParamsHandler()
+    },
+    methods: {
+        showPayFormHandler(payStr) {
+            this.showPay = payStr;
+        },
+        checkParamsHandler() {
+            if (this.$route.params && this.$route.params.id) {
+                this.getOrderInfoHandler(this.$route.params.id)
+            } else {
+                this.goHomeHandler()
+            }
+        },
+        getOrderInfoHandler(OrderNo) {
+            this.apipost("GetDetailsByOrderNo_post", { OrderNo }, r => {
+                if (r.data.resultCode == 1) {
+                    this.orderNo = OrderNo
+                    this.orderInfo = r.data.data
+                    this.orderInfo.CreateTime = date.formatDate(this.orderInfo.CreateTime.replaceAll('T',' '),'YYYY年MM月DD日 HH時mm分')
+                    this.loading = false
+                    if(this.orderInfo.OrderStatus!=2 ||this.orderInfo.OrderStatus!=3){
+                        this.CommonJump("/pay/" + this.orderNo, {});
+                    }
+                } else {
+                    this.goHomeHandler()
+                }
+            })
+        },
+        goHomeHandler() {
+            this.loading = false
+            // setTimeout(() => {
+            //     location.href = location.origin;
+            //   }, 3000);
+        }
+    },
+}
+</script>
+
+<style>
+.order-pay-page .q-stepper__content {
+    display: none !important;
+}
+</style>
\ No newline at end of file

src/router/routes.js

@@ -165,7 +165,12 @@ const routes = [{
             {
                 path: '/pay/:id?', //自定义页面
                 component: () =>
-                    import ('pages/pay.vue')
+                    import ('pages/pay/pay.vue')
+            },
+            {
+                path: '/paysuccess/:id?', //自定义页面
+                component: () =>
+                    import ('pages/pay/paysuccess.vue')
             },
         ]