1. 样式污染修复；2. works SEO 重构；

components/skill/dealSeoList.js

@@ -178,4 +178,3 @@ export default class DealSeoData {
         return head
     }
 }
-  

components/work_down/dealSeoList.js

@@ -0,0 +1,157 @@
+export default class DealSeoData {
+    constructor({$axios, req, app, redirect, error}) {
+        this.$axios = $axios
+        this.req = req
+        this.app = app
+        this.redirect = redirect
+        this.error = error
+        this.pagination = {
+            page: 1,
+            keywords: '',
+            cate_id_two: [],
+            // 非接口参数
+            pagesize: 20,
+            total: 0,
+            loading: false,
+            noMore: true
+        }
+        this.cateNameOne = ''
+        this.cateNameTwo = ''
+    }
+  
+    async dealData() {
+        const self = this
+        let {
+            name,
+            query: { page = 1 },
+            path,
+            params,
+            fullPath
+        } = this.app.context.route
+        this.pagination.page = Number(page)
+
+        // 目前仅将二级 id 拼接到 url 上
+        let match = params.pathMatch || ''
+        let matchList = match.split('/').map(item => item.toLocaleLowerCase())
+        let lastMatch = matchList.pop()
+        // console.log(`match: ${match}, matchList: ${matchList}, lastMatch: ${lastMatch}`)
+
+        // 重定向
+        // if (path.indexOf('/work_down') > -1) {
+        //     this.redirect(301, '/works/' + lastMatch)
+        // }
+
+        let categoryList = await this._getWorksCategory()
+        let categoryAll = []
+        categoryList.forEach(item => {
+            if (item.child && item.child.length) {
+                item.child.forEach(child => {
+                    categoryAll.push(child)
+                })
+            }
+        })
+
+        if (Number(lastMatch) > 0) {
+            // 遍历分类数组
+            let selectedCateIdOne = ''
+            categoryList.forEach(cateOne => {
+                cateOne.child.forEach(cateTwo => {
+                    if (Number(cateTwo.category_id) === Number(lastMatch)) {
+                        selectedCateIdOne = cateOne.category_id
+                        self.cateNameOne = cateOne.name
+                        self.cateNameTwo = cateTwo.name
+                    }
+                })
+            })
+            if (Number(selectedCateIdOne) > 0) {
+                this.pagination.cate_id_two.push(lastMatch)
+            }
+        }
+
+        // 处理完分类信息，再获取数据
+        let worksList = await this._getWorksList()
+
+        return {
+            categoryList,
+            categoryAll,
+            worksList, //首次获取的数据
+            mobile: this.app.$deviceType.isMobile(),
+            pagination: this.pagination,
+            head: this.dealThisMeta()
+        }
+    }
+
+    /** 获取作品分类 */
+    async _getWorksCategory () {
+        let res = await this.$axios.$post('/api/user_works/cate')
+        let categoryList = []
+
+        if (Number(res.status) === 1) {
+            categoryList = res.data || []
+        }
+
+        return categoryList
+    }
+
+    /** 获取作品列表 */
+    async _getWorksList () {
+        const data = {
+            page: this.pagination.page,
+            keywords: this.pagination.keywords,
+            cate_id_two: this.pagination.cate_id_two.join(',')
+        }
+
+        let res = await this.$axios.$post('/api/user_works/workFileList', data)
+        let worksList = []
+
+        if (Number(res.status) === 1) {
+            worksList = res.data.list || []
+            this.pagination.pagesize = Number(res.data.pagesize) || 20
+            this.pagination.total = Number(res.data.total) || 0
+
+            if (this.pagination.page * this.pagination.pagesize >= this.pagination.total) {
+                this.pagination.noMore = true
+            } else {
+                this.pagination.noMore = false
+            }
+        }
+
+        return worksList
+    }
+  
+    dealThisMeta() {
+        let head = {
+            title: "",
+            keyword: "",
+            description: "",
+            h1: "",
+            canonical: "",
+            metaLocation: ""
+        }
+
+        if (this.req) {
+            const { headers: { host }, url } = this.req
+      
+            //拼接canonical
+            if (host.indexOf('local') !== -1) {
+              head.canonical = 'http://' + host + url
+            } else {
+              head.canonical = 'https://' + host + url
+            }
+        }
+
+        if (this.cateNameTwo) {
+            // 分类页
+            head.title = `${this.cateNameTwo}资源下载-开发技术资源-程序员客栈资源商城`;
+            head.keyword = `${this.cateNameTwo}资源下载、${this.cateNameTwo}开发技术资源下载、${this.cateNameTwo}项目源码下载`;
+            head.description = `${this.cateNameTwo}开发技术资源,为IT开发人员提供权威的${this.cateNameTwo}学习、${this.cateNameTwo}编程源码、${this.cateNameTwo}电子书、各阶段资料下载等服务.更多下载资源请访问程序员客栈APP或官网资源商城`;
+        } else {
+            // 列表页，无筛选参数
+            head.title = "IT开发资源下载-【程序员客栈资源商城】";
+            head.keyword = "IT开发资源下载、开发源码下载";
+            head.description = "程序员客栈资源商城是一个提供学习资源、源码、在线学习视频、IT电子书、各类免费软件等下载服务的IT资源大本营,致力于为软件开发者提供知识传播、资源共享、共同学习的优质学习资源平台.";
+        }
+        
+        return head
+    }
+}

