web-资源商城列表；

assets/css/work_down/index.scss

@@ -0,0 +1,283 @@
+.works-wrapper {
+    width: 1000px;
+    .works-category {
+        width: 1000px;
+        min-height: 120px;
+        padding-bottom: 20px;
+        background: #ffffff;
+        border-radius: 8px;
+        .works-category-one {
+            width: 100%;
+            height: 50px;
+            padding: 0 50px;
+            border-bottom: 1px solid #e9ecee;
+            display: flex;
+            align-items: center;
+            .works-category-one-item {
+                position: relative;
+                margin-right: 48px;
+                height: 22px;
+                line-height: 22px;
+                font-size: 16px;
+                color: #666666;
+                cursor: pointer;
+                &.active {
+                    font-family: PingFangSC, PingFangSC-Semibold;
+                    font-weight: 600;
+                    color: #222222;
+                    &:after {
+                        content: " ";
+                        position: absolute;
+                        width: 22px;
+                        height: 3px;
+                        background: #308eff;
+                        border-radius: 2px;
+                        left: calc(50% - 11px);
+                        bottom: -11px;
+                    }
+                }
+            }
+        }
+        .works-category-two {
+            position: relative;
+            width: 100%;
+            padding: 0 20px;
+            margin-top: 7px;
+            .works-expand-arrow {
+                position: absolute;
+                width: 20px;
+                height: 20px;
+                right: 20px;
+                top: 16px;
+                cursor: pointer;
+                transition: all .3s;
+                &.active {
+                    transform: rotate(180deg);
+                }
+            }
+            .works-category-two-wrapper {
+                position: relative;
+                width: 900px;
+                height: 42px;
+                display: flex;
+                align-items: center;
+                flex-wrap: wrap;
+                overflow: hidden;
+                transition: all .3s;
+                &.expand {
+                    height: auto;
+                }
+                .works-category-two-item {
+                    // width: 80px;
+                    height: 32px;
+                    line-height: 32px;
+                    margin: 10px 10px 0 0;
+                    width: auto;
+                    padding: 0 25px;
+                    text-align: center;
+                    font-size: 13px;
+                    font-family: PingFangSC, PingFangSC-Regular;
+                    color: #555555;
+                    cursor: pointer;
+                    &.active {
+                        line-height: 30px;
+                        border: 1px solid #308eff;
+                        border-radius: 6px;
+                        font-family: PingFangSC, PingFangSC-Medium;
+                        font-weight: 500;
+                        color: #308eff;
+                    }
+                }
+            }
+        }
+    }
+    .pagination-wrapper {
+        width: 1000px;
+        height: 65px;
+        margin-top: 10px;
+        background: #ffffff;
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    .works-list {
+        position: relative;
+        min-height: 368px;
+        .works-item {
+            width: 1000px;
+            height: 174px;
+            margin-top: 10px;
+            padding: 27px 20px;
+            background: #ffffff;
+            border-radius: 8px;
+            display: flex;
+            .works-detail-wrapper {
+                position: relative;
+                width: 806px;
+                height: 120px;
+                display: flex;
+                &:after {
+                    position: absolute;
+                    content: " ";
+                    right: 0;
+                    top: 0;
+                    width: 1px;
+                    height: 120px;
+                    background: rgba(0,0,0,0.06);
+                }
+                .works-image {
+                    width: 120px;
+                    height: 120px;
+                    margin-right: 20px;
+                    border-radius: 8px;
+                }
+                .works-detail {
+                    position: relative;
+                    width: 630px;
+                    height: 120px;
+                    display: flex;
+                    flex-direction: column;
+                    .works-name {
+                        width: 100%;
+                        line-height: 25px;
+                        font-size: 18px;
+                        font-family: PingFangSC, PingFangSC-Semibold;
+                        font-weight: 600;
+                        color: #222222;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                        &:hover {
+                            color: #308eff;
+                        }
+                    }
+                    .works-description {
+                        width: 100%;
+                        margin-top: 10px;
+                        line-height: 20px;
+                        font-size: 14px;
+                        font-family: PingFangSC, PingFangSC-Regular;
+                        color: #999999;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        display: -webkit-box;
+                        white-space: normal;
+                        -webkit-box-orient: vertical;
+                        -webkit-line-clamp: 2;
+                    }
+                    .more-info-wrapper {
+                        position: absolute;
+                        bottom: 0;
+                        left: 0;
+                        width: 100%;
+                        height: 20px;
+                        display: flex;
+                        justify-content: space-between;
+                        .price-info {
+                            display: flex;
+                            align-items: center;
+                            height: 100%;
+                            .works-price {
+                                font-size: 18px;
+                                font-family: DINAlternate, DINAlternate-Bold;
+                                font-weight: 700;
+                                color: #ff6600;
+                            }
+                            .download-count {
+                                margin-left: 13px;
+                                font-size: 13px;
+                                font-family: PingFangSC, PingFangSC-Regular;
+                                font-weight: 400;
+                                color: #999999;
+                            }
+                        }
+                        .more-info {
+                            display: flex;
+                            align-items: center;
+                            height: 100%;
+                            .plus-img {
+                                width: 16px;
+                                height: 16px;
+                                opacity: 0.7;
+                            }
+                            .plus-count {
+                                position: relative;
+                                height: 20px;
+                                line-height: 20px;
+                                padding-right: 16px;
+                                margin-left: 3px;
+                                font-size: 14px;
+                                font-family: PingFangSC, PingFangSC-Regular;
+                                font-weight: 400;
+                                text-align: left;
+                                color: #999999;
+                                &:after {
+                                    position: absolute;
+                                    content: " ";
+                                    top: 2px;
+                                    right: 0;
+                                    width: 1px;
+                                    height: 16px;
+                                    background: rgba(0,0,0,0.06);
+                                }
+                            }
+                            .time {
+                                margin-left: 16px;
+                                line-height: 20px;
+                                font-size: 12px;
+                                font-family: PingFangSC, PingFangSC-Regular;
+                                font-weight: 400;
+                                color: #dadada;
+                            }
+                        }
+                    }
+                }
+            }
+            .works-user-wrapper {
+                position: relative;
+                margin-left: 20px;
+                height: 100%;
+                width: 126px;
+                padding: 10px 0;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                .user-avatar {
+                    width: 52px;
+                    height: 52px;
+                    opacity: 1;
+                    border-radius: 50%;
+                }
+                .username {
+                    width: 100%;
+                    height: 20px;
+                    line-height: 20px;
+                    margin-top: 3px;
+                    font-size: 14px;
+                    font-family: PingFangSC, PingFangSC-Semibold;
+                    font-weight: 600;
+                    text-align: center;
+                    color: #222222;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                }
+                .company {
+                    width: 100%;
+                    height: 17px;
+                    line-height: 17px;
+                    margin-top: 3px;
+                    font-size: 12px;
+                    font-family: PingFangSC, PingFangSC-Regular;
+                    font-weight: 400;
+                    text-align: center;
+                    color: #999999;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                }
+            }
+        }
+    }
+}

pages/work_down/index.vue

@@ -0,0 +1,249 @@
+<template>
+    <div>
+        <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-loading="loadingWorksList">
+                <div
+                    class="works-item"
+                    v-for="works in worksList"
+                    :key="`works-item-${works.wid}`">
+                    <div class="works-detail-wrapper">
+                        <img v-if="works.image" class="works-image" :src="works.image" alt="works-image">
+                        <div class="works-detail" :style="{'width': works.image ? '630px' : '770px'}">
+                            <nuxt-link class="works-name" :to="`/w/${works.wid}`">{{ works.name }}</nuxt-link>
+                            <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>
+                    <nuxt-link class="works-user-wrapper" :to="`/wo/${works.uid}`">
+                        <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>
+                    </nuxt-link>
+                </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 class="works-wrapper-mobile" v-else>
+            作品资源列表 mobile
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data () {
+        return {
+            categoryAll: [],
+            categoryList: [],
+            worksList: [],
+            currentCategoryIndex: 0,
+            categoryExpanded: false,
+            firstLoad: true,
+            loadingWorksList: false,
+            pagination: {
+                page: 1,
+                keywords: '',
+                cate_id_two: [],
+                // 非接口参数
+                pagesize: 20,
+                total: 0
+            }
+        }
+    },
+    async asyncData ({...params}) {
+        return {
+            mobile: params.app.$deviceType.isMobile()
+        }
+    },
+    mounted () {
+        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
+            }
+
+            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) {
+                        self.worksList = res.data.list || []
+                        self.pagination.pagesize = res.data.pagesize || 20
+                        self.pagination.total = res.data.total || 0
+                    }
+                    resolve()
+                }).catch(err => {
+                    reject(err)
+                }).then(() => {
+                    self.loadingWorksList = false
+                })
+            })
+
+            return promise
+        },
+        /**
+         * 点击一级分类
+         */
+        handleClickCategoryOne (id) {
+            if (id !== this.currentCategoryIndex) {
+                this.currentCategoryIndex = id
+            }
+        },
+        /**
+         * 点击二级分类
+         */
+        handleClickCategoryTwo (id) {
+            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()
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/css/work_down/index.scss";
+</style>