样式集（六）仿微信通讯录样式

效果图：

这里有引用到 自定义底部导航，自定义底部导航组件链接

<!--pages/chatList/chatList.wxml-->
  <!-- <include src="/components/common/common" /> -->
<view class="top">
	<view class="pageTitle">通讯录</view>
	<view class=" search_arr">
		<icon class="searchcion" catchtap="searchcion" size='16' type='search'></icon>
		<input class="" bindinput="input_p" placeholder="请输入关键字" value="{{searchValue}}" />
	</view>
</view>


<view class="user_list" wx:if='{{list.length>0}}'>
	<view wx:for='{{list}}' wx:key="index" class="item p_r" catchtap="nav_chat" data-item="{{item}}">
		<image class="head" catchtap="previewImage" data-img="{{item.shanghu?item.b_img:item.a_img}}" src="{{item.shanghu?item.b_img:item.a_img}}"></image>
		<view class="num" wx:if='{{item.shanghu&&item.a_unreadMsgNum>0}}'>{{item.a_unreadMsgNum}}</view>
		<view class="num" wx:if='{{!item.shanghu&&item.b_unreadMsgNum>0}}'>{{item.b_unreadMsgNum}}</view>
		<view class="loc">{{item.shanghu?item.b_loc:item.a_loc}}</view>
		<view class="userName">
		<view>{{item.shanghu?item.b_name:item.a_name}}</view>
		<view class="chatTxt">{{item.msgList.length>0?item.msgList[item.msgList.length-1].txt:''}}
		<text class="date">{{item.date}}</text>
		</view>
		</view>
	</view>
</view>
<view wx:if='{{list.length==0}}' class="no_msg">您还没有私聊好友</view>

<view class="tab_num" wx:if='{{tab_num>0}}'>{{tab_num}}</view>
<my_tab></my_tab>

const db = wx.cloud.database()
const _ = db.command;
var app =getApp();
var that = "";

