开发推荐页

pages/index/index.js

@@ -1,11 +1,11 @@
 const app = getApp()
 import {
-    getHotrecommendList,
+    getCategoryList,
+    getResourceList
 } from "~/api/works"
 import {
     getBannerList
 } from '~/api/global'
-import reachBottom from '~/mixins/reachBottom'
 import event from '~/mixins/event'
 import share from '~/mixins/share'
 import {
@@ -15,15 +15,13 @@ import {
     store
 } from '~/store/index'
 Page({
-    behaviors: [reachBottom, share,event],
+    behaviors: [share, event],
     data: {
         navBarHeight: app.globalData.navBarHeight,
-        background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
-        currentType: '3',
-        // 控制一级分类是否固定
-        isFixed: false,
         desktopTips: app.globalData.desktopTips,
-        bannerList: []
+        bannerList: [],
+        categoryList: [],
+        listOptions: {},
     },
     onLoad(options) {
         this.getLocUserInfo()
@@ -57,11 +55,10 @@ Page({
             })
         }
     },
-    onUnload() {
-        this.storeBindings.destroyStoreBindings()
-    },
-    onReachBottom() {
-        this.loadMore()
+    requestAgain() {
+        this.getBannerList()
+        this.getResource()
+        this.getCategoryList()
     },
     async getLocUserInfo() {
         this.storeBindings = createStoreBindings(this, {
@@ -72,43 +69,21 @@ Page({
         })
         this.storeBindings.updateStoreBindings()
     },
-    async loadMore() {
-        if (!this.data.userInfo.grade) {
-            return
-        }
-        if (this.data.currentType == '3') {
-            this.localGetData(getHotrecommendList, {
-                grade: this.data.userInfo.grade
-            })
-        }
-    },
-    jumpSearch() {
-        wx.navigateTo({
-            url: '/pages/childClassify/index?type=search',
+    async getCategoryList() {
+        let grade = this.data.userInfo.grade
+        let categoryList = await getCategoryList({
+            grade
         })
-    },
-    /**
-     * 监听页面滚动事件
-     */
-    onPageScroll(e) {
-        if (e.scrollTop >= 103 && !this.data.isFixed) {
-            this.setData({
-                isFixed: true
-            })
-        } else if (e.scrollTop < 103 && this.data.isFixed) {
-            this.setData({
-                isFixed: false
-            })
-        }
-    },
-
-    closeDesktop() {
         this.setData({
-            desktopTips: false
+            categoryList
         })
-        wx.setStorage({
-            key: "preDesktopTime",
-            data: new Date()
+    },
+    async getResource() {
+        let data = await getResourceList({
+            grade: this.data.userInfo.grade
+        })
+        this.setData({
+            listOptions: data,
         })
     },
     async getBannerList() {
@@ -119,30 +94,31 @@ Page({
             bannerList,
         })
     },
-    requestAgain() {
-        this.resetData()
-        this.getBannerList()
-        if (this.data.currentType != 3) {
-            this.selectComponent('#activityList').getActivities()
-        }
-    },
-    selectType({
-        target
+    jumpChildClassify({
+        currentTarget
     }) {
-        if (target.dataset.type) {
-            if (this.selectComponent('#worksList')) {
-                this.selectComponent('#worksList').resetAudio()
-            }
-            this.setData({
-                currentType: target.dataset.type,
-            })
-            if (target.dataset.type != 3) {
-                this.selectComponent('#activityList').getActivities()
-            }
-            if (target.dataset.type == '3') {
-                this.resetData()
-            }
-        }
+        let firstInfo = currentTarget.dataset.item
+        wx.navigateTo({
+            url: `/pages/childClassify/index?type=class&title=${firstInfo.title}&id=${firstInfo.id}`,
+        })
+    },
+    showTips() {
+        wx.showModal({
+            title: '新栏目更新中',
+            content: '敬请期待….',
+            showCancel: false,
+            confirmColor: '#333333',
+            success(res) {}
+        })
+    },
+    closeDesktop() {
+        this.setData({
+            desktopTips: false
+        })
+        wx.setStorage({
+            key: "preDesktopTime",
+            data: new Date()
+        })
     },
     onUnload() {
         this.storeBindings.destroyStoreBindings()

pages/index/index.json

@@ -2,8 +2,6 @@
     "usingComponents": {
         "navigationBar": "/components/navigationBar/index",
         "banner": "/components/banner/index",
-        "worksList": "/components/worksList/index",
-        "activityList": "/components/activityList/index",
         "authority": "/components/authority/index"
     },
     "navigationStyle": "custom",

pages/index/index.less

@@ -1,70 +1,45 @@
 .recommend {
-  position: relative;
-  padding-bottom: calc(140rpx + env(safe-area-inset-bottom)) !important;
-
-  .desktopTips {
-    position: fixed;
-    z-index: 999;
-    right: 0rpx;
-
-    .triangle {
-      position: absolute;
-      right: 124rpx;
-      top: -26rpx;
-      border: 20rpx solid #F9F9FF;
-      border-top-color: transparent;
-      border-left-color: transparent;
-      border-right-color: transparent;
-    }
-
-    .tipsImg {
-      width: 530rpx;
-      height: 176rpx;
+    position: relative;
+    padding-top: 30rpx;
+    padding-bottom: calc(140rpx + env(safe-area-inset-bottom)) !important;
+
+    .firstClassify {
+        margin: 60rpx 0rpx;
+        width: 100%;
+        box-sizing: border-box;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: space-between;
+        text-align: center;
+        z-index: 2;
+
+        .icon {
+            width: 25%;
+            height: 195rpx;
+        }
     }
-  }
 
-  .scrollBox {
-    width: 100%;
 
-  
-  }
 
-  .selectType {
-    padding: 30rpx 15rpx 30rpx 26rpx;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    .type {
-      padding: 14rpx 0rpx;
-      width: 200rpx;
-      box-sizing: border-box;
-      text-align: center;
-      border: 1rpx solid #9f9f9fa4;
-      border-radius: 50rpx;
-      color: #1A1A1A;
-      font-size: 28rpx;
-    }
-
-    .currentType {
-      color: white;
-      box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
-      background-color: #00C657;
-      border-color: #00C657;
-      font-weight: bold;
-    }
+    .desktopTips {
+        position: fixed;
+        z-index: 999;
+        right: 0rpx;
 
-    .search {
-      font-size: 0rpx;
-      padding: 14rpx 14rpx;
-      text-align: center;
-      border: 1rpx solid #9f9f9fa4;
-      border-radius: 50rpx;
+        .triangle {
+            position: absolute;
+            right: 124rpx;
+            top: -26rpx;
+            border: 20rpx solid #F9F9FF;
+            border-top-color: transparent;
+            border-left-color: transparent;
+            border-right-color: transparent;
+        }
 
-      .searchImg {
-        width: 26rpx;
-        height: 26rpx;
-      }
+        .tipsImg {
+            width: 530rpx;
+            height: 176rpx;
+        }
     }
-  }
 }

pages/index/index.wxml

@@ -1,30 +1,24 @@
 <navigationBar bind:reload='requestAgain'></navigationBar>
 <view class="recommend">
     <banner bannerList="{{bannerList}}" userInfo="{{userInfo}}" />
+    <!-- 一级分类 -->
+    <view class="firstClassify">
+        <image wx:for="{{categoryList}}" wx:key="id" data-item='{{item}}' bindtap="jumpChildClassify" class="icon"
+            src="{{item.icon}}" />
+        <image bindtap="showTips" class="icon" src="/static/future.png" />
+    </view>
+    <!-- 资源 -->
+    <view class="resourceBox">
+        <authority wx:if="{{listOptions.sortList[0]=='recommendReadList'}}"
+            worksList="{{listOptions.recommendReadList}}" />
+        <activityList classify='3' dataList='{{listOptions.activityList}}' />
+        <authority wx:if="{{listOptions.sortList[1]=='recommendReadList'}}"
+            worksList="{{listOptions.recommendReadList}}" />
+    </view>
     <!-- 加桌提示 -->
     <view class=" desktopTips" wx:if="{{desktopTips}}" style="top:{{navBarHeight+3}}px" bindtap="closeDesktop">
         <view class="triangle"></view>
         <image src="http://reader-wx.ai160.com/images/reader/v3/desktop-android.png" class="tipsImg" />
     </view>
-    <!-- 滚动定位 -->
-    <view class="scrollBox {{isFixed?'isFixed':''}}" style="top:{{navBarHeight}}px;">
-        <!-- 展示类型选择 -->
-        <view class="selectType {{isFixed?'isFixed2':''}}" bindtap="selectType">
-            <view class="type {{currentType=='2'?'currentType':''}}" data-type='2'>排行榜</view>
-            <view class="type {{currentType=='3'?'currentType':''}}" data-type='3'>作品展播</view>
-            <view class="type {{currentType=='4'?'currentType':''}}" data-type='4'>官方活动</view>
-            <view class="search" bindtap="jumpSearch">
-                <image src="/static/search.png" class="searchImg" />
-            </view>
-        </view>
-    </view>
-    <!-- 当一级分类固定定位时占位用的元素 -->
-    <view class="{{isFixed?'brace':''}}" />
-    <!-- 优秀作品展播及官方推荐列表组件 -->
-    <worksList id="worksList" wx:if="{{currentType=='3'}}" worksList="{{list}}" videoType="public" tabBarPadding='true'
-        autoPlay='{{true}}' />
-    <view hidden="{{currentType=='3'}}">
-        <activityList id="activityList" classify='{{currentType}}' />
-    </view>
 </view>
 <canvas id='share' type="2d"> </canvas>

pages/index/index.wxss

@@ -1,7 +1,23 @@
 .recommend {
   position: relative;
+  padding-top: 30rpx;
   padding-bottom: calc(140rpx + env(safe-area-inset-bottom)) !important;
 }
+.recommend .firstClassify {
+  margin: 60rpx 0rpx;
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  text-align: center;
+  z-index: 2;
+}
+.recommend .firstClassify .icon {
+  width: 25%;
+  height: 195rpx;
+}
 .recommend .desktopTips {
   position: fixed;
   z-index: 999;
@@ -20,40 +36,3 @@
   width: 530rpx;
   height: 176rpx;
 }
-.recommend .scrollBox {
-  width: 100%;
-}
-.recommend .selectType {
-  padding: 30rpx 15rpx 30rpx 26rpx;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.recommend .selectType .type {
-  padding: 14rpx 0rpx;
-  width: 200rpx;
-  box-sizing: border-box;
-  text-align: center;
-  border: 1rpx solid #9f9f9fa4;
-  border-radius: 50rpx;
-  color: #1A1A1A;
-  font-size: 28rpx;
-}
-.recommend .selectType .currentType {
-  color: white;
-  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
-  background-color: #00C657;
-  border-color: #00C657;
-  font-weight: bold;
-}
-.recommend .selectType .search {
-  font-size: 0rpx;
-  padding: 14rpx 14rpx;
-  text-align: center;
-  border: 1rpx solid #9f9f9fa4;
-  border-radius: 50rpx;
-}
-.recommend .selectType .search .searchImg {
-  width: 26rpx;
-  height: 26rpx;
-}

pages/resource/index.js

@@ -1,5 +1,4 @@
 const app = getApp()
-
 import {
     createStoreBindings
 } from 'mobx-miniprogram-bindings'