myWorks status

pages/user/myworks/myworks.js

@@ -11,7 +11,7 @@ Page({
       {
         title: "古诗词诵读（一）江南",
         grade: "一年级(上学期)",
-        avatarUrl: '../../../static/image/timg.jpg',
+        avatarUrl: 'https://developers.weixin.qq.com/miniprogram/dev/image/cat/0.jpg',
         previewUrl: "../../../static/image/timg.jpg",
         plays: "17230",
         likes: "71230",
@@ -23,7 +23,7 @@ Page({
       {
         title: "古诗词诵读（一）江南",
         grade: "一年级(上学期)",
-        avatarUrl: '../../../static/image/timg.jpg',
+        avatarUrl: 'https://developers.weixin.qq.com/miniprogram/dev/image/cat/0.jpg',
         previewUrl: "../../../static/image/timg.jpg",
         plays: "17230",
         likes: "71230",
@@ -35,7 +35,7 @@ Page({
       {
         title: "古诗词诵读（一）江南",
         grade: "一年级(上学期)",
-        avatarUrl: '../../../static/image/timg.jpg',
+        avatarUrl: 'https://developers.weixin.qq.com/miniprogram/dev/image/cat/0.jpg',
         previewUrl: "../../../static/image/timg.jpg",
         plays: "17230",
         likes: "71230",
@@ -47,7 +47,7 @@ Page({
       {
         title: "古诗词诵读（一）江南",
         grade: "一年级(上学期)",
-        avatarUrl: '../../../static/image/timg.jpg',
+        avatarUrl: 'https://developers.weixin.qq.com/miniprogram/dev/image/cat/0.jpg',
         previewUrl: "../../../static/image/timg.jpg",
         plays: "17230",
         likes: "71230",
@@ -59,7 +59,7 @@ Page({
       {
         title: "古诗词诵读（一）江南",
         grade: "一年级(上学期)",
-        avatarUrl: '../../../static/image/timg.jpg',
+        avatarUrl: 'https://developers.weixin.qq.com/miniprogram/dev/image/cat/0.jpg',
         previewUrl: "../../../static/image/timg.jpg",
         plays: "17230",
         likes: "71230",
@@ -71,7 +71,7 @@ Page({
       {
         title: "古诗词诵读（一）江南",
         grade: "一年级(上学期)",
-        avatarUrl: '../../../static/image/timg.jpg',
+        avatarUrl: 'https://developers.weixin.qq.com/miniprogram/dev/image/cat/0.jpg',
         previewUrl: "../../../static/image/timg.jpg",
         plays: "17230",
         likes: "71230",
@@ -98,7 +98,7 @@ Page({
     let uid = this.data.uid;
     console.log('用户身份',uid);
     APIClient.userWorks(uid, pageNo, pageSize).success(res => {
-      // debugger;
+      console.log(res.data.data.list);
       this.setData({
         wareCards: res.data.data.list
       });

pages/user/myworks/myworks.wxml

@@ -10,26 +10,40 @@
     var minute = tf(t.getMinutes());
     return month + '-' + day + ' ' + hour + ':' + minute;
   }
+  function getBirthday(birthday){
+    var t = getDate(birthday); 
+    var tf = function(i){return (i < 10 ? '0' : '') + i};
+    var year = t.getFullYear();
+    var month = tf(t.getMonth() + 1);
+    var day = tf(t.getDate());
+    return year + '年' + month + '月' + day + '日';
+  }
   module.exports.formatDate = formatDate;
+  module.exports.getBirthday = getBirthday;
 </wxs>
 <view class='user-works'>
   <view class='follow-details'>
     <view class='follow-info'>
       <view class='avatar-bg'>
         <view class='avatar-box'>
-          <image class='avatar-image' src='https://developers.weixin.qq.com/miniprogram/dev/image/cat/0.jpg'></image>
+          <image class='avatar-image' src='{{ wareCards[0].user.avatar }}'></image>
         </view>
-        <view class='occupation-title'>家长</view>
+        <view class='occupation-title'>{{ wareCards[0].user.profession }}</view>
       </view>
       <view class='avatar-msg'>
-        <view class='avatar-nickname'>木小雅</view>
-        <view class='avatar-birthday'>1992年07月13日</view>
-        <view class='avatar-address'>北京市，海淀区中关村三小</view>
+        <view class='avatar-nickname'>
+          <text>{{ wareCards[0].user.wechatName }}</text>
+          <view class='flowers-box'>
+            <image src='../../../static/image/flowers.png'></image>
+          </view>
+        </view>
+        <view class='avatar-birthday'>{{ wxs.getBirthday(wareCards[0].user.birthday) }}</view>
+        <view class='avatar-address'>{{ wareCards[0].user.schoolName }}</view>
       </view>
     </view>
     <view class='mine-category'>
         <view class='play-count'>
-          <view>{{ 3232 }}</view>
+          <view>{{ wareCards[0].userRead.playAmount }}</view>
           <view class='border-right'>
             <view class='play-img'>
               <image src='../../../static/image/play.png'></image>
@@ -38,7 +52,7 @@
           </view>
         </view>
         <view class='follow-count'>
-          <view class='color'>{{ 5200 }}</view>
+          <view class='color'>{{ wareCards[0].userRead.playAmount }}</view>
           <view class='border-right'>
             <view class='play-img'>
               <image src='../../../static/image/follow.png'></image>
@@ -47,7 +61,7 @@
           </view>
         </view>
         <view class='point-count'>
-          <view class='color'>{{ 300 }}</view>
+          <view class='color'>{{ wareCards[0].userRead.likeAmount }}</view>
           <view class='border-right'>
             <view class='play-img'>
               <image src='../../../static/image/point.png'></image>
@@ -68,36 +82,36 @@
   </view>
   <view class='works-article' wx:for="{{ wareCards }}" wx:key="{{ index }}">
     <view class='user-info'>
-      <view class='avatar-img'>
+      <view class='user-img'>
         <image src='{{ item.user.avatar }}'></image>
       </view>
-      <view>
-        <view class='user-name'>{{ item.user.wechatName }}</view>
-        <view class='user-time'>{{ wxs.formatDate(item.userRead.gmtCreated) }}</view>
+      <view class='user-details'>
+        <view class='user-name'>
+          <view class='left-detail'>{{ item.user.wechatName }}</view>
+          <view class='right-detail'>
+            <view class='play-img'>
+              <image src='../../../static/image/hotPlays.png'></image>
+            </view>
+            <text class='plays-count'>{{ item.userRead.playAmount }}</text>
+          </view>
+        </view>
+        <view class='user-name'>
+          <view class='left-detail'>{{ wxs.formatDate(item.userRead.gmtCreated) }}</view>
+          <view class='right-detail'>
+            <view class='point-img'>
+              <image src='../../../static/image/like.png'></image>
+            </view>
+            <text class='likes-count'>{{ item.userRead.likeAmount }}</text>
+          </view>
+        </view>
       </view>
     </view>
     <view class='video-preview' bindtap='toMyWorks' data-id='{{ item.userRead.id }}' data-title='{{ item.userRead.title }}'>
       <image src='{{ item.userRead.iconImg }}'></image>
     </view>
     <view class='content-title'>
-      {{ item.userRead.title }}
-    </view>
-    <view class='content-detail'>
-      <view class='left'>{{ item.userRead.summary }}</view>
-      <view class='right'>
-        <view class='right-detail'>
-          <view class='play-img'>
-            <image src='../../../static/image/hotPlays.png'></image>
-          </view>
-          <text>{{ item.userRead.playAmount }}</text>
-        </view>
-        <view class='right-detail'>
-          <view class='point-img'>
-            <image src='../../../static/image/like.png'></image>
-          </view>
-          <text>{{ item.userRead.likeAmount }}</text>
-        </view>
-      </view>
+      <view>{{ item.userRead.title }}</view>
+      <view class='content-grage'>{{ item.userRead.summary }}</view>
     </view>
   </view>
 </view>

pages/user/myworks/myworks.wxss

@@ -1,4 +1,9 @@
 /* pages/user/myworks/myworks.wxss */
+page{
+  width: 100%;
+  background: #F0F1F5;
+}
+
 .user-works{
   width: 750rpx;
   box-sizing: border-box;
@@ -51,6 +56,26 @@
   border-radius: 50%;
 }
 
+.avatar-nickname{
+  width: 500rpx;
+  display: flex;
+}
+
+.avatar-address{
+  width: 500rpx;
+}
+
+.flowers-box{
+  width: 26rpx;
+  height: 26rpx;
+  margin-left: 10rpx;
+}
+
+.flowers-box>image{
+  width: 100%;
+  height: 100%;
+}
+
 .occupation-title{
   position: absolute;
   left: 100rpx;
@@ -146,6 +171,7 @@ image{
   margin-top: 12rpx;
   box-sizing: border-box;
   width: 100%;
+  padding: 0 27rpx;
   background: #FFFFFF;
   border-radius: 12rpx;
 }
@@ -153,29 +179,47 @@ image{
 .user-info{
   width: 100%;
   height: 120rpx;
-  font-size:32rpx;
   display: flex;
   align-items: center;
+  font-size:32rpx;
 }
 
-.avatar-img{
-  margin-right: 14rpx;
+.user-img{
   width: 96rpx;
   height: 96rpx;
   border-radius: 50%;
 }
 
-.avatar-img>image{
+.user-img>image{
   width: 100%;
   height: 100%;
   border-radius: 50%;
 }
 
+.user-details{
+  margin-left: 26rpx;
+  display: flex;
+  flex-direction: column;
+}
+
 .user-name{
+  width: 560rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
   color: #000000;
   font-weight: 500;
 }
 
+.left-detail{
+  width: 500rpx;
+}
+
+.right-detail{
+  width: 90rpx;
+  display: flex;
+}
+
 .user-time{
   color: #686868;
   font-weight: lighter;
@@ -195,52 +239,44 @@ image{
 }
 
 .content-title{
-  margin-top: 10rpx;
+  margin-top: 12rpx;
+  margin-bottom: 30rpx;
   width: 100%;
-  height: 40rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   font-size: 32rpx;
   font-weight: 500;
   color: #414141;
 }
 
-.content-detail{
-  margin-top: 30rpx;
-  width: 100%;
-  height: 50rpx;
-  display: flex;
-  justify-content: space-between;
+.content-grage{
   font-size: 24rpx;
 }
 
-.left{
-  width: 200rpx;
-}
-
-.right{
-  width: 150rpx;
-  height: 100%;
-  display: flex;
-  justify-content: space-between;
-}
-
-.right image{
+.user-info image{
   width: 100%;
   height: 100%;
 }
 
 .play-img{
+  margin-bottom: 12rpx;
   width: 20rpx;
   height: 20rpx;
 }
 
 .point-img{
+  margin-right: 6rpx;
+  margin-bottom: 10rpx;
   width: 26rpx;
   height: 24rpx;
 }
 
-.right-detail{
-  width: 50rpx;
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-}
+.likes-count{
+  color: #FD8B43;
+}
+
+.plays-count{
+  color: #5E5E5E;
+}
+