支付确认弹框

src/router/index.ts

@@ -111,7 +111,7 @@ const routes: RouteConfig[] = [
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
     component: () => import(/* webpackChunkName: "recharge" */ '@/views/userCenter/Recharge.vue'),
-    props: (route) => ({ templList: route.query.templList }),
+    props: (route) => ({ isCallback: route.query.isCallback }),
     meta: { requiresAuth: true },
   },
   {

src/views/userCenter/Recharge.vue

@@ -63,6 +63,15 @@
           </div>
       </section>
     </van-popup>
+    <van-popup v-model="isCallback" style="padding: 30px; margin: 0 auto;width: 70%;color:#353535;font-size:18px;text-align:center;border-radius:4px;">
+        <div>请确定微信支付是否已完成</div>
+        <div
+          @click="confrimPayed"
+          style="color:#3F79FE;border: 1px solid;margin-top:19px;line-height: 40px;">已完成支付</div>
+        <div
+          @click="rePay"
+          style="margin-top:19px;color:#B6B5BA;">支付遇到问题，重新支付</div>
+    </van-popup>
   </div>
 </template>
 <script lang="ts">
@@ -86,6 +95,8 @@ import { Route } from 'vue-router';
 export default class Recharge extends Vue {
   @State('userInfo') private userInfo!: any;
   private redirectUrl: string = '';
+  @Prop()
+  private isCallback!: boolean;
   private readonly payMethods: any = {
     0: {
       title: '支付宝',
@@ -152,11 +163,44 @@ export default class Recharge extends Vue {
   private async payHandler() {
     const { protocol, host } = location;
     const { pay_url } = await this.$api.order.pay(this.orderId, this.method);
-    const redirectUrl = encodeURIComponent(`${protocol}//${host}/#/rechargeSuccess`);
+    localStorage.setItem('orderId', this.orderId);
+    const redirectUrl = encodeURIComponent(`${protocol}//${host}/#/recharge?isCallback=true`);
     this.redirectUrl = this.method === 0 ? pay_url : `${pay_url}&redirect_url=${redirectUrl}`;
+    localStorage.setItem('payUrl', this.redirectUrl);
     location.href = this.redirectUrl;
     // (window as any).appslc.toPay(this.redirectUrl);
   }
+  private async confrimPayed() {
+    const { protocol, host } = location;
+    this.orderId = String(localStorage.getItem('orderId'));
+    this.redirectUrl = String(localStorage.getItem('payUrl'));
+    if (!this.orderId || !this.redirectUrl) {
+      return this.redirectToRecharge();
+    }
+    const { status } = await this.$api.order.get(this.orderId);
+    if (status === 2) { // 0:未支付 1:支付中 2:支付成功 3:支付失败
+      this.$router.replace({name: 'RechargeSuccess'})
+    } else {
+      this.$dialog.confirm({
+        title: '提示',
+        message: '您当前还没有完成付款，请点击[继续付款]进行支付',
+        confirmButtonText: '继续付款',
+        cancelButtonText: '取消',
+      }).then(() => {
+        location.href = this.redirectUrl;
+      }).catch((err) => {
+        this.$router.push({path: '/userCenter/index'});
+      });
+    }
+  }
+  private redirectToRecharge() {
+    localStorage.setItem('orderId', '');
+    localStorage.setItem('payUrl', '');
+    this.$router.replace({name: 'Recharge'});
+  }
+  private rePay() {
+    this.redirectToRecharge();
+  }
 }
 </script>
 <style scoped lang="scss">
@@ -240,7 +284,6 @@ export default class Recharge extends Vue {
       justify-content: center;
       background: #FFFFFF;
       color: #353535;
-      
       div.box{
         position: absolute;
         top: 39px;
@@ -259,5 +302,9 @@ export default class Recharge extends Vue {
         text-align: center;
       }
     }
+    .confirm-result {
+      font-size: 18px;
+      color: $fontColorBlack;
+    }
   }
 </style>
\ No newline at end of file