支付宝支付

.env.development

@@ -1,4 +1,4 @@
-VUE_APP_BASE_URL=http://test.yags.raex.vip/
+VUE_APP_BASE_URL=https://yags.raex.vip
 NODE_ENV=development
 VUE_APP_PUBLIC_PATH=/
 ASSETS_PATH=raex

src/components/PayMethodPick.vue

@@ -38,20 +38,26 @@ export default {
         if (this.value) {
             this.checked = this.value;
         }
+        let info = [...this.payConfig].find(item => {
+            return item.enabled;
+        });
+        if (info) {
+            this.checked = info.key;
+        }
     },
     data() {
         return {
             checked: null,
             payConfig: [
-                {
-                    name: '首信易快捷支付',
-                    icon: 'https://cdn.raex.vip/image/2022-05-19-15-16-35vrSuZKWN.png',
-                    show: true,
-                    enabled: true,
-                    description: '',
-                    sort: 0,
-                    key: 'SYXPAY'
-                },
+                // {
+                //     name: '首信易快捷支付',
+                //     icon: 'https://cdn.raex.vip/image/2022-05-19-15-16-35vrSuZKWN.png',
+                //     show: true,
+                //     enabled: true,
+                //     description: '',
+                //     sort: 0,
+                //     key: 'SYXPAY'
+                // },
                 {
                     name: '支付宝',
                     icon: 'https://cdn.raex.vip/image/2022-05-18-17-46-08sBUUyUlw.png',

src/components/TicketBuy.vue

@@ -27,7 +27,7 @@
                     <span>¥</span>
                     <span>{{ money }}</span>
                 </div>
-                <van-button type="primary" @click="pay">立即支付</van-button>
+                <van-button type="primary" @click="submit">立即支付</van-button>
             </div>
         </div>
     </van-popup>
@@ -51,7 +51,10 @@ export default {
         return {
             show: false,
             payType: '',
-            qty: 1
+            qty: 1,
+            timer: null,
+            timerNum: 0,
+            orderId: 0
         };
     },
     computed: {
@@ -71,34 +74,106 @@ export default {
         init() {
             this.show = true;
         },
-        pay() {
+        getOrder(next = false) {
+            this.$http.get('/ticketOrder/get/' + this.orderId).then(res => {
+                if (this.timer) {
+                    clearTimeout(this.timer);
+                }
+                if (this.timerNum >= 20) {
+                    this.$toast.clear();
+                    this.$dialog
+                        .confirm({
+                            title: '提示',
+                            message: '订单是否已经支付',
+                            confirmButtonText: '已经支付',
+                            cancelButtonText: '未支付'
+                        })
+                        .then(() => {
+                            this.$dialog
+                                .alert({
+                                    title: '正在排队中...',
+                                    message: '您的通行证订单正在排队，通行证后续会直接出现在您的账号中哦～'
+                                })
+                                .then(res => {
+                                    this.show = false;
+                                });
+                        })
+                        .catch(e => {
+                            this.$dialog
+                                .confirm({
+                                    title: '提示',
+                                    message: '订单未支付是否重新支付？',
+                                    confirmButtonText: '重新支付',
+                                    cancelButtonText: '取消订单'
+                                })
+                                .then(() => {
+                                    this.timerNum = 0;
+                                    this.pay();
+                                })
+                                .catch(() => {
+                                    this.show = false;
+                                });
+                        });
+                } else if (res.status === 'FINISH' || res.status === 'CANCELLED') {
+                    this.$toast.clear();
+                    this.$dialog
+                        .alert({
+                            title: '提示',
+                            message: res.status === 'CANCELLED' ? '订单支付失败,点击重新下单' : '订单已支付'
+                        })
+                        .then(() => {
+                            if (res.status === 'CANCELLED') {
+                                this.show = false;
+                            } else {
+                                this.show = false;
+                            }
+                            // on close
+                        });
+                } else if (next) {
+                    this.timerNum += 1;
+                    this.timer = setTimeout(() => {
+                        this.getOrder(next);
+                    }, 1500);
+                }
+            });
+        },
+        submit() {
             if (!this.payType) {
                 this.$toast('请选择购买方式');
                 return;
             }
-            this.$toast('暂不支持该付款方式');
-            // this.$toast.loading({
-            //     message: '加载中...',
-            //     forbidClick: true
-            // });
 
-            // this.$http
-            //     .post('/ticketOrder/create', {
-            //         type: this.info.type,
-            //         qty: this.qty
-            //     })
-            //     .then(res => {
-            //         return this.$http.post('/ticketOrder/balancePay', {
-            //             orderId: res.id
-            //         });
-            //     })
-            //     .then(res => {
-            //         this.$toast.success('购买成功');
-            //         this.show = false;
-            //     })
-            //     .catch(e => {
-            //         this.$toast(e.error);
-            //     });
+            this.$toast.loading({
+                message: '加载中...',
+                forbidClick: true
+            });
+            this.createOrder().then(id => {
+                this.pay(true);
+            });
+        },
+        createOrder() {
+            return this.$http
+                .post('/ticketOrder/create', {
+                    type: this.info.type,
+                    qty: this.qty
+                })
+                .then(res => {
+                    this.orderId = res.id;
+                    return Promise.resolve(res.id);
+                });
+        },
+        pay() {
+            this.$http
+                .get(`/order/pay/${this.orderId}/${this.payType}`)
+                .then(res => {
+                    if (this.payType === 'ALIPAY') {
+                        document.location.href = res;
+                        this.getOrder(true);
+                    }
+                })
+                .catch(e => {
+                    this.$toast(e.error);
+                });
         }
     }
 };