proginn-frontend/pages/frontend/name_cert/fail.vue

<template>
<div :class="mobile ? 'mobileMain' : ''" :style="{
      marginTop: mainMarginTop,
      marginBottom: mobile ? '0px' : '30px !important'
    }">
    <div class="name-cert-container page-center">
        <!-- 实名失败 -->
        <div class="name-cert-main">
            <div class="name-cert-title-area">
                <img class="name-cert-icon" :src="iconFail" />
                <h6 class="name-cert-title">实名认证失败</h6>
                <div class="name-cert-fail-btn">
                    <el-button type="primary" class='cert-btn' size="medium" @click="reset">重新认证</el-button>
                </div>
                <p class="name-cert-fail-tips">无法进行支付宝认证？<a href="">人工认证</a></p>
            </div>

        </div>
    </div>

</div>
</template>

<script>
import {
    mapState
} from "vuex";
import qs from "qs";
import icon from "@/assets/img/account/certicon@3x.png"
import iconSuccess from "@/assets/img/account/cert_success_icon@3x.png"
import iconFail from "@/assets/img/account/cert_fail_icon@3x.png"

export default {
    name: "SeoLearnList",
    data() {
        return {
            baseUrl: "",
            mobile: false,
            isWeixinApp: true,
            icon,
            iconSuccess,
            iconFail,

            centerDialogVisible: false,

        };
    },
    head() {
        const {
            title = "认证失败",
                keyword = "",
                description = "",
                h1 = "",
                canonical = "",
                metaLocation
        } = this.head || {};
        let obj = {
            title: title,
            meta: [{
                    name: "keywords",
                    content: keyword
                },
                {
                    name: "description",
                    content: description
                },
                {
                    name: "h1",
                    content: h1
                }
            ],
            link: [{
                rel: "canonical",
                href: canonical
            }]
        };
        if (metaLocation) {
            obj.meta.push({
                name: "location",
                content: metaLocation
            });
        }
        return obj;
    },
    computed: {
        ...mapState(["deviceType"]),
        showWxHeader() {
            return (
                !this.deviceType.app &&
                !this.isWeixinApp &&
                (this.deviceType.android || this.deviceType.ios)
            );
        },
        mainMarginTop() {
            if (this.mobile && this.showWxHeader) {
                return "64px !important";
            } else if (this.mobile) {
                return "0px !important";
            } else {
                return "20px !important";
            }
        },
        userInfo() {
            return this.$store.state.userinfo;
        }
    },

    mounted() {
        this.home_page_type = this.userInfo.home_page_type;
        this.baseUrl = this.$store.state.domainConfig.siteUrl;
        this.isWeixinApp = navigator.userAgent.indexOf("miniProgram") > -1;

        document.body.style.background = "#fff"

    },
    methods: {
        reset() {
            // 跳转
            location.replace('/frontend/name_cert')
        }
    }
};
</script>

<style lang="scss">
@import "@/assets/css/name_cert/name_cert.scss";
</style>