components/wx_header.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="wx-header">
+  <section class="wx-header wx-header-custom">
     <img class="logo" src="https://stacdn.proginn.com/image/common/logo3@2x.png" alt="icon" @click="jumpTo">
     <el-dropdown class="nav-dropdown">
       <el-button class="text" type="text" style="font-size: 18px;">

pages/frontend/consult/detail/_id.vue

@@ -264,9 +264,9 @@ export default {
 
 <style lang="scss" scoped>
 @import "@/assets/css/consult/detail/_id.scss";
-.wx-header {
-    position: relative;
-}
 </style>
 <style lang="scss">
+.wx-header-custom {
+    position: relative;
+}
 </style>

pages/frontend/consult/list.vue

@@ -484,10 +484,6 @@ export default {
 
 <style lang="scss" scoped>
 @import "@/assets/css/consult/list.scss";
-.wx-header {
-    position: fixed;
-    z-index: 11;
-}
 </style>
 <style lang="scss">
 .category-drawer {
@@ -567,4 +563,8 @@ export default {
         }
     }
 }
+.wx-header-custom {
+    position: fixed;
+    z-index: 11;
+}
 </style>

pages/frontend/consult/user/_id.vue

@@ -1,7 +1,7 @@
 <template>
     <div :class="mobile ? 'mobileMain' : ''" 
         :style="{marginTop: mainMarginTop}" 
-        style="margin-bottom: 20px !important;">
+        style="margin-bottom: 30px !important;">
         <div class="consult-detail-wrapper" v-if="!mobile">
             <div class="userinfo-wrapper">
                 <div class="avatar-content">

pages/frontend/skill/detail/_id.vue

@@ -238,9 +238,6 @@ export default {
 
 <style lang="scss" scoped>
 @import "@/assets/css/skill/detail/_id.scss";
-.wx-header {
-    position: relative;
-}
 </style>
 <style lang="scss">
 strong {
@@ -254,4 +251,7 @@ em {
         height: inherit !important;
     }
 }
+.wx-header-custom {
+    position: relative;
+}
 </style>

pages/frontend/skill/list.vue

@@ -438,10 +438,6 @@ export default {
 
 <style lang="scss" scoped>
 @import "@/assets/css/skill/list.scss";
-.wx-header {
-    position: fixed;
-    z-index: 11;
-}
 </style>
 <style lang="scss">
 .category-drawer {
@@ -521,4 +517,8 @@ export default {
         }
     }
 }
+.wx-header-custom {
+    position: fixed;
+    z-index: 11;
+}
 </style>

pages/work_down/index.vue

@@ -1,6 +1,8 @@
 <template>
-    <div :class="mobile ? 'mobileMain' : ''" :style="{marginTop: mainMarginTop}">
-        <div class="works-wrapper" v-if="!mobile" v-loading="firstLoad">
+    <div
+        :class="mobile ? 'mobileMain' : ''"
+        :style="{marginTop: mainMarginTop,  marginBottom: mobile ? '0px !important' : '30px !important'}">
+        <div class="works-wrapper" v-if="!mobile">
             <div class="works-category">
                 <div class="works-category-one">
                     <div
@@ -31,14 +33,14 @@
                         class="works-category-two-wrapper"
                         :class="categoryExpanded ? 'expand' : ''"
                         v-show="currentCategoryIndex === 0">
-                        <div
+                        <a
                             class="works-category-two-item"
                             :class="pagination.cate_id_two.indexOf(category.category_id) > -1 ? 'active' : ''"
                             v-for="category in categoryAll"
                             :key="`category-all-${category.category_id}`"
-                            @click="handleClickCategoryTwo(category.category_id)">
+                            :href="`/works/${category.category_id}`">
                             {{ category.name }}
-                        </div>
+                        </a>
                     </div>
                     <!-- 接口返回的二级分类 -->
                     <div
@@ -47,14 +49,14 @@
                         v-for="(category, index) in categoryList"
                         :key="`category-two-wrapper-${category.category_id}`"
                         v-show="currentCategoryIndex === index + 1">
-                        <div
+                        <a
                             class="works-category-two-item"
                             :class="pagination.cate_id_two.indexOf(categoryChild.category_id) > -1 ? 'active' : ''"
                             v-for="categoryChild in category.child"
                             :key="`category-two-${categoryChild.category_id}`"
-                            @click="handleClickCategoryTwo(categoryChild.category_id)">
+                            :href="`/works/${categoryChild.category_id}`">
                             {{ categoryChild.name }}
-                        </div>
+                        </a>
                     </div>
                 </div>
             </div>
@@ -91,9 +93,9 @@
                 </div>
             </div>
             <div class="result-empty-wrapper" v-else>
-                    <img src="@/assets/img/common/empty@2x.png" alt="empty">
-                    <span>暂无搜索内容</span>
-                </div>
+                <img src="@/assets/img/common/empty@2x.png" alt="empty">
+                <span>暂无搜索内容</span>
+            </div>
             <div class="pagination-wrapper" v-if="pagination.total > pagination.pagesize">
                 <el-pagination
                     background
@@ -253,33 +255,62 @@
 
 <script>
 import {mapState} from "vuex";
+import DealSeoList from "@/components/work_down/dealSeoList"
 
 export default {
     data () {
         return {
             baseUrl: '',
-            categoryAll: [],
-            categoryList: [],
-            worksList: [],
+            // categoryAll: [],
+            // categoryList: [],
+            // worksList: [],
             currentCategoryIndex: 0,
             currentDrawerCategoryIndex: 0,
             categoryExpanded: false,
-            firstLoad: true,
+            firstLoad: false,
             loadingWorksList: false,
             showCategoryDrawer: false,
-            pagination: {
-                page: 1,
-                keywords: '',
-                cate_id_two: [],
-                // 非接口参数
-                pagesize: 20,
-                total: 0,
-                loading: true,
-                noMore: true
-            },
+            // pagination: {
+            //     page: 1,
+            //     keywords: '',
+            //     cate_id_two: [],
+            //     // 非接口参数
+            //     pagesize: 20,
+            //     total: 0,
+            //     loading: true,
+            //     noMore: true
+            // },
             isWeixinApp: true
         }
     },
+    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 () {
@@ -288,32 +319,33 @@ export default {
         },
         mainMarginTop () {
             if (this.mobile && this.showWxHeader) {
-                return '64px'
+                return '64px !important'
             } else if (this.mobile) {
-                return '0px'
+                return '0px !important'
             } else {
-                return '20px'
+                return '20px !important'
             }
         }
     },
     async asyncData ({...params}) {
+        let dealDataObj = new DealSeoList(params)
+        let ans = await dealDataObj.dealData()
+
         return {
-            mobile: params.app.$deviceType.isMobile()
+            ...ans
         }
     },
-    created() {
-        this.baseUrl = this.$store.state.domainConfig.siteUrl;
-    },
     mounted () {
+        this.baseUrl = this.$store.state.domainConfig.siteUrl
         this.isWeixinApp = navigator.userAgent.indexOf("miniProgram") > -1
-        const self = this
-        const getWorksCategoryPromise = this._getWorksCategory()
-        const getWorksListPromise =  this._getWorksList()
+        // const self = this
+        // const getWorksCategoryPromise = this._getWorksCategory()
+        // const getWorksListPromise =  this._getWorksList()
 
-        Promise.all([getWorksCategoryPromise, getWorksListPromise]).then(([a, b]) => {
-            console.log(a, b)
-            self.firstLoad = false
-        })
+        // Promise.all([getWorksCategoryPromise, getWorksListPromise]).then(([a, b]) => {
+        //     console.log(a, b)
+        //     self.firstLoad = false
+        // })
     },
     methods: {
         /**
@@ -440,9 +472,10 @@ export default {
          * 分页页码改变时
          */
         handlePageChange (val) {
-            this.pagination.page = val
+            // this.pagination.page = val
 
-            this._getWorksList()
+            // this._getWorksList()
+            window.location.href = `${window.location.origin}${window.location.pathname}?page=${val}`
         },
         /**
          * mobile 加载更多
@@ -587,7 +620,7 @@ export default {
         }
     }
 }
-.wx-header {
+.wx-header-custom {
     position: fixed;
     z-index: 11;
 }

plugins/seoRouter.js

@@ -43,6 +43,21 @@ const extendRoutes = (routes, resolve) => {
       component: resolve(__dirname, '../pages/job/index.vue')
     }],
 
+    // 资源商城
+    ...[{
+      name: 'SeoWorkDownList_0',
+      path: '/work_down/*',
+      component: resolve(__dirname, '../pages/work_down/index.vue')
+    }, {
+      name: 'SeoWorkList_0',
+      path: '/works',
+      component: resolve(__dirname, '../pages/work_down/index.vue')
+    }, {
+      name: 'SeoWorkList_1',
+      path: '/works/*',
+      component: resolve(__dirname, '../pages/work_down/index.vue')
+    }],
+
     // 服务：技能、咨询
     ...[{
       name: 'SeoSkillList_0',