开发我的关注页面

api/user.js

@@ -17,4 +17,6 @@ module.exports = {
   getSelfRead: data => request('/userRead/my', 'get', data),
   //获取其他用户朗读的作品
   getUserRead: data => request('/userRead', 'get', data),
+  // 获取用户关注列表
+  getFansList: data => request('/fans', 'get', data),
 }

app.json

@@ -1,7 +1,8 @@
 {
   "pages": [
-    "pages/userWorks/index",
+    "pages/follow/index",
     "pages/my/index",
+    "pages/userWorks/index",
     "pages/logs/logs",
     "pages/index/index"
   ],

components/comment/index.js

@@ -25,13 +25,28 @@ Component({
     postIndex: '',
     ifGetFocus: false,
     replyType: 'works', // 回复类型，works是回复作品，comment是回复评论
+    animation: {}
   },
   methods: {
     open(columnId) {
+      // 背景遮罩层
+      var animation = wx.createAnimation({
+        duration: 300,
+        timingFunction: "linear",
+        delay: 0
+      })
+      animation.translateY(1000).step()
       this.setData({
-        show: true,
+        animationData: animation.export(),
         columnId,
+        show: true,
       })
+      setTimeout(() => {
+        animation.translateY(0).step()
+        this.setData({
+          animationData: animation.export()
+        })
+      }, 100)
       this.getComment()
     },
     close() {

components/comment/index.less

@@ -24,7 +24,7 @@
     flex-direction: column;
     justify-content: space-between;
     width: 100%;
-    height: 850rpx;
+    height: 900rpx;
     background-color: white;
     border-top-left-radius: 25rpx;
     border-top-right-radius: 25rpx;

components/comment/index.wxml

@@ -1,7 +1,7 @@
 <wxs src="../../utils/filter.wxs" module="filters" />
 <view class="commentBox" wx:if="{{show}}">
-  <view class="commentBg" catchtap="close"></view>
-  <view class="comment">
+  <view class="commentBg" catchtap="close" catchtouchmove="true"></view>
+  <view class="comment" animation="{{animationData}}">
     <view class="header">
       <view class="hl">评论 {{totalSize}}</view>
       <view class="hr" catchtap="close">×</view>
@@ -40,8 +40,8 @@
       </view>
     </view>
     <view class="footer">
-      <input class="input" bindinput="bindKeyInput" value="{{detailDesc}}" placeholder="留下你的赞美"
-        focus="{{ifGetFocus}}"/>
+      <input class="input" bindinput="bindKeyInput" value="{{detailDesc}}" placeholder="留下你的赞美，鼓励一下"
+        focus="{{ifGetFocus}}" />
       <view class="submit" bindtap="sendReply">发送</view>
     </view>
   </view>

components/comment/index.wxss

@@ -23,7 +23,7 @@
   flex-direction: column;
   justify-content: space-between;
   width: 100%;
-  height: 850rpx;
+  height: 900rpx;
   background-color: white;
   border-top-left-radius: 25rpx;
   border-top-right-radius: 25rpx;

components/empty/index.wxml

@@ -1,4 +1,4 @@
 <view class="empty">
-    <image src="/static/image/null.png" class="nullImg" mode="" />
+    <image src="/static/null.png" class="nullImg" mode="" />
     <view class="message">{{message}}</view>
 </view>

pages/follow/index.js

@@ -0,0 +1,40 @@
+import {
+  getFansList
+} from '~/api/user'
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    list: [],
+    pageNo:1,
+    totalSize: 0
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+    this.getFansList()
+  },
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+  async getFansList() {
+    let {
+      list,
+      totalSize
+    } = await getFansList({
+      pageNo: 1,
+      pageSize: 20
+    })
+    this.setData({
+      list,
+      totalSize
+    })
+  }
+})

pages/follow/index.json

@@ -0,0 +1,6 @@
+{
+  "usingComponents": {
+    "emptyBg": "/components/empty/index"
+  },
+  "navigationBarTitleText": "我的关注"
+}

pages/follow/index.less

@@ -0,0 +1,66 @@
+.followBox {
+    padding: 0rpx 20rpx 20rpx;
+
+    .follow {
+        box-sizing: border-box;
+        width: 100%;
+        background-color: white;
+        border-radius: 10rpx;
+        margin-bottom: 20rpx;
+        padding: 20rpx;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .userInfo {
+            display: flex;
+
+            .avatar {
+                position: relative;
+
+                .avatar-image {
+                    width: 96rpx;
+                    height: 96rpx;
+                    background-color: wheat;
+                    border-radius: 50%;
+                    border: 4rpx solid #61CA54;
+                }
+
+                .user-profession {
+                    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;
+                    position: absolute;
+                    bottom: -4rpx;
+                    left: 17rpx;
+                }
+            }
+
+            .nickName {
+                margin-left: 14rpx;
+                margin-top: 2rpx;
+            }
+        }
+
+        .state {
+            padding: 0rpx 30rpx;
+            text-align: center;
+
+            .stateImg {
+                width: 46rpx;
+                height: 40rpx;
+            }
+
+            .stateText {
+                color: #686868;
+                font-size: 20rpx;
+            }
+        }
+    }
+}

pages/follow/index.wxml

@@ -0,0 +1,18 @@
+<view class="followBox">
+    <view class="follow" wx:for="{{ list }}" wx:key="*this">
+        <view class="userInfo">
+            <view class='avatar'>
+                <image class='avatar-image' src="{{ item.user.avatar }}" />
+                <view class="user-profession">{{item.user.profession}}</view>
+            </view>
+            <view class="nickName">
+                {{item.user.nickName||item.user.eid}}
+            </view>
+        </view>
+        <view class="state">
+            <image class='stateImg' src="{{item.isEachOther?'/static/concernback.png':'/static/concerned.png'}}" />
+            <view class="stateText">{{ item.isEachOther?'互相关注':'已关注' }}</view>
+        </view>
+    </view>
+    <emptyBg wx:if="{{list.length==0}}" message='您还没有关注哦'></emptyBg>
+</view>

pages/follow/index.wxss

@@ -0,0 +1,57 @@
+.followBox {
+  padding: 0rpx 20rpx 20rpx;
+}
+.followBox .follow {
+  box-sizing: border-box;
+  width: 100%;
+  background-color: white;
+  border-radius: 10rpx;
+  margin-bottom: 20rpx;
+  padding: 20rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.followBox .follow .userInfo {
+  display: flex;
+}
+.followBox .follow .userInfo .avatar {
+  position: relative;
+}
+.followBox .follow .userInfo .avatar .avatar-image {
+  width: 96rpx;
+  height: 96rpx;
+  background-color: wheat;
+  border-radius: 50%;
+  border: 4rpx solid #61CA54;
+}
+.followBox .follow .userInfo .avatar .user-profession {
+  width: 68rpx;
+  height: 24rpx;
+  background: #61ca54;
+  border-radius: 50rpx;
+  border: 2rpx solid #ffffff;
+  font-size: 16rpx;
+  color: #ffffff;
+  line-height: 24rpx;
+  text-align: center;
+  position: absolute;
+  bottom: -4rpx;
+  left: 17rpx;
+}
+.followBox .follow .userInfo .nickName {
+  margin-left: 14rpx;
+  margin-top: 2rpx;
+}
+.followBox .follow .state {
+  padding: 0rpx 30rpx;
+  text-align: center;
+}
+.followBox .follow .state .stateImg {
+  width: 46rpx;
+  height: 40rpx;
+}
+.followBox .follow .state .stateText {
+  color: #686868;
+  font-size: 20rpx;
+}

pages/my/index.wxml

@@ -30,7 +30,7 @@
   </view>
   <!-- ios会员展示到期时间 -->
   <view class="iosVip" wx:if="{{isIos&&vipTime}}">
-    会员至：{{filters.formatDate(vipTime)}}
+    会员至：{{filters.formatDate(vipTime,4)}}
   </view>
   <!-- 跳转菜单 -->
   <view class="sectionBoxs">
@@ -38,7 +38,7 @@
       <image class="img" src="/static/work.png" mode="" />
       <text class="title">我的作品</text>
     </view>
-    <view class="sBox" bindtap='jump' data-url="/pages/myconcern/myconcern?title=我的关注">
+    <view class="sBox" bindtap='jump' data-url="/pages/follow/index">
       <image class="img" src="/static/concern.png" mode="" />
       <text class="title">我的关注</text>
     </view>

utils/filter.wxs

@@ -7,7 +7,9 @@ var formatNumber = function (n) {
  */
 //时间戳转时间
 function formatDate(time, flag) {
+  var time = time * 1
   var t = getDate(time);
+  console.log(t, time, 'zzz');
   var tf = function (i) {
     return (i < 10 ? '0' : '') + i
   };
@@ -19,7 +21,6 @@ function formatDate(time, flag) {
   if (flag == 1) {
     return month + '月' + day + '日' + ' ' + hour + ':' + minute;
   } else if (flag == 2) {
-    console.log(year, month, day)
     return year + '-' + month + '-' + day
   } else if (flag == 3) {
     return month + '-' + day + ' ' + hour + ':' + minute;