开发作品列表页面

pages/index copy/index.js

@@ -0,0 +1,150 @@
+const app = getApp()
+import {
+    getHotrecommendList,
+} from "~/api/works"
+import {
+    getBannerList
+} from '~/api/global'
+import reachBottom from '~/mixins/reachBottom'
+import event from '~/mixins/event'
+import share from '~/mixins/share'
+import {
+    createStoreBindings
+} from 'mobx-miniprogram-bindings'
+import {
+    store
+} from '~/store/index'
+Page({
+    behaviors: [reachBottom, 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: []
+    },
+    onLoad(options) {
+        this.getLocUserInfo()
+        if (Object.keys(this.data.userInfo).length > 0) {
+            this.requestAgain()
+        } else {
+            getApp().callBack = (res) => {
+                this.getLocUserInfo()
+                this.requestAgain()
+            }
+        }
+        let {
+            desktopTips
+        } = app.globalData
+        if (desktopTips) {
+            setTimeout(() => {
+                this.setData({
+                    desktopTips: false
+                })
+                wx.setStorage({
+                    key: "preDesktopTime",
+                    data: new Date()
+                })
+            }, 6000)
+        }
+    },
+    onShow() {
+        if (typeof this.getTabBar === 'function') {
+            this.getTabBar().setData({
+                selected: 2
+            })
+        }
+    },
+    onUnload() {
+        this.storeBindings.destroyStoreBindings()
+    },
+    onReachBottom() {
+        this.loadMore()
+    },
+    async getLocUserInfo() {
+        this.storeBindings = createStoreBindings(this, {
+            store,
+            fields: {
+                userInfo: 'userInfo'
+            },
+        })
+        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',
+        })
+    },
+    /**
+     * 监听页面滚动事件
+     */
+    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
+        })
+        wx.setStorage({
+            key: "preDesktopTime",
+            data: new Date()
+        })
+    },
+    async getBannerList() {
+        let bannerList = await getBannerList({
+            grade: this.data.userInfo.grade,
+        })
+        this.setData({
+            bannerList,
+        })
+    },
+    requestAgain() {
+        this.resetData()
+        this.getBannerList()
+        if (this.data.currentType != 3) {
+            this.selectComponent('#activityList').getActivities()
+        }
+    },
+    selectType({
+        target
+    }) {
+        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()
+            }
+        }
+    },
+    onUnload() {
+        this.storeBindings.destroyStoreBindings()
+    },
+})

pages/index copy/index.json

@@ -0,0 +1,11 @@
+{
+    "usingComponents": {
+        "navigationBar": "/components/navigationBar/index",
+        "banner": "/components/banner/index",
+        "worksList": "/components/worksList/index",
+        "activityList": "/components/activityList/index",
+        "authority": "/components/authority/index"
+    },
+    "navigationStyle": "custom",
+    "enablePullDownRefresh": false
+}

pages/index copy/index.less

@@ -0,0 +1,70 @@
+.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;
+    }
+  }
+
+  .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;
+    }
+
+    .search {
+      font-size: 0rpx;
+      padding: 14rpx 14rpx;
+      text-align: center;
+      border: 1rpx solid #9f9f9fa4;
+      border-radius: 50rpx;
+
+      .searchImg {
+        width: 26rpx;
+        height: 26rpx;
+      }
+    }
+  }
+}

pages/index copy/index.wxml

@@ -0,0 +1,30 @@
+<navigationBar bind:reload='requestAgain'></navigationBar>
+<view class="recommend">
+    <banner bannerList="{{bannerList}}" userInfo="{{userInfo}}" />
+    <!-- 加桌提示 -->
+    <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='{{false}}' />
+    <view hidden="{{currentType=='3'}}">
+        <activityList id="activityList" classify='{{currentType}}' />
+    </view>
+</view>
+<canvas id='share' type="2d"> </canvas>

pages/index copy/index.wxss

