Browse Source

咨询服务详情、技能培训详情增加 404;

huan-jie 4 years ago
parent
commit
ae98e8a7c5

BIN
assets/img/common/new404.png


+ 16 - 0
components/consult/dealSeoDetail.js

@@ -7,6 +7,7 @@ export default class DealSeoData {
         this.error = error
         this.consultDetail= {}
         this.from = ''
+        this.isExist = true
     }
 
     async dealData() {
@@ -31,6 +32,7 @@ export default class DealSeoData {
         this.consultDetail = consultDetail
 
         return {
+            isExist: this.isExist,
             uid,
             consultDetail,
             mobile: this.app.$deviceType.isMobile(),
@@ -86,6 +88,8 @@ export default class DealSeoData {
                 zxRatingText = '低'
             }
             consultDetail.user.zxRatingText = zxRatingText
+        } else if (Number(res.status) === 40001) {
+            this.isExist = false
         }
 
         return consultDetail
@@ -96,6 +100,18 @@ export default class DealSeoData {
         let descriptionTitle = ''
         let description = ''
         let canonical = ''
+
+        if (!this.isExist) {
+            // 页面不存在时
+            return {
+                title: "页面不存在-程序员客栈",
+                keyword: "",
+                description: "",
+                h1: "",
+                canonical: "",
+                metaLocation: ""
+            }
+        }
         const nickname = this.consultDetail.user.nickname
 
         this.consultDetail.sale_list.forEach((item, index) => {

+ 32 - 0
components/error_page/404.vue

@@ -0,0 +1,32 @@
+<template>
+    <div class="main-404">
+        <div v-if="message">{{ message }}</div>
+        <img v-else class="img-404" src="@/assets/img/common/new404.png" alt="404">
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'ErrorPage404',
+    props: {
+        message: {
+            type: String,
+            default: ''
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.main-404 {
+    min-height: 500px;
+    text-align: center;
+    line-height: 400px;
+    font-size: 16px;
+    .img-404 {
+        margin: 60px auto 0;
+        display: block;
+        width: 341px;
+    }
+}
+</style>

+ 22 - 4
components/skill/dealSeoDetail.js

@@ -6,6 +6,7 @@ export default class DealSeoData {
         this.redirect = redirect
         this.error = error
         this.skillDetail = {}
+        this.isExist = true
     }
 
     async dealData() {
@@ -24,14 +25,17 @@ export default class DealSeoData {
         }
 
         const skillDetail = await this._getSkillDetail(sale_id)
-        let imageList = skillDetail.image.split(',')
-        skillDetail.coverImage = imageList[0] || ''
-        imageList.splice(0, 1)
-        skillDetail.imageList = imageList
+        if (skillDetail && skillDetail.image && skillDetail.image.length) {
+            let imageList = skillDetail.image.split(',')
+            skillDetail.coverImage = imageList[0] || ''
+            imageList.splice(0, 1)
+            skillDetail.imageList = imageList
+        }
 
         this.skillDetail = skillDetail
 
         return {
+            isExist: this.isExist,
             sale_id,
             skillDetail,
             mobile: this.app.$deviceType.isMobile(),
@@ -47,12 +51,26 @@ export default class DealSeoData {
 
         if (Number(res.status) === 1) {
             skillDetail = res.data
+        } else if (Number(res.status) === 40001) {
+            this.isExist = false
         }
 
         return skillDetail
     }
 
     dealThisMeta() {
+        if (!this.isExist) {
+            // 页面不存在时
+            return {
+                title: "页面不存在-程序员客栈",
+                keyword: "",
+                description: "",
+                h1: "",
+                canonical: "",
+                metaLocation: ""
+            }
+        }
+
         let content = this.skillDetail.content.trim()
         let title = this.skillDetail.title.trim()
         const nickname = this.skillDetail.user.nickname

+ 8 - 2
pages/frontend/consult/user/_id.vue

@@ -1,7 +1,9 @@
 <template>
+    <ErrorPage404 v-if="!isExist"></ErrorPage404>
     <div :class="mobile ? 'mobileMain' : ''"
         :style="{marginTop: mainMarginTop}"
-        style="margin-bottom: 30px !important;">
+        style="margin-bottom: 30px !important;"
+        v-else>
         <div class="consult-detail-wrapper" v-if="!mobile">
             <div class="userinfo-wrapper">
                 <div class="avatar-content">
@@ -121,6 +123,7 @@ import DealSeoDetail from "@/components/consult/dealSeoDetail"
 import qs from "qs"
 import ExpandTopIcon from "@/assets/img/common/expand-top-icon@2x.png"
 import ExpandDownIcon from "@/assets/img/common/expand-down-icon@2x.png"
+import ErrorPage404 from "@/components/error_page/404.vue"
 
 export default {
     // web - 咨询服务详情页
@@ -143,7 +146,10 @@ export default {
             currentDateIndex: 0
         }
     },
-    head() {
+    components: {
+        ErrorPage404
+    },
+    head () {
         const {
             title = "",
             keyword = "",

+ 6 - 1
pages/frontend/skill/detail/_id.vue

@@ -1,5 +1,6 @@
 <template>
-    <div :class="mobile ? 'mobileMain' : 'mobileWeb'" :style="{marginTop: mainMarginTop}">
+    <ErrorPage404 v-if="!isExist"></ErrorPage404>
+    <div v-else :class="mobile ? 'mobileMain' : 'mobileWeb'" :style="{marginTop: mainMarginTop}">
         <div class="skill-detail-wrapper" v-if="!mobile">
             <div class="skill-info">
                 <img class="cover" :src="skillDetail.coverImage" alt="">
@@ -119,6 +120,7 @@ import DealSeoDetail from "@/components/skill/dealSeoDetail"
 import qs from "qs"
 import "quill/dist/quill.core.css"
 import "quill/dist/quill.snow.css"
+import ErrorPage404 from "@/components/error_page/404.vue"
 
 export default {
     name: 'SeoSkillDetail',
@@ -139,6 +141,9 @@ export default {
             showUserContactDialog: false
         }
     },
+    components: {
+        ErrorPage404
+    },
     head() {
         const {
             title = "",