<template>
  <div class="paymentresult">
        <header>支付状态</header>
        <div class="payon" v-if="pageStatus == 'on'">
            <img src="@/assets/pay_success.png" alt="">
            <p>支付成功</p>
            <van-button type="info" @click="onAppBack" round>返回</van-button>
        </div>

        <div class="payerror" v-if="pageStatus == 'error'">
            <img src="@/assets/pay_error.png" alt="">
            <p>支付失败</p>
            <van-button type="info" @click="onAppBack" round>返回</van-button>
        </div>

        <div class="paying" v-if="pageStatus == 'paying'">
            <img src="@/assets/pay_ing.png" alt="">
            <p>订单处理中</p>
            <van-button type="info" @click="onAppBack" round>返回</van-button>
            <p class="countdown">到计时{{ smsText }}秒刷新</p>
        </div>
<!-- ?merOrderId=201911012051504080001 -->
  </div>
</template>

<script>
export default {
    name: 'paymentresult',
    data() {
        return {
            pageStatus: null,
            smsText: 60
        }
    },
    mounted() {
        this.__init()
    },
    methods: {
        __init() {
            let params = this.$route.query
            // 支付成功
            if(params.orderNo) {
                this.$axios.get('/yqpay/getPayStatus?orderNo=' + params.orderNo).then(res => {
                    let result = res.data
                    if(result.code == 200) {
                        if(result.msg == "ING") {
                            this.pageStatus = 'paying'
                            this.CountDown()
                        } else if(result.msg == 'SUCCESS') {
                            this.pageStatus = 'on'
                        } else if(result.msg == 'FAIL') {
                            this.pageStatus = 'error'
                        }
                    } else {
                        this.$toast(result.msg)
                        this.pageStatus = 'error'
                    }
                })
            } else {
                this.pageStatus = 'paying'
                this.CountDown()
            }
        },
        onAppBack() { // app回调页面
            this.$router.push('loginActive')
        },
        CountDown() {
            let s = 60
            this.smsText = s
            let timer = setInterval(() => {
                if(s <= 0) {
                    window.location.reload()
                    clearInterval(timer)
                } else {
                    s--
                    this.smsText = s
                }
            }, 1000);
        }
    }
}
</script>

<style lang="less" scoped>
header {
    height: .40rem;
    line-height: .40rem;
    color: #000;
    font-size: .17rem;
    background: #fff;
    box-shadow: 0px 1px 8px 0px rgba(0,0,0,0.07);
    text-align: center;
    margin-bottom: .06rem;
}

.paymentresult {
    min-height: 100vh;
}
.payerror, .payon, .paying {
    padding-top: 1rem;
    img {
        display: block;
        margin: 0 auto;
        width: 1.03rem;
        height: 1.37rem;
    }
    p {
        padding-top: .12rem;
        font-size: .18rem;
        color: #444444;
        text-align: center;
        margin-bottom: 1.5rem;
        &.countdown {
            font-size: .14rem;
        }
    }
}
.van-button {
    width: 90%;
    margin: 0 5% 0;
    line-height: .48rem;
    height: .5rem;
    font-size: .18rem;
    background: #14928A;
    border-color: #14928A;
}

</style>