ADD

首页筛选逻辑优化

cloudfunctions/listMessages/index.js

@@ -113,7 +113,10 @@ exports.main = async (event, context) => {
           msg_id: '$_id'
         },
         pipeline: $.pipeline()
-          .match(_.expr($.and([$.eq(['$msg_id', '$$msg_id']), $.eq(['$user_id', OPENID])])))
+          .match(_.expr($.and([
+            $.eq(['$user_id', OPENID]),
+            $.eq(['$msg_id', '$$msg_id'])
+          ])))
           .project({
             _id: 0,
             favorite_time: 1
@@ -132,6 +135,66 @@ exports.main = async (event, context) => {
       .unwind('$publisher')
       .end()
 
+    return {
+      list: messages.list,
+      next_page_token: event.page_token + messages.list.length,
+      status: 'OK'
+    }
+  } else if (event.filter) {
+    let messages = db.collection('message')
+      .aggregate()
+    if (event.filter[1] !== '') {
+      messages = messages.match({
+        type: event.filter[1]
+      })
+    }
+    if (event.filter[3] !== '') {
+      messages = messages.match({
+        tag: db.RegExp({
+          regexp: event.filter[3],
+          options: 'i'
+        })
+      })
+    }
+    messages = messages.lookup({
+        from: 'publisher',
+        localField: 'pub_id',
+        foreignField: '_id',
+        as: 'publisher'
+      })
+      .unwind('$publisher')
+    if (event.filter[2] !== '') {
+      if (event.filter[2] === '我关注的') {
+        messages = messages.lookup({
+            from: 'follow',
+            let: {
+              pub_id: '$pub_id'
+            },
+            pipeline: $.pipeline()
+              .match(_.expr($.and([
+                $.eq(['$user_id', OPENID]),
+                $.eq(['$pub_id', '$$pub_id'])
+              ])))
+              .project({
+                _id: 0,
+                follow_time: 1
+              }).done(),
+            as: 'follow'
+          })
+          .unwind('$follow')
+      } else {
+        messages = messages.match({
+          'publisher.type': event.filter[2]
+        })
+      }
+    }
+    messages = await messages.sort({
+        publish_time: -1
+      })
+      .skip(event.page_token)
+      .limit(event.page_size)
+      .end()
+
     return {
       list: messages.list,
       next_page_token: event.page_token + messages.list.length,

cloudfunctions/listPublishers/index.js

@@ -43,7 +43,10 @@ exports.main = async (event, context) => {
           pub_id: '$_id'
         },
         pipeline: $.pipeline()
-          .match(_.expr($.and([$.eq(['$pub_id', '$$pub_id']), $.eq(['$user_id', OPENID])])))
+          .match(_.expr($.and([
+            $.eq(['$user_id', OPENID]),
+            $.eq(['$pub_id', '$$pub_id'])
+          ])))
           .project({
             _id: 0,
             follow_time: 1

miniprogram/components/itemCard/itemCard.wxss

@@ -10,14 +10,15 @@
 
 .avatar-name {
   display: flex;
+  align-items: center;
 }
 
 .publisher-avatar {
   width: 50rpx;
   height: 50rpx;
-  border-radius: 30rpx;
+  border-radius: 25rpx;
   margin-left: 10rpx;
-  z-index: 2;
+  z-index: 1;
   border-color: #9E9E9E;
   border-style: solid;
   border-width: 2rpx;
@@ -34,13 +35,11 @@
 
 .publisher-name {
   font-size: 24rpx;
-  align-self: center;
   background-color: #ffffff;
   padding: 5rpx 20rpx 5rpx 30rpx;
   margin-left: -20rpx;
-  border-radius: 22rpx;
+  border-radius: 20rpx;
   box-shadow: 5rpx 5rpx 8rpx 0rpx rgba(0, 0, 0, 0.16);
-  z-index: 1;
 }
 
 .time {

miniprogram/pages/activity/activity.wxss

@@ -22,14 +22,15 @@
 
 .avatar-name {
   display: flex;
+  align-items: center;
 }
 
 .publisher-avatar {
   width: 50rpx;
   height: 50rpx;
-  border-radius: 30rpx;
+  border-radius: 25rpx;
   margin-left: 10rpx;
-  z-index: 2;
+  z-index: 1;
   border-color: #9E9E9E;
   border-style: solid;
   border-width: 2rpx;
@@ -46,13 +47,11 @@
 
 .publisher-name {
   font-size: 24rpx;
-  align-self: center;
   background-color: #ffffff;
   padding: 5rpx 20rpx 5rpx 30rpx;
   margin-left: -20rpx;
-  border-radius: 22rpx;
+  border-radius: 20rpx;
   box-shadow: 5rpx 5rpx 8rpx 0rpx rgba(0, 0, 0, 0.16);
-  z-index: 1;
 }
 
 .time {

miniprogram/pages/main/main.js

@@ -11,6 +11,7 @@ Page({
     loading: true,
     toggleEnable: true,
     filterList: 0,
+    tempFilterList: 0,
     filterItem: ['', '', '', ''],
     filterName: [{},
       {
@@ -53,8 +54,8 @@ Page({
   },
 
   showList: function (id) {
-    this.data.toggleEnable = false
     this.setData({
+      toggleEnable: false,
       filterList: id
     })
     this.animate('#arrow' + id, [{
@@ -79,7 +80,11 @@ Page({
   },
 
   hideList: function (id) {
-    this.data.toggleEnable = false
+    this.setData({
+      toggleEnable: false,
+      filterList: 0,
+      tempFilterList: id
+    })
     this.animate('#arrow' + id, [{
         rotate: 180
       },
@@ -93,47 +98,42 @@ Page({
       {
         opacity: 0
       },
-    ], 150, function () {
-      this.setData({
-        filterList: 0
-      })
-    }.bind(this))
+    ], 150)
     setTimeout(function () {
       this.setData({
-        toggleEnable: true
+        toggleEnable: true,
+        tempFilterList: 0
       })
     }.bind(this), 200)
   },
 
   toggleFilterList: function (e) {
-    if (!this.data.toggleEnable) return
+    if (!this.data.toggleEnable) {
+      return
+    }
+    const currentList = this.data.filterList
     const list = e.currentTarget.dataset.filterList
-    if (this.data.filterList === list) {
-      if (this.data.filterList !== 0) {
-        this.hideList(this.data.filterList)
-      }
-    } else {
-      if (this.data.filterList !== 0) {
-        this.hideList(this.data.filterList)
-      }
-      if (list !== 0) {
-        this.showList(list)
-      }
+    if (currentList !== 0) {
+      this.hideList(currentList)
+    }
+    if (currentList !== list) {
+      this.showList(list)
     }
   },
 
   toggleFilterItem: function (e) {
-    if (!this.data.toggleEnable) return
-    if (this.data.filterList !== 0 && this.data.filterList === e.currentTarget.dataset.filterList) {
-      var item = e.currentTarget.dataset.filterItem
-      var arr = this.data.filterItem
-      arr[this.data.filterList] = arr[this.data.filterList] === item ? '' : item;
-      this.setData({
-        filterItem: arr
-      })
-      this.updateData()
-      this.hideList(this.data.filterList)
+    if (!this.data.toggleEnable) {
+      return
     }
+    const currentList = this.data.filterList
+    this.hideList(currentList)
+    const item = e.currentTarget.dataset.filterItem
+    this.data.filterItem[currentList] = this.data.filterItem[currentList] === item ? '' : item;
+    this.setData({
+      filterItem: this.data.filterItem
+    })
+    this.loadMessageData(true)
+    // this.updateData()
   },
 
   filterMsgType: function (e) {
@@ -141,7 +141,8 @@ Page({
     this.setData({
       filterItem: this.data.filterItem
     })
-    this.updateData()
+    this.loadMessageData(true)
+    // this.updateData()
   },
 
   filterTag: function (e) {
@@ -149,19 +150,20 @@ Page({
     this.setData({
       filterItem: this.data.filterItem
     })
-    this.updateData()
+    this.loadMessageData(true)
+    // this.updateData()
   },
 
-  updateData: function () {
-    for (let i = 0; i < this.data.mainDatas.length; i++) {
-      this.data.mainDatas[i].show = (this.data.filterItem[1] === '' || this.data.mainDatas[i].type.indexOf(this.data.filterItem[1]) !== -1) &&
-        (this.data.filterItem[2] === '' || this.data.filterItem[2] === this.data.mainDatas[i].publisher.type) &&
-        (this.data.filterItem[3] === '' || this.data.mainDatas[i].tag.indexOf(this.data.filterItem[3]) !== -1)
-    }
-    this.setData({
-      mainDatas: this.data.mainDatas
-    })
-  },
+  // updateData: function () {
+  //   for (let i = 0; i < this.data.mainDatas.length; i++) {
+  //     this.data.mainDatas[i].show = (this.data.filterItem[1] === '' || this.data.mainDatas[i].type.indexOf(this.data.filterItem[1]) !== -1) &&
+  //       (this.data.filterItem[2] === '' || this.data.filterItem[2] === this.data.mainDatas[i].publisher.type) &&
+  //       (this.data.filterItem[3] === '' || this.data.mainDatas[i].tag.indexOf(this.data.filterItem[3]) !== -1)
+  //   }
+  //   this.setData({
+  //     mainDatas: this.data.mainDatas
+  //   })
+  // },
 
   loadMessageData: function (refresh) {
     this.setData({
@@ -171,6 +173,7 @@ Page({
     wx.cloud.callFunction({
       name: 'listMessages',
       data: {
+        filter: this.data.filterItem,
         page_token: refresh ? 0 : this.data.pageToken,
         page_size: 20
       }
@@ -192,7 +195,7 @@ Page({
         pageToken: res.result.next_page_token,
         loading: false
       })
-      this.updateData()
+      // this.updateData()
     })
   },
 

miniprogram/pages/main/main.wxml

@@ -2,56 +2,67 @@
 <!-- 更新了filter中的活动内容，但是由于有二级标题、还未给出页面美化需求，因此仅在js文件中更新，wxml未更新完全-->
 <view class="page">
   <view class="filter">
-    <view class="filter-item secondary-text-color" data-filter-list="1" bindtap="toggleFilterList">
-      <text>{{filterItem[1] == "" ? filterName[1].title : filterItem[1]}}</text>
+    <view class="filter-item secondary-text-color" data-filter-list="{{1}}" bindtap="toggleFilterList">
+      <text>{{filterItem[1] === '' ? filterName[1].title : filterItem[1]}}</text>
       <image class="filter-arrow" id="arrow1" mode="aspectFit" src="/images/arrow.png"></image>
     </view>
     <view class="filter-line"></view>
-    <view class="filter-item secondary-text-color" data-filter-list="2" bindtap="toggleFilterList">
-      <text>{{filterItem[2] == "" ? filterName[2].title : filterItem[2]}}</text>
+    <view class="filter-item secondary-text-color" data-filter-list="{{2}}" bindtap="toggleFilterList">
+      <text>{{filterItem[2] === '' ? filterName[2].title : filterItem[2]}}</text>
       <image class="filter-arrow" id="arrow2" mode="aspectFit" src="/images/arrow.png"></image>
     </view>
     <view class="filter-line"></view>
-    <view class="filter-item secondary-text-color" data-filter-list="3" bindtap="toggleFilterList">
-      <text>{{filterItem[3] == "" ? filterName[3].title : filterItem[3]}}</text>
+    <view class="filter-item secondary-text-color" data-filter-list="{{3}}" bindtap="toggleFilterList">
+      <text>{{filterItem[3] === '' ? filterName[3].title : filterItem[3]}}</text>
       <image class="filter-arrow" id="arrow3" mode="aspectFit" src="/images/arrow.png"></image>
     </view>
   </view>
   <view class="filter-lists">
-    <view wx:if="{{filterList == 1}}" class="filter-list" id="list1">
+    <view wx:if="{{filterList === 1 || tempFilterList === 1}}" class="filter-list" id="list1">
+      <view class="filter-list-item secondary-text-color" data-filter-item="{{''}}" bindtap="toggleFilterItem">全部<view
+          wx:if="{{filterItem[1] === ''}}">✔</view>
+      </view>
       <view wx:for="{{filterName[1].children}}" wx:for-item="item" wx:key="title">
         <view class="filter-list-title primary-text-color">{{item.title}}</view>
         <view wx:for="{{item.children}}" wx:for-item="item" wx:key="title">
-          <view wx:if="{{!item.children}}" class="filter-list-item secondary-text-color" data-filter-list="1"
-            data-filter-item="{{item}}" bindtap="toggleFilterItem">{{item}}<view wx:if="{{filterItem[1] === item}}">✔
-            </view>
+          <view wx:if="{{!item.children}}" class="filter-list-item secondary-text-color" data-filter-item="{{item}}"
+            bindtap="toggleFilterItem">{{item}}<view wx:if="{{filterItem[1] === item}}">✔</view>
           </view>
           <view wx:if="{{item.children}}" class="filter-list-subtitle primary-text-color">{{item.title}}</view>
           <view class="filter-list-item secondary-text-color" wx:for="{{item.children}}" wx:for-item="title"
-            wx:key="*this" data-filter-list="1" data-filter-item="{{title}}" bindtap="toggleFilterItem">{{title}}<view
-              wx:if="{{filterItem[1] === title}}">✔</view>
+            wx:key="*this" data-filter-item="{{title}}" bindtap="toggleFilterItem">{{title}}
+            <view wx:if="{{filterItem[1] === title}}">✔</view>
           </view>
         </view>
       </view>
     </view>
-    <view class="filter-list"></view>
-    <view wx:if="{{filterList == 2}}" class="filter-list" id="list2">
+    <view wx:if="{{!(filterList === 1 && tempFilterList === 2 || filterList === 2 && tempFilterList === 1)}}"
+      class="filter-list"></view>
+    <view wx:if="{{filterList === 2 || tempFilterList === 2}}" class="filter-list" id="list2">
+      <view class="filter-list-item secondary-text-color" data-filter-item="{{''}}" bindtap="toggleFilterItem">全部<view
+          wx:if="{{filterItem[2] === ''}}">✔</view>
+      </view>
       <view class="filter-list-item secondary-text-color" wx:for="{{filterName[2].children}}" wx:for-item="title"
-        wx:key="*this" data-filter-list="2" data-filter-item="{{title}}" bindtap="toggleFilterItem">{{title}}<view
+        wx:key="*this" data-filter-item="{{title}}" bindtap="toggleFilterItem">{{title}}<view
           wx:if="{{filterItem[2] === title}}">✔</view>
       </view>
     </view>
-    <view class="filter-list"></view>
-    <view wx:if="{{filterList == 3}}" class="filter-list" id="list3">
+    <view
+      wx:if="{{!(filterList === 2 && tempFilterList === 3 || filterList === 3 && tempFilterList === 2) && !(filterList === 1 && tempFilterList === 3 || filterList === 3 && tempFilterList === 1)}}"
+      class="filter-list"></view>
+    <view wx:if="{{filterList === 3 || tempFilterList === 3}}" class="filter-list" id="list3">
+      <view class="filter-list-item secondary-text-color" data-filter-item="{{''}}" bindtap="toggleFilterItem">全部<view
+          wx:if="{{filterItem[3] === ''}}">✔</view>
+      </view>
       <view class="filter-list-item secondary-text-color" wx:for="{{filterName[3].children}}" wx:for-item="title"
-        wx:key="*this" data-filter-list="3" data-filter-item="{{title}}" bindtap="toggleFilterItem">{{title}}<view
+        wx:key="*this" data-filter-item="{{title}}" bindtap="toggleFilterItem">{{title}}<view
           wx:if="{{filterItem[3] === title}}">✔</view>
       </view>
     </view>
   </view>
   <view class="message-view">
     <view wx:for="{{mainDatas}}" wx:for-item="msg" wx:key="_id">
-      <itemCard wx:if="{{msg.show}}" item="{{msg}}" bindfiltermsgtype="filterMsgType" bindfiltertag="filterTag" />
+      <itemCard item="{{msg}}" bindfiltermsgtype="filterMsgType" bindfiltertag="filterTag" />
     </view>
   </view>
 </view>

miniprogram/pages/publisher/publisher.js

@@ -192,7 +192,7 @@ Page({
     if (this.data.loading) {
       return
     }
-    this.loadMessageData()
+    this.loadExtraData()
   },
 
   /**

miniprogram/pages/publisher/publisher.wxss

@@ -4,7 +4,6 @@
   margin-top: 40rpx;
 }
 
-
 .brief-info {
   display: flex;
   justify-content: space-between;
@@ -16,14 +15,18 @@
 .brief-info-left {
   display: flex;
   align-items: center;
-  margin: 0rpx 0rpx 0rpx 40rpx;
+  margin-left: 40rpx;
 }
 
 .publisher-avatar {
   height: 120rpx;
   width: 120rpx;
-  border-radius: 100rpx;
-  z-index: 20;
+  border-radius: 60rpx;
+  z-index: 1;
+  border-color: #9E9E9E;
+  border-style: solid;
+  border-width: 2rpx;
+  background-color: #ffffff;
   box-shadow: 5rpx 5rpx 8rpx 0rpx rgba(0, 0, 0, 0.16);
 }
 
@@ -33,7 +36,7 @@
   border-radius: 20rpx;
   box-shadow: 5rpx 5rpx 8rpx 0rpx rgba(0, 0, 0, 0.16);
   padding: 10rpx 40rpx 10rpx 40rpx;
-  margin-left: -30rpx;
+  margin-left: -20rpx;
 }
 
 .detailed-info {

miniprogram/pages/publisherPage/publisherPage.js

@@ -13,6 +13,14 @@ Page({
     pubIndex: 0
   },
 
+  previewAvatar: function () {
+    if (this.data.hasPubInfo) {
+      wx.previewImage({
+        urls: [this.data.pubInfo[this.data.pubIndex].publisher.avatar]
+      })
+    }
+  },
+
   publisherHome: function () {
     wx.navigateTo({
       url: '/pages/publisher/publisher',

miniprogram/pages/publisherPage/publisherPage.wxml

@@ -1,7 +1,7 @@
 <!-- 为发布者个人页面 -->
 <view class="card">
-  <cover-image class="avatar" src="{{hasPubInfo ? pubInfo[pubIndex].publisher.avatar : '/images/user/user.png'}}">
-  </cover-image>
+  <image class="avatar" src="{{hasPubInfo ? pubInfo[pubIndex].publisher.avatar : '/images/user/user.png'}}" bindtap="previewAvatar">
+  </image>
   <view wx:if="{{hasPubInfo}}" class="publisher-name">{{pubInfo[pubIndex].publisher.name}}</view>
 </view>
 

miniprogram/pages/publisherPage/publisherPage.wxss

@@ -10,7 +10,7 @@
   left: 50rpx;
   height: 200rpx;
   width: 200rpx;
-  border-radius: 20%;
+  border-radius: 100rpx;
 }
 
 .publisher-name {

miniprogram/pages/user/user.wxml

@@ -1,7 +1,7 @@
 <!--为使用者-我的页面-->
 <view class="card">
-  <cover-image class="avatar" src="{{hasUserInfo ? userInfo.avatar : '/images/user/user.png'}}" bindtap="previewAvatar">
-  </cover-image>
+  <image class="avatar" src="{{hasUserInfo ? userInfo.avatar : '/images/user/user.png'}}" bindtap="previewAvatar">
+  </image>
   <view wx:if="{{hasUserInfo}}" class="nickname primary-text">{{userInfo.name}}</view>
   <view wx:else class="nickname"><button class="block-background-color" size="mini"
       bindtap="getUserProfile">微信登录</button></view>