我的收藏和关注界面渲染

pages/user/mycollection/mycollection.js

@@ -1,148 +1,88 @@
-// pages/user/mycollection/mycollection.js
+import httpRequestApi from '../../../utils/APIClient';
 Page({
 
   /**
    * 页面的初始数据
    */
   data: {
-    collection_data: [
-      {
-        title: "古诗词诵读（一）江南",
-        grade: "一年级(上学期)",
-        avatarUrl: '../../../static/image/timg.jpg',
-        previewUrl: "../../../static/image/timg.jpg",
-        plays: "17230",
-        likes: "71230",
-        classId: "1",
-        avatar: '../../static/image/timg.jpg',
-        nickName: '木小雅',
-        time: '10-18 09:56'
-      },
-      {
-        title: "古诗词诵读（一）江南",
-        grade: "一年级(上学期)",
-        avatarUrl: '../../../static/image/timg.jpg',
-        previewUrl: "../../../static/image/timg.jpg",
-        plays: "17230",
-        likes: "71230",
-        classId: "1",
-        avatar: '../../static/image/timg.jpg',
-        nickName: '木小雅',
-        time: '10-18 09:56'
-      },
-      {
-        title: "古诗词诵读（一）江南",
-        grade: "一年级(上学期)",
-        avatarUrl: '../../../static/image/timg.jpg',
-        previewUrl: "../../../static/image/timg.jpg",
-        plays: "17230",
-        likes: "71230",
-        classId: "1",
-        avatar: '../../static/image/timg.jpg',
-        nickName: '木小雅',
-        time: '10-18 09:56'
-      },
-      {
-        title: "古诗词诵读（一）江南",
-        grade: "一年级(上学期)",
-        avatarUrl: '../../../static/image/timg.jpg',
-        previewUrl: "../../../static/image/timg.jpg",
-        plays: "17230",
-        likes: "71230",
-        classId: "1",
-        avatar: '../../static/image/timg.jpg',
-        nickName: '木小雅',
-        time: '10-18 09:56'
-      },
-      {
-        title: "古诗词诵读（一）江南",
-        grade: "一年级(上学期)",
-        avatarUrl: '../../../static/image/timg.jpg',
-        previewUrl: "../../../static/image/timg.jpg",
-        plays: "17230",
-        likes: "71230",
-        classId: "1",
-        avatar: '../../static/image/timg.jpg',
-        nickName: '木小雅',
-        time: '10-18 09:56'
-      },
-      {
-        title: "古诗词诵读（一）江南",
-        grade: "一年级(上学期)",
-        avatarUrl: '../../../static/image/timg.jpg',
-        previewUrl: "../../../static/image/timg.jpg",
-        plays: "17230",
-        likes: "71230",
-        classId: "1",
-        avatar: '../../static/image/timg.jpg',
-        nickName: '木小雅',
-        time: '10-18 09:56'
-      }
-    ]
+    collection_data: []
+  },
+
+  toClass: function(e) {
+    let targetCode = e.currentTarget.dataset.targetcode;
+    let title = e.currentTarget.dataset.title;
+    wx.navigateTo({
+      url: `../../main/class/class?id=${targetCode}&title=${title}`
+    });
   },
 
   /**
    * 生命周期函数--监听页面加载
    */
-  onLoad: function (option) {
+  onLoad: function(option) {
     console.log(option.title);
     if (option.title) {
       wx.setNavigationBarTitle({
-        title: option.title//页面标题为路由参数
+        title: option.title //页面标题为路由参数
       });
       this.setData({
         title: option.title
       });
     }
 
+    httpRequestApi.myFavorites().success(res => {
+      this.setData({
+        collection_data: res.data.data.list
+      });
+    });
   },
 
   /**
    * 生命周期函数--监听页面初次渲染完成
    */
-  onReady: function () {
+  onReady: function() {
 
   },
 
   /**
    * 生命周期函数--监听页面显示
    */
-  onShow: function () {
+  onShow: function() {
 
   },
 
   /**
    * 生命周期函数--监听页面隐藏
    */
-  onHide: function () {
+  onHide: function() {
 
   },
 
   /**
    * 生命周期函数--监听页面卸载
    */
-  onUnload: function () {
+  onUnload: function() {
 
   },
 
   /**
    * 页面相关事件处理函数--监听用户下拉动作
    */
-  onPullDownRefresh: function () {
+  onPullDownRefresh: function() {
 
   },
 
   /**
    * 页面上拉触底事件的处理函数
    */
-  onReachBottom: function () {
+  onReachBottom: function() {
 
   },
 
   /**
    * 用户点击右上角分享
    */
-  onShareAppMessage: function () {
+  onShareAppMessage: function() {
 
   }
 })

pages/user/mycollection/mycollection.wxml

@@ -1,36 +1,13 @@
 <view class='my-collection'>
-  <view class='collection-article' wx:for="{{ collection_data }}" wx:key="{{ index }}">
-    <view class='collection-top'>
-      <view class='top-img'>
-        <image src='{{ item.avatarUrl }}'></image>
-      </view>
-      <view class='collection-info'>
-        <view class='title'>{{ item.nickName }}</view>
-        <view class='date'>{{ item.time }}</view>
-      </view>
-    </view>
+  <view class='collection-article' wx:for="{{ collection_data }}" wx:key="{{ index }}" bindtap='toClass' data-targetCode="{{item.targetCode}}" data-title='{{ item.title }}'>
     <view class='video-preview'>
-      <image src='{{ item.previewUrl }}'></image>
+      <image src='{{ item.iconImg }}'></image>
     </view>
     <view class='content-title'>
       {{ item.title }}
     </view>
     <view class='content-detail'>
-      <view class='left'>{{ item.grade }}</view>
-      <view class='right'>
-        <view class='right-detail'>
-          <view class='play-img'>
-            <image src='../../../static/image/hotPlays.png'></image>
-          </view>
-          <text>{{ item.plays }}</text>
-        </view>
-        <view class='right-detail'>
-          <view class='point-img'>
-            <image src='../../../static/image/like.png'></image>
-          </view>
-          <text>{{ item.likes }}</text>
-        </view>
-      </view>
+      <view class='left'>{{ item.summary }}</view>
     </view>
   </view>
 </view>

pages/user/mycollection/mycollection.wxss

@@ -63,7 +63,7 @@
 .content-title{
   margin-top: 10rpx;
   width: 100%;
-  height: 50rpx;
+  height: 55rpx;
   font-size: 32rpx;
   font-weight: 600;
   color: #414141;

pages/user/myconcern/myconcern.js

@@ -7,80 +7,7 @@ Page({
       fullScreenBtn: false,
       playBtn: false,
       gesture: true,
-      concerns:[
-          {
-              nickName: '清然未',
-              time: '10-18 09:56',
-              avatar: 'https://developers.weixin.qq.com/miniprogram/dev/image/cat/0.jpg?t=18102320',
-              concerned: '已关注',
-              followBack: '相互关注',
-              isEachOther: false
-          },
-          {
-              nickName: '木小雅',
-              time: '10-18 09:56',
-              avatar: 'https://developers.weixin.qq.com/miniprogram/dev/image/cat/0.jpg?t=18102320',
-              concerned: '已关注',
-              followBack: '相互关注',
-              isEachOther: true
-          },
-          {
-              nickName: '清然未',
-              time: '10-18 09:56',
-              avatar: 'https://developers.weixin.qq.com/miniprogram/dev/image/cat/0.jpg?t=18102320',
-              concerned: '已关注',
-              followBack: '相互关注',
-              isEachOther: false
-          },
-          {
-              nickName: '木小雅',
-              time: '10-18 09:56',
-              avatar: 'https://developers.weixin.qq.com/miniprogram/dev/image/cat/0.jpg?t=18102320',
-              concerned: '已关注',
-              followBack: '相互关注',
-              isEachOther: true
-          },
-          {
-              nickName: '清然未',
-              time: '10-18 09:56',
-              avatar: 'https://developers.weixin.qq.com/miniprogram/dev/image/cat/0.jpg?t=18102320',
-              concerned: '已关注',
-              followBack: '相互关注',
-              isEachOther: false
-          },
-          {
-              nickName: '清然未',
-              time: '10-18 09:56',
-              avatar: 'https://developers.weixin.qq.com/miniprogram/dev/image/cat/0.jpg?t=18102320',
-              concerned: '已关注',
-              followBack: '相互关注',
-              isEachOther: false
-          },
-          {
-              nickName: '清然未',
-              time: '10-18 09:56',
-              avatar: 'https://developers.weixin.qq.com/miniprogram/dev/image/cat/0.jpg?t=18102320',
-              concerned: '已关注',
-              followBack: '相互关注',
-              isEachOther: false
-          },
-          {
-              nickName: '木小雅',
-              time: '10-18 09:56',
-              avatar: 'https://developers.weixin.qq.com/miniprogram/dev/image/cat/0.jpg?t=18102320',
-              concerned: '已关注',
-              followBack: '相互关注',
-              isEachOther: true
-          },
-          {
-              nickName: '木小雅',
-              time: '10-18 09:56',
-              avatar: 'https://developers.weixin.qq.com/miniprogram/dev/image/cat/0.jpg?t=18102320',
-              concerned: '已关注',
-              followBack: '相互关注',
-              isEachOther: true
-          },
-      ]
+      fanList:[]
   },
 
   /**
@@ -96,11 +23,9 @@ Page({
         title: option.title
       });
     }
-    let uid = 1, pageNo = 8, pageSize = 18;
-    httpRequestApi.getFollowUsers(uid, pageNo, pageSize).success(res => {
-      let { data } = res.data;
+    httpRequestApi.myFans().success(res => {
       this.setData({
-        isEachOther: data.hasPrevious
+        fanList: res.data.data.list
       });
     });
   },

pages/user/myconcern/myconcern.wxml

@@ -1,24 +1,32 @@
+<wxs module="wxs">
+  function formatDate(time) {
+    var timeTemp = getDate(time);
+    var timeString = timeTemp.toLocaleDateString() + timeTemp.toLocaleTimeString();
+    return timeString.replace('/','-').replace('/','-').replace('上午',' ').replace('下午',' ');
+  }
+  module.exports.formatDate = formatDate;
+</wxs>
 <view class='my-concern'>
   <view class="concern-center">
-    <view class='concern-info' wx:for="{{ concerns }}" wx:key="{{ index }}">
+    <view class='concern-info' wx:for="{{ fanList }}" wx:key="{{ index }}">
       <view class='avatar-box'>
-        <image class='avatar-image' src="{{ item.avatar }}" />
+        <image class='avatar-image' src="{{ item.user.avatar }}" />
       </view>
       <view class="avatar-name">
-        <text class="nickName">{{ item.nickName }}</text>
-        <text class="time">{{ item.time }}</text>
+        <text class="nickName">{{ item.user.wechatName }}</text>
+        <text class="time">{{ wxs.formatDate(item.fans.gmtCreated) }}</text>
       </view>
       <view class="avatar-follow" wx:if='{{ item.isEachOther }}'>
         <view class='avatar-img'>
           <image class='avatar-images' src="../../../static/image/concerned.png" />
         </view>
-        <view class="follow-status">{{ item.concerned }}</view>
+        <view class="follow-status">相互关注</view>
       </view>
       <view class="avatar-follow" wx:elif='{{ item.followBack === item.followBack || item.isEachOther }}'>
         <view class='avatar-img'>
           <image class='avatar-images' src="../../../static/image/concernback.png" />
         </view>
-        <view class="follow-status">{{ item.followBack }}</view>
+        <view class="follow-status">已关注</view>
       </view>
     </view>
   </view>

pages/user/myconcern/myconcern.wxss

@@ -25,7 +25,7 @@ page{
 }
 
 .avatar-box{
-  margin-left: 20rpx;
+  margin-left: 30rpx;
   width: 96rpx;
   height: 96rpx;
   border-radius: 50%;
@@ -38,25 +38,26 @@ page{
 }
 
 .nickName{
-  width: 200rpx;
+  width: 420rpx;
   height: 44rpx;
   color: #000000;
   font-size: 32rpx;
 }
 
 .time{
-  width: 200rpx;
+  width: 420rpx;
   height: 44rpx;
   color: #686868;
   font-size: 32rpx;
 }
 
 .avatar-follow{
-  margin-left: 270rpx;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100rpx;
+  margin-left:30rpx;
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  width:100rpx;
+
 }
 
 .avatar-img{

project.config.json

@@ -41,7 +41,7 @@
 				{
 					"id": 0,
 					"name": "edit",
-					"pathName": "pages/user/myread/myread",
+					"pathName": "pages/user/mycollection/mycollection",
 					"query": ""
 				},
 				{

utils/APIClient.js

@@ -111,16 +111,6 @@ module.exports = {
       "uid": followUid
     }).method('POST').send();
   },
-  //获取关注的用户列表
-  getFollowUsers(uid, pageNo, pageSize) {
-    let url = getBaseUrl(`wx/fans`);
-    return request.getInstance().header({
-      uid
-    }).url(url).data({
-      pageNo: pageNo,
-      pageSize: pageSize
-    }).send();
-  },
   // 获取关注用户的作品列表
   getFollowWorks(uid, pageNo, pageSize) {
     let url = getBaseUrl(`wx/fans/interest`);
@@ -317,4 +307,18 @@ module.exports = {
       uid: wx.getStorageSync('uid')
     }).url(url).send();
   },
+  // 我的收藏
+  myFavorites() {
+    let url = getProductUrl(`wx/favorites`);
+    return request.getInstance().header({
+      uid: wx.getStorageSync('uid')
+    }).url(url).send();
+  },
+  // 我的关注
+  myFans() {
+    let url = getBaseUrl(`wx/fans`);
+    return request.getInstance().header({
+      uid: wx.getStorageSync('uid')
+    }).url(url).send();
+  },
 }