fix

src/components/pay.vue

@@ -14,9 +14,11 @@
             <p>微信扫描二维码</p>
             <!-- <p>支付宝扫描二维码</p> -->
             <p>支付3元即可解锁精彩资讯内容</p>
-            <div class="btn">
-              <el-button type="primary" @click="hSubmit">确 定</el-button>
-              <el-button type="danger" @click="hClose">取 消</el-button>
+            <div style="color:red;" v-if="showMessage && !showPaySuccess">付费失败,请关闭重试</div>
+            <div style="color:green;" v-if="showMessage && showPaySuccess">付费成功</div>
+            <div class="btn" v-show="showPaySuccess && showIndex > 0">
+              <el-button type="primary" @click="hSubmit">查看文章</el-button>
+              <!-- <el-button type="danger" @click="hClose">取 消</el-button> -->
             </div>
           </div>
         </div>
@@ -37,14 +39,42 @@ export default {
       type: String
     }
   },
+  watch: {
+    dialogVisible: function (newVal, oldVal) {
+      this.showMessage = false
+      this.showPaySuccess = false
+      if (this.showIndex === 0) {
+        this.closeTimer()
+        this.showIndex = 1
+      } else {
+        setTimeout(() => {
+          this.showMessage = true
+          this.showPaySuccess = true
+        }, 20000)
+      }
+    }
+  },
   data () {
     return {
-      isPay: true
+      showIndex: 0,
+      isPay: true,
+      showPaySuccess: false,
+      showMessage: false
     }
   },
   methods: {
+
+    closeTimer () {
+      this.timer = setTimeout(() => {
+        this.showMessage = true
+        this.showPaySuccess = false
+      }, 20000)
+    },
     hClose () {
       this.$emit('close', false)
+      if (this.timer) {
+        clearTimeout(this.timer)
+      }
     },
     hSubmit () {
       if (this.isPay) {
@@ -100,7 +130,7 @@ export default {
   width: 300px;
   p {
     font-size: 18px;
-    margin-bottom: 20px;
+    margin-bottom: 10px;
   }
   .btn {
     position: absolute;