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: 12,
            total: 0,
            loading: false,
            selectedCateIdOne: '',
            selectedCateIdTwo: '',
            noMore: true
        }
        this.cateNameOne = ''
        this.cateNameTwo = ''
        this.mobile = this.app.$deviceType.isMobile()
        this.root_type = 0
    }

    async dealData() {
        const self = this
        let {
            name,
            query: { page = 1, root_type = 0 },
            path,
            params,
            fullPath
        } = this.app.context.route
        this.pagination.page = Number(page)
        this.root_type = root_type

        // 目前仅将二级 id 拼接到 url 上
        let match = params.pathMatch || ''
        let matchList = match.split('/')
        matchList.pop()
        let lastMatch = matchList.pop() || ''
        // console.log(`match: ${match}, matchList: ${matchList}, lastMatch: ${lastMatch}`)

        // 重定向
        if (path.indexOf('/frontend/skill/list') > -1) {
            this.redirect(301, '/skill/' + 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 (lastMatch) {
            // 遍历分类数组，因为每个 children 都添加了“全部”，此处逻辑无需修改
            let selectedCateIdOne = ''
            skillCate.forEach(cateOne => {
                cateOne.children.forEach(cateTwo => {
                    if (cateTwo.value === lastMatch) {
                        selectedCateIdOne = cateOne.value
                        self.cateNameOne = cateOne.label
                        if (cateTwo.label === '全部') {
                            self.cateNameTwo = cateOne.label
                        } else {
                            self.cateNameTwo = cateTwo.label
                        }
                    }
                })
            })
            if (selectedCateIdOne) {
                this.pagination.selectedCateIdOne = selectedCateIdOne
                this.pagination.selectedCateIdTwo = lastMatch
            }
        }

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

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

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

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

            // web 端，为所有二级分类添加 “全部”
            if (!this.mobile) {
                skillCate.forEach(item => {
                    if (item.children) {
                        let allItem = { value: item.value, label: '全部' }
                        item.children.splice(0, 0, allItem)
                    }
                })
            }
        }

        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,
            root_type: this.root_type
        }

        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}技能服务-程序员客栈技术服务`;
            head.keyword = `${this.cateNameTwo}开发,${this.cateNameTwo}编程,自学${this.cateNameTwo},${this.cateNameTwo}教学`;
            head.description = "技能服务是程序员客栈远程工作平台为企业和自由职业者提供的标准化数字服务，通过标准定价的模块化技能，帮助企业和自由职业者快速达成合作。";
        } else {
            // 列表页，无筛选参数
            head.title = "程序员客栈技能商城-【程序员客栈技能服务】";
            head.keyword = "程序员客栈技能商城,远程工作,Logo设计,网页设计,微信公众号运营,PPT设计,社群运营,文案编辑,视频剪辑,音频录制,翻译";
            head.description = "技能服务是程序员客栈远程工作平台为企业和自由职业者提供的标准化数字服务，通过标准定价的模块化技能，帮助企业和自由职业者快速达成合作。";
        }

        return head
    }
}