wallet_app/src/views/im/index.vue

<template>
  <div class="container">
    <div class="head-bg"/>
    <div class="message-header">
      <div class="header-lf">
        <div
          class="msg"
          :class="{ 'active-color': activeTab === 0 }"
          @click="activeTab = 0"
        >
          消息
          <span v-if="showDot&&activeTab == 0" class="red-dot"></span>
        </div>
        <div
          class="discover"
          :class="{ 'active-color': activeTab === 1 }"
          @click="activeTab = 1"
        >
          发现
        </div>
      </div>
      <div class="header-ri">
        <div class="contact">
          <span v-if="wsStore.unread" class="red-dot"></span>
          <svg-icon style="width: 25px; height: 25px;margin-right: 8px;" name="person" @click="goToPage('contact')"/>
        </div>
        <svg-icon style="width: 25px; height: 25px;" name="add" @click="showSheet = true;"/>
      </div>
    </div>
    <template v-if="activeTab === 0">
      <!-- <div class="search" @click="goSearch">
        <svg-icon class="search-icon" name="search" />
        <span>请输入关键词</span>
      </div> -->
      <van-pull-refresh v-model="loading" @refresh="onRefresh" style="height:100%">
      <div class="message-list">
        <template v-if="list.length > 0">
          <div class="list-item" :class="(item.uuid === wsStore.toUserInfo?.uuid ? wsStore.toUserInfo?.stick : item.stick) ? 'bgstick-color' : ''"  v-for="(item,i) in list" :key="i" @click="goToChat(item,i)">
            <!-- 个人头像 -->
            <van-image class="item-img" round :src="formatAvatarUrl(item.avatar)" v-if="item.type == 'user'"/>
            <!-- 群聊头像 -->
            <template v-if="item.type == 'group'">
              <groupAvatar class="item-img" :users='item.avatars'></groupAvatar>
            </template>
            <div class="item-content">
              <div class="item-top">
                <div>{{item.sessionName || '群聊'}}</div>
                <div class="col">{{item.updatedAt}}</div>
              </div>
              <div class="item-bottom">
                <div class="col m-ellipsis">{{item.message || '我们已经相互关注，开始聊天吧'}}</div>
                <!-- 免打扰 -->
                <svg-icon 
                  v-if="item.uuid === wsStore.toUserInfo?.uuid ? wsStore.toUserInfo?.slience : item.slience" 
                  style="width: 15px; height: 15px;color: #8D8D8D;" 
                  name="disturb"
                />
                <div class="notice" v-if="item.unReadNum > 0 && !(item.uuid === wsStore.toUserInfo?.uuid ? wsStore.toUserInfo?.slience : item.slience)">{{item.unReadNum}}</div>
              </div>
            </div>
          </div>
        </template>
        <template v-else>
          <div class="no-more">
            <svg-icon class="no-more-img" name="no-more" />
            <div>暂无好友</div>
        </div>
        </template>
      </div>
    </van-pull-refresh>
    </template>
    <template v-else>
      <Discover />
    </template>
    <van-action-sheet
      v-model:show="showSheet"
      cancel-text="取消"
      close-on-click-action
      @cancel="showSheet = false"
    > 
      <div class="sheet-content">
        <div class="sheet-li" @click="goToPage('search')">
          <svg-icon class="sheet-icon" name="add-friend" />
          <div class="sheet-text">添加朋友</div>
        </div>
        <div class="sheet-li" @click="goToPage('createGroupChat')">
          <svg-icon class="sheet-icon" name="group-chat" />
          <div class="sheet-text">创建群聊</div>
        </div>
        <div class="sheet-li no-border" @click="changeSM">
          <svg-icon class="sheet-icon" name="sm1"/>
          <div class="sheet-text">扫一扫</div>
        </div>
      </div>
    </van-action-sheet>
  </div>
</template>