@@ -0,0 +1,59 @@
+.recommend {
+  position: relative;
+  padding-bottom: calc(140rpx + env(safe-area-inset-bottom)) !important;
+}
+.recommend .desktopTips {
+  position: fixed;
+  z-index: 999;
+  right: 0rpx;
+}
+.recommend .desktopTips .triangle {
+  position: absolute;
+  right: 124rpx;
+  top: -26rpx;
+  border: 20rpx solid #F9F9FF;
+  border-top-color: transparent;
+  border-left-color: transparent;
+  border-right-color: transparent;
+}
+.recommend .desktopTips .tipsImg {
+  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/index/index copy.js

@@ -0,0 +1,150 @@
+const app = getApp()
+import {
+    getHotrecommendList,
+} from "~/api/works"
+import {
+    getBannerList
+} from '~/api/global'
+import reachBottom from '~/mixins/reachBottom'
+import event from '~/mixins/event'
+import share from '~/mixins/share'
+import {
+    createStoreBindings
+} from 'mobx-miniprogram-bindings'
+import {
+    store
+} from '~/store/index'
+Page({
+    behaviors: [reachBottom, 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: []
+    },
+    onLoad(options) {
+        this.getLocUserInfo()
+        if (Object.keys(this.data.userInfo).length > 0) {
+            this.requestAgain()
+        } else {
+            getApp().callBack = (res) => {
+                this.getLocUserInfo()
+                this.requestAgain()
+            }
+        }
+        let {
+            desktopTips
+        } = app.globalData
+        if (desktopTips) {
+            setTimeout(() => {
+                this.setData({
+                    desktopTips: false
+                })
+                wx.setStorage({
+                    key: "preDesktopTime",
+                    data: new Date()
+                })
+            }, 6000)
+        }
+    },
+    onShow() {
+        if (typeof this.getTabBar === 'function') {
+            this.getTabBar().setData({
+                selected: 2
+            })
+        }
+    },
+    onUnload() {
+        this.storeBindings.destroyStoreBindings()
+    },
+    onReachBottom() {
+        this.loadMore()
+    },
+    async getLocUserInfo() {
+        this.storeBindings = createStoreBindings(this, {
+            store,
+            fields: {
+                userInfo: 'userInfo'
+            },
+        })
+        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',
+        })
+    },
+    /**
+     * 监听页面滚动事件
+     */
+    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
+        })
+        wx.setStorage({
+            key: "preDesktopTime",
+            data: new Date()
+        })
+    },
+    async getBannerList() {
+        let bannerList = await getBannerList({
+            grade: this.data.userInfo.grade,
+        })
+        this.setData({
+            bannerList,
+        })
+    },
+    requestAgain() {
+        this.resetData()
+        this.getBannerList()
+        if (this.data.currentType != 3) {
+            this.selectComponent('#activityList').getActivities()
+        }
+    },
+    selectType({
+        target
+    }) {
+        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()
+            }
+        }
+    },
+    onUnload() {
+        this.storeBindings.destroyStoreBindings()
+    },
+})

pages/index/index copy.less

@@ -0,0 +1,70 @@
+.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;
+    }
+  }
+
+  .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;
+    }
+
+    .search {
+      font-size: 0rpx;
+      padding: 14rpx 14rpx;
+      text-align: center;
+      border: 1rpx solid #9f9f9fa4;
+      border-radius: 50rpx;
+
+      .searchImg {
+        width: 26rpx;
+        height: 26rpx;
+      }
+    }
+  }
+}

pages/index/index copy.wxml

@@ -0,0 +1,30 @@
+<navigationBar bind:reload='requestAgain'></navigationBar>
+<view class="recommend">
+    <banner bannerList="{{bannerList}}" userInfo="{{userInfo}}" />
+    <!-- 加桌提示 -->
+    <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='{{false}}' />
+    <view hidden="{{currentType=='3'}}">
+        <activityList id="activityList" classify='{{currentType}}' />
+    </view>
+</view>
+<canvas id='share' type="2d"> </canvas>

pages/userWorks/index.js