function compare(prop) {
  return function (obj1, obj2) {
    var val1 = obj1[prop];
    var val2 = obj2[prop];
    if (val1 < val2) {
      return -1;
    } else if (val1 > val2) {
      return 1;
    } else {
      return 0;
    }
  }
}
// 数组去重
function arrayUnique2(arr, name) {
  var hash = {};
  return arr.reduce(function (item, next) {
    hash[next[name]] ? '' : hash[next[name]] = true && item.push(next);
    return item;
  }, []);
}
Page({

  data: {
    isEndOfList: false,
    is_guanfang: false,
    list: [],
    connectemoji: ['😊', '😅', '😲', '😭', '😂', '😄', '😩', '😞', '😵', '😒', '😍',
      '😤', '😜', '😝', '😋', '😘', '😚', '😷', '😳', '😃', '😆', '😁', '😢', '😨',
      '😠', '😣', '😌', '😖', '😔', '😰', '😱', '😪', '😏', '😓', '👍', '👎', '🔥', '🌹', '[發]', '❔', '🤝'
    ],
    emoji_list: ['emoji1i1', 'emoji2i2', 'emoji3i3', 'emoji4i4', 'emoji5i5', 'emoji6i6', 'emoji7i7', 'emoji8i8', 'emoji9i9', 'emoji10i10', 'emoji11i11', 'emoji12i12', 'emoji13i13', 'emoji14i14', 'emoji15i15', 'emoji16i16', 'emoji17i17', 'emoji18i18', 'emoji19i19', 'emoji20i20', 'emoji21i21', 'emoji22i22', 'emoji23i23', 'emoji24i24', 'emoji25i25', 'emoji26i26', 'emoji27i27', 'emoji28i28', 'emoji29i29', 'emoji30i30', 'emoji31i31', 'emoji32i32', 'emoji33i33', 'emoji34i34', 'emoji35i35', 'emoji36i36', 'emoji37i37', 'emoji38i38', 'emoji39i39', 'emoji40i40', 'emoji41i41'],
    limit: 20 //每次拉取数量
  },
  previewImage: function (e) {
    console.log(e.currentTarget.dataset.img)
    wx.previewImage({
      current: e.currentTarget.dataset.img, // 当前显示图片的http链接 
      urls: [e.currentTarget.dataset.img] // 需要预览的图片http链接列表 
    })
  },
  onUnload: function (options) {
    getApp().page.onUnload(this);
  },
  getArr() {
    // console.log('=========')
    wx.cloud.callFunction({
      name: 'getFriends', // 对应云函数名
      data: {},
      success: res => {
        // console.log('-------',res)
        var list = res.result.data;
        list = arrayUnique2(list, '_id')
        // console.log('list2222222',list)
        var arr = list.sort(compare("newTime")).reverse()
        var tab_num = 0;
        arr.forEach(item => {
          // if(item.a_unreadMsgNum>0){
          //   tab_num= tab_num + item.a_unreadMsgNum
          // }
          if (item.b_unreadMsgNum > 0) {
            tab_num = tab_num + item.b_unreadMsgNum
          }
        })

        for (var i = 0; i < arr[0].msgList.length; i++) {
          for (let j = 0; j < that.data.connectemoji.length; j++) {
            try {
              arr[0].msgList[i].txt = arr[0].msgList[i].txt.replace(new RegExp(that.data.emoji_list[j], 'g'), that.data.connectemoji[j])

            } catch (ere) {}
          }
        }
        if (tab_num > that.data.tab_num) {
          getApp().paly()
        }

        this.setData({
          tab_num,
          list: arr,
          isEndOfList: true
        }, () => {
          setTimeout(() => {
            this.getArr()
          }, 3000);
        })
      }
    })
  },
  add_guanfang() {
    return
    var store = wx.getStorageSync('STORE')
    var my = wx.getStorageSync('USER_INFO')
    var date = new Date().getTime()
    let data = {
      a: "154",
      a_img: store.service,
      a_name: '家居博览会',
      a_loc: store.address || '石家庄',
      b: my.id,
      b_img: my.avatar_url,
      b_name: my.nickname,
      date,
      msgList: []
    }
    getApp().DB.collection('friends').add({
      data: data,
      success: function (res) {
        console.log('添加官方为好友--------', res, data)
        res.data.forEach(item => {
          if (item.a == wx.getStorageSync('mch_id')) {
            item.shanghu = true
          }
        })
        that.setData({
          list: [...that.data.list, ...res.data], //合并数据
          isEndOfList: true,
          is_guanfang: true
        })
      }
    })
  },
  getTAB: function () {
    console.log('监听')
    if (!wx.getStorageSync('USER_INFO')) return;
    var whereData = {}

    if (wx.getStorageSync('mch_id')) {
      whereData = [{
          a: wx.getStorageSync('mch_id') + ''
        },
        {
          b: wx.getStorageSync('USER_INFO').id
        }
      ]
    } else {
      whereData = [{
        b: wx.getStorageSync('USER_INFO').id
      }]
    }
    getApp().DB.collection('friends').where(_.or(whereData))
      .watch({
        onChange: function (res) {
          // console.log('监听函数', res.docs)
          res.data = res.docs;
          if (!res.data || res.data.length == 0) {
            return
          }
          res.data.forEach(item => {
            if (item.a == wx.getStorageSync('mch_id')) {
              item.shanghu = true
            }
          })
          var list = res.data;
          // var list = [...that.data.list, ...res.data];
          list = arrayUnique2(list, '_id').reverse()
          var arr = list.sort(compare("newTime")).reverse()
          var tab_num = 0;
          arr.forEach(item => {
            if (item.shanghu && item.a_unreadMsgNum > 0) {
              tab_num = tab_num + item.a_unreadMsgNum
            }
            if (!item.shanghu && item.b_unreadMsgNum > 0) {
              tab_num = tab_num + item.b_unreadMsgNum
            }
          })

          for (var i = 0; i < arr[0].msgList.length; i++) {
            for (let j = 0; j < that.data.connectemoji.length; j++) {
              try {
                arr[0].msgList[i].txt = arr[0].msgList[i].txt.replace(new RegExp(that.data.emoji_list[j], 'g'), that.data.connectemoji[j])

              } catch (ere) {}
            }
          }
          // console.log('list11111111', list)
          if (tab_num > that.data.tab_num) {
            getApp().paly()
          }

          that.setData({
            tab_num,
            list: arr, //合并数据
          })
        },
        onError: function (err) {
          console.error('----------------error', err)
        }
      })
  },
  getData: function () {
    console.log('----------', wx.getStorageSync('mch_id'), wx.getStorageSync('USER_INFO').id)

    if (wx.getStorageSync('mch_id')) {
    console.log('----------222', wx.getStorageSync('mch_id'), wx.getStorageSync('USER_INFO').id)

      getApp().DB.collection('friends').where(_.or([{
            a: wx.getStorageSync('mch_id') + ''
          },
          {
            b: wx.getStorageSync('USER_INFO').id
          }
        ])).get()

        // db.collection("friends")
        //   .where({_id: _.neq(1)})
        //   .skip(this.data.list.length)
        //   .limit(this.data.limit)
        //   .get()
        .then(res => {
          console.log('我的好友', res.data)
          if (res.data.length == 0) {

            return
          }
          res.data.forEach(item => {
            if (item.a == wx.getStorageSync('mch_id')) {
              item.shanghu = true
            }
          })
          var list = [...this.data.list, ...res.data];
          list = arrayUnique2(list, '_id')
          var arr = list.sort(compare("newTime")).reverse()
          var tab_num = 0;
          arr.forEach(item => {
            
          //2.if包含数字，判断数据长度是否为11
          if (app.getNum(item.naa_nameme).length == 11) {

            //3.截取所有数字，并用*替换4，4
            var phNum = app.getNum(item.a_name);
            var phnumAfter = phNum.substr(0, 9) + "**";
            // phnumAfter = phNum.substr(0,3) + "****" + phNum.substr(7);

            //4.替换输出
            item.a_name = item.a_name.replace(phNum, phnumAfter);
            console.log('结果', item.a_name) //结果 为sd135****9471中
          }

            console.log('list2222222', item)
            if (item.shanghu && item.a_unreadMsgNum > 0) {
              tab_num = tab_num + item.a_unreadMsgNum
            }
            if (!item.shanghu && item.b_unreadMsgNum > 0) {
              tab_num = tab_num + item.b_unreadMsgNum
            }
          })

          for (var i = 0; i < arr[0].msgList.length; i++) {
            for (let j = 0; j < that.data.connectemoji.length; j++) {
              try {
                arr[0].msgList[i].txt = arr[0].msgList[i].txt.replace(new RegExp(that.data.emoji_list[j], 'g'), that.data.connectemoji[j])

              } catch (ere) {}
            }
          }
          if (tab_num > that.data.tab_num) {
            getApp().paly()
          }

          this.setData({
            tab_num,
            list: arr, //合并数据
            isEndOfList: res.data.length < this.data.limit ? true : false //判断是否结束
          })
        })
    } else {
      if (!wx.getStorageSync('USER_INFO')) {
        return
      }
      getApp().DB.collection('friends').where({
          b: wx.getStorageSync('USER_INFO').id
        }).get()

        // db.collection("friends")
        //   .where({_id: _.neq(1)})
        //   .skip(this.data.list.length)
        //   .limit(this.data.limit)
        //   .get()
        .then(res => {
          console.log('我的好友', res.data)
          if (res.data.length == 0) {

            return
          }
          res.data.forEach(item => {
            if (item.a == wx.getStorageSync('mch_id')) {
              item.shanghu = true
            }
          })
          var list = [...this.data.list, ...res.data];

          list = arrayUnique2(list, '_id')
          this.setData({
            list: list, //合并数据
            isEndOfList: res.data.length < this.data.limit ? true : false //判断是否结束
          })
        })
    }

  },
  input_p(e) {
    console.log(e.detail.value)
    this.setData({
      inputVal: e.detail.value
    })
  },
  searchcion() {
    console.log('搜索', this.data.inputVal)
    if (this.data.inputVal) {
      var that = this
      const db = wx.cloud.database()
      const scol = db.collection("friends")
      scol.where({
        a_name: {
          $regex: '.*' + this.data.inputVal + '.*',
          $options: '1'
        }
      }).get({
        success: res => {
          console.log('匹配', res)
          if (res.data.length == 0) {
            wx.showModal({
              title: '提示',
              content: '抱歉，找不到该用户',
              showCancel: false,
              success: function (res) {}
            })
            return;
          } else {
            that.setData({
              list: res.data
            })
          }
        }
      })
    }
  },
  nav_chat(e) {

    var item = e.currentTarget.dataset.item;
    wx.setStorageSync('chat_item', item)
    wx.navigateTo({
      url: '../chat/chat',
    })
  },
  onShow() {
    wx.setStorageSync('myTab', 2)
    this.getTAB()
  },
  onLoad: function (options) {
    that = this
    getApp().page.onLoad(this, options);
    if (options.chat_id) {
      getApp().DB.collection('friends').doc(options.chat_id).get().then(res => {
        console.log('========', res.data)
        wx.setStorageSync('chat_item', res.data)
        wx.navigateTo({
          url: '/pages/chat/chat'
        })
      })
      return
    }
    if (wx.getStorageSync('USER_INFO') && wx.getStorageSync('USER_INFO').id == 162) {
      this.getArr()
    } else {
      this.getData()
    }
  },

  onReachBottom: function () {
    !this.data.isEndOfList && this.getData()
  }
})

