mall_client/zyhs3_uniapp/pages/chat/list.vue

<template>
  <u-index-list :indexList="indexList">
    <view slot="header" class="list">
      <view class="list__item" @click="newFriends">
        <u-avatar shape="square" size="35" icon="man-add-fill" fontSize="26" bg-color="#ed8527"></u-avatar>
        <text class="list__item__user-name">新的朋友</text>
      </view>
      <u-line></u-line>
      <view class="list__item" @click="groupChat">
        <u-avatar shape="square" size="35" icon="chat" fontSize="26" bg-color="#52a536"></u-avatar>
        <text class="list__item__user-name">群聊</text>
      </view>
      <u-line></u-line>
      <view class="list__item" @click="blackList">
        <u-avatar shape="square" size="35" icon="info-circle-fill" fontSize="26" bg-color="#FF6C93"></u-avatar>
        <text class="list__item__user-name">黑名单</text>
      </view>
      <u-line></u-line>
    </view>
    <!-- 从itemArr中获取数据 -->
    <template>
      <!-- #ifdef APP-NVUE -->
      <u-index-anchor></u-index-anchor>
      <!-- #endif -->
      <u-index-item v-if="friendList.length > 0">
        <!-- #ifndef APP-NVUE -->
        <u-index-anchor bgColor="#dfe3f5" color="#ffffff"></u-index-anchor>
        <!-- #endif -->
        <view class="list" v-for="(item, index) in friendList" :key="index" @click="user(item)">
          <view class="list__item">
            <!-- 从数组中获取头像和名称 -->
            <image class="list__item__avatar" :src="item.profile.avatar || 'https://jw-uniapp.oss-cn-beijing.aliyuncs.com/static/images/avatar.png'"></image>
            <text class="list__item__user-name">{{ item.remark}}</text>
          </view>
          <u-line></u-line>
        </view>
      </u-index-item>
      <u-empty v-else text="暂无好友" marginTop="20" icon="https://jw-uniapp.oss-cn-beijing.aliyuncs.com/static/images/moreImg.png"></u-empty>
    </template>
    <view slot="footer" class="u-safe-area-inset--bottom">
      <text class="list__footer">共{{ friendList.length }}位好友</text>
    </view>
  </u-index-list>
</template>

<script>
const indexList = () => {
  const indexList = [];
  const charCodeOfA = 'A'.charCodeAt(0);
  for (let i = 0; i < 26; i++) {
    indexList.push(String.fromCharCode(charCodeOfA + i));
  }
  indexList.push('#');
  return indexList;
};
export default {
  data() {
    return {
      indexList: indexList(),
      urls: [],
      names: [],
      friendList: '',
    };
  },
  computed: {
    itemArr() {
      return this.indexList.map(item => {
        const arr = [];
        for (let i = 0; i < 3; i++) {
          arr.push({
            name: this.names[uni.$u.random(0, this.names.length - 1)],
            url: this.urls[uni.$u.random(0, this.urls.length - 1)],
          });
        }
        return arr;
      });
    },
    isLogin() {
      return this.$store.state.isLogin;
    },
  },
  watch: {
    isLogin(val) {
      if (val) {
        // 登入后拉去会话列表
        this.flist();
        // uni.$TUIKit.on(uni.$TUIKitEvent.FRIENDLIST_LIST_UPDATED, this.onFriendListUpdated);
      }
    },
  },
  onShow() {
    if (this.isLogin) {
      // 登录后获取好友列表
      this.flist();
      // uni.$TUIKit.on(uni.$TUIKitEvent.FRIENDLIST_LIST_UPDATED, this.onFriendListUpdated);
    }
  },

  methods: {
    // 跳转好友申请页面
    newFriends() {
      uni.navigateTo({
        url: '/pages/im/application/application',
      });
    },
    // 跳转群聊页面
    groupChat() {
      uni.navigateTo({
        url: '/pages/im/group/list-group/groupChat',
      });
    },
    // 跳转黑名单列表页面
    blackList() {
      uni.navigateTo({
        url: '/pages/im/blackList/blackList',
      });
    },
    user(item) {
      uni.navigateTo({
        url: '/pages/im/information/information?id=' + item.userID + '&url=' + item.profile.avatar + '&remark=' + item.remark + '&index=1',
      });
    },
    flist() {
      // 这里创建一个promise
      uni.$TUIKit
        .getFriendList()
        .then(imResponse => {
          // 实现好友列表，定义一个friendlist=imresponse的数据
		  imResponse.data.map(item=>{
			  if(item.profile){
				  item.remark = item.remark?item.remark:item.profile.nick?item.profile.nick : item.userID
			  }else{
				  item.remark = item.remark?item.remark :item.userID
			  }
		  })
          this.friendList = imResponse.data; // 好友列表
		  
		  
        })
        .catch(function (imError) {
          // 失败后黄色警告
          console.warn('getFriendList error:', imError); // 获取好友列表失败的相关信息
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.u-safe-area-inset--bottom {
  text-align: center;
  padding: 20rpx 0;
}
.list__item {
  display: flex;
}
.list {
  &__item {
    padding: 16px 12px;
    align-items: center;

    &__avatar {
      height: 35px;
      width: 35px;
      border-radius: 3px;
    }

    &__user-name {
      font-size: 16px;
      margin-left: 10px;
      color: $u-main-color;
    }
  }

  &__footer {
    color: $u-tips-color;
    font-size: 14px;
    text-align: center;
    margin: 15px 0;
  }
}
</style>