我的朗读 完成

pages/user/myread/myread.js

@@ -5,80 +5,8 @@ Page({
    * 页面的初始数据
    */
   data: {
-    wareCards: [
-      {
-        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'
-      }
-    ]
+    wareCards: [],
+    user: {}
   },
 
   toWork: function (e) {
@@ -103,7 +31,17 @@ Page({
       });
     }
     APIClient.myRead().success(res => {
-      console.log(res.data.data.list);
+      console.log(res.data.data.list,'我的朗读');
+      APIClient.getUserWorksInfo().success(res => {
+        let user = res.data.data;
+        this.setData({
+          user: user,
+        }, () => {
+          console.log(this.data.user);
+        });
+      }).fail(error => {
+        console.log(error)
+      });
       this.setData({
         wareCards: res.data.data.list
       });

pages/user/myread/myread.wxml

@@ -1,27 +1,39 @@
+<wxs src="../../commonWxs/format.wxs" module="format" />
 <view class='my-read'>
   <view class='read-article' wx:for="{{ wareCards }}" wx:key="{{ index }}" bindtap='toWork' data-lessonId='{{ item.id }}' data-title='{{ item.title }}'>
-    <view class='video-preview'>
-      <image src='{{ item.iconImg }}'></image>
-    </view>
-    <view class='content-title'>
-      {{ item.title }}
+    <view class='user-info'>
+      <view class='avatar-box'>
+        <image class='avatar-image' src="{{ user.user.avatar }}" />
+      </view>
+      <view class="avatar-name">
+        <view>{{ user.user.wechatName }}</view>
+        <view>{{ format.formatDate(item.gmtCreated) }}</view>
+      </view>
     </view>
-    <view class='content-detail'>
-      <view class='left'>{{ item.summary }}</view>
-      <view class='right'>
-        <view class='right-detail'>
-          <view class='play-img'>
-            <image src='../../../static/image/hotPlays.png'></image>
+    <view>
+      <view class='video-preview'>
+        <image src='{{ item.iconImg }}'></image>
+      </view>
+      <view class='content-title'>
+        {{ item.title }}
+      </view>
+      <view class='content-detail'>
+        <view class='left'>{{ item.summary }}</view>
+        <view class='right'>
+          <view class='right-detail'>
+            <view class='play-img'>
+              <image src='../../../static/image/hotPlays.png'></image>
+            </view>
+            <view class='count-add'>{{ item.playAmount }}</view>
           </view>
-          <text>{{ item.playAmount }}</text>
-        </view>
-        <view class='right-detail'>
-          <view class='point-img'>
-            <image src='../../../static/image/like.png'></image>
+          <view class='right-details'>
+            <view class='point-img'>
+              <image src='../../../static/image/like.png'></image>
+            </view>
+            <view class='count-add'>{{ item.likeAmount }}</view>
           </view>
-          <text>{{ item.likeAmount }}</text>
         </view>
-      </view>
+      </view> 
     </view>
   </view>
 </view>

pages/user/myread/myread.wxss

@@ -3,6 +3,57 @@
   background: #F0F1F5;
 }
 
+.user-info{
+  width: 100%;
+  height: 132rpx;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.avatar-image{
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+}
+
+.avatar-box{
+  width: 96rpx;
+  height: 96rpx;
+  border-radius: 50%;
+}
+
+.avatar-name{
+  width: 420rpx;
+  height: 80rpx;
+  font-size: 32rpx;
+  color: #444444;
+  margin-left: 14rpx;
+  margin-bottom: 16rpx;
+}
+
+.avatar-follow{
+  margin-left:30rpx;
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  width:100rpx;
+
+}
+
+.avatar-img{
+  width: 46rpx;
+  height: 40rpx;
+}
+
+.avatar-images{
+  width: 100%;
+  height: 100%;
+}
+
+
+
+
 .read-article{
   margin-bottom: 4rpx;
   box-sizing: border-box;
@@ -48,7 +99,7 @@
 }
 
 .video-preview{
-  margin-top: 10rpx;
+  /* margin-top: 16rpx; */
   width: 100%;
   height: 290rpx;
   border-radius: 20rpx;
@@ -65,7 +116,7 @@
   width: 100%;
   height: 50rpx;
   font-size: 32rpx;
-  font-weight: 600;
+  font-weight: 500;
   color: #414141;
 }
 
@@ -83,7 +134,6 @@
 }
 
 .right{
-  width: 220rpx;
   height: 100%;
   display: flex;
   justify-content: space-between;
@@ -97,7 +147,7 @@
 
 .play-img{
   width: 20rpx;
-  height: 20rpx;
+  height: 22rpx;
 }
 
 .point-img{
@@ -105,9 +155,17 @@
   height: 24rpx;
 }
 
-.right-detail{
-  width: 100rpx;
+.count-add{
+  width: 36rpx;
+  text-align: center;
+}
+
+.right-detail,.right-details{
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-end;
   align-items: flex-start;
+}
+
+.right-details{
+  margin-left: 20rpx;
 }