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

<template>
    <div
        :class="mobile ? 'mobileMain' : ''"
        :style="{marginTop: mainMarginTop, marginBottom: mobile ? '0px' : '30px !important'}">
        <div class="learn-wrapper" v-if="!mobile">
            <div class="learn-top">
                <div class="tabs">
                    <a href="/skill/" class="tabs-item">技能服务</a>
                    <a href="/consult/" class="tabs-item">咨询服务</a>
                    <div class="tabs-item active">客栈学院</div>
                    <!-- <el-button class="add-btn" @click="handleClickAdd">发布课程</el-button> -->
                </div>
                <div class="learn-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="/learn/"
                            class="category-one-item"
                            :class="pagination.selectedCateIdOne == '' ? 'active' : ''">全部</a>
                        <!-- 一级分类 -->
                        <a
                            v-for="categoryOne in learnCate"
                            :key="categoryOne.value"
                            class="category-one-item"
                            :class="pagination.selectedCateIdOne == categoryOne.value ? 'active' : ''"
                            :href="`/learn/${categoryOne.value}/`">{{ categoryOne.label }}</a>
                    </div>
                    <!-- 二级分类内容 -->
                    <div class="category-two-wrapper">
                        <div
                            class="category-two-content"
                            v-for="categoryOne in learnCate"
                            :key="`cate-two-parnet${categoryOne.value}`"
                            v-show="pagination.selectedCateIdOne == categoryOne.value">
                            <a
                                class="category-two-item"
                                :class="pagination.selectedCateIdTwo == categoryTwo.value ? 'active' : ''"
                                :href="`/learn/${categoryTwo.value}/`"
                                v-for="categoryTwo in categoryOne.children"
                                :key="`cate-two-${categoryTwo.value}`">{{ categoryTwo.label }}</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="learn-content">
                <div class="learn-list-wrapper" v-if="learnList.length">
                    <div
                        class="learn-item"
                        v-for="item in learnList"
                        :key="item.sale_id">
                        <a :href="`/s/${item.sale_id}`">
                            <img class="cover" :src="item.coverImage" alt="learnCover,cover">
                        </a>
                        <a class="owner-wrapper" :href="`/wo/${item.user.uid}/learn`">
                            <img class="avatar" :src="item.user.icon_url" alt="avatar">
                            <div class="nickname">{{ item.user.nickname }}</div>
                        </a>
                        <a class="title" :href="`/s/${item.sale_id}`">{{ item.title }}</a>
                        <div class="price-wrapper">
                            <div class="price-text">￥{{ item.price }}</div>
                            <div  v-if="item.buy_num>0" class="buy-num">{{ item.buy_num }}人已学习</div>
                        </div>
                    </div>
                </div>
                <div class="result-empty-wrapper" v-else>
                    <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
                        layout="prev, pager, next"
                        :current-page="pagination.page"
                        :total="pagination.total"
                        :page-size="pagination.pagesize"
                        @current-change="handlePageChange">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {mapState} from "vuex"
import DealSeoList from "@/components/learn/dealSeoList"
import qs from "qs"

export default {
    name: 'SeoLearnList',
    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: {
        /** 分页获取技能列表数据 */
        _getLearnList () {
            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,
                root_type: this.root_type
            }

            this.pagination.loading = true
            this.pagination.noMore = false

            this.$axios.$post('/api/sale/saleList', data).then(res => {
                if (Number(res.status) === 1) {
                    let learnList = res.data.list || []
                    learnList.forEach((item) => {
                        let imageList = item.image.split(',')
                        item.coverImage = imageList[0] || ''
                        imageList.splice(0, 1)
                        item.imageList = imageList
                    })

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

                    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 (id === 0) {
                // 点击全部时，移除筛选分类
                this.pagination.selectedCateIdOne = id
                this.pagination.selectedCateIdTwo = ''
                this.currentDrawerCategoryId = ''
                this.pagination.page = 1
                this.learnList = []
                window.scroll(0, 0)

                this._getLearnList()
                return
            }
            if (this.pagination.selectedCateIdOne !== id) {
                this.pagination.selectedCateIdOne = id
            }
        },
        /** 点击二级分类时：移动端 */
        handleClickCategoryTwo (id) {
            if (this.pagination.selectedCateIdTwo === id) {
                this.pagination.selectedCateIdTwo = ''
                this.currentDrawerCategoryId = ''
            } else {
                this.pagination.selectedCateIdTwo = id
                this.currentDrawerCategoryId = id
            }
            this.pagination.page = 1
            this.learnList = []
            window.scroll(0, 0)

            this._getLearnList()
        },
        /** 分页页码改变时 */
        handlePageChange (val) {
            let query = {
                page: val
            }
            if (this.root_type && Number(this.root_type) > 0) {
                query.root_type = this.root_type
            }
            window.location.href = `${window.location.origin}${window.location.pathname}?${qs.stringify(query)}`
        },
        /** mobile 加载更多 */
        handleLoadMoreSkill () {
            if (this.pagination.loading) {
                return
            }

            this.pagination.page++
            this._getLearnList()
        },
        /** 点击筛选时 */
        handleShowCategoryDrawer () {
            this.showCategoryDrawer = true
        },
        /**
         * 点击 mobile 分类 drawer 一级分类
         */
        handleClickDrawerCategoryOne (id) {
            if (id === 0) {
                this.showCategoryDrawer = false
                return
            }
            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.learnList = []
            window.scroll(0, 0)

            this._getLearnList()
        },
        /**
         * 点击 mobile 的一项技能时
         */
        handleClickSkillItem (saleId) {
            if (this.deviceType.android || this.deviceType.ios) {
                // 端跳转
                let jumpUrl = `${this.baseUrl}/s/${saleId}`
                location.href = `proginn://webview?url=${jumpUrl}`
            } else {
                // web 跳转
                location.href = `/s/${saleId}`
            }
        },
        /**
         * 点击成为讲师
         */
        handleClickAdd () {
            location.href = '/workbench/skill/index'
        }
    }
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/learn/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-custom-list {
    position: fixed !important;
    z-index: 11 !important;
}
</style>