FarmingWx_V2_message/pages/group/chat.vue

<template>
  <view>
    <template v-if="contactListMap.groupList.list.length > 0">
      <view
        class="item"
        v-for="(item, index) in contactListMap.groupList.list"
        :key="index"
        @click="selectItem(item)"
      >
        <view>
          <image :src="item.avatar" class="img" />
        </view>
        <view class="right">
          <text class="name">{{ item.name }}</text>
        </view>
      </view>
    </template>
    <div
      v-else
      style="
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 90vh;
        justify-content: center;
      "
    >
      <img src="@/static/empaty.jpg" style="width: 200px; height: 150px" />
      <span style="margin-top: 20px"> 暂无群聊~</span>
    </div>
  </view>
</template>

<script setup lang="ts">
import {
  TUITranslateService,
  TUIStore,
  StoreName,
  IGroupModel,
  TUIFriendService,
  Friend,
  FriendApplication,
  TUIUserService,
  TUIConversationService,
} from "@tencentcloud/chat-uikit-engine";
import ContactInfo from "../../TUIKit/components/TUIContact/contact-info/index.vue";
import { isPC, isUniFrameWork } from "../../TUIKit/utils/env";
import { onLoad, onShow } from "@dcloudio/uni-app";
import {
  IContactList,
  IContactSearchResult,
  IBlackListUserItem,
  IUserStatus,
  IUserStatusMap,
  IContactInfoType,
} from "../../TUIKit/interface";
import { TUIGlobal } from "@tencentcloud/universal-api";
import { ref, computed, onMounted, onUnmounted, provide } from "../../TUIKit/adapter-vue";
const currentContactInfo = ref();
const contactListMap = ref();
const isShowContactInfo = ref(false);
onLoad((options) => {
  contactListMap.value = JSON.parse(options.list);
  console.log("contactListMap.value", contactListMap.value);
});
const emits = defineEmits(["switchConversation"]);
function selectItem(item: any) {
  isUniFrameWork &&
    TUIGlobal?.navigateTo({
      url: "/TUIKit/components/TUIChat/index",
    });
  TUIConversationService.switchConversation(`GROUP${item.groupID}`);
}
</script>

<style lang="scss" scope>
.item {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 20rpx;
  border-bottom: 1px solid #f1f1f1;
  .right {
    margin-left: 10px;
    .name {
      font-weight: 600;
      font-size: 32rpx;
      color: #333333;
    }
  }

  .img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
  }
}
</style>