H5-资源商城列表；

assets/css/work_down/index.scss

@@ -165,6 +165,7 @@
                         white-space: normal;
                         -webkit-box-orient: vertical;
                         -webkit-line-clamp: 2;
+                        word-break: break-all;
                     }
                     .more-info-wrapper {
                         position: absolute;
@@ -288,7 +289,7 @@
 .works-wrapper-mobile {
     position: relative;
     width: 100%;
-    min-height: 100vh;
+    // min-height: 100vh;
     display: flex;
     flex-direction: column;
     .works-category {
@@ -337,6 +338,34 @@
                     }
                 }
             }
+            .filter-wrapper {
+                position: absolute;
+                top: 0;
+                right: 0;
+                width: 64px;
+                height: 45px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                z-index: 12;
+                background: #ffffff;
+                img {
+                    width: 24px;
+                    height: 24px;
+                }
+            }
+            .filter-bg {
+                position: absolute;
+                width: 11px;
+                height: 29px;
+                right: 59px;
+                top: 8px;
+                opacity: 0.1;
+                background: #000000;
+                border-radius: 6px;
+                filter: blur(4px);
+                z-index: 11;
+            }
         }
         .works-category-two {
             position: relative;
@@ -377,9 +406,9 @@
     }
     .works-list {
         width: 100%;
-        height: 100%;
+        height: 100vh;
         padding-top: 87px;
-        padding-bottom: 64px;
+        padding-bottom: 34px;
         overflow-x: hidden;
         overflow-y: auto;
         -webkit-overflow-scrolling: touch;
@@ -389,6 +418,7 @@
         .works-list-wrapper {
             width: 100%;
             height: auto;
+            overflow: visible;
             .works-item {
                 width: calc(100% - 20px);
                 height: 110px;
@@ -440,6 +470,7 @@
                         white-space: normal;
                         -webkit-box-orient: vertical;
                         -webkit-line-clamp: 2;
+                        word-break: break-all;
                     }
                     .price-info {
                         position: absolute;
@@ -470,4 +501,7 @@
             }
         }
     }
+    .works-list__showWxHeader {
+        height: calc(100vh - 64px);
+    }
 }

pages/work_down/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="mobile ? 'mobileMain' : ''">
+    <div :class="mobile ? 'mobileMain' : ''" :style="{marginTop: showWxHeader ? '64px' : '0'}">
         <div class="works-wrapper" v-if="!mobile" v-loading="firstLoad">
             <div class="works-category">
                 <div class="works-category-one">
@@ -116,6 +116,11 @@
                         @click="handleClickCategoryOne(index + 1)">
                         {{ category.name }}
                     </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">
                     <!-- 全部二级分类 -->
@@ -150,11 +155,12 @@
                     </div>
                 </div>
             </div>
-            <div class="works-list">
+            <div class="works-list" :class="showWxHeader ? 'works-list__showWxHeader' : ''">
                 <ul
                     class="works-list-wrapper"
                     v-infinite-scroll="handleLoadMoreWorks"
-                    infinite-scroll-disabled="disabled">
+                    :infinite-scroll-disabled="pagination.noMore"
+                    :infinite-scroll-immediate="false">
                     <a
                         class="works-item"
                         v-for="works in worksList"
@@ -172,13 +178,69 @@
                     </a>
                 </ul>
                 <p v-if="pagination.loading" style="margin-top: 16px">加载中...</p>
-                <p v-if="pagination.noMore" style="margin-top: 16px">没有更多了</p>
+                <p v-if="pagination.noMore && !firstLoad" style="margin-top: 16px">没有更多了</p>
             </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 {
@@ -187,9 +249,11 @@ export default {
             categoryList: [],
             worksList: [],
             currentCategoryIndex: 0,
+            currentDrawerCategoryIndex: 0,
             categoryExpanded: false,
             firstLoad: true,
             loadingWorksList: false,
+            showCategoryDrawer: false,
             pagination: {
                 page: 1,
                 keywords: '',
@@ -198,8 +262,16 @@ export default {
                 pagesize: 20,
                 total: 0,
                 loading: true,
-                noMore: false
-            }
+                noMore: true
+            },
+            isWeixinApp: true
+        }
+    },
+    computed: {
+        ...mapState(["deviceType"]),
+        showWxHeader () {
+            return !this.deviceType.app && !this.isWeixinApp &&
+                (this.deviceType.android || this.deviceType.ios)
         }
     },
     async asyncData ({...params}) {
@@ -211,6 +283,7 @@ export default {
         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()
@@ -256,6 +329,8 @@ export default {
 
             if (!this.firstLoad) {
                 this.loadingWorksList = true
+                this.pagination.loading = true
+                this.pagination.noMore = false
             }
 
             const data = {
@@ -267,15 +342,27 @@ export default {
             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 || []
+                        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
                 })
             })
 
@@ -295,7 +382,15 @@ export default {
         handleClickCategoryTwo (id) {
             if (this.mobile) {
                 // 移动端单选
-                this.pagination.cate_id_two = [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.pagination.page = 1
+                this.worksList = []
+                window.scroll({ top: 0 })
 
                 this._getWorksList()
             } else {
@@ -331,7 +426,44 @@ export default {
          * 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()
         }
     }
 }
@@ -340,3 +472,86 @@ export default {
 <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>