mgrading/src/views/PaymentResult.vue

<template>
  <div class="paymentResult">
    <m-header v-if="headerStatus" :isBack="isBack" />
    <div class="payOn" v-if="pageStatus == 'ON'">
        <img src="@/assets/images/pay_success.png" alt />
        <p>支付成功</p>
        <!-- <van-button color="@--main-color" type="info" @click="onAppBack" round>返回</van-button> -->
    </div>

    <div class="payError" v-if="pageStatus == 'FAILED' || pageStatus == 'CLOSE' || pageStatus == 'REFUND'">
        <img src="@/assets/images/pay_error.png" alt />
        <p>支付失败</p>
        <!-- <van-button color="@--main-color" type="info" @click="onAppBack" round>返回</van-button> -->
    </div>

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

    <div class="paySuccess" v-if="pageStatus == 'SUCCESS'">
        <div class="status">
            <img src="@/assets/images/pay_success.png" alt />
            <p>支付成功</p>
            <p class="money">￥{{ orderInfo.transAmount }}</p>
        </div>

        <div class="orderInfo">
            <p>
                <span>购买时间：</span>
                {{ orderInfo.createTime }}
            </p>
            <p>
                <span>订单编号：</span>
                {{ orderInfo.orderNo }}
            </p>
            <p>
                <span>考生名字：</span>
                {{ examRegistration.studentName }}
            </p>
            <p>
                <span>报考专业：</span>
                {{ examRegistration.subjectName }}({{ examRegistration.level | levelToCN }}/{{ examRegistration.levelFee }}元)
            </p>
            <p>
                <span>乐理知识：</span>
                <template v-if="examRegistration.examMusicTheoryLevel">
                    {{ examRegistration.examMusicTheoryLevel | levelToCN }}/{{ examRegistration.theoryLevelFee }}元
                </template>
                <template v-else>
                    免考
                </template>
            </p>
            <p>
                <span>预计考试时间：</span>
                {{ examRegistration.examStartTime }}
            </p>
            <!-- <img class="icon_img" src="@/assets/images/icon_cw.png" alt srcset /> -->
        </div>
        <!-- <van-button color="@--main-color" type="info" @click="onAppBack" round>返回</van-button> -->
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import MHeader from "@/components/MHeader"
import { paymentResult } from "./adapay/AdapayApi"
import { getExamRegistration } from './signup/SignUpApi'
import { browser } from "@/utils/common"
import setLoading from '@/utils/loading'
import dayjs from 'dayjs'
// import { stat } from 'fs'
export default {
    name: "paymentResult",
    components: { MHeader },
    data() {
        let that = this;
        const query = this.$route.query
        return {
            headerStatus: false,
            // isBack: query.isBack == "off" ? false : true, // 是否显示返回按钮
            isBack: false, // 是否显示返回按钮
            pageStatus: null,
            orderInfo: {},
            examRegistration: {}
        };
    },
    mounted() {
        // window.localStorage.removeItem('userInfo') // 删除用户信息
        // window.localStorage.removeItem('Authorization') // 删除用户信息
        if (!browser().android && !browser().iPhone) {
            this.headerStatus = true;
        }
        this.__init()

        this.pushHistory()

        const that = this
        window.addEventListener(
            "popstate",
            function(e) {
                const ua = window.navigator.userAgent.toLowerCase()
                if (ua.match(/MicroMessenger/i) == 'micromessenger') {
                    WeixinJSBridge.call('closeWindow')
                } else {
                    const examId = localStorage.getItem("examId")
                    const organId = localStorage.getItem("organId")
                    // window.location.replace(
                    //     window.location.href.toString().replace(window.location.hash, "") + `#/signUp?examId=${examId}&organId=${organId}`
                    // );
                    that.$router.push({
                        path: "/signUp",
                        query: {
                            examId: examId,
                            organId: organId
                        }
                    })
                }
            },
            false
        );
    },
    methods: {
        pushHistory() {
            var state = {
                title: "title",
                url: "#"
            };
            window.history.pushState(state, "title", "#");
        },
        async __init() {
            setLoading(true)
            try {
                let params = this.$route.query;
                if (params.orderNo) {
                    // 是否有订单号
                    await paymentResult({ orderNo: params.orderNo }).then(res => {
                        let result = res.data;
                        if (result.code == 200) {
                            const tempResult = result.data.examRegistrationPayment
                            this.examRegistration = result.data.examRegistrationDto
                            this.examRegistration.examStartTime = dayjs(this.examRegistration.examStartTime).format("YYYY-MM-DD")
                            this.orderInfo = tempResult
                            this.pageStatus = tempResult.transStatus
                        } else {
                            // 订单处理中
                            this.pageStatus = "ING";
                            this.CountDown();
                        }
                    });
                } else {
                    if (params.type) {
                        this.pageStatus = params.type;
                    } else {
                        this.pageStatus = "ING";
                        this.CountDown();
                    }
                }
            } catch(err) {
                this.pageStatus = "ING";
                this.CountDown();
            }
            setLoading(false)
        },
        onAppBack() {
            // app回调页面
            if (browser().android) {
                DAYA.postMessage(JSON.stringify({ api: "back" }));
            } else if (browser().iPhone) {
                window.webkit.messageHandlers.DAYA.postMessage(
                    JSON.stringify({ api: "back" })
                );
            } else {
                this.onHref()
            }
        },
        onHref() {
            window.location.replace(
                window.location.href.toString().replace(window.location.hash, "") +
                "#" + "/paymentResult"
            );
            this.$router.push("/paymentResult")
        },
        CountDown() {
            // let s = 60;
            // this.smsText = s;
            // let timer = setInterval(() => {
            //     if (s <= 0) {
            //         this.__init();
            //         clearInterval(timer);
            //     } else {
            //         s--;
            //         this.smsText = s;
            //     }
            // }, 1000);
        }
    },
    destroyed() {
        window.removeEventListener("popstate", ()=>{})
    },
    filters: {
        levelToCN(value) {
            const levelStr = {
                1: "一级",
                2: "二级",
                3: "三级",
                4: "四级",
                5: "五级",
                6: "六级",
                7: "七级",
                8: "八级",
                9: "九级",
                10: "十级",
            }
            return levelStr[value]
        }
    }
};
</script>

<style lang="less" scoped>
@import url("../assets/commonLess/variable");
.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: 0.12rem;
        font-size: 0.18rem;
        color: #444444;
        text-align: center;
        margin-bottom: 1.5rem;
        &.countdown {
            font-size: 0.14rem;
            margin-bottom: 0;
        }
    }
}
.van-button {
    width: 90%;
    margin: 0 5% 0;
    line-height: 0.48rem;
    height: 0.5rem;
    font-size: 0.18rem;
}
.paySuccess {
    .status {
        margin-top: .1rem;
        background-color: #fff;
        text-align: center;
        font-size: 0.16rem;
        color: #444;
        padding-bottom: 0.1rem;
        margin-bottom: 0.1rem;
        img {
            margin-top: 0.1rem;
            width: 0.58rem;
            height: 0.71rem;
        }
        .money {
            font-size: 0.14rem;
            color: #f97215;
        }
  }
}
.orderInfo {
    position: relative;
    margin-bottom: 0.1rem;
    padding: 0.15rem 0.15rem 0.2rem;
    background-color: #fff;
    font-size: 0.14rem;
    color: #777777;
    & > p {
        padding-bottom: 8px;
    }
    span {
        color: #444444;
    }
    .icon_img {
        width: 1.2rem;
        height: 1.1rem;
        position: absolute;
        bottom: 0.3rem;
        right: 0.2rem;
    }
  }
</style>