<script setup>
import { useWalletStore } from "@/stores/modules/walletStore";
import { userList,friendRequest } from "@/api/path/im.api";
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import Discover from './components/Discover/Discover.vue'
import groupAvatar from './components/groupAvatar/index.vue'
import { useWebSocketStore } from "@/stores/modules/webSocketStore.js";
import { startScan } from "@/composables/barcodeScanner.js"
import { useSystemStore } from "@/stores/modules/systemStore";
import { showToast } from "vant";
const IM_PATH = import.meta.env.VITE_IM_PATH_FIlE;



const walletStore = useWalletStore();
const systemStore = useSystemStore();
const router = useRouter();
const route = useRoute();
const wsStore = useWebSocketStore();

const loading = ref(false);
const activeTab = ref(Number(route.query.tab ?? 0));
const showDot = ref(false)
const showSheet = ref(false);
const list = ref([]);

const formatAvatarUrl = (url) => url && /^https?:\/\//.test(url) ? url: (IM_PATH + (url || ''))
const onRefresh = () => {
  getuserList(true);
};
watch(
  () => wsStore.chatRefresh,
  (newVal,oldVal) => {
    if (newVal !== oldVal) {
      setTimeout(() => {
        getuserList(true)
      }, 500);
    }
  }
);
watch(
  () => wsStore.needRefreshIm,
  (newVal) => {
    if (newVal) {
      getuserList();
      systemStore.needRefreshIm = false;
    }
  }
);
// 当切换 tab 时，把 tab 写进 URL（用 replace，不污染历史栈）
watch(activeTab, (val) => {
  if (String(route.query.tab) !== String(val)) {
    router.replace({ query: { ...route.query, tab: val } });
  }
});

// 当 URL 变化（比如返回）时，更新 activeTab
watch(
  () => route.query.tab,
  (val) => {
    const n = Number(val ?? 0);
    if (n !== activeTab.value) activeTab.value = n;
  }
);

const getuserList = async (refresh=false) => {
  let res
  if(refresh || !systemStore.ImsessionList || systemStore.ImsessionList.length == 0){
    loading.value = true;
    res = await userList({uuid:walletStore.account});
    loading.value = false;
    list.value = res.data || []
    // const groups = res.data.groups || [];
    // const ulist = res.data.userList || [];
    // // 转换群组
    // const groupItems = groups.map(g => ({
    //   id: g.groupId,
    //   uuid: g.uuid,
    //   nickname:g.name || "群聊",
    //   avatar: g.users,
    //   createDate:g.createDate,
    //   notice:g.notice,
    //   newMsg:g.newMsg,
    //   unReadNum:g.unReadNum,
    //   type: "group"
    // }));

    // // 转换用户
    // const userItems = ulist.map(u => ({
    //   id: u.id,
    //   uuid: u.uuid,
    //   nickname: u.nickname,
    //   avatar: u.avatar ? IM_PATH + u.avatar : u.avatar,
    //   createdAt:u.createdAt,
    //   newMsg:u.newMsg,
    //   unReadNum:u.unReadNum,
    //   type: "user"
    // }));
    systemStore.ImsessionList = [...list.value];
    // 记录用户群组
    // wsStore.updateGroupAuth(res.data || []);
  }else{
    list.value = systemStore.ImsessionList
  }
  // console.log('会话列表数据',list.value)
  for(var i in list.value){
    if(list.value[i].unReadNum>0){
      showDot.value=1;
      break
    }
  }
}

const goToChat = (item,index) => {
  if(wsStore.chatDelAuth[item.uuid]){
    showToast(`${item.type == 'user' ? '对方已删除' : '您已不在群聊里面'}`);
    return;
  }
  systemStore.ImsessionList[index].unReadNum = 0
  wsStore.toUserInfo = item;
  router.push({
    path: 'chat',
    query:{ uuid:item.uuid }
  })
}
// 扫码
const changeSM = async () => {
    const result = await startScan();
    let walletAddress = result.ScanResult;
    router.push({
      path: 'search',
      query:{ walletAddress }
    })
}
const goToPage = (url) => {
  router.push(url)
}
// 跳转聊天搜索
const goSearch = () => {
  router.push('chatSearch')
}
onMounted(()=>{
  getuserList(systemStore.needRefreshIm);
  systemStore.needRefreshIm = false;
  wsStore.funInitfriend(walletStore.account);
})
</script>

