imChat/src/TUIKit/TUIComponents/container/TUIPerson/index.vue

<template>
  <div style="height: 100%">
    <div class="sectionSearch">
      <n-input
        class="TheSearch"
        style="--n-font-size: 12px; --n-height: 32px; --n-caret-color: #198cfe; --n-border-hover: 1px solid #198cfe; --n-border-focus: 1px solid #198cfe; --n-loading-color: #198cfe; --n-box-shadow-focus: 0 0 0 2px rgba(25 140 254, 0.2)"
        round
        clearable
        placeholder="请输入名称"
        v-model:value="keyword"
        @clear="
          () => {
            debouncedRequest('');
          }
        "
        @keyup="onKeyup"
      >
        <template #prefix>
          <span class="icon-search-input"></span>
        </template>
      </n-input>
    </div>
    <div class="TUI-person">
      <main class="TUI-conversation-list">
        <aside class="TUI-contact-left">
          <ul class="TUI-contact-list">
            <li class="TUI-contact-list-item" v-for="(item, index) in friendList" :key="index" @click="handleListItem(item)">
              <aside class="left">
                <img class="avatar" :src="item.friendAvatar || 'https://oss.dayaedu.com/news-info/07/1690787574969.png'" onerror="this.src='https://oss.dayaedu.com/news-info/07/1690787574969.png'" />
              </aside>
              <div class="content-header">
                <label>
                  <p class="name">{{ item.friendNickname }}</p>
                </label>
                <div class="middle-box">
                  <p>{{ item.subjectName }}</p>
                </div>
              </div>
            </li>
          </ul>
        </aside>
      </main>
      <div class="theEmtpy" v-if="!loading && friendList.length <= 0" style="height: 90%">
        <img class="emptyImg" src="../../assets/nomore.png" />
        <p>暂无数据</p>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted } from "vue";
import { imUserFriendPage } from "../../../api";
import { useThrottleFn } from "@vueuse/core";
const TUIPerson = defineComponent({
  name: "TUIPerson",
  setup(props) {
    const TUIServer: any = TUIPerson.TUIServer;
    const data = reactive({
      loading: true,
      page: 1,
      rows: 100,
      keyword: "",
      finshed: false, // 是否加载完
      friendList: [] as any,
      searchGroup: [],
      searchID: "",
      currentGroup: null,
    });
    // 获取列表
    const getList = async () => {
      data.loading = true;
      try {
        const res = await imUserFriendPage({
          search: data.keyword,
          page: data.page,
          rows: data.rows,
        });
        data.friendList.push(...(res.data || []));
        // 是否加载完成;
        data.finshed = true; //res.data.pages <= res.data.current ? true : false;
      } catch {
        //
      }
      data.loading = false;
    };

    const handleListItem = async (item: any) => {
      const name = `C2C${item.imFriendId}`;
      console.log(item, "item", TUIServer.TUICore);
      TUIServer.TUICore.TUIServer.TUIConversation.getConversationProfile(name).then((imResponse: any) => {
        // 通知 TUIConversation 添加当前会话
        TUIServer.TUICore.TUIServer.TUIConversation.handleCurrentConversation(imResponse.data.conversation);

        (data.currentGroup as any) = {};
      });
    };

    const noSearch = (val: string) => {
      data.page = 1;
      data.keyword = val;
      data.friendList = [];
      getList();
    };

    onMounted(() => {
      getList();
    });

    const debouncedRequest = useThrottleFn((val: string) => {
      noSearch(val);
    }, 500);

    const onKeyup = (e: any) => {
      e.stopPropagation();
      if (e.code === "Enter") {
        debouncedRequest(data.keyword);
      }
    };
    return {
      ...toRefs(data),
      handleListItem,
      noSearch,
      onKeyup,
      debouncedRequest,
    };
  },
});
export default TUIPerson;
</script>

<style scoped lang="scss" src="./style/index.scss"></style>