开发消息页面

pages/message/index.js

@@ -127,6 +127,7 @@ Page({
     wx.navigateTo({
       url: `/pages/${currentTarget.dataset.url}/index`,
     })
+    
   },
   jumpChat({
     currentTarget

pages/message/index.less

@@ -1,178 +1,192 @@
 @import "./index.skeleton.wxss";
 
 page {
-  background-color: white;
+    background-color: white;
 }
 
 .messagePage {
-  overflow: hidden;
-  border-top-left-radius: 24rpx;
-  border-top-right-radius: 24rpx;
-  background-color: white;
-
-
-  .input {
-    background-color: #F2F6FC;
-    font-size: 28rpx;
-    margin: 20rpx 30rpx 10rpx;
-    padding: 20rpx 40rpx;
-    border-radius: 26rpx;
-  }
-
-  .messageList {
-    padding: 0rpx 36rpx 250rpx;
-    box-sizing: border-box;
-
-    .fixed {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 20rpx 0rpx;
-      border-bottom: 1rpx solid #D8D8D8;
-
-      .authority {
-        position: relative;
-        display: flex;
-        align-items: center;
-
-        .avatar {
-          border-radius: 50rpx;
-          width: 80rpx;
-          height: 80rpx;
-          margin-right: 14rpx;
-        }
+    overflow: hidden;
+    border-top-left-radius: 24rpx;
+    border-top-right-radius: 24rpx;
+    background-color: white;
 
-        .name {
-          font-size: 30rpx;
-        }
 
-        .unread {
-          top: -4rpx;
-          left: 60rpx;
-          position: absolute;
-          width: 32rpx;
-          height: 32rpx;
-          line-height: 32rpx;
-          border-radius: 550rpx;
-          color: white;
-          font-size: 20rpx;
-          text-align: center;
-          background-color: #FF0000;
+    .input {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        background-color: #F2F6FC;
+        font-size: 28rpx;
+        margin: 20rpx 30rpx 10rpx;
+        padding: 20rpx 40rpx;
+        border-radius: 26rpx;
+
+        .searchBtn {
+            padding: 6rpx 44rpx;
+            background: #00C657;
+            border-radius: 40rpx;
+
+            .img {
+                width: 24rpx;
+                height: 24rpx;
+            }
         }
-      }
     }
 
-    .base {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 20rpx 0rpx 20rpx 20rpx;
-      border-bottom: 1rpx solid #D8D8D8;
-
-      .avatar {
-        border-radius: 50rpx;
-        width: 80rpx;
-        height: 80rpx;
-        background-color: #EEEEEE;
-      }
-
-      .body {
-        flex: 1;
-        padding: 0rpx 20rpx;
-
-        .name {
-          max-width: 330rpx;
-          font-size: 30rpx;
-          font-weight: bolder;
+    .messageList {
+        padding: 0rpx 36rpx 250rpx;
+        box-sizing: border-box;
+
+        .fixed {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 20rpx 0rpx;
+            border-bottom: 1rpx solid #D8D8D8;
+
+            .authority {
+                position: relative;
+                display: flex;
+                align-items: center;
+
+                .avatar {
+                    border-radius: 50rpx;
+                    width: 80rpx;
+                    height: 80rpx;
+                    margin-right: 14rpx;
+                }
+
+                .name {
+                    font-size: 30rpx;
+                }
+
+                .unread {
+                    top: -4rpx;
+                    left: 60rpx;
+                    position: absolute;
+                    width: 32rpx;
+                    height: 32rpx;
+                    line-height: 32rpx;
+                    border-radius: 550rpx;
+                    color: white;
+                    font-size: 20rpx;
+                    text-align: center;
+                    background-color: #FF0000;
+                }
+            }
         }
-      }
-
-      .right {
-        min-width: 140rpx;
-        display: flex;
-        flex-direction: column;
-        align-items: flex-end;
 
-        .date {
-          font-size: 24rpx;
+        .base {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 20rpx 0rpx 20rpx 20rpx;
+            border-bottom: 1rpx solid #D8D8D8;
+
+            .avatar {
+                border-radius: 50rpx;
+                width: 80rpx;
+                height: 80rpx;
+                background-color: #EEEEEE;
+            }
+
+            .body {
+                flex: 1;
+                padding: 0rpx 20rpx;
+
+                .name {
+                    max-width: 330rpx;
+                    font-size: 30rpx;
+                    font-weight: bolder;
+                }
+            }
+
+            .right {
+                min-width: 140rpx;
+                display: flex;
+                flex-direction: column;
+                align-items: flex-end;
+
+                .date {
+                    font-size: 24rpx;
+                }
+
+                .unread {
+                    margin-top: 6rpx;
+                    width: 32rpx;
+                    height: 32rpx;
+                    line-height: 32rpx;
+                    border-radius: 550rpx;
+                    color: white;
+                    font-size: 20rpx;
+                    text-align: center;
+                    background-color: #FF0000;
+                }
+            }
         }
 
-        .unread {
-          margin-top: 6rpx;
-          width: 32rpx;
-          height: 32rpx;
-          line-height: 32rpx;
-          border-radius: 550rpx;
-          color: white;
-          font-size: 20rpx;
-          text-align: center;
-          background-color: #FF0000;
+        .user {
+            .info {
+                margin-top: 4rpx;
+                width: 400rpx;
+                color: #969696;
+                font-size: 24rpx;
+            }
         }
-      }
-    }
 
-    .user {
-      .info {
-        margin-top: 4rpx;
-        width: 400rpx;
-        color: #969696;
-        font-size: 24rpx;
-      }
+        .pressHover {
+            background-color: #f1f1f1;
+        }
     }
 
-    .pressHover {
-      background-color: #f1f1f1;
+    .menuBg {
+        position: fixed;
+        top: 0px;
+        left: 0px;
+        width: 100vw;
+        height: 100vh;
     }
-  }
-
-  .menuBg {
-    position: fixed;
-    top: 0px;
-    left: 0px;
-    width: 100vw;
-    height: 100vh;
-  }
-
-  .menu {
-    position: fixed;
-    width: 278rpx;
-    // height: 180rpx;
-    padding: 20rpx 20rpx;
-    box-sizing: border-box;
-    border-radius: 24rpx;
-    background-color: white;
-    box-shadow: rgba(0, 0, 0, 0.24) 0px 6rpx 16rpx;
 
-    view {
-      height: 50%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
+    .menu {
+        position: fixed;
+        width: 278rpx;
+        // height: 180rpx;
+        padding: 20rpx 20rpx;
+        box-sizing: border-box;
+        border-radius: 24rpx;
+        background-color: white;
+        box-shadow: rgba(0, 0, 0, 0.24) 0px 6rpx 16rpx;
+
+        view {
+            height: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
 
-    .icon {
-      width: 30rpx;
-      height: 30rpx;
-      margin-right: 16rpx;
-    }
+        .icon {
+            width: 30rpx;
+            height: 30rpx;
+            margin-right: 16rpx;
+        }
 
-    .menu-one {
-      // border-bottom: 1rpx solid #D8D8D8;
+        .menu-one {
+            // border-bottom: 1rpx solid #D8D8D8;
 
-      .icon {
-        width: 22rpx;
-        height: 28rpx;
-      }
+            .icon {
+                width: 22rpx;
+                height: 28rpx;
+            }
+        }
     }
-  }
 
-  .skeleton {
-    width: 100%;
-    height: 80vh;
-    position: relative;
+    .skeleton {
+        width: 100%;
+        height: 80vh;
+        position: relative;
 
-    .messageList {
-      padding: 0rpx;
+        .messageList {
+            padding: 0rpx;
+        }
     }
-  }
 }

pages/message/index.wxml

@@ -2,70 +2,78 @@
 <navigationBar></navigationBar>
 <import src="./index.skeleton" />
 <view class="messagePage">
-  <view class="input" bindtap="setSearch">
-    查找昵称/学号/手机号
-  </view>
-  <view class="messageList">
-    <view class="fixed">
-      <view class="authority" bindtap="jump" data-url='like'>
-        <image src="/static/zan.png" class="avatar" />
-        <view class="name">赞</view>
-        <view class="unread" wx:if="{{authorityMsg.likeCount>0}}">{{authorityMsg.likeCount}}</view>
-      </view>
-      <view class="authority" bindtap="jump" data-url='comment'>
-        <image src="/static/message3.png" class="avatar" />
-        <view class="name">评论</view>
-        <view class="unread" wx:if="{{authorityMsg.postsCount>0}}">{{authorityMsg.postsCount}}</view>
-      </view>
-      <view class="authority" bindtap="jump" data-url='notice'>
-        <image src="/static/notice.png" class="avatar" />
-        <view class="name">通知</view>
-        <view class="unread" wx:if="{{authorityMsg.messageCount>0}}">{{authorityMsg.messageCount}}</view>
-      </view>
-    </view>
-    <view class="base user" wx:for="{{authorityMsg.topList}}" wx:key="index" data-item='{{item}}' data-top="{{true}}"
-      bind:longpress="onLongPress" hover-class='pressHover' bindtap="jumpChat">
-      <image src="{{item.user.avatar}}" class="avatar" />
-      <view class="body">
-        <view class="name textOver">{{item.user.nickName||item.user.eid}}</view>
-        <view class="info textOver">
-          {{item.content}}
+    <view class="input" bindtap="setSearch">
+        查找朋友（昵称/学号/手机号）
+        <view class="searchBtn">
+            <image src="/static/search-2.png" class="img" />
         </view>
-      </view>
-      <view class="right">
-        <view class="date">{{filters.formatDate(item.gmtModified,5)}}</view>
-        <view class="unread" wx:if="{{item.unReadCount>0}}">{{item.unReadCount}}</view>
-      </view>
-    </view>
-    <view class="skeleton" wx:if="{{loading}}">
-      <template is='skeleton'></template>
     </view>
-    <block wx:else>
-      <view class="base user" wx:for="{{list}}" wx:key="index" data-item='{{item}}' data-top="{{false}}"
-        bind:longpress="onLongPress" hover-class='pressHover' bindtap="jumpChat">
-        <image src="{{item.user.avatar}}" class="avatar" />
-        <view class="body">
-          <view class="name textOver">{{item.user.nickName||item.user.eid}}</view>
-          <view class="info textOver">
-            {{item.content}}
-          </view>
+    <view class="messageList">
+        <view class="fixed">
+            <view class="authority" bindtap="jump" data-url='friend'>
+                <image src="/static/concern.png" class="avatar" />
+                <view class="name">朋友</view>
+                <view class="unread" wx:if="{{authorityMsg.likeCount>0}}">{{authorityMsg.likeCount}}</view>
+            </view>
+            <view class="authority" bindtap="jump" data-url='like'>
+                <image src="/static/zan.png" class="avatar" />
+                <view class="name">赞</view>
+                <view class="unread" wx:if="{{authorityMsg.likeCount>0}}">{{authorityMsg.likeCount}}</view>
+            </view>
+            <view class="authority" bindtap="jump" data-url='comment'>
+                <image src="/static/message3.png" class="avatar" />
+                <view class="name">评论</view>
+                <view class="unread" wx:if="{{authorityMsg.postsCount>0}}">{{authorityMsg.postsCount}}</view>
+            </view>
+            <view class="authority" bindtap="jump" data-url='notice'>
+                <image src="/static/notice.png" class="avatar" />
+                <view class="name">通知</view>
+                <view class="unread" wx:if="{{authorityMsg.messageCount>0}}">{{authorityMsg.messageCount}}</view>
+            </view>
+        </view>
+        <view class="base user" wx:for="{{authorityMsg.topList}}" wx:key="index" data-item='{{item}}'
+            data-top="{{true}}" bind:longpress="onLongPress" hover-class='pressHover' bindtap="jumpChat">
+            <image src="{{item.user.avatar}}" class="avatar" />
+            <view class="body">
+                <view class="name textOver">{{item.user.nickName||item.user.eid}}</view>
+                <view class="info textOver">
+                    {{item.content}}
+                </view>
+            </view>
+            <view class="right">
+                <view class="date">{{filters.formatDate(item.gmtModified,5)}}</view>
+                <view class="unread" wx:if="{{item.unReadCount>0}}">{{item.unReadCount}}</view>
+            </view>
         </view>
-        <view class="right">
-          <view class="date">{{filters.formatDate(item.gmtModified,5)}}</view>
-          <view class="unread" wx:if="{{item.unReadCount>0}}">{{item.unReadCount}}</view>
+        <view class="skeleton" wx:if="{{loading}}">
+            <template is='skeleton'></template>
         </view>
-      </view>
-    </block>
-  </view>
-  <view class="menuBg" bind:touchstart="cancelMenu" wx:if="{{menu.show}}"></view>
-  <view class="menu" style="display: {{menu.show?'block':'none'}}; top:{{menu.top}}px;left:{{menu.left}}px">
-    <view class="menu-one" bindtap="msgTopping">
-      <image src="/static/istop.png" class="icon" />{{isTop?'取消置顶':'置顶该聊天'}}
+        <block wx:else>
+            <view class="base user" wx:for="{{list}}" wx:key="index" data-item='{{item}}' data-top="{{false}}"
+                bind:longpress="onLongPress" hover-class='pressHover' bindtap="jumpChat">
+                <image src="{{item.user.avatar}}" class="avatar" />
+                <view class="body">
+                    <view class="name textOver">{{item.user.nickName||item.user.eid}}</view>
+                    <view class="info textOver">
+                        {{item.content}}
+                    </view>
+                </view>
+                <view class="right">
+                    <view class="date">{{filters.formatDate(item.gmtModified,5)}}</view>
+                    <view class="unread" wx:if="{{item.unReadCount>0}}">{{item.unReadCount}}</view>
+                </view>
+            </view>
+        </block>
     </view>
-    <!--     <view bindtap="delMessage">
+    <view class="menuBg" bind:touchstart="cancelMenu" wx:if="{{menu.show}}"></view>
+    <view class="menu" style="display: {{menu.show?'block':'none'}}; top:{{menu.top}}px;left:{{menu.left}}px">
+        <view class="menu-one" bindtap="msgTopping">
+            <image src="/static/istop.png" class="icon" />{{isTop?'取消置顶':'置顶该聊天'}}
+        </view>
+        <!--     <view bindtap="delMessage">
       <image src="/static/del.png" class="icon" />
       删除该聊天
     </view> -->
-  </view>
+    </view>
 
 </view>

pages/message/index.wxss

@@ -215,12 +215,24 @@ page {
   background-color: white;
 }
 .messagePage .input {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   background-color: #F2F6FC;
   font-size: 28rpx;
   margin: 20rpx 30rpx 10rpx;
   padding: 20rpx 40rpx;
   border-radius: 26rpx;
 }
+.messagePage .input .searchBtn {
+  padding: 6rpx 44rpx;
+  background: #00C657;
+  border-radius: 40rpx;
+}
+.messagePage .input .searchBtn .img {
+  width: 24rpx;
+  height: 24rpx;
+}
 .messagePage .messageList {
   padding: 0rpx 36rpx 250rpx;
   box-sizing: border-box;

pages/resource/index.less

@@ -1,14 +1,13 @@
 .firstClassify {
     padding: 24rpx 0rpx 20rpx;
     width: 710rpx;
-    margin: 0 auto 40rpx;
+    margin: 0 auto 30rpx;
     left: 0;
     right: 0;
     overflow: hidden;
     border-radius: 10rpx;
     white-space: nowrap;
     background-color: white;
-
     .firstBox {
         text-align: center;
         display: inline-block;

pages/resource/index.wxss

@@ -1,7 +1,7 @@
 .firstClassify {
   padding: 24rpx 0rpx 20rpx;
   width: 710rpx;
-  margin: 0 auto 40rpx;
+  margin: 0 auto 30rpx;
   left: 0;
   right: 0;
   overflow: hidden;