咨询服务列表部分；

assets/css/consult/list.scss

@@ -0,0 +1,378 @@
+.consult-wrapper {
+    width: 1000px;
+    .consult-top {
+        width: 100%;
+        height: auto;
+        background: #ffffff;
+        border-radius: 10px;
+        .tabs {
+            width: 100%;
+            height: 50px;
+            display: flex;
+            align-items: center;
+            border-bottom: 1px solid #f1f1f1;
+            .tabs-item {
+                position: relative;
+                width: 108px;
+                height: 50px;
+                line-height: 50px;
+                font-size: 16px;
+                font-family: PingFangSC, PingFangSC-Regular;
+                font-weight: 400;
+                text-align: center;
+                color: #666666;
+                &.active {
+                    font-size: 15px;
+                    font-family: PingFangSC, PingFangSC-Semibold;
+                    font-weight: 600;
+                    color: #222222;
+                    &:after {
+                        position: absolute;
+                        content: " ";
+                        width: 15px;
+                        height: 3px;
+                        bottom: 1px;
+                        left: calc(50% - 7.5px);
+                        background: #308eff;
+                        border-radius: 2px;
+                    }
+                }
+            }
+        }
+    }
+    .consult-category-wrapper {
+        width: 100%;
+        height: auto;
+        padding: 20px 20px 30px;
+        .category-title {
+            width: 100%;
+            line-height: 21px;
+            padding-bottom: 7px;
+            font-size: 15px;
+            font-family: PingFangSC, PingFangSC-Semibold;
+            font-weight: 600;
+            color: #222222;
+        }
+        .category-one-wrapper {
+            position: relative;
+            height: 40px;
+            width: 100%;
+            padding-right: 60px;
+            overflow: hidden;
+            display: flex;
+            flex-wrap: wrap;
+            transition: all .3s;
+            .category-more {
+                position: absolute;
+                height: 30px;
+                line-height: 30px;
+                margin-top: 10px;
+                padding: 0 15px;
+                right: 0;
+                top: 0;
+                font-size: 13px;
+                color: #999999;
+                cursor: pointer;
+            }
+            &.expand {
+                height: auto !important;
+            }
+            .category-one-item {
+                height: 30px;
+                line-height: 30px;
+                padding: 0 25px;
+                margin-top: 10px;
+                border-radius: 4px;
+                font-size: 14px;
+                font-family: PingFangSC, PingFangSC-Regular;
+                font-weight: 400;
+                text-align: center;
+                color: #555555;
+                cursor: pointer;
+                &.active {
+                    line-height: 28px;
+                    font-family: PingFangSC, PingFangSC-Medium;
+                    font-weight: 500;
+                    color: #308eff;
+                    border: 1px solid #308eff;
+                }
+                &:hover {
+                    color: #308eff;
+                }
+            }
+        }
+        .category-two-wrapper {
+            position: relative;
+            margin-top: 16px;
+            .category-two-content {
+                position: relative;
+                width: 830px;
+                height: auto;
+                padding: 5px 20px 10px;
+                // margin-left: 80px;
+                background: #f7f7f7;
+                border-radius: 8px;
+                display: flex;
+                flex-wrap: wrap;
+                .category-two-item {
+                    height: 30px;
+                    line-height: 30px;
+                    margin-top: 5px;
+                    padding: 0 15px;
+                    color: #555555;
+                    border-radius: 4px;
+                    font-size: 14px;
+                    cursor: pointer;
+                    &.active {
+                        color: #308eff;
+                        background: #dcefff;
+                    }
+                    &:hover {
+                        color: #308eff;
+                    }
+                }
+            }
+        }
+    }
+    .consult-content {
+        width: 100%;
+        margin-top: 10px;
+        padding: 12px 20px 36px;
+        background: #ffffff;
+        border-radius: 10px;
+        .consult-list-wrapper {
+            position: relative;
+            width: 100%;
+            display: flex;
+            flex-wrap: wrap;
+            .consult-item {
+                width: 310px;
+                height: 310px;
+                margin-right: 15px;
+                margin-bottom: 15px;
+                background: #ffffff;
+                border-radius: 10px;
+                overflow: hidden;
+                box-shadow: 0px 6px 16px 0px rgba(6,10,28,0.06); 
+                display: flex;
+                flex-direction: column;
+                // cursor: pointer;
+                &:nth-of-type(3n) {
+                    margin-right: 0;
+                }
+                .cover {
+                    width: 100%;
+                    height: 175px;
+                    overflow: hidden;
+                    object-fit: scale-down;
+                }
+                .owner-wrapper {
+                    width: 100%;
+                    height: 22px;
+                    margin-top: 10px;
+                    padding: 0 10px;
+                    display: flex;
+                    align-items: center;
+                    .avatar {
+                        width: 22px;
+                        height: 22px;
+                        overflow: hidden;
+                        border-radius: 50%;
+                    }
+                    .nickname {
+                        line-height: 22px;
+                        margin-left: 6px;
+                        font-size: 14px;
+                        font-family: PingFangSC, PingFangSC-Regular;
+                        font-weight: 400;
+                        color: #666666;
+                    }
+                }
+                .title {
+                    width: 100%;
+                    height: 42px;
+                    margin-top: 12px;
+                    padding: 0 12px;
+                    line-height: 21px;
+                    font-size: 15px;
+                    font-family: PingFangSC, PingFangSC-Medium;
+                    font-weight: 500;
+                    color: #333333;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    display: -webkit-box;
+                    white-space: normal;
+                    -webkit-box-orient: vertical;
+                    -webkit-line-clamp: 2;
+                    &:hover {
+                        color: #308eff;
+                    }
+                }
+                .price-wrapper {
+                    width: 100%;
+                    height: 20px;
+                    margin-top: 12px;
+                    padding: 0 12px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    .price-text {
+                        line-height: 20px;
+                        font-size: 19px;
+                        font-family: DINAlternate, DINAlternate-Bold;
+                        font-weight: 700;
+                        color: #ff6600;
+                    }
+                    .buy-num {
+                        font-size: 14px;
+                        font-family: PingFangSC, PingFangSC-Regular;
+                        font-weight: 400;
+                        color: #999999;
+                    }
+                }
+            }
+        }
+        .pagination-wrapper {
+            width: 100%;
+            height: 30px;
+            margin-top: 25px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+    }
+}
+.mobileMain {
+    width: 100%;
+    margin: 0;
+}
+.consult-wrapper-mobile {
+    position: relative;
+    width: 100%;
+    // min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    .filter-wrapper {
+        position: fixed;
+        width: 100%;
+        height: 45px;
+        background: #ffffff;
+        box-shadow: 0px 6px 16px 0px rgba(6,10,28,0.06);
+        z-index: 11;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        span {
+            height: 18px;
+            line-height: 18px;
+            font-size: 13px;
+            font-family: PingFangSC, PingFangSC-Regular;
+            font-weight: 400;
+            color: #222222;
+        }
+        img {
+            width: 10px;
+            height: 9px;
+        }
+    }
+    .consult-list {
+        width: 100%;
+        height: 100vh;
+        padding-top: 45px;
+        padding-bottom: 34px;
+        overflow-x: hidden;
+        overflow-y: auto;
+        -webkit-overflow-scrolling: touch;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        .consult-list-wrapper {
+            width: 100%;
+            height: auto;
+            overflow: visible;
+            .consult-item {
+                width: calc(100% - 20px);
+                height: 290px;
+                margin: 10px auto 0;
+                background: #ffffff;
+                overflow: hidden;
+                border-radius: 10px;
+                box-shadow: 0px 6px 16px 0px rgba(6,10,28,0.06); 
+                display: flex;
+                flex-direction: column;
+                .cover {
+                    width: 100%;
+                    height: 175px;
+                    overflow: hidden;
+                    object-fit: scale-down;
+                }
+                .owner-wrapper {
+                    width: 100%;
+                    height: 22px;
+                    margin-top: 10px;
+                    padding: 0 10px;
+                    display: flex;
+                    align-items: center;
+                    .avatar {
+                        width: 22px;
+                        height: 22px;
+                        overflow: hidden;
+                        border-radius: 50%;
+                    }
+                    .nickname {
+                        line-height: 22px;
+                        margin-left: 6px;
+                        font-size: 14px;
+                        font-family: PingFangSC, PingFangSC-Regular;
+                        font-weight: 400;
+                        color: #666666;
+                    }
+                }
+                .title {
+                    width: 100%;
+                    height: 20px;
+                    margin-top: 12px;
+                    padding: 0 12px;
+                    line-height: 20px;
+                    font-size: 15px;
+                    font-family: PingFangSC, PingFangSC-Medium;
+                    font-weight: 500;
+                    color: #333333;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                }
+                .price-wrapper {
+                    width: 100%;
+                    height: 20px;
+                    margin-top: 16px;
+                    padding: 0 12px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    .price-text {
+                        line-height: 20px;
+                        font-size: 19px;
+                        font-family: DINAlternate, DINAlternate-Bold;
+                        font-weight: 700;
+                        color: #ff6600;
+                    }
+                    .right-info {
+                        font-size: 14px;
+                        font-family: PingFangSC, PingFangSC-Regular;
+                        font-weight: 400;
+                        color: #999999;
+                    }
+                }
+            }
+        }
+        .consult-list-tips {
+            margin-top: 16px;
+            width: 100%;
+            text-align: center;
+        }
+    }
+    .consult-list__showWxHeader {
+        height: calc(100vh - 64px);
+    }
+}

components/consult/dealSeoList.js

@@ -0,0 +1,165 @@
+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: 10,
+            total: 0,
+            pageCount: 1,
+            loading: false,
+            selectedCateIdOne: '',
+            selectedCateIdTwo: '',
+            noMore: true
+        }
+    }
+  
+    async dealData() {
+        let {
+            name,
+            query: { page = 1 },
+            path,
+            params,
+            fullPath
+        } = this.app.context.route
+        this.pagination.page = Number(page)
+
+        let consultCate = await this._getConsultCate()
+        let consultCateAll = []
+        consultCate.forEach(item => {
+            if (item.children && item.children.length) {
+                item.children.forEach(child => {
+                    consultCateAll.push(child)
+                })
+            }
+        })
+
+        // 目前仅将二级 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 (Number(lastMatch) > 0) {
+            // 遍历分类数组
+            let selectedCateIdOne = ''
+            consultCate.forEach(cateOne => {
+                cateOne.children.forEach(cateTwo => {
+                    if (Number(cateTwo.value) === Number(lastMatch)) {
+                        selectedCateIdOne = cateOne.value
+                    }
+                })
+            })
+            if (Number(selectedCateIdOne) > 0) {
+                this.pagination.selectedCateIdOne = selectedCateIdOne
+                this.pagination.selectedCateIdTwo = lastMatch
+            }
+        }
+
+        // 处理完分类信息，再获取数据
+        let consultList = await this._getConsultList()
+
+        return {
+            consultCate,
+            consultCateAll,
+            consultList, //首次获取的数据
+            mobile: this.app.$deviceType.isMobile(),
+            pagination: this.pagination,
+            head: this.dealThisMeta()
+        }
+    }
+
+    /** 获取技能分类 */
+    async _getConsultCate () {
+        let res = await this.$axios.$post('/api/sale/cateListYes', { type: 3 })
+        let consultCate = []
+
+        if (Number(res.status) === 1) {
+            consultCate = res.data || []
+            consultCate = consultCate.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 consultCate
+    }
+
+    /** 获取技能服务列表 */
+    async _getConsultList () {
+        // 接口参数释义：https://www.yesdev.cn/apidocs-detail-20.html
+        // const data = {
+        //     type: 2,
+        //     page: this.pagination.page,
+        //     page_size: this.pagination.pagesize,
+        //     cate_id: this.pagination.selectedCateIdTwo,
+        //     status: 2,
+        //     owner_type: 1
+        // }
+        const data = {
+            page: this.pagination.page,
+            sale_zx_open: 1,
+            cate_id_two_zx: this.pagination.selectedCateIdTwo || ''
+        }
+
+        let res = await this.$axios.$post('https://dev.test.proginn.com/api/user_list/list', data)
+        let consultList = []
+
+        console.log('i need a result', res)
+        if (Number(res.status) === 1) {
+            consultList = res.data.list || []
+            consultList = consultList.map(item => {
+                return {
+                    uid: item.uid || '',
+                    avatar: item.icon_url || '',
+                    lineStatus: item.lineStatus || '',
+                    company: item.company || '',
+                    title: item.title || '',
+                    saleList: item.sale_list || []
+                }
+            })
+            // consultList.forEach((item) => {
+            //     let imageList = item.image.split(',')
+            //     item.coverImage = imageList[0] || ''
+            //     imageList.splice(0, 1)
+            //     item.imageList = imageList
+            // })
+            this.pagination.total = res.data.total
+            this.pagination.pageCount = res.data.pages
+            // this.pagination.pagesize = 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 consultList
+    }
+  
+    dealThisMeta() {
+        let head = {
+            title: "技能培训列表",
+            keyword: "",
+            description: "",
+            h1: "",
+            canonical: "",
+            metaLocation: ""
+        }
+        return head
+    }
+}
+  

pages/frontend/consult/list.vue

@@ -0,0 +1,422 @@
+<template>
+    <div
+        :class="mobile ? 'mobileMain' : ''"
+        style="margin-bottom: 30px !important;"
+        :style="{marginTop: mainMarginTop}">
+        <div class="consult-wrapper" v-if="!mobile">
+            <div class="consult-top">
+                <div class="tabs">
+                    <a href="/frontend/skill/list" class="tabs-item">技能培训</a>
+                    <div class="tabs-item active">咨询服务</div>
+                </div>
+                <div class="consult-category-wrapper">
+                    <div class="category-title">技术分类</div>
+                    <!-- 一级分类内容 -->
+                    <div
+                        class="category-one-wrapper"
+                        :class="categoryExpanded ? 'expand' : ''">
+                        <!-- 更多 -->
+                        <!-- <div
+                            class="category-more"
+                            @click="handleClickExpandCategory">{{ categoryExpanded ? '收起' : '更多' }}</div> -->
+                        <!-- 全部 -->
+                        <a
+                            href="/frontend/consult/list"
+                            class="category-one-item"
+                            :class="pagination.selectedCateIdOne == '' ? 'active' : ''">全部</a>
+                        <!-- 一级分类 -->
+                        <div
+                            v-for="categoryOne in consultCate"
+                            :key="categoryOne.value"
+                            class="category-one-item"
+                            :class="pagination.selectedCateIdOne == categoryOne.value ? 'active' : ''"
+                            @click="handleClickCategoryOne(categoryOne.value)">{{ categoryOne.label }}</div>
+                    </div>
+                    <!-- 二级分类内容 -->
+                    <div class="category-two-wrapper">
+                        <div
+                            class="category-two-content"
+                            v-for="categoryOne in consultCate"
+                            :key="`cate-two-parnet${categoryOne.value}`"
+                            v-show="pagination.selectedCateIdOne == categoryOne.value">
+                            <a
+                                class="category-two-item"
+                                :class="pagination.selectedCateIdTwo == categoryTwo.value ? 'active' : ''"
+                                :href="`/frontend/consult/list/${categoryTwo.value}`"
+                                v-for="categoryTwo in categoryOne.children"
+                                :key="`cate-two-${categoryTwo.value}`">{{ categoryTwo.label }}</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="consult-content">
+                <div class="consult-list-wrapper">
+                    <div
+                        class="consult-item"
+                        v-for="item in consultList"
+                        :key="item.uid">
+                        每一条咨询服务列表
+                    </div>
+                </div>
+                <div class="pagination-wrapper" v-if="pagination.total > pagination.pagesize">
+                    <el-pagination
+                        background
+                        layout="prev, pager, next"
+                        :current-page="pagination.page"
+                        :total="pagination.total"
+                        :page-size="pagination.pagesize"
+                        @current-change="handlePageChange">
+                    </el-pagination>
+                </div>
+            </div>
+        </div>
+        <div class="consult-wrapper-mobile" v-else>
+            <div class="filter-wrapper" @click="handleClickFilter">
+                <span>筛选</span>
+                <img src="@/assets/img/skill/arrow-down@2x.png" alt="arrow">
+            </div>
+            <div class="consult-list" :class="showWxHeader ? 'consult-list__showWxHeader' : ''">
+                <ul
+                    class="consult-list-wrapper"
+                    v-infinite-scroll="handleLoadMoreConsult"
+                    :infinite-scroll-disabled="pagination.noMore"
+                    :infinite-scroll-immediate="false">
+                    <a
+                        class="consult-item"
+                        v-for="item in consultList"
+                        :key="item.sale_id"
+                        :href="`/frontend/consult/detail/${item.sale_id}`">
+                        <img class="cover" :src="item.coverImage" alt="consultCover,cover">
+                        <div class="owner-wrapper">
+                            <img class="avatar" :src="item.user.icon_url" alt="avatar">
+                            <div class="nickname">{{ item.user.nickname }}</div>
+                        </div>
+                        <div class="title">{{ item.title }}</div>
+                        <div class="price-wrapper">
+                            <div class="price-text">￥{{ item.price }}</div>
+                            <div class="right-info">{{ item.buy_num }}人已学习</div>
+                        </div>
+                    </a>
+                    <p v-if="pagination.loading" class="consult-list-tips">加载中...</p>
+                    <p v-if="pagination.noMore" class="consult-list-tips">没有更多了</p>
+                </ul>
+            </div>
+            <!-- 弹出的分类选择 -->
+            <el-drawer
+                ref="categoryDrawer"
+                class="category-drawer"
+                :visible.sync="showCategoryDrawer"
+                direction="ttb"
+                :withHeader="false">
+                <div class="drawer-category-one">
+                    <div
+                        class="drawer-category-one-item"
+                        :class="currentDrawerCategoryIndex === 0 ? 'active' : ''"
+                        @click="handleClickDrawerCategoryOne(0)">
+                        全部
+                    </div>
+                    <div
+                        class="drawer-category-one-item"
+                        :class="currentDrawerCategoryIndex === index + 1 ? 'active' : ''"
+                        v-for="(category, index) in consultCate"
+                        :key="`drawer-category-one-${category.value}`"
+                        @click="handleClickDrawerCategoryOne(index + 1)">
+                        {{ category.label }}
+                    </div>
+                </div>
+                <div class="drawer-category-two">
+                    <!-- 全部二级分类 -->
+                    <div
+                        class="drawer-category-two-wrapper"
+                        v-show="currentDrawerCategoryIndex === 0">
+                        <div
+                            class="drawer-category-two-item"
+                            :class="currentDrawerCategoryId == category.value ? 'active' : ''"
+                            v-for="category in consultCateAll"
+                            :key="`drawer-category-all-${category.value}`"
+                            @click="handleClickDrawerCategoryTwo(category.value)">
+                            {{ category.label }}
+                        </div>
+                    </div>
+                    <!-- 接口返回的二级分类 -->
+                    <div
+                        class="drawer-category-two-wrapper"
+                        v-for="(category, index) in consultCate"
+                        :key="`drawer-category-two-wrapper-${category.value}`"
+                        v-show="currentDrawerCategoryIndex === index + 1">
+                        <div
+                            class="drawer-category-two-item"
+                            :class="currentDrawerCategoryId == categoryChild.value ? 'active' : ''"
+                            v-for="categoryChild in category.children"
+                            :key="`drawer-category-two-${categoryChild.value}`"
+                            @click="handleClickDrawerCategoryTwo(categoryChild.value)">
+                            {{ categoryChild.label }}
+                        </div>
+                    </div>
+                </div>
+            </el-drawer>
+        </div>
+    </div>
+</template>
+
+<script>
+import {mapState} from "vuex"
+import DealSeoList from "@/components/consult/dealSeoList"
+
+export default {
+    name: 'SeoConsultList',
+    data () {
+        return {
+            baseUrl: '',
+            // firstLoad: true,
+            isWeixinApp: true,
+            categoryExpanded: true, // 更多按钮不要，默认为展开状态
+            showCategoryDrawer: false,
+            currentDrawerCategoryId: 0,
+            currentDrawerCategoryIndex: 0
+        }
+    },
+    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 () {
+            return !this.deviceType.app && !this.isWeixinApp &&
+                (this.deviceType.android || this.deviceType.ios)
+        },
+        mainMarginTop () {
+            if (this.mobile && this.showWxHeader) {
+                return '64px !important'
+            } else if (this.mobile) {
+                return '0px !important'
+            } else {
+                return '20px !important'
+            }
+        }
+    },
+    async asyncData ({...params}) {
+        let dealDataObj = new DealSeoList(params)
+        let ans = await dealDataObj.dealData()
+
+        return {
+            ...ans
+        }
+    },
+    mounted () {
+        this.baseUrl = this.$store.state.domainConfig.siteUrl
+        this.isWeixinApp = navigator.userAgent.indexOf("miniProgram") > -1
+    },
+    methods: {
+        /** 分页获取技能列表数据 */
+        _getConsultList () {
+            const self = this
+            const data = {
+                type: 1,
+                page: this.pagination.page,
+                page_size: this.pagination.pagesize,
+                cate_id: this.pagination.selectedCateIdTwo,
+                status: 2,
+                owner_type: 1
+            }
+
+            this.pagination.loading = true
+            this.pagination.noMore = false
+
+            this.$axios.$post('/api/sale/saleList', data).then(res => {
+                if (Number(res.status) === 1) {
+                    let consultList = res.data.list || []
+                    consultList.forEach((item) => {
+                        let imageList = item.image.split(',')
+                        item.coverImage = imageList[0] || ''
+                        imageList.splice(0, 1)
+                        item.imageList = imageList
+                    })
+
+                    if (self.mobile) {
+                        self.consultList = self.consultList.concat(consultList)
+                    } else {
+                        self.consultList = consultList
+                    }
+
+                    self.pagination.total = res.data.total
+                    self.pagination.pagesize = res.data.page_size || 9
+                    if (self.pagination.page * self.pagination.pagesize >= self.pagination.total) {
+                        console.log('noMore true', self.pagination)
+                        self.pagination.noMore = true
+                    } else {
+                        console.log('noMore false', self.pagination)
+                        self.pagination.noMore = false
+                    }
+                }
+            }).then(() => {
+                self.pagination.loading = false
+            })
+        },
+        /** 点击展开、收起 */
+        handleClickExpandCategory () {
+            this.categoryExpanded = !this.categoryExpanded
+        },
+        /** 点击一级分类时 */
+        handleClickCategoryOne (id) {
+            if (this.pagination.selectedCateIdOne !== id) {
+                this.pagination.selectedCateIdOne = id
+            }
+        },
+        /** 分页页码改变时 */
+        handlePageChange (val) {
+            window.location.href = `${window.location.origin}${window.location.pathname}?page=${val}`
+        },
+        /** mobile 加载更多 */
+        handleLoadMoreConsult () {
+            if (this.pagination.loading) {
+                return
+            }
+
+            this.pagination.page++
+            this._getConsultList()
+        },
+        /** 点击筛选时 */
+        handleClickFilter () {
+            this.showCategoryDrawer = true
+        },
+        /**
+         * 点击 mobile 分类 drawer 一级分类
+         */
+        handleClickDrawerCategoryOne (id) {
+            if (id !== this.currentDrawerCategoryIndex) {
+                this.currentDrawerCategoryIndex = id
+            }
+        },
+        /**
+         * 点击 mobile 分类 drawer 二级分类
+         */
+        handleClickDrawerCategoryTwo (id) {
+            if (this.currentDrawerCategoryId === id) {
+                this.pagination.selectedCateIdTwo = ''
+            } else {
+                this.pagination.selectedCateIdTwo = id
+            }
+            this.currentDrawerCategoryId = id
+            this.showCategoryDrawer = false
+            this.pagination.page = 1
+            this.consultList = []
+            window.scroll({ top: 0 })
+
+            this._getConsultList()
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/css/consult/list.scss";
+</style>
+<style lang="scss">
+.category-drawer {
+    .el-drawer {
+        height: 100vh !important;
+        .el-drawer__body {
+            position: relative;
+            width: 100%;
+            display: flex;
+        }
+    }
+    .drawer-category-one {
+        width: 100px;
+        height: 100vh;
+        padding-bottom: 34px;
+        background: #f4f5f9;
+        overflow-x: hidden;
+        overflow-y: auto;
+        -webkit-overflow-scrolling: touch;
+        &::-webkit-scrollbar {
+            display: none;
+        }
+        .drawer-category-one-item {
+            width: 100%;
+            height: 50px;
+            line-height: 50px;
+            text-align: center;
+            font-size: 15px;
+            font-family: PingFangSC, PingFangSC-Medium;
+            font-weight: 500;
+            color: #222222;
+            background: inherit;
+            &.active {
+                color: #308eff;
+                background: #ffffff;
+            }
+        }
+    }
+    .drawer-category-two {
+        width: calc(100% - 100px);
+        height: 100vh;
+        padding: 4px 10px 34px;
+        background: #ffffff;
+        overflow-x: hidden;
+        overflow-y: auto;
+        -webkit-overflow-scrolling: touch;
+        &::-webkit-scrollbar {
+            display: none;
+        }
+        .drawer-category-two-wrapper {
+            width: 100%;
+            display: flex;
+            flex-wrap: wrap;
+            .drawer-category-two-item {
+                margin: 8px 8px 0 0;
+                padding: 0 12px;
+                height: 35px;
+                line-height: 35px;
+                background: rgba(244,245,249,.8);
+                border-radius: 4px;
+                // opacity: 0.8;
+                font-size: 13px;
+                font-family: PingFangSC, PingFangSC-Regular;
+                font-weight: 400;
+                color: #222222;
+                &.active {
+                    height: 33px;
+                    line-height: 33px;
+                    border: 1px solid #308eff;
+                    background: #ffffff;
+                    font-size: 12px;
+                    font-family: PingFangSC, PingFangSC-Medium;
+                    font-weight: 500;
+                    color: #308eff;
+                }
+            }
+        }
+    }
+}
+.wx-header {
+    position: fixed;
+    z-index: 11;
+}
+</style>

plugins/seoRouter.js

@@ -48,6 +48,10 @@ const extendRoutes = (routes, resolve) => {
       name: 'SeoSkillList',
       path: '/frontend/skill/list/*',
       component: resolve(__dirname, '../pages/frontend/skill/list.vue')
+    },{
+      name: 'SeoConsultList',
+      path: '/frontend/consult/list/*',
+      component: resolve(__dirname, '../pages/frontend/consult/list.vue')
     }]
   )