全局替换新用户信息

components/videoPreview/index.less

@@ -89,7 +89,8 @@
 
       .isFans {
         border: 1rpx solid #969696;
-        color: #969696;
+        background-color: #E2ECFB;
+        color: #333;
       }
 
       .pkNum {

components/videoPreview/index.wxml

@@ -30,7 +30,7 @@
     </view>
     <view class="wH-right" wx:elif="{{videoType=='public'&&!selfWork}}">
       <view class="follow {{videoInfoCopy.isFans?'isFans':''}}" bindtap="setFans">
-        <image src="{{videoInfoCopy.isFans?'/static/follow_2.png':'/static/follow_1.png'}}" class="character" mode="" />
+        <image src="{{videoInfoCopy.isFans?'/static/follow_2.png':'/static/follow_3.png'}}" class="character" mode="" />
         <text class="text">{{videoInfoCopy.isFans?'已关注':'关注'}}</text>
       </view>
     </view>

components/videoPreview/index.wxss

@@ -78,7 +78,8 @@
 }
 .work .workHead .wH-right .isFans {
   border: 1rpx solid #969696;
-  color: #969696;
+  background-color: #E2ECFB;
+  color: #333;
 }
 .work .workHead .wH-right .pkNum {
   color: #30C866;

pages/friend/index.js

@@ -87,6 +87,19 @@ Page({
       url: '/pages/searchFriend/index',
     })
   },
+  clipboar({
+    currentTarget
+  }) {
+    wx.setClipboardData({
+      data: currentTarget.dataset.eid,
+      success: function (res) { //成功回调函数
+        wx.showToast({
+          title: '已复制',
+          icon: "none"
+        })
+      }
+    })
+  },
   onReachBottom() {
     this.loadMore()
   },

pages/friend/index.less

@@ -48,6 +48,152 @@
     padding-bottom: 20rpx;
     margin-top: 88rpx;
 
+    .userBox {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      padding: 16rpx 24rpx 24rpx;
+      border-radius: 20rpx;
+      box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
+      background-color: white;
+
+      .identity {
+        position: relative;
+        text-align: center;
+
+        .avatar {
+          width: 106rpx;
+          height: 106rpx;
+          border-radius: 50%;
+          position: relative;
+          background-color: #e4e1e1;
+        }
+
+        .identityText {
+          position: absolute;
+          top: 86rpx;
+          left: 0rpx;
+          right: 0rpx;
+          margin: auto;
+          width: 80rpx;
+          margin-top: 6rpx;
+          font-size: 24rpx;
+          color: white;
+          background-color: #10CA61;
+          border-radius: 25rpx;
+        }
+      }
+
+      .userRight {
+        flex: 1;
+        margin-left: 30rpx;
+
+        .topBox {
+          .row {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+
+            .nickName {
+              width: 200rpx;
+              color: #333;
+              font-size: 32rpx;
+            }
+
+            .gradeText {
+              margin: 18rpx 0rpx 12rpx;
+              font-size: 24rpx;
+              color: rgba(0, 0, 0, 0.6);
+
+              .copy {
+                width: 22rpx;
+                height: 22rpx;
+              }
+            }
+
+            .count {
+              margin-top: 10rpx;
+              flex: 1;
+              font-size: 24rpx;
+              color: rgba(0, 0, 0, 0.6);
+              text-align: left;
+
+              .countNum {
+                margin-left: 10rpx;
+              }
+            }
+
+
+
+            .countEnd {
+              text-align: right;
+              border: none;
+            }
+          }
+        }
+
+        .btmBox {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          margin-top: 30rpx;
+
+          .state {
+            text-align: center;
+
+            .character {
+              width: 24rpx;
+              height: 24rpx;
+              margin-right: 6rpx;
+            }
+
+            .stateText {
+              width: 200rpx;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              padding: 12rpx 0rpx;
+              border-radius: 50rpx;
+              font-size: 24rpx;
+            }
+
+            .already {
+              background-color: #E4EDFB;
+            }
+
+            .yet {
+              background-color: #1BC665;
+              color: white;
+            }
+          }
+
+          .follow {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 200rpx;
+            height: 52rpx;
+            font-size: 24rpx;
+            border-radius: 50rpx;
+            background-color: #10CA61;
+            color: white;
+
+            .character {
+              width: 24rpx;
+              height: 24rpx;
+              margin-right: 6rpx;
+            }
+          }
+
+          .isFans {
+            background-color: #E2ECFB;
+            color: #333;
+          }
+        }
+      }
+    }
+
+    /* 
     .follow {
       margin-top: 30rpx;
       box-sizing: border-box;
@@ -138,7 +284,7 @@
           }
         }
       }
-    }
+    } */
   }
 }
 

pages/friend/index.wxml

