proginn-frontend/pages/frontend/skill/list.vue

<template>
    <div
        :class="mobile ? 'mobileMain' : ''"
        style="margin-bottom: 30px !important;"
        :style="{marginTop: mainMarginTop}">
        <div class="skill-wrapper" v-if="!mobile">
            <div class="skill-top">
                <div class="tabs">
                    <div class="tabs-item active">技能培训</div>
                    <a href="/frontend/consult/list" class="tabs-item">咨询服务</a>
                </div>
                <div class="skill-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/skill/list"
                            class="category-one-item"
                            :class="pagination.selectedCateIdOne == '' ? 'active' : ''">全部</a>
                        <!-- 一级分类 -->
                        <div
                            v-for="categoryOne in skillCate"
                            :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 skillCate"
                            :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/skill/list/${categoryTwo.value}`"
                                v-for="categoryTwo in categoryOne.children"
                                :key="`cate-two-${categoryTwo.value}`">{{ categoryTwo.label }}</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="skill-content">
                <div class="skill-list-wrapper">
                    <div
                        class="skill-item"
                        v-for="item in skillList"
                        :key="item.sale_id">
                        <a :href="`/frontend/skill/detail/${item.sale_id}`">
                            <img class="cover" :src="item.coverImage" alt="skillCover,cover">
                        </a>
                        <a class="owner-wrapper" :href="`/wo/${item.user.uid}/skill`">
                            <img class="avatar" :src="item.user.icon_url" alt="avatar">
                            <div class="nickname">{{ item.user.nickname }}</div>
                        </a>
                        <a class="title" :href="`/frontend/skill/detail/${item.sale_id}`">{{ item.title }}</a>
                        <div class="price-wrapper">
                            <div class="price-text">￥{{ item.price }}</div>
                            <div class="buy-num">已购买次数({{ item.buy_num }})</div>
                        </div>
                    </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="skill-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="skill-list" :class="showWxHeader ? 'skill-list__showWxHeader' : ''">
                <ul
                    class="skill-list-wrapper"
                    v-infinite-scroll="handleLoadMoreSkill"
                    :infinite-scroll-disabled="pagination.noMore"
                    :infinite-scroll-immediate="false">
                    <a
                        class="skill-item"
                        v-for="item in skillList"
                        :key="item.sale_id"
                        :href="`/frontend/skill/detail/${item.sale_id}`">
                        <img class="cover" :src="item.coverImage" alt="skillCover,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="skill-list-tips">加载中...</p>
                    <p v-if="pagination.noMore" class="skill-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 skillCate"
                        :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 skillCateAll"
                            :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 skillCate"
                        :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/skill/dealSeoList"

export default {
    name: 'SeoSkillList',
    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: {
        /** 分页获取技能列表数据 */
        _getSkillList () {
            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 skillList = res.data.list || []
                    skillList.forEach((item) => {
                        let imageList = item.image.split(',')
                        item.coverImage = imageList[0] || ''
                        imageList.splice(0, 1)
                        item.imageList = imageList
                    })

                    if (self.mobile) {
                        self.skillList = self.skillList.concat(skillList)
                    } else {
                        self.skillList = skillList
                    }

                    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 加载更多 */
        handleLoadMoreSkill () {
            if (this.pagination.loading) {
                return
            }

            this.pagination.page++
            this._getSkillList()
        },
        /** 点击筛选时 */
        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.skillList = []
            window.scroll({ top: 0 })

            this._getSkillList()
        }
    }
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/skill/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>