chat.vue 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. <template>
  2. <view>
  3. <template>
  4. <view
  5. class="item"
  6. v-for="(item, index) in contactListMap.groupList.list"
  7. :key="index"
  8. @click="selectItem(item)"
  9. >
  10. <view>
  11. <image :src="item.avatar" class="img" />
  12. </view>
  13. <view class="right">
  14. <text class="name">{{ item.name }}</text>
  15. </view>
  16. </view>
  17. </template>
  18. </view>
  19. </template>
  20. <script setup lang="ts">
  21. import {
  22. TUITranslateService,
  23. TUIStore,
  24. StoreName,
  25. IGroupModel,
  26. TUIFriendService,
  27. Friend,
  28. FriendApplication,
  29. TUIUserService,
  30. TUIConversationService,
  31. } from "@tencentcloud/chat-uikit-engine";
  32. import ContactInfo from "../../TUIKit/components/TUIContact/contact-info/index.vue";
  33. import { isPC, isUniFrameWork } from "../../TUIKit/utils/env";
  34. import { onLoad, onShow } from "@dcloudio/uni-app";
  35. import {
  36. IContactList,
  37. IContactSearchResult,
  38. IBlackListUserItem,
  39. IUserStatus,
  40. IUserStatusMap,
  41. IContactInfoType,
  42. } from "../../TUIKit/interface";
  43. import { TUIGlobal } from "@tencentcloud/universal-api";
  44. import { ref, computed, onMounted, onUnmounted, provide } from "../../TUIKit/adapter-vue";
  45. const currentContactInfo = ref();
  46. const contactListMap = ref();
  47. const isShowContactInfo = ref(false);
  48. onLoad((options) => {
  49. contactListMap.value = JSON.parse(options.list);
  50. });
  51. const emits = defineEmits(["switchConversation"]);
  52. function selectItem(item: any) {
  53. isUniFrameWork &&
  54. TUIGlobal?.navigateTo({
  55. url: "/TUIKit/components/TUIChat/index",
  56. });
  57. TUIConversationService.switchConversation(`GROUP${item.groupID}`);
  58. }
  59. </script>
  60. <style lang="scss" scope>
  61. .item {
  62. display: flex;
  63. flex-direction: row;
  64. align-items: center;
  65. padding: 20rpx;
  66. border-bottom: 1px solid #f1f1f1;
  67. .right {
  68. margin-left: 10px;
  69. .name {
  70. font-weight: 600;
  71. font-size: 32rpx;
  72. color: #333333;
  73. }
  74. }
  75. .img {
  76. width: 60px;
  77. height: 60px;
  78. border-radius: 50%;
  79. }
  80. }
  81. </style>