<style lang="less" scoped>
.container{
  height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
  .head-bg {
    .fn-head-bg()
  }
  .message-header{
    margin: 52px 16px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .header-lf{
      display: flex;
      align-items: center;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 15px;
      color: #4F4F4F;
      .msg, .discover {
        margin-right: 12px;
        position: relative;
        cursor: pointer;
        color: #4F4F4F;
      }
      .active-color {
        font-size: 19px;
        font-weight: 500;
        color: #000;
      }
    }
    .header-ri{
      display: flex;
      align-items: center;
    }
  }
  .search{
    margin-bottom: 16px;
    height: 33px;
    background: #FFFFFF;
    border-radius: 23px;
    opacity: 0.5;
    padding: 6px;
    box-sizing: border-box;
    margin: 0 16px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 15px;
    color: #95A9ED;
    display: flex;
    align-items: center;
    .search-icon{
      height: 25px;
      width: 25px;
      margin-right: 6px;
    }
  }
  .message-list{
    background: #F7F8FA;
    border-radius: 30px 30px 0 0;
    flex: 1;
    overflow: auto;
    // margin-top: 16px;
    // padding: 26px 16px 0;
    height: 100%;
    box-sizing: border-box;
    .list-item{
      margin-bottom:10px;
      display: flex;
      align-items: center;
      padding: 16px 16px 8px;
      .item-img{
        width:42px;
        height:42px;
        flex-shrink: 0;
        margin-right: 12px;
      }
      .item-content{
        flex: 1;
        overflow: hidden;
        .item-top,.item-bottom{
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 15px;
          color: #000000;
          .col{
            font-size: 12px;
            color: #8D8D8D;
          }
        }
        .item-top{
          margin-bottom: 2px;
        }
        .item-bottom{
          .m-ellipsis{
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
  .contact{
    position: relative;
    width: 25px;
    height: 25px;
    margin-right: 8px;
  }
  .red-dot {
    position: absolute;
    top: 0px;
    right: -4px;
    width: 6px;
    height: 6px;
    background: #FF6C6C;
    border-radius: 50%;
    display: inline-block;
  }
  .notice{
    min-width: 15px;
    height: 15px;
    line-height: 15px;
    background-color: #FF6C6C;
    font-size: 10px;
    color: #FFFFFF;
    text-align: center;
    border-radius: 50px;
    margin-left: 5px;
  }
  .addnotice{
    position: absolute;
    top: -5px;
    left: -15px;
  }
  .message-list::-webkit-scrollbar{
    width: 0;
  }
  .discover-list {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #F7F8FA;
    border-radius: 30px 30px 0 0;
    margin-top: 16px;
    padding: 26px 16px 0;
  }
  .sheet-content{
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 15px;
    color: #000000;
    padding: 12px 16px 0;
    .sheet-li{
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: 1px solid #F2F2F2;
      padding: 10px 0;
      .sheet-icon{
        width:20px;
        height:20px;
      }
      .sheet-text{
        text-align: center;
        width: 70px;
      }
    }
    .no-border{
      border-bottom:none;
    }
  }
  :deep(.van-action-sheet__cancel){
    font-family: PingFang SC, PingFang SC;
    font-weight: 500 !important;
    font-size: 15px !important;
    color: #FF0000 !important;
  }
}
.no-more{
  margin-top: 178px;
  text-align: center;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 15px;
  color: #8D8D8D;
  .no-more-img{
    width: 302px;
    height: 222px;
  }
}
.bgstick-color{
  background: #f2f2f2;
}

</style>