@@ -1,58 +1,59 @@
 import {
-  getSelfRead
+    getSelfRead
 } from '~/api/user'
 import {
-  getreadInfo
+    getreadInfo
 } from '~/api/video'
 import share from '~/mixins/share'
 import event from '~/mixins/event'
 import reachBottom from '~/mixins/reachBottom'
 Page({
-  behaviors: [reachBottom, share,event],
-  data: {
-    firstWork: ''
-  },
-  onLoad(options) {
-    if (options.id) {
-      this.getreadInfo(options.id)
-      wx.nextTick(() => {
-        this.selectComponent('#worksList').openTypeComment({
-          target: {
-            dataset: {
-              type: options.type,
-              onceId: options.onceId,
-              id: options.id
+    behaviors: [reachBottom, share, event],
+    data: {
+        firstWork: ''
+    },
+    onLoad(options) {
+        console.log(options);
+        if (options.id) {
+            this.getreadInfo(options.id)
+            wx.nextTick(() => {
+                this.selectComponent('#worksList').openTypeComment({
+                    target: {
+                        dataset: {
+                            type: options.type,
+                            onceId: options.onceId,
+                            id: options.id
+                        }
+                    }
+                })
+            })
+        } else {
+            this.loadMore()
+        }
+    },
+    loadMore() {
+        this.getData(this.getSelfRead)
+    },
+    getSelfRead(data) {
+        return new Promise(async (reslove) => {
+            let res = await getSelfRead(data)
+            if (this.data.firstWork) {
+                res.list = res.list.filter(item => {
+                    return item.userRead.id != this.data.firstWork.userRead.id
+                })
+                res.list.unshift(this.data.firstWork)
             }
-          }
+            reslove(res)
         })
-      })
-    } else {
-      this.loadMore()
-    }
-  },
-  loadMore() {
-    this.getData(this.getSelfRead)
-  },
-  getSelfRead(data) {
-    return new Promise(async (reslove) => {
-      let res = await getSelfRead(data)
-      if (this.data.firstWork) {
-        res.list = res.list.filter(item => {
-          return item.userRead.id != this.data.firstWork.userRead.id
+    },
+    async getreadInfo(videoId) {
+        let firstWork = await getreadInfo(videoId)
+        this.setData({
+            firstWork
         })
-        res.list.unshift(this.data.firstWork)
-      }
-      reslove(res)
-    })
-  },
-  async getreadInfo(videoId) {
-    let firstWork = await getreadInfo(videoId)
-    this.setData({
-      firstWork
-    })
-    this.loadMore()
-  },
-  onReachBottom() {
-    this.loadMore()
-  },
+        this.loadMore()
+    },
+    onReachBottom() {
+        this.loadMore()
+    },
 })

pages/works/index.js

@@ -51,6 +51,14 @@ Page({
         })
         this.storeBindings.updateStoreBindings()
     },
+    jump({
+        currentTarget
+    }) {
+        let type = currentTarget.dataset.type
+        wx.navigateTo({
+            url: `/pages/userWorks/index?type=${type}`,
+        })
+    },
     onReachBottom() {
         this.loadMore()
     },

pages/works/index.less

@@ -1,7 +1,40 @@
 .worksBox {
+    padding-top: 30rpx;
     padding-bottom: calc(140rpx + env(safe-area-inset-bottom)) !important;
 
-    .worksList {    
+    .itemize {
+        margin-bottom: 90rpx;
+        padding:0 60rpx;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .box {
+            text-align: center;
+            font-size: 28rpx;
+
+            .img {
+                margin-bottom: 10rpx;
+                width: 156rpx;
+                height: 111rpx;
+            }
+        }
+    }
+
+    .logo {
+        margin: 26rpx 30rpx;
+        display: flex;
+        align-items: center;
+        font-size: 36rpx;
+
+        .icon {
+            width: 50rpx;
+            height: 50rpx;
+            margin-right: 12rpx;
+        }
+    }
+
+    .worksList {
         margin: 0 auto;
         width: 700rpx;
     }

pages/works/index.wxml

@@ -1,6 +1,23 @@
 <navigationBar bind:reload='requestAgain'></navigationBar>
 <view class="worksBox">
+    <view class="itemize">
+        <view class="box" bindtap="jump" data-type='my'>
+            <image src="/static/works-1.png" class="img" />
+            <view>我的作品</view>
+        </view>
+        <view class="box" bindtap="jump" data-type='follow'>
+            <image src="/static/works-2.png" class="img" />
+            <view>关注作品</view>
+        </view>
+        <view class="box" bindtap="jump" data-type='collect'>
+            <image src="/static/works-3.png" class="img" />
+            <view>收藏作品</view>
+        </view>
+    </view>
     <!-- 优秀作品展播-->
+    <view class="logo">
+        <image src="/static/works.png" class="icon" />优秀作品展播
+    </view>
     <worksList id="worksList" worksList="{{list}}" videoType="public" tabBarPadding='true' autoPlay='{{false}}' />
 </view>
 <canvas id='share' type="2d"> </canvas>

pages/works/index.wxss

@@ -1,6 +1,34 @@
 .worksBox {
+  padding-top: 30rpx;
   padding-bottom: calc(140rpx + env(safe-area-inset-bottom)) !important;
 }
+.worksBox .itemize {
+  margin-bottom: 90rpx;
+  padding: 0 60rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.worksBox .itemize .box {
+  text-align: center;
+  font-size: 28rpx;
+}
+.worksBox .itemize .box .img {
+  margin-bottom: 10rpx;
+  width: 156rpx;
+  height: 111rpx;
+}
+.worksBox .logo {
+  margin: 26rpx 30rpx;
+  display: flex;
+  align-items: center;
+  font-size: 36rpx;
+}
+.worksBox .logo .icon {
+  width: 50rpx;
+  height: 50rpx;
+  margin-right: 12rpx;
+}
 .worksBox .worksList {
   margin: 0 auto;
   width: 700rpx;