Merge branch 'dongyuan'

pages/user/myworks/myworks.js

@@ -7,80 +7,7 @@ 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: "2",
-        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: "3",
-        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: "4",
-        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: "5",
-        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: "6",
-        avatar: '../../static/image/timg.jpg',
-        nickName: '喔喔',
-        time: '10-18 09:56'
-      }
-    ],
+    wareCards: [],
     pageNo: 1,
     totalNo: 0,
     uid: ''
@@ -98,7 +25,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

@@ -1,7 +1,6 @@
 <!--pages/user/myworks/myworks.wxml-->
 <wxs module="wxs">
   function formatDate(time) {
-    console.log(time);
     var t = getDate(time); 
     var tf = function(i){return (i < 10 ? '0' : '') + i};
     var year = t.getFullYear();
@@ -11,41 +10,111 @@
     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='{{ wareCards[0].user.avatar }}'></image>
+        </view>
+        <view class='occupation-title'>{{ wareCards[0].user.profession }}</view>
+      </view>
+      <view class='avatar-msg'>
+        <view class='avatar-nickname'>
+          <text>{{ wareCards[0].user.wechatName }}</text>
+          <view class='flowers-box' wx:if='{{ true }}'>
+            <image src='../../../static/image/flowers.png'></image>
+          </view>
+          <view class='flowers-box' wx:else>
+            <image src='../../../static/image/boy.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>{{ wareCards[0].userRead.playAmount }}</view>
+          <view class='border-right'>
+            <view class='play-img'>
+              <image src='../../../static/image/play.png'></image>
+            </view>
+            <text>播放量</text>
+          </view>
+        </view>
+        <view class='follow-count'>
+          <view class='color'>{{ wareCards[0].userRead.fansAmount || 0 }}</view>
+          <view class='border-right'>
+            <view class='play-img'>
+              <image src='../../../static/image/follow.png'></image>
+            </view>
+            <text>关注</text>
+          </view>
+        </view>
+        <view class='point-count'>
+          <view class='color'>{{ wareCards[0].userRead.likeAmount || 0 }}</view>
+          <view class='border-right'>
+            <view class='play-img'>
+              <image src='../../../static/image/point.png'></image>
+            </view>
+            <text>赞</text>
+          </view>
+        </view>
+        <view class='flower-count'>
+          <view class='color'>{{ wareCards[0].userRead.pointAmount || 0 }}</view>
+          <view class='border-right'>
+            <view class='play-img'>
+              <image src='../../../static/image/flower.png'></image>
+            </view>
+            <text>红花</text>
+          </view>
+        </view>
+      </view>
+  </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 || 0 }}</text>
+          </view>
+        </view>
+        <view class='user-name'>
+          <view class='left-detail'>{{ wxs.formatDate(item.userRead.gmtCreated) || 0 }}</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,43 +1,225 @@
 /* pages/user/myworks/myworks.wxss */
+page{
+  width: 100%;
+  background: #F0F1F5;
+}
+
 .user-works{
   width: 750rpx;
+  box-sizing: border-box;
+  padding: 0 16rpx;
   background: #F0F1F5;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.follow-details{
+  width: 100%;
+  height: 362rpx;
+  border-radius: 20rpx;
+  background: #FFFFFF;
+  margin-top: 30rpx;
+  display: flex;
+  position: relative;
+}
+
+.follow-info{
+  width: 100%;
+  display: flex;
+}
+
+.avatar-bg{
+  margin-left: 20rpx;
+  margin-top: 50rpx;
+  width: 154rpx;
+  height: 154rpx;
+  background: #61CA54;
+  border-radius: 50%;
+  position: relative;
+}
+
+.avatar-box{
+  width: 138rpx;
+  height: 138rpx;
+  border-radius: 50%;
+  z-index: 300;
+  position: absolute;
+  top: 8rpx;
+  left: 8rpx;
+}
+
+.avatar-image{
+  width: 100%;
+  height: 100%;
+  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;
+  top: 46rpx;
+  width: 68rpx;
+  background: #61CA54;
+  border-radius: 180rpx;
+  z-index: 600;
+  line-height: 26rpx;
+  text-align: center;
+  color: #FFFFFF;
+  font-size: 18rpx;
+}
+
+.avatar-msg{
+  margin-left: 40rpx;
+  margin-top: 50rpx;
+  width: 500rpx;
+  height: 154rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  color: #444444;
+  font-size: 32rpx;
+}
+
+.mine-category{
+  box-sizing: border-box;
+  width: 674rpx;
+  padding-top: 30rpx;
+  padding-bottom: 30rpx;
+  border-top: 4rpx solid #F0F1F5;
+  font-size: 28rpx;
+  font-weight: 600;
+  z-index: 900;
+  display: flex;
+  position: absolute;
+  top: 246rpx;
+  left: 23rpx;
+}
+
+.border-right{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 24rpx;
+  font-weight: lighter;
+  height: 22rpx;
+  border-right: 2rpx solid #D6D6D6;
+}
+
+.flower-count .border-right{
+  border: none;
+}
+
+.play-count,.point-count,.follow-count,.flower-count{
+  width: 25%;
+  text-align: center;
+}
+
+.play-img{
+  width: 28rpx;
+  height: 26rpx;
+  margin-right: 6rpx;
+  margin-bottom: 6rpx;
 }
 
+image{
+  width: 100%;
+  height: 100%;
+}
+
+.play-count{
+  color: #92D626;
+}
+
+.point-count{
+  color: #FFA700;
+}
+
+.follow-count{
+  color: #529BEF;
+}
+
+.flower-count{
+  color: #EE5750;
+}
+
+
+
 .works-article{
-  margin-top: 4rpx;
+  margin-top: 12rpx;
   box-sizing: border-box;
   width: 100%;
-  padding: 0 23rpx;
+  padding: 0 27rpx;
   background: #FFFFFF;
+  border-radius: 12rpx;
 }
 
 .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;
@@ -57,52 +239,44 @@
 }
 
 .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;
+}
+