@@ -10,30 +10,46 @@
     </view>
   </view>
   <view class="box">
-    <view class="follow" wx:for="{{list}}" wx:key="index" bindtap="jumpUserInfo" data-uid='{{item.user.uid}}'>
-      <view class="left">
-        <image class='avatar' src="{{ item.user.avatar }}" />
-        <view class="profession">{{item.user.profession}}</view>
+    <view class="userBox" wx:for="{{list}}" wx:key="index" bindtap="jumpitem" data-uid='{{item.user.uid}}'>
+      <view class="identity">
+        <image class='avatar' src='{{ item.user.avatar}}'></image>
+        <view class="identityText">{{item.user.profession}}</view>
       </view>
-      <view class="right">
-        <view class="infoBox">
-          <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}}" catchtap="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 class="userRight">
+        <view class="topBox">
+          <view class="row">
+            <view class="nickName textOver">{{item.user.nickName||item.user.eid }}</view>
+            <view class="gradeText textOver" data-eid="{{item.user.eid}}" catchtap="clipboar">学号：{{item.user.eid}}
+              <image src="/static/copy.png" class="copy" />
+            </view>
+          </view>
+          <view class="row">
+            <view class="count">
+              粉丝<text class="countNum textOver">{{filters.numFilter(item.fansAmount)|| '0'}}</text>
+            </view>
+            <view class="count">
+              作品<text class="countNum textOver">{{filters.numFilter(item.readAmount)|| 0}}</text>
+            </view>
+            <view class="count countEnd">
+              播放<text class="countNum textOver">{{filters.numFilter(item.playAmount) || 0}}</text>
             </view>
           </view>
-          <view class="number">学号：{{item.user.eid}}</view>
         </view>
-        <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 class="btmBox">
+          <view class="state" data-uid='{{item.user.uid}}' data-isEachOther="{{item.isEachOther}}" catchtap="setFans">
+            <view class="stateText already" wx:if="{{currentType==1}}">
+              <image src="/static/follow_2.png" class="character" wx:if="{{item.isEachOther}}" />
+              {{item.isEachOther?'互相关注':'已关注'}}
+            </view>
+            <view class="stateText {{item.isEachOther?'already':'yet'}}" wx:else>
+              <image src="/static/follow_2.png" class="character" wx:if="{{item.isEachOther}}" />
+              {{item.isEachOther?'互相关注':'回关'}}
+            </view>
+          </view>
+          <view class="follow isFans" bindtap="setFans">
+            <image src="/static/sx.png" class="character" />
+            <text>发私信</text>
+          </view>
         </view>
       </view>
     </view>

pages/friend/index.wxss

@@ -42,83 +42,218 @@
 .followBox .box {
   padding-bottom: 20rpx;
   margin-top: 88rpx;
+  /* 
+    .follow {
+      margin-top: 30rpx;
+      box-sizing: border-box;
+      width: 100%;
+      background-color: white;
+      border-radius: 20rpx;
+      padding: 20rpx 34rpx 16rpx;
+      display: flex;
+      align-items: center;
+      box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 8px 0px;
+
+      .left {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .avatar {
+          width: 106rpx;
+          height: 106rpx;
+          border-radius: 50%;
+        }
+
+        .profession {
+          display: inline-block;
+          margin-top: 4rpx;
+          padding: 4rpx 20rpx;
+          font-size: 24rpx;
+          color: white;
+          background-color: #10CA61;
+          border-radius: 20rpx;
+        }
+      }
+
+      .right {
+        margin-left: 46rpx;
+        flex: 1;
+
+        .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;
+              }
+            }
+          }
+
+          .number {
+            padding-bottom: 14rpx;
+            font-size: 24rpx;
+            color: #00000060;
+          }
+        }
+
+        .statistics {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding-top: 12rpx;
+          font-size: 28rpx;
+          color: #00000060;
+
+          text {
+            margin-left: 6rpx;
+          }
+        }
+      }
+    } */
 }
