朋友页面显示用户的个人信息【昵称/学号/作品/粉丝/播放】

pages/friend/index.less

@@ -49,86 +49,99 @@
     margin-top: 88rpx;
 
     .follow {
-      margin-top: 20rpx;
+      margin-top: 30rpx;
       box-sizing: border-box;
       width: 100%;
       background-color: white;
-      border-radius: 10rpx;
-      margin-bottom: 20rpx;
-      padding: 20rpx;
+      border-radius: 20rpx;
+      padding: 20rpx 34rpx 16rpx;
       display: flex;
       align-items: center;
-      justify-content: space-between;
+      box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 8px 0px;
 
-      .userInfo {
-        flex: 1;
+      .left {
         display: flex;
+        flex-direction: column;
+        align-items: center;
 
         .avatar {
-          position: relative;
-
-          .avatar-image {
-            width: 96rpx;
-            height: 96rpx;
-            background-color: wheat;
-            border-radius: 50%;
-            border: 4rpx solid #61CA54;
-          }
-
-          .user-profession {
-            position: absolute;
-            bottom: -4rpx;
-            left: 17rpx;
-            width: 68rpx;
-            height: 24rpx;
-            background: rgba(97, 202, 84, 1);
-            border-radius: 50rpx;
-            border: 2rpx solid rgba(255, 255, 255, 1);
-            font-size: 16rpx;
-            color: rgba(255, 255, 255, 1);
-            line-height: 24rpx;
-            text-align: center;
-
-          }
+          width: 106rpx;
+          height: 106rpx;
+          border-radius: 50%;
         }
 
-        .infoBox {
-          display: flex;
-          flex-direction: column;
-          justify-content: space-around;
-          margin-left: 14rpx;
-          margin-top: 2rpx;
-
-          .gmtCreated {
-            font-size: 26rpx;
-            color: #888;
-          }
+        .profession {
+          display: inline-block;
+          margin-top: 4rpx;
+          padding: 4rpx 20rpx;
+          font-size: 24rpx;
+          color: white;
+          background-color: #10CA61;
+          border-radius: 20rpx;
         }
       }
 
-      .state {
-        text-align: center;
+      .right {
+        margin-left: 46rpx;
+        flex: 1;
 
-        .stateText {
-          width: 160rpx;
-          padding: 16rpx 0rpx;
-          border-radius: 50rpx;
-          font-size: 24rpx;
-        }
+        .infoBox {
+          border-bottom: 1rpx solid #00000020;
+
+          .top {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+
+            .nickName {
+              font-size: 32rpx;
+            }
+
+            .state {
+              text-align: center;
+
+              .stateText {
+                width: 160rpx;
+                padding: 12rpx 0rpx;
+                border-radius: 50rpx;
+                font-size: 24rpx;
+              }
+
+              .already {
+                background-color: #E4EDFB;
+              }
+
+              .yet {
+                background-color: #1BC665;
+                color: white;
+              }
+            }
+          }
 
-        .already {
-          background-color: #E4EDFB;
+          .number {
+            padding-bottom: 14rpx;
+            font-size: 24rpx;
+            color: #00000060;
+          }
         }
 
-        .yet {
-          background-color: #1BC665;
-          color: white;
+        .statistics {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding-top: 12rpx;
+          font-size: 28rpx;
+          color: #00000060;
+
+          text {
+            margin-left: 6rpx;
+          }
         }
       }
     }
   }
+}
 
-  .empty {
-    margin-top: 200rpx;
-  }
+.empty {
+  margin-top: 200rpx;
 }

pages/friend/index.wxml

@@ -11,24 +11,29 @@
   </view>
   <view class="box">
     <view class="follow" wx:for="{{list}}" wx:key="index">
-      <view class="userInfo" bindtap="jumpUserInfo" data-uid='{{item.user.uid}}'>
-        <view class='avatar'>
-          <image class='avatar-image' src="{{ item.user.avatar }}" />
-          <view class="user-profession">{{item.user.profession}}</view>
-        </view>
+      <view class="left">
+        <image class='avatar' src="{{ item.user.avatar }}" />
+        <view class="profession">{{item.user.profession}}</view>
+      </view>
+      <view class="right">
         <view class="infoBox">
-          <view class="nickName">
-            {{item.user.nickName||item.user.eid}}
+          <view class="top">
+            <view class="nickName"> {{item.user.nickName||item.user.eid}}</view>
+            <view class="state" data-uid='{{item.user.uid}}' data-isEachOther="{{item.isEachOther}}" bindtap="setFans">
+              <view class="stateText already" wx:if="{{currentType==1}}">
+                {{item.isEachOther?'互相关注':'已关注'}}
+              </view>
+              <view class="stateText {{item.isEachOther?'already':'yet'}}" wx:else>
+                {{item.isEachOther?'互相关注':'回关'}}
+              </view>
+            </view>
           </view>
-          <view class="gmtCreated">{{filters.formatDate(item.fans.gmtCreated,4)}}</view>
-        </view>
-      </view>
-      <view class="state" data-uid='{{item.user.uid}}' data-isEachOther="{{item.isEachOther}}" bindtap="setFans">
-        <view class="stateText already" wx:if="{{currentType==1}}">
-          {{item.isEachOther?'互相关注':'已关注'}}
+          <view class="number">学号：{{item.user.eid}}</view>
         </view>
-        <view class="stateText {{item.isEachOther?'already':'yet'}}" wx:else>
-          {{item.isEachOther?'互相关注':'回关'}}
+        <view class="statistics">
+          <view class="type">作品<text>{{filters.numFilter(item.readAmount)}}</text></view>
+          <view class="type">粉丝<text>{{filters.numFilter(item.fansAmount)}}</text></view>
+          <view class="type">播放<text>{{filters.numFilter(item.playAmount)}}</text></view>
         </view>
       </view>
     </view>

pages/friend/index.wxss

@@ -44,72 +44,82 @@
   margin-top: 88rpx;
 }
 .followBox .box .follow {
-  margin-top: 20rpx;
+  margin-top: 30rpx;
   box-sizing: border-box;
   width: 100%;
   background-color: white;
-  border-radius: 10rpx;
-  margin-bottom: 20rpx;
-  padding: 20rpx;
+  border-radius: 20rpx;
+  padding: 20rpx 34rpx 16rpx;
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 8px 0px;
 }
-.followBox .box .follow .userInfo {
-  flex: 1;
+.followBox .box .follow .left {
   display: flex;
+  flex-direction: column;
+  align-items: center;
 }
-.followBox .box .follow .userInfo .avatar {
-  position: relative;
-}
-.followBox .box .follow .userInfo .avatar .avatar-image {
-  width: 96rpx;
-  height: 96rpx;
-  background-color: wheat;
+.followBox .box .follow .left .avatar {
+  width: 106rpx;
+  height: 106rpx;
   border-radius: 50%;
-  border: 4rpx solid #61CA54;
-}
-.followBox .box .follow .userInfo .avatar .user-profession {
-  position: absolute;
-  bottom: -4rpx;
-  left: 17rpx;
-  width: 68rpx;
-  height: 24rpx;
-  background: #61ca54;
-  border-radius: 50rpx;
-  border: 2rpx solid #ffffff;
-  font-size: 16rpx;
-  color: #ffffff;
-  line-height: 24rpx;
-  text-align: center;
 }
-.followBox .box .follow .userInfo .infoBox {
+.followBox .box .follow .left .profession {
+  display: inline-block;
+  margin-top: 4rpx;
+  padding: 4rpx 20rpx;
+  font-size: 24rpx;
+  color: white;
+  background-color: #10CA61;
+  border-radius: 20rpx;
+}
+.followBox .box .follow .right {
+  margin-left: 46rpx;
+  flex: 1;
+}
+.followBox .box .follow .right .infoBox {
+  border-bottom: 1rpx solid #00000020;
+}
+.followBox .box .follow .right .infoBox .top {
   display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-  margin-left: 14rpx;
-  margin-top: 2rpx;
+  align-items: center;
+  justify-content: space-between;
 }
-.followBox .box .follow .userInfo .infoBox .gmtCreated {
-  font-size: 26rpx;
-  color: #888;
+.followBox .box .follow .right .infoBox .top .nickName {
+  font-size: 32rpx;
 }
-.followBox .box .follow .state {
+.followBox .box .follow .right .infoBox .top .state {
   text-align: center;
 }
-.followBox .box .follow .state .stateText {
+.followBox .box .follow .right .infoBox .top .state .stateText {
   width: 160rpx;
-  padding: 16rpx 0rpx;
+  padding: 12rpx 0rpx;
   border-radius: 50rpx;
   font-size: 24rpx;
 }
-.followBox .box .follow .state .already {
+.followBox .box .follow .right .infoBox .top .state .already {
   background-color: #E4EDFB;
 }
-.followBox .box .follow .state .yet {
+.followBox .box .follow .right .infoBox .top .state .yet {
   background-color: #1BC665;
   color: white;
 }
-.followBox .empty {
+.followBox .box .follow .right .infoBox .number {
+  padding-bottom: 14rpx;
+  font-size: 24rpx;
+  color: #00000060;
+}
+.followBox .box .follow .right .statistics {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 12rpx;
+  font-size: 28rpx;
+  color: #00000060;
+}
+.followBox .box .follow .right .statistics text {
+  margin-left: 6rpx;
+}
+.empty {
   margin-top: 200rpx;
 }

pages/otherWork/index.js

@@ -4,7 +4,7 @@ import {
 } from '~/api/works'
 import reachBottom from '~/mixins/reachBottom'
 Page({
-  behaviors: [reachBottom],
+  behaviors: [reachBottom,share],
   data: {
     exampleId: ''
   },

pages/otherWork/index.wxml

@@ -1,3 +1,4 @@
 <view>
   <worksList id="worksList" videoType="follow" worksList="{{list}}" autoPlay='{{false}}' />
+  <canvas id='share' type="2d"> </canvas>
 </view>

pages/searchFriend/index.less

@@ -38,78 +38,93 @@
     margin-top: 100rpx;
 
     .follow {
-      margin: 0rpx 30rpx 20rpx 30rpx;
+      margin-top: 30rpx;
       box-sizing: border-box;
+      width: 100%;
       background-color: white;
-      border-radius: 10rpx;
-      padding: 20rpx;
+      border-radius: 20rpx;
+      padding: 20rpx 34rpx 16rpx;
       display: flex;
       align-items: center;
-      justify-content: space-between;
+      box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 8px 0px;
 
-      .userInfo {
-        flex: 1;
+      .left {
         display: flex;
+        flex-direction: column;
+        align-items: center;
 
         .avatar {
-          position: relative;
-
-          .avatar-image {
-            width: 96rpx;
-            height: 96rpx;
-            background-color: wheat;
-            border-radius: 50%;
-            border: 4rpx solid #61CA54;
-          }
-
-          .user-profession {
-            position: absolute;
-            bottom: -4rpx;
-            left: 17rpx;
-            width: 68rpx;
-            height: 24rpx;
-            background: rgba(97, 202, 84, 1);
-            border-radius: 50rpx;
-            border: 2rpx solid rgba(255, 255, 255, 1);
-            font-size: 16rpx;
-            color: rgba(255, 255, 255, 1);
-            line-height: 24rpx;
-            text-align: center;
-
-          }
+          width: 106rpx;
+          height: 106rpx;
+          border-radius: 50%;
         }
 
-        .infoBox {
-          display: flex;
-          flex-direction: column;
-          justify-content: space-around;
-          margin-left: 14rpx;
-          margin-top: 2rpx;
-
-          .gmtCreated {
-            font-size: 26rpx;
-            color: #888;
-          }
+        .profession {
+          display: inline-block;
+          margin-top: 4rpx;
+          padding: 4rpx 20rpx;
+          font-size: 24rpx;
+          color: white;
+          background-color: #10CA61;
+          border-radius: 20rpx;
         }
       }
 
-      .state {
-        text-align: center;
+      .right {
+        margin-left: 46rpx;
+        flex: 1;
 
-        .stateText {
-          width: 160rpx;
-          padding: 16rpx 0rpx;
-          border-radius: 50rpx;
-          font-size: 24rpx;
-        }
+        .infoBox {
+          border-bottom: 1rpx solid #00000020;
+
+          .top {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+
+            .nickName {
+              font-size: 32rpx;
+            }
+
+            .state {
+              text-align: center;
+
+              .stateText {
+                width: 160rpx;
+                padding: 12rpx 0rpx;
+                border-radius: 50rpx;
+                font-size: 24rpx;
+              }
+
+              .already {
+                background-color: #E4EDFB;
+              }
+
+              .yet {
+                background-color: #1BC665;
+                color: white;
+              }
+            }
+          }
 
-        .already {
-          background-color: #E4EDFB;
+          .number {
+            padding-bottom: 14rpx;
+            font-size: 24rpx;
+            color: #00000060;
+          }
         }
 
-        .yet {
-          background-color: #1BC665;
-          color: white;
+        .statistics {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding-top: 12rpx;
+          font-size: 28rpx;
+          color: #00000060;
+
+          text {
+            margin-left: 6rpx;
+          }
         }
       }
     }

pages/searchFriend/index.wxml

@@ -7,27 +7,29 @@
   </view>
   <view class="box">
     <view class="follow" wx:for="{{list}}" wx:key="index" data-uid='{{item.uid}}' bindtap="setFans">
-      <view class="userInfo" bindtap="jumpUserInfo" data-uid='{{item.uid}}'>
-        <view class='avatar'>
-          <image class='avatar-image' src="{{ item.avatar }}" />
-          <view class="user-profession">{{item.profession}}</view>
-        </view>
+      <view class="left">
+        <image class='avatar' src="{{ item.avatar }}" />
+        <view class="profession">{{item.profession}}</view>
+      </view>
+      <view class="right">
         <view class="infoBox">
-          <view class="nickName">
-            {{item.nickName||item.eid}}
+          <view class="top">
+            <view class="nickName"> {{item.nickName||item.eid}}</view>
+            <view class="state" data-uid='{{item.uid}}' data-isEachOther="{{item.isEachOther}}" bindtap="setFans">
+              <view class="stateText already" wx:if="{{currentType==1}}">
+                {{item.isEachOther?'互相关注':'已关注'}}
+              </view>
+              <view class="stateText {{item.isEachOther?'already':'yet'}}" wx:else>
+                {{item.isEachOther?'互相关注':'回关'}}
+              </view>
+            </view>
           </view>
-          <view class="gmtCreated">{{filters.formatDate(item.gmtCreated,4)}}</view>
-        </view>
-      </view>
-      <view class="state">
-        <!-- <view class="stateText {{item.isEachOther?'already':'yet'}}">
-          {{item.isEachOther&&item.isFans?'互相关注':item.isEachOther&&!item.isFans?'已关注':item.isEachOther&&item.isFans?'':''}}
-        </view> -->
-        <view class="stateText already" wx:if="{{item.isEachOther}}">
-          {{item.isFans?'互相关注':'已关注'}}
+          <view class="number">学号：{{item.eid}}</view>
         </view>
-        <view class="stateText yet" wx:else>
-          {{item.isFans?'回关':'关注'}}
+        <view class="statistics">
+          <view class="type">作品<text>{{filters.numFilter(item.readAmount)}}</text></view>
+          <view class="type">粉丝<text>{{filters.numFilter(item.fansAmount)}}</text></view>
+          <view class="type">播放<text>{{filters.numFilter(item.playAmount)}}</text></view>
         </view>
       </view>
     </view>

pages/searchFriend/index.wxss

@@ -32,70 +32,82 @@
   margin-top: 100rpx;
 }
 .searchFriend .box .follow {
-  margin: 0rpx 30rpx 20rpx 30rpx;
+  margin-top: 30rpx;
   box-sizing: border-box;
+  width: 100%;
   background-color: white;
-  border-radius: 10rpx;
-  padding: 20rpx;
+  border-radius: 20rpx;
+  padding: 20rpx 34rpx 16rpx;
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 8px 0px;
 }
-.searchFriend .box .follow .userInfo {
-  flex: 1;
+.searchFriend .box .follow .left {
   display: flex;
+  flex-direction: column;
+  align-items: center;
 }
-.searchFriend .box .follow .userInfo .avatar {
-  position: relative;
-}
-.searchFriend .box .follow .userInfo .avatar .avatar-image {
-  width: 96rpx;
-  height: 96rpx;
-  background-color: wheat;
+.searchFriend .box .follow .left .avatar {
+  width: 106rpx;
+  height: 106rpx;
   border-radius: 50%;
-  border: 4rpx solid #61CA54;
 }
-.searchFriend .box .follow .userInfo .avatar .user-profession {
-  position: absolute;
-  bottom: -4rpx;
-  left: 17rpx;
-  width: 68rpx;
-  height: 24rpx;
-  background: #61ca54;
-  border-radius: 50rpx;
-  border: 2rpx solid #ffffff;
-  font-size: 16rpx;
-  color: #ffffff;
-  line-height: 24rpx;
-  text-align: center;
+.searchFriend .box .follow .left .profession {
+  display: inline-block;
+  margin-top: 4rpx;
+  padding: 4rpx 20rpx;
+  font-size: 24rpx;
+  color: white;
+  background-color: #10CA61;
+  border-radius: 20rpx;
 }
-.searchFriend .box .follow .userInfo .infoBox {
+.searchFriend .box .follow .right {
+  margin-left: 46rpx;
+  flex: 1;
+}
+.searchFriend .box .follow .right .infoBox {
+  border-bottom: 1rpx solid #00000020;
+}
+.searchFriend .box .follow .right .infoBox .top {
   display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-  margin-left: 14rpx;
-  margin-top: 2rpx;
+  align-items: center;
+  justify-content: space-between;
 }
-.searchFriend .box .follow .userInfo .infoBox .gmtCreated {
-  font-size: 26rpx;
-  color: #888;
+.searchFriend .box .follow .right .infoBox .top .nickName {
+  font-size: 32rpx;
 }
-.searchFriend .box .follow .state {
+.searchFriend .box .follow .right .infoBox .top .state {
   text-align: center;
 }
-.searchFriend .box .follow .state .stateText {
+.searchFriend .box .follow .right .infoBox .top .state .stateText {
   width: 160rpx;
-  padding: 16rpx 0rpx;
+  padding: 12rpx 0rpx;
   border-radius: 50rpx;
   font-size: 24rpx;
 }
-.searchFriend .box .follow .state .already {
+.searchFriend .box .follow .right .infoBox .top .state .already {
   background-color: #E4EDFB;
 }
-.searchFriend .box .follow .state .yet {
+.searchFriend .box .follow .right .infoBox .top .state .yet {
   background-color: #1BC665;
   color: white;
 }
+.searchFriend .box .follow .right .infoBox .number {
+  padding-bottom: 14rpx;
+  font-size: 24rpx;
+  color: #00000060;
+}
+.searchFriend .box .follow .right .statistics {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 12rpx;
+  font-size: 28rpx;
+  color: #00000060;
+}
+.searchFriend .box .follow .right .statistics text {
+  margin-left: 6rpx;
+}
 .searchFriend .empty {
   margin-top: 200rpx;
 }

utils/filter.wxs

@@ -52,7 +52,10 @@ function gradeFilter(grade) {
 }
 // 数字满万补w
 function numFilter(num) {
-  if (!num || num < 10000) {
+  if (!num) {
+    return 0
+  }
+  if (num < 10000) {
     return num
   }
   return Math.floor(num / 100) / 100 + 'w'