zizhujianzhan_web/error.vue

<template>
    <div class="errorBox">
        <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250701/1751346180738003.jpg" alt="页面不存在">
        <!-- <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250701/1751346208700657.jpg" alt="服务器渲染错误" v-if="errorCode == 500"> -->
        <!-- <div class="errorText" v-if="errorCode == 404">对不起，您访问的页面不存在</div> -->
        <div class="errorText" v-if="errorCode == 404">对不起，当前网站遇到了一些问题..</div>
        <div class="errorText" v-if="errorCode == 500">对不起，网站尚未完成配置..</div>
        <div class="errorDetail">{{ errorMsg }}</div>
        <!-- <div class="errorText">{{ errorMsg }}</div> -->
        <div @click="goHome" class="goHome">返回网站首页</div>
    </div>
</template>
  
<script setup lang="ts">
    //1.处理错误 start ---------------------------------------->
    //获得错误信息
    const error:any = useError();
    //console.log('错误信息:', error.value);
    //获得错误代码与错误文字
    const errorCode = ref<number>(0)
    const errorText = ref<string>('')
    const route:any = useRoute()
    errorCode.value = error.value.statusCode;
    errorText.value = error.value.message;
    console.log('错误代码:', errorCode.value);
    console.log('错误明细:', errorText.value);
    console.log('错误来源：',route.query.findPage + ".html")

    //展示错误详细
    const errorMsg = ref('当前页面无法访问！')
    //开始查找错误来源：
    if(route.query.findPage == 'index'){
        const websiteId = ref<number>(0)
        //1.确定网站基本信息存在
        try {
            const responseStatus = await requestDataPromise('/web/getWebsiteAllinfo', {
                method: 'GET',
                query: {
                    'link_textnum':24,
                    'link_imgnum':18,
                    'link_footnum':4
                },
            });
            if(responseStatus.code == 200){
                websiteId.value = responseStatus.data.website_head.id
            }
            if(responseStatus.code == 0){
                errorMsg.value = "网站基本信息获取失败：" + responseStatus.message
            }
        } catch (error:any) {
            errorMsg.value = "网站基本信息获取失败：" + error
        }
        //2.确定模板信息存在
        if(websiteId.value != 0){
            try{
                const response = await requestDataPromise('/client/indexData', {
                    method: 'POST',
                    body: {
                        'website_id':websiteId.value,
                        'getpage':'index'
                    },
                });
                if(response.code == 0){
                    errorMsg.value = "模板数据获取失败：" + response.message
                }
            }catch(error:any){
                errorMsg.value = "模板数据获取失败：" + error
            }
        }
    }
    //1.处理错误 end ---------------------------------------->
    //2.处理跳转 start ---------------------------------------->
    const router = useRouter()
    const goHome = () => {
        router.push('/')
    }
    //2.处理跳转 end ---------------------------------------->
</script>

<style lang="less" scoped>
    .errorBox {
        width: 100%;
        text-align: center;
        padding-top: 150px;
        img {
            width: 404px;
            height: 302px;
            margin: 0 auto;
        }
        .goHome {
            width: 120px;
            height: 32px;
            line-height: 32px;
            font-size: 14px;
            color: #20242E;
            text-align: center;
            margin: 0 auto;
            background: #fff;
            border: 1px solid #D4D6D9;
            border-radius: 2px;
            cursor: pointer;
        }
        .errorText {
            font-size:16px;
            color: #727785;
            margin-top: 40px;
            margin-bottom: 20px;
        }
    }
    .errorDetail {
        font-size:14px;
        color: #999;
        text-align: center;
        margin-bottom: 30px;
    }
</style>