-.followBox .box .follow {
-  margin-top: 30rpx;
-  box-sizing: border-box;
-  width: 100%;
-  background-color: white;
-  border-radius: 20rpx;
-  padding: 20rpx 34rpx 16rpx;
+.followBox .box .userBox {
   display: flex;
-  align-items: center;
-  box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 8px 0px;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: 16rpx 24rpx 24rpx;
+  border-radius: 20rpx;
+  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
+  background-color: white;
 }
-.followBox .box .follow .left {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+.followBox .box .userBox .identity {
+  position: relative;
+  text-align: center;
 }
-.followBox .box .follow .left .avatar {
+.followBox .box .userBox .identity .avatar {
   width: 106rpx;
   height: 106rpx;
   border-radius: 50%;
+  position: relative;
+  background-color: #e4e1e1;
 }
-.followBox .box .follow .left .profession {
-  display: inline-block;
-  margin-top: 4rpx;
-  padding: 4rpx 20rpx;
+.followBox .box .userBox .identity .identityText {
+  position: absolute;
+  top: 86rpx;
+  left: 0rpx;
+  right: 0rpx;
+  margin: auto;
+  width: 80rpx;
+  margin-top: 6rpx;
   font-size: 24rpx;
   color: white;
   background-color: #10CA61;
-  border-radius: 20rpx;
+  border-radius: 25rpx;
 }
-.followBox .box .follow .right {
-  margin-left: 46rpx;
+.followBox .box .userBox .userRight {
   flex: 1;
+  margin-left: 30rpx;
 }
-.followBox .box .follow .right .infoBox {
-  border-bottom: 1rpx solid #00000020;
-}
-.followBox .box .follow .right .infoBox .top {
+.followBox .box .userBox .userRight .topBox .row {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
-.followBox .box .follow .right .infoBox .top .nickName {
+.followBox .box .userBox .userRight .topBox .row .nickName {
+  width: 200rpx;
+  color: #333;
   font-size: 32rpx;
 }
-.followBox .box .follow .right .infoBox .top .state {
+.followBox .box .userBox .userRight .topBox .row .gradeText {
+  margin: 18rpx 0rpx 12rpx;
+  font-size: 24rpx;
+  color: rgba(0, 0, 0, 0.6);
+}
+.followBox .box .userBox .userRight .topBox .row .gradeText .copy {
+  width: 22rpx;
+  height: 22rpx;
+}
+.followBox .box .userBox .userRight .topBox .row .count {
+  margin-top: 10rpx;
+  flex: 1;
+  font-size: 24rpx;
+  color: rgba(0, 0, 0, 0.6);
+  text-align: left;
+}
+.followBox .box .userBox .userRight .topBox .row .count .countNum {
+  margin-left: 10rpx;
+}
+.followBox .box .userBox .userRight .topBox .row .countEnd {
+  text-align: right;
+  border: none;
+}
+.followBox .box .userBox .userRight .btmBox {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 30rpx;
+}
+.followBox .box .userBox .userRight .btmBox .state {
   text-align: center;
 }
-.followBox .box .follow .right .infoBox .top .state .stateText {
-  width: 160rpx;
+.followBox .box .userBox .userRight .btmBox .state .character {
+  width: 24rpx;
+  height: 24rpx;
+  margin-right: 6rpx;
+}
+.followBox .box .userBox .userRight .btmBox .state .stateText {
+  width: 200rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   padding: 12rpx 0rpx;
   border-radius: 50rpx;
   font-size: 24rpx;
 }
-.followBox .box .follow .right .infoBox .top .state .already {
+.followBox .box .userBox .userRight .btmBox .state .already {
   background-color: #E4EDFB;
 }
-.followBox .box .follow .right .infoBox .top .state .yet {
+.followBox .box .userBox .userRight .btmBox .state .yet {
   background-color: #1BC665;
   color: white;
 }
-.followBox .box .follow .right .infoBox .number {
-  padding-bottom: 14rpx;
-  font-size: 24rpx;
-  color: #00000060;
-}
-.followBox .box .follow .right .statistics {
+.followBox .box .userBox .userRight .btmBox .follow {
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  padding-top: 12rpx;
-  font-size: 28rpx;
-  color: #00000060;
+  justify-content: center;
+  width: 200rpx;
+  height: 52rpx;
+  font-size: 24rpx;
+  border-radius: 50rpx;
+  background-color: #10CA61;
+  color: white;
 }
-.followBox .box .follow .right .statistics text {
-  margin-left: 6rpx;
+.followBox .box .userBox .userRight .btmBox .follow .character {
+  width: 24rpx;
+  height: 24rpx;
+  margin-right: 6rpx;
+}
+.followBox .box .userBox .userRight .btmBox .isFans {
+  background-color: #E2ECFB;
+  color: #333;
 }
 .empty {
   margin-top: 200rpx;

pages/personal/index.wxml

@@ -41,10 +41,10 @@
       </view>
       <view class="btmBox">
         <view class="follow {{userInfo.like?'isFans':''}}" bindtap="setFans">
-          <image src="{{userInfo.like?'/static/follow_2.png':'/static/follow_1.png'}}" class="character" />
+          <image src="/static/follow_2.png" wx:if="{{userInfo.like}}" class="character" />
           <text>{{userInfo.like?'已关注':'关注'}}</text>
         </view>
-        <view class="follow {{userInfo.like?'isFans':''}}" bindtap="setFans">
+        <view class="follow isFans" bindtap="setFans">
           <image src="/static/sx.png" class="character" />
           <text>发私信</text>
         </view>