proginn-frontend/pages/work_down/index.vue

<template>
    <div :class="mobile ? 'mobileMain' : ''" :style="{marginTop: mainMarginTop}">
        <div class="works-wrapper" v-if="!mobile" v-loading="firstLoad">
            <div class="works-category">
                <div class="works-category-one">
                    <div
                        class="works-category-one-item"
                        :class="currentCategoryIndex === 0 ? 'active' : ''"
                        @click="handleClickCategoryOne(0)">
                        全部
                    </div>
                    <div
                        class="works-category-one-item"
                        :class="currentCategoryIndex === index + 1 ? 'active' : ''"
                        v-for="(category, index) in categoryList"
                        :key="`category-one-${category.category_id}`"
                        @click="handleClickCategoryOne(index + 1)">
                        {{ category.name }}
                    </div>
                </div>
                <div class="works-category-two">
                    <!-- 展开按钮 -->
                    <img
                        src="@/assets/img/works/expand-arrow@2x.png"
                        alt="expand"
                        class="works-expand-arrow"
                        :class="categoryExpanded ? 'active' : ''"
                        @click="handleClickExpandCategory">
                    <!-- 全部二级分类 -->
                    <div
                        class="works-category-two-wrapper"
                        :class="categoryExpanded ? 'expand' : ''"
                        v-show="currentCategoryIndex === 0">
                        <div
                            class="works-category-two-item"
                            :class="pagination.cate_id_two.indexOf(category.category_id) > -1 ? 'active' : ''"
                            v-for="category in categoryAll"
                            :key="`category-all-${category.category_id}`"
                            @click="handleClickCategoryTwo(category.category_id)">
                            {{ category.name }}
                        </div>
                    </div>
                    <!-- 接口返回的二级分类 -->
                    <div
                        class="works-category-two-wrapper"
                        :class="categoryExpanded ? 'expand' : ''"
                        v-for="(category, index) in categoryList"
                        :key="`category-two-wrapper-${category.category_id}`"
                        v-show="currentCategoryIndex === index + 1">
                        <div
                            class="works-category-two-item"
                            :class="pagination.cate_id_two.indexOf(categoryChild.category_id) > -1 ? 'active' : ''"
                            v-for="categoryChild in category.child"
                            :key="`category-two-${categoryChild.category_id}`"
                            @click="handleClickCategoryTwo(categoryChild.category_id)">
                            {{ categoryChild.name }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="works-list" v-if="worksList.length" v-loading="loadingWorksList">
                <div
                    class="works-item"
                    v-for="works in worksList"
                    :key="`works-item-${works.wid}`">
                    <div class="works-detail-wrapper">
                        <a :href="`${baseUrl}/w/${works.wid}`">
                            <img v-if="works.image" class="works-image" :src="works.image" alt="works-image">
                        </a>
                        <div class="works-detail" :style="{'width': works.image ? '630px' : '770px'}">
                            <a class="works-name" :href="`${baseUrl}/w/${works.wid}`">{{ works.name }}</a>
                            <div class="works-description">{{ works.description }}</div>
                            <div class="more-info-wrapper">
                                <div class="price-info">
                                    <span class="works-price">￥{{ works.price }}</span>
                                    <span class="download-count">{{ works.down_num }}人已下载</span>
                                </div>
                                <div class="more-info">
                                    <img class="plus-img" src="@/assets/img/works/plus-icon@2x.png" alt="">
                                    <span class="plus-count">{{ works.plus_co }}</span>
                                    <span class="time">{{ works.update_time }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <a class="works-user-wrapper" :href="`${baseUrl}/wo/${works.uid}/works`">
                        <img class="user-avatar" :src="works.icon_url" alt="avatar">
                        <div class="username">{{ works.nickname }}</div>
                        <div class="company">{{ works.company }} {{ works.kill_title || '' }}</div>
                    </a>
                </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 class="works-wrapper-mobile" v-else>
            <div class="works-category">
                <div class="works-category-one">
                    <div class="category-scroller">
                        <div
                            class="works-category-one-item"
                            :class="currentCategoryIndex === 0 ? 'active' : ''"
                            @click="handleClickCategoryOne(0)">
                            全部
                        </div>
                        <div
                            class="works-category-one-item"
                            :class="currentCategoryIndex === index + 1 ? 'active' : ''"
                            v-for="(category, index) in categoryList"
                            :key="`category-one-${category.category_id}`"
                            @click="handleClickCategoryOne(index + 1)">
                            {{ category.name }}
                        </div>
                    </div>
                    <!-- filter -->
                    <div class="filter-bg"></div>
                    <div class="filter-wrapper" @click="handleShowCategoryDrawer">
                        <img src="@/assets/img/works/filter-icon@2x.png" alt="filter">
                    </div>
                </div>
                <div class="works-category-two">
                    <!-- 全部二级分类 -->
                    <div
                        class="works-category-two-wrapper"
                        :class="categoryExpanded ? 'expand' : ''"
                        v-show="currentCategoryIndex === 0">
                        <div
                            class="works-category-two-item"
                            :class="pagination.cate_id_two.indexOf(category.category_id) > -1 ? 'active' : ''"
                            v-for="category in categoryAll"
                            :key="`category-all-${category.category_id}`"
                            @click="handleClickCategoryTwo(category.category_id)">
                            {{ category.name }}
                        </div>
                    </div>
                    <!-- 接口返回的二级分类 -->
                    <div
                        class="works-category-two-wrapper"
                        :class="categoryExpanded ? 'expand' : ''"
                        v-for="(category, index) in categoryList"
                        :key="`category-two-wrapper-${category.category_id}`"
                        v-show="currentCategoryIndex === index + 1">
                        <div
                            class="works-category-two-item"
                            :class="pagination.cate_id_two.indexOf(categoryChild.category_id) > -1 ? 'active' : ''"
                            v-for="categoryChild in category.child"
                            :key="`category-two-${categoryChild.category_id}`"
                            @click="handleClickCategoryTwo(categoryChild.category_id)">
                            {{ categoryChild.name }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="works-list" :class="showWxHeader ? 'works-list__showWxHeader' : ''">
                <ul
                    class="works-list-wrapper"
                    v-infinite-scroll="handleLoadMoreWorks"
                    :infinite-scroll-disabled="pagination.noMore"
                    :infinite-scroll-immediate="false">
                    <div
                        class="works-item"
                        v-for="works in worksList"
                        :key="`works-item-${works.wid}`"
                        @click="handleClickWorkItem(works.wid)">
                        <img v-if="works.image" class="works-image" :src="works.image" alt="works-image">
                        <div class="works-detail" :class="works.image ? '' : 'without-img'">
                            <div class="works-name">{{ works.name }}</div>
                            <div class="works-description">{{ works.description }}</div>
                            <div class="price-info">
                                <span class="works-price">￥{{ works.price }}</span>
                                <span class="download-count">{{ works.down_num }}人已下载</span>
                            </div>
                        </div>
                    </div>
                    <!-- 空数据 -->
                    <div class="result-empty-wrapper" v-if="!worksList.length && !pagination.loading">
                        <img src="@/assets/img/common/empty@2x.png" alt="empty">
                        <span>暂无搜索内容</span>
                    </div>
                    <p v-if="pagination.loading" class="works-list-tips">加载中...</p>
                    <p v-if="worksList.length && pagination.noMore && !firstLoad" class="works-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 categoryList"
                        :key="`drawer-category-one-${category.category_id}`"
                        @click="handleClickDrawerCategoryOne(index + 1)">
                        {{ category.name }}
                    </div>
                </div>
                <div class="drawer-category-two">
                    <!-- 全部二级分类 -->
                    <div
                        class="drawer-category-two-wrapper"
                        v-show="currentDrawerCategoryIndex === 0">
                        <div
                            class="drawer-category-two-item"
                            :class="pagination.cate_id_two.indexOf(category.category_id) > -1 ? 'active' : ''"
                            v-for="category in categoryAll"
                            :key="`drawer-category-all-${category.category_id}`"
                            @click="handleClickDrawerCategoryTwo(category.category_id)">
                            {{ category.name }}
                        </div>
                    </div>
                    <!-- 接口返回的二级分类 -->
                    <div
                        class="drawer-category-two-wrapper"
                        v-for="(category, index) in categoryList"
                        :key="`drawer-category-two-wrapper-${category.category_id}`"
                        v-show="currentDrawerCategoryIndex === index + 1">
                        <div
                            class="drawer-category-two-item"
                            :class="pagination.cate_id_two.indexOf(categoryChild.category_id) > -1 ? 'active' : ''"
                            v-for="categoryChild in category.child"
                            :key="`drawer-category-two-${categoryChild.category_id}`"
                            @click="handleClickDrawerCategoryTwo(categoryChild.category_id)">
                            {{ categoryChild.name }}
                        </div>
                    </div>
                </div>
            </el-drawer>
        </div>
    </div>
</template>

<script>
import {mapState} from "vuex";

export default {
    data () {
        return {
            baseUrl: '',
            categoryAll: [],
            categoryList: [],
            worksList: [],
            currentCategoryIndex: 0,
            currentDrawerCategoryIndex: 0,
            categoryExpanded: false,
            firstLoad: true,
            loadingWorksList: false,
            showCategoryDrawer: false,
            pagination: {
                page: 1,
                keywords: '',
                cate_id_two: [],
                // 非接口参数
                pagesize: 20,
                total: 0,
                loading: true,
                noMore: true
            },
            isWeixinApp: true
        }
    },
    computed: {
        ...mapState(["deviceType"]),
        showWxHeader () {
            return !this.deviceType.app && !this.isWeixinApp &&
                (this.deviceType.android || this.deviceType.ios)
        },
        mainMarginTop () {
            if (this.mobile && this.showWxHeader) {
                return '64px'
            } else if (this.mobile) {
                return '0px'
            } else {
                return '20px'
            }
        }
    },
    async asyncData ({...params}) {
        return {
            mobile: params.app.$deviceType.isMobile()
        }
    },
    created() {
        this.baseUrl = this.$store.state.domainConfig.siteUrl;
    },
    mounted () {
        this.isWeixinApp = navigator.userAgent.indexOf("miniProgram") > -1
        const self = this
        const getWorksCategoryPromise = this._getWorksCategory()
        const getWorksListPromise =  this._getWorksList()

        Promise.all([getWorksCategoryPromise, getWorksListPromise]).then(([a, b]) => {
            console.log(a, b)
            self.firstLoad = false
        })
    },
    methods: {
        /**
         * 获取作品资源分类
         */
        _getWorksCategory () {
            const self = this
            const promise = new Promise((resolve, reject) => {
                self.$axios.$post('/api/user_works/cate').then(res => {
                    if (res.status === 1) {
                        let categoryAll = []
                        self.categoryList = res.data || []
                        self.categoryList.forEach(category => {
                            if (category.child && category.child.length) {
                                category.child.forEach(categoryChild => {
                                    categoryAll.push(categoryChild)
                                })
                            }
                        })
                        self.categoryAll = categoryAll
                    }
                    resolve()
                }).catch(err => {
                    reject(err)
                })
            })

            return promise
        },
        /**
         * 获取作品列表
         */
        _getWorksList () {
            const self = this

            if (!this.firstLoad) {
                this.loadingWorksList = true
                this.pagination.loading = true
                this.pagination.noMore = false
            }

            const data = {
                page: this.pagination.page,
                keywords: this.pagination.keywords,
                cate_id_two: this.pagination.cate_id_two.join(',')
            }

            const promise = new Promise((resolve, reject) => {
                self.$axios.$post('/api/user_works/workFileList', data).then(res => {
                    if (res.status === 1) {
                        const worksList = res.data.list || []
                        self.pagination.pagesize = res.data.pagesize || 20
                        self.pagination.total = res.data.total || 0
                        if (self.mobile) {
                            self.worksList = self.worksList.concat(worksList)
                        } else {
                            self.worksList = worksList
                        }

                        if (self.pagination.page * self.pagination.pagesize >= self.pagination.total) {
                            self.pagination.noMore = true
                        } else {
                            self.pagination.noMore = false
                        }
                    }
                    resolve()
                }).catch(err => {
                    reject(err)
                }).then(() => {
                    self.loadingWorksList = false
                    self.pagination.loading = false
                })
            })

            return promise
        },
        /**
         * 点击一级分类
         */
        handleClickCategoryOne (id) {
            if (id !== this.currentCategoryIndex) {
                this.currentCategoryIndex = id
            }
        },
        /**
         * 点击二级分类
         */
        handleClickCategoryTwo (id) {
            if (this.mobile) {
                // 移动端单选
                const index = this.pagination.cate_id_two.indexOf(id)
                if (index > -1) {
                    this.pagination.cate_id_two = []
                } else {
                    this.pagination.cate_id_two = [id]
                }
                this.pagination.page = 1
                this.worksList = []
                window.scroll({ top: 0 })

                this._getWorksList()
            } else {
                // web 端多选
                const index = this.pagination.cate_id_two.indexOf(id)
                if (index > -1) {
                    // 已选择，移除
                    this.pagination.cate_id_two.splice(index, 1)
                } else {
                    // 未选择，添加
                    this.pagination.cate_id_two.push(id)
                }
                this.pagination.page = 1

                this._getWorksList()
            }
        },
        /**
         * 展开二级分类
         */
        handleClickExpandCategory () {
            this.categoryExpanded = !this.categoryExpanded
        },
        /**
         * 分页页码改变时
         */
        handlePageChange (val) {
            this.pagination.page = val

            this._getWorksList()
        },
        /**
         * mobile 加载更多
         */
        handleLoadMoreWorks () {
            if (this.pagination.loading) {
                return
            }

            this.pagination.page++

            this._getWorksList()
        },
        /**
         * 弹出分类选择 drawer
         */
        handleShowCategoryDrawer () {
            this.showCategoryDrawer = true
        },
        /**
         * 点击 mobile 分类 drawer 一级分类
         */
        handleClickDrawerCategoryOne (id) {
            if (id !== this.currentDrawerCategoryIndex) {
                this.currentDrawerCategoryIndex = id
            }
        },
        /**
         * 点击 mobile 分类 drawer 二级分类
         */
        handleClickDrawerCategoryTwo (id) {
            const index = this.pagination.cate_id_two.indexOf(id)
            if (index > -1) {
                this.pagination.cate_id_two = []
            } else {
                this.pagination.cate_id_two = [id]
            }
            this.showCategoryDrawer = false
            this.pagination.page = 1
            this.worksList = []
            window.scroll({ top: 0 })

            this._getWorksList()
        },
        /**
         * 点击 mobile 每一项列表
         */
        handleClickWorkItem (wid) {
            if (this.deviceType.ios || this.deviceType.android) {
                let jumpUrl = `${this.baseUrl}/w/${wid}`
                location.href = `proginn://webview?url=${jumpUrl}`
            } else {
                location.href = `${this.baseUrl}/w/${wid}`
            }
        }
    }
}
</script>

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