proginn-frontend/components/skill/dealSeoList.js

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,
            pagesize: 9,
            total: 0,
            loading: false,
            selectedCateIdOne: '',
            selectedCateIdTwo: '',
            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('/frontend/skill/list') > -1) {
            this.redirect(301, '/learn/' + lastMatch)
        }

        let skillCate = await this._getSkillCate()
        let skillCateAll = []
        skillCate.forEach(item => {
            if (item.children && item.children.length) {
                item.children.forEach(child => {
                    skillCateAll.push(child)
                })
            }
        })

        if (Number(lastMatch) > 0) {
            // 遍历分类数组
            let selectedCateIdOne = ''
            skillCate.forEach(cateOne => {
                cateOne.children.forEach(cateTwo => {
                    if (Number(cateTwo.value) === Number(lastMatch)) {
                        selectedCateIdOne = cateOne.value
                        self.cateNameOne = cateOne.label
                        self.cateNameTwo = cateTwo.label
                    }
                })
            })
            if (Number(selectedCateIdOne) > 0) {
                this.pagination.selectedCateIdOne = selectedCateIdOne
                this.pagination.selectedCateIdTwo = lastMatch
            }
        }

        // 处理完分类信息，再获取数据
        let skillList = await this._getSkillList()

        return {
            skillCate,
            skillCateAll,
            skillList, //首次获取的数据
            mobile: this.app.$deviceType.isMobile(),
            pagination: this.pagination,
            head: this.dealThisMeta()
        }
    }

    /** 获取技能分类 */
    async _getSkillCate () {
        let res = await this.$axios.$post('/api/sale/cateListYes', { type: 2 })
        let skillCate = []

        if (Number(res.status) === 1) {
            skillCate = res.data || []
            skillCate = skillCate.map(item => {
                let children = item.child_list.map(child => {
                    return {
                        value: child.category_id,
                        label: child.name
                    }
                })
                return {
                    value: item.category_id,
                    label: item.name,
                    children: children
                }
            })
        }

        return skillCate
    }

    /** 获取技能服务列表 */
    async _getSkillList () {
        // 接口参数释义：https://www.yesdev.cn/apidocs-detail-20.html
        const data = {
            type: 1,
            page: this.pagination.page,
            page_size: this.pagination.pagesize,
            cate_id: this.pagination.selectedCateIdTwo,
            status: 2,
            owner_type: 1
        }

        let res = await this.$axios.$post('/api/sale/saleList', data)
        let skillList = []

        if (Number(res.status) === 1) {
            skillList = res.data.list || []
            skillList.forEach((item) => {
                let imageList = item.image.split(',')
                item.coverImage = imageList[0] || ''
                imageList.splice(0, 1)
                item.imageList = imageList
            })
            this.pagination.total = Number(res.data.total)
            this.pagination.pagesize = Number(res.data.page_size) || 9

            if (this.pagination.page * this.pagination.pagesize >= this.pagination.total) {
                this.pagination.noMore = true
            } else {
                this.pagination.noMore = false
            }
        }

        return skillList
    }
  
    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}培训-${this.cateNameTwo}学习-程序员客栈技术培训`;
            head.keyword = `${this.cateNameTwo}培训、${this.cateNameTwo}学习、自学${this.cateNameTwo}、${this.cateNameTwo}教学、${this.cateNameTwo}编程`;
            head.description = `程序员客栈技术培训提供${this.cateNameTwo}技术培训,${this.cateNameTwo}自学教程,${this.cateNameTwo}教学资源,${this.cateNameTwo}编程学习,${this.cateNameTwo}项目实战等高端${this.cateNameTwo}技术大牛一对一教学培训资源`;
        } else {
            // 列表页，无筛选参数
            head.title = "IT技术培训学习-【程序员客栈技术培训】";
            head.keyword = "IT技术学习、IT培训、编程开发学习、自学编程";
            head.description = "程序员客栈技术培训是一个提供了编程的基础技术教程, 介绍了HTML、CSS、Javascript、Python，Java，Ruby，C，PHP , MySQL等各种编程语言的培训课程。 同时也提供了大量的高端程序员，通过一对一教学，帮助您更好的学习编程。";
        }
        
        return head
    }
}