classroom-instruments/src/TUIKit/TUIComponents/container/TUIGroup/index.vue

<template>
  <div style="height: 100%">
    <div class="sectionSearch">
      <the-search
        placeholder="请输入群聊名称"
        :show-search-button="false"
        @search="(val: any) => {
          noSearch(val)
        }"
      />
    </div>
    <div class="TUI-group">
      <div class="network" v-if="isNetwork">
        <i class="icon icon-error">!</i>
        <p>️{{ $t('TUIConversation.网络异常，请您检查网络设置') }}</p>
      </div>
      <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 groupList"
              :key="index"
              @click="handleListItem(item)"
            >
              <aside class="left">
                <img
                  class="avatar"
                  :src="
                    item.img ||
                    'https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690775328089.png'
                  "
                  onerror="this.src='https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690775328089.png'"
                />
              </aside>
              <div class="content-header">
                <label>
                  <p class="name">{{ item.name }}</p>
                </label>
                <div class="middle-box">
                  <p>共{{ item.memberNum || 0 }}人</p>
                </div>
              </div>
              <div class="content-footer">
                <span class="time"></span>
                <img
                  v-if="item.selfInfo?.messageRemindType === 'AcceptNotNotify'"
                  class="mute-icon"
                  src="../../assets/icon/mute.svg"
                />
                <i></i>
              </div>
            </li>
          </ul>
        </aside>
      </main>
      <!--  -->
      <the-empty
        v-if="!isNetwork && !loading && groupList.length <= 0"
        style="height: 90%"
      />
    </div>
  </div>
</template>
<script lang="ts">
import TheEmpty from '@/components/TheEmpty';
import { computed, defineComponent, onMounted, reactive, toRefs } from 'vue';
import { caculateTimeago } from '../utils';
import { handleAvatar, handleName, handleAt } from '../TUIChat/utils/utils';
import { imGroupPage } from '/src/TUIKit/api';
import TheSearch from '../../components/TheSearch';
const TUIGroup = defineComponent({
  name: 'TUIGroup',
  components: { TheEmpty, TheSearch },
  props: {
    displayOnlineStatus: {
      type: Boolean,
      default: false
    }
  },
  setup(props) {
    const TUIServer: any = TUIGroup.TUIServer;
    const data = reactive({
      loading: true,
      page: 1,
      rows: 100,
      keyword: '',
      finshed: false, // 是否加载完
      groupList: [] as any,
      searchGroup: [] as any,
      searchID: '',
      currentGroup: null,
      netWork: '',
      userStatusList: new Map()
    });

    const handleItemTime = (time: number) => {
      if (time > 0) {
        return caculateTimeago(time * 1000);
      }
      return '';
    };

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

        (data.currentGroup as any) = {};
      });
    };
    const isNetwork = computed(() => {
      // const disconnected =
      //   data.netWork === TUIServer.TUICore.TIM.TYPES.NET_STATE_DISCONNECTED;
      // const connecting =
      //   data.netWork === TUIServer.TUICore.TIM.TYPES.NET_STATE_CONNECTING;
      // return disconnected || connecting;
      return false;
    });

    // 获取列表
    const getList = async () => {
      data.loading = true;
      try {
        const res = await imGroupPage({
          keyword: data.keyword,
          page: data.page,
          rows: data.rows
        });

        data.groupList.push(...(res.data.rows || []));

        // 是否加载完成
        data.finshed = res.data.pages <= res.data.current ? true : false;
      } catch {
        //
      }
      data.loading = false;
    };

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

    const noSearch = (val: string) => {
      console.log(val, 'val');
      data.page = 1;
      data.keyword = val;
      data.groupList = [];
      getList();
    };

    return {
      ...toRefs(data),
      handleListItem,
      isNetwork,
      handleAvatar,
      handleName,
      handleAt,
      handleItemTime,
      noSearch
    };
  }
});
export default TUIGroup;
</script>

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