我的收藏页面

api/user.js

@@ -1,22 +1,24 @@
 import {
-  request
+    request
 } from "../utils/request";
 
 module.exports = {
-  // 用户登录
-  userLogin: data => request('/user/openId', 'get', data),
-  // 获取用户session_key和open_id
-  getUserSO: data => request('/user/openId', 'get', data),
-  //获取用户信息
-  getUserInfo: data => request('/v3/user/my', 'get', data),
-  // 设置用户信息
-  setUserInfo: (data, method = 'post') => request('/user', method, data),
-  //获取是否vip及过期时间
-  getVipInfo: data => request('/auth', 'get', data),
-  //获取自己朗读的作品
-  getSelfRead: data => request('/userRead/my', 'get', data),
-  //获取其他用户朗读的作品
-  getUserRead: data => request('/userRead', 'get', data),
-  // 获取用户关注列表
-  getFansList: data => request('/fans', 'get', data),
+    // 用户登录
+    userLogin: data => request('/user/openId', 'get', data),
+    // 获取用户session_key和open_id
+    getUserSO: data => request('/user/openId', 'get', data),
+    //获取用户信息
+    getUserInfo: data => request('/v3/user/my', 'get', data),
+    // 设置用户信息
+    setUserInfo: (data, method = 'post') => request('/user', method, data),
+    //获取是否vip及过期时间
+    getVipInfo: data => request('/auth', 'get', data),
+    //获取自己朗读的作品
+    getSelfRead: data => request('/userRead/my', 'get', data),
+    //获取其他用户朗读的作品
+    getUserRead: data => request('/userRead', 'get', data),
+    // 获取用户关注列表
+    getFansList: data => request('/fans', 'get', data),
+    // 获取收藏列表
+    getFavoritesList: data => request('/favorites', 'get', data),
 }

app.json

@@ -1,33 +1,34 @@
 {
-  "pages": [
-    "pages/follow/index",
-    "pages/my/index",
-    "pages/userWorks/index",
-    "pages/logs/logs",
-    "pages/index/index"
-  ],
-  "tabBar": {
-    "list": [{
-      "pagePath": "pages/my/index",
-      "text": "我的"
-    }, {
-      "pagePath": "pages/index/index",
-      "text": "推荐"
-    }, {
-      "pagePath": "pages/logs/logs",
-      "text": "作品"
-    }]
-  },
-  "window": {
-    "backgroundTextStyle": "light",
-    "navigationBarBackgroundColor": "#ededed",
-    "navigationBarTitleText": "小学语文朗读配音",
-    "navigationBarTextStyle": "black",
-    "onReachBottomDistance": 50,
-    "enablePullDownRefresh": true
-  },
-  "resolveAlias": {
-    "~/*": "/*"
-  },
-  "sitemapLocation": "sitemap.json"
+    "pages": [
+        "pages/my/index",
+        "pages/collection/index",
+        "pages/follow/index",
+        "pages/userWorks/index",
+        "pages/logs/logs",
+        "pages/index/index"
+    ],
+    "tabBar": {
+        "list": [{
+            "pagePath": "pages/my/index",
+            "text": "我的"
+        }, {
+            "pagePath": "pages/index/index",
+            "text": "推荐"
+        }, {
+            "pagePath": "pages/logs/logs",
+            "text": "作品"
+        }]
+    },
+    "window": {
+        "backgroundTextStyle": "light",
+        "navigationBarBackgroundColor": "#ededed",
+        "navigationBarTitleText": "小学语文朗读配音",
+        "navigationBarTextStyle": "black",
+        "onReachBottomDistance": 50,
+        "enablePullDownRefresh": true
+    },
+    "resolveAlias": {
+        "~/*": "/*"
+    },
+    "sitemapLocation": "sitemap.json"
 }

components/videoPreview/index.wxml

@@ -18,7 +18,8 @@
                 <view class="text">删除</view>
             </view>
             <view class="wH-right-btn" bindtap="setVideoPublic">
-                <image class="img" style="width:30rpx" src="{{videoInfo.userRead.status==='NORMAL'? '/static/unlock.png': '/static/lock.png'}}" />
+                <image class="img" style="width:30rpx"
+                    src="{{videoInfo.userRead.status==='NORMAL'? '/static/unlock.png': '/static/lock.png'}}" />
                 <view class="text">
                     {{videoInfo.userRead.status==='NORMAL'? '公开': '私密'}}
                 </view>
@@ -33,19 +34,22 @@
             <image class="cover" src="{{videoInfo.userRead.coverImg}}" />
         </view>
         <!--未播放-->
-        <view class="videoBox" wx:if="{{videoInfo.userRead.status!='CHECK'&&videoInfo.userRead.id!=currentId}}" bindtap="playVideo">
+        <view class="videoBox" wx:if="{{videoInfo.userRead.status!='CHECK'&&videoInfo.userRead.id!=currentId}}"
+            bindtap="playVideo">
             <image class="play" src="/static/play-btn.png" />
             <image class="cover" src="{{videoInfo.userRead.coverImg}}" />
         </view>
         <!-- 播放时渲染的video -->
-        <video class="video" id="myVideo" wx:if="{{videoInfo.userRead.id==currentId}}" src="{{videoInfo.userRead.videoPath}}" autoplay="true" object-fit="contain">
+        <video class="video" id="myVideo" wx:if="{{videoInfo.userRead.id==currentId}}"
+            src="{{videoInfo.userRead.videoPath}}" autoplay="true" object-fit="contain">
         </video>
     </view>
     <view class="workFooter">
         <view class="mange" wx:if="{{videoInfo.userRead.status!='CHECK'}}">
             <view class="mangeL" bindtap="collect">
                 <view class="mangeL-box">