/* pages/chatList/chatList.wxss */
page {
  background-color: #EDEDED;
}

.top {
  position: fixed;
  top: 0;
  z-index: 2;
  width: 100%;
  background-color: #EDEDED;
}

.pageTitle {
  padding-top: 60rpx;
  padding-left: 20rpx;
  height: 140rpx;
  color: black;
  font-size: 36rpx;
  background-color: #EDEDED;
}

.searchcion {
  margin: 16rpx 10rpx 10rpx 10rpx;
  position: absolute;
  right: 15rpx;

  z-index: 992;
  width: 20px;
  height: 20px;
  text-align: center;
}

.search_arr {
  border: 1px solid #d0d0d0;
  background-color: #EDEDED;
  border-radius: 50rpx;
  margin-left: 30rpx;
  position: fixed;
  width: 40%;
  top: 54rpx;
  left: 200rpx;
}

.search_arr input {
  margin-left: 20rpx;
  height: 60rpx;
  border-radius: 5px;
}

swiper {
  position: fixed;
  width: 100%;
}

.swiper-item {
  width: 100%;
  height: 300rpx;
}

.item {
  position: relative;
  margin-bottom: 20rpx;
}

.head {
  width: 90rpx;
  height: 90rpx;
  border-radius: 10rpx;
  margin: 16rpx;
}

.num {
  position: absolute;
  top: 4rpx;
  left: 100rpx;
  width: 40rpx;
  height: 40rpx;
  line-height: 40rpx;
  font-size: 26rpx;
  background-color: red;
  color: white;
  text-align: center;
  border-radius: 50%;
}

.user_list {
  position: relative;
  top: 140rpx;
  padding: 20rpx 0 20rpx;
  background-color: white;
  padding-bottom: 100rpx;
}

.chatTxt {
  font-size: 26rpx;
  color: #999;
}

.date {
  margin-left: 40rpx;
}

.userName {
  margin-left: 20rpx;
  border-bottom: 0.5rpx solid #f3f3f3;
  width: 62%;
  color: black;
  font-weight: normal;
  font-size: 32rpx;
  margin-top: 12rpx;
  padding-bottom: 10rpx;

}

.no_msg {
  position: absolute;
  top: 500rpx;
  text-align: center;
  width: 100%;

}

.loc {
  position: absolute;
  right: 40rpx;
  max-width: 200rpx;
  top: 40rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

{
  "navigationStyle": "custom",
  "usingComponents": {
    "my_tab": "../Component/my_tab"
  }
}