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"
        >
          发现
          <span v-if="showDot&&activeTab == 1" class="red-dot"></span>
        </div>
      </div>
      <div class="header-ri">
        <svg-icon style="width: 25px; height: 25px;margin-right: 8px;" name="person" @click="goToPage('contact')"/>
        <svg-icon style="width: 25px; height: 25px;" name="add" @click="showSheet = true;"/>
      </div>
    </div>
    <template v-if="activeTab === 0">
      <div class="search">
        <svg-icon class="search-icon" name="search" />
        <span>请输入关键词</span>
      </div>
      <div class="message-list">
        <div class="list-item" v-for="(item,i) in list" :key="i" @click="goToChat(item.uuid)">
          <van-image class="item-img" round :src="item.avatar"/>
          <div class="item-content">
            <div class="item-top">
              <div>{{item.nickname}}</div>
              <div class="col">{{item.createAt}}</div>
            </div>
            <div class="item-bottom">
              <div class="col m-ellipsis">我们已经相互关注，开始聊天吧</div>
              <div class="notice" v-if="notice">1</div>
            </div>
          </div>
        </div>
      </div>
    </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">
          <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 } from "@/api/path/im.api";
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import Discover from './components/Discover/Discover.vue'
import { useWebSocketStore } from "@/stores/modules/webSocketStore.js"


const walletStore = useWalletStore();
const router = useRouter();
const wsStore = useWebSocketStore()


const activeTab = ref(0)
const showDot = ref(true)
const showSheet = ref(false);
const list = ref([]);
const notice = ref(false)

const getuserList = async () => {
  const res = await userList({uuid:walletStore.account});
  list.value = res.data;
}

const goToChat = (uuid) => {
  router.push({
    path: 'chat',
    query:{uuid}
  })
}
const goToPage = (url) => {
  router.push(url)
}
onMounted(()=>{
  getuserList();

  wsStore.connect(walletStore.getAccount)
})
onUnmounted(() => {
  wsStore.close()
})

</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;
      }
      .red-dot {
        position: absolute;
        top: 0px;
        right: -4px;
        width: 6px;
        height: 6px;
        background: #FF6C6C;
        border-radius: 50%;
        display: inline-block;
      }
    }
    .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;
    .list-item{
      margin-bottom: 26px;
      display: flex;
      align-items: center;
      .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{
          .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;
          }
          .m-ellipsis{
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
  .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;
  }
}

</style>