-                    <image src="{{videoInfo.isFavorites ? '/static/star_colored.png' : '/static/star.png'}}" mode="" class="icon" />
+                    <image src="{{videoInfo.isFavorites ? '/static/star_colored.png' : '/static/star.png'}}" mode=""
+                        class="icon" />
                     <view class="icon-name">{{item.isFavorites}}</view>
                 </view>
                 <button class="resetBtn mangeL-box" open-type="share" data-info='{{videoInfo}}'>
@@ -55,7 +59,8 @@
             </view>
             <view class="mangeL">
                 <view class="mangeL-box" bindtap="likeVideo">
-                    <image src="{{videoInfo.isLike ? '/static/heart_colored.png' : '/static/heart.png'}}" mode="" class="icon" />
+                    <image src="{{videoInfo.isLike ? '/static/heart_colored.png' : '/static/heart.png'}}" mode=""
+                        class="icon" />
                     <view class="icon-name">{{filters.numFilter(videoInfo.userRead.likeAmount)}}</view>
                 </view>
                 <view class="mangeL-box" bindtap="openComment">

mixins/video.js

@@ -0,0 +1,24 @@
+module.exports = Behavior({
+    data: {
+        currentId: '',
+        videoState: true,
+    },
+    properties: {},
+    methods: {
+        // 开始播放
+        playVideo({
+            currentTarget
+        }) {
+            this.setData({
+                videoState: true,
+                currentId: currentTarget.dataset.id
+            })
+        },
+        // 打开评论
+        openComment({
+            target
+        }) {
+            this.selectComponent("#comment").open(target.dataset.id)
+        },
+    }
+})

pages/collection/index.js

@@ -0,0 +1,54 @@
+import {
+    getFavoritesList
+} from "~/api/user"
+import behavior from '~/mixins/video'
+Page({
+    behaviors: [behavior],
+    /**
+     * 页面的初始数据
+     */
+    data: {
+        list: [],
+        pageNo: 1,
+        totalSize: 0,
+
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad(options) {
+        this.getFavoritesList()
+    },
+    async getFavoritesList() {
+        let {
+            list,
+            totalSize
+        } = await getFavoritesList({
+            pageNo: this.data.pageNo,
+            pageSize: 20
+        })
+        list = [...this.data.list, ...list]
+        this.setData({
+            list,
+            totalSize
+        })
+    },
+    /**
+     * 页面上拉触底事件的处理函数
+     */
+    onReachBottom() {
+        if (this.data.totalSize > this.data.list.length) {
+            this.setData({
+                pageNo: this.data.pageNo + 1
+            })
+            this.getFansList()
+        }
+    },
+    /**
+     * 用户点击右上角分享
+     */
+    onShareAppMessage() {
+
+    }
+})

pages/collection/index.json

@@ -0,0 +1,8 @@
+{
+    "usingComponents": {
+        "videoPreview": "/components/videoPreview/index",
+        "emptyBg": "/components/empty/index",
+        "Comment": "/components/comment/index"
+    },
+    "navigationBarTitleText": "我的收藏"
+}

pages/collection/index.less

@@ -0,0 +1,3 @@
+.collection{
+    
+}

pages/collection/index.wxml

@@ -0,0 +1,8 @@
+<view class="collection">
+    <videoPreview wx:for="{{list}}" wx:key="index" videoInfo="{{item}}" index='{{index}}' currentId="{{currentId}}"
+        data-id="{{item.userRead.id}}" bind:playVideo="playVideo" bind:openComment="openComment">
+    </videoPreview>
+    <emptyBg wx:if="{{list.length==0}}" message='您还没有收藏的作品哦~'></emptyBg>
+    <Comment id="comment" />
+    <canvas id='share' type="2d"> </canvas>
+</view>

pages/follow/index.js

@@ -1,40 +1,46 @@
 import {
-  getFansList
+    getFansList
 } from '~/api/user'
 Page({
 
-  /**
-   * 页面的初始数据
-   */
-  data: {
-    list: [],
-    pageNo:1,
-    totalSize: 0
-  },
+    /**
+     * 页面的初始数据
+     */
+    data: {
+        list: [],
+        pageNo: 1,
+        totalSize: 0
+    },
 
-  /**
-   * 生命周期函数--监听页面加载
-   */
-  onLoad(options) {
-    this.getFansList()
-  },
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom() {
-
-  },
-  async getFansList() {
-    let {
-      list,
-      totalSize
-    } = await getFansList({
-      pageNo: 1,
-      pageSize: 20
-    })
-    this.setData({
-      list,
-      totalSize
-    })
-  }
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad(options) {
+        this.getFansList()
+    },
+    /**
+     * 页面上拉触底事件的处理函数
+     */
+    onReachBottom() {
+        if (this.data.totalSize > this.data.list.length) {
+            this.setData({
+                pageNo: this.data.pageNo + 1
+            })
+            this.getFansList()
+        }
+    },
+    async getFansList() {
+        let {
+            list,
+            totalSize
+        } = await getFansList({
+            pageNo: this.data.pageNo,
+            pageSize: 20
+        })
+        list = [...this.data.list, ...list]
+        this.setData({
+            list,
+            totalSize
+        })
+    }
 })