添加聊天

TUIKit/components/TUIChat/message-input-toolbar/user-selector/index.ts

@@ -0,0 +1,2 @@
+import UserSelector from './index.vue';
+export default UserSelector;

TUIKit/components/TUIChat/message-input-toolbar/user-selector/index.vue

@@ -0,0 +1,148 @@
+<template>
+  <Dialog
+    :show="show"
+    :isH5="!isPC"
+    :isHeaderShow="false"
+    :isFooterShow="false"
+    :background="false"
+    @update:show="toggleShow"
+  >
+    <Transfer
+      :isSearch="true"
+      :title="title"
+      :list="searchMemberList"
+      :isH5="!isPC"
+      :isRadio="false"
+      :total="searchMemberCount"
+      @search="search"
+      @submit="submit"
+      @cancel="cancel"
+      @getMore="loadMoreMembers"
+    />
+  </Dialog>
+</template>
+<script setup lang="ts">
+import {
+  TUIGroupService,
+  TUIUserService,
+  TUIStore,
+  StoreName,
+  IGroupModel,
+} from '@tencentcloud/chat-uikit-engine-lite';
+import { ref, computed } from '../../../../adapter-vue';
+import Dialog from '../../../common/Dialog/index.vue';
+import Transfer from '../../../common/Transfer/index.vue';
+import { isPC } from '../../../../utils/env';
+
+const props = defineProps({
+  // type: voiceCall/groupCall/...
+  type: {
+    type: String,
+    default: '',
+  },
+  currentConversation: {
+    type: Object,
+    default: () => ({}),
+  },
+  isGroup: {
+    type: Boolean,
+    default: false,
+  },
+});
+const emits = defineEmits(['submit', 'cancel']);
+const show = ref<boolean>(false);
+const groupID = ref<string>('');
+const memberList = ref<any[]>([]);
+const memberCount = ref<number>(0);
+const searchMemberList = ref<any[]>([]);
+const searchMemberCount = ref<number>(0);
+const selfUserID = ref<string>('');
+const titleMap: any = {
+  voiceCall: '发起群语音',
+  videoCall: '发起群视频',
+};
+const title = computed(() => {
+  return titleMap[props.type] ? titleMap[props.type] : '';
+});
+
+TUIUserService.getUserProfile().then((res: any) => {
+  if (res?.data?.userID) {
+    selfUserID.value = res.data.userID;
+  }
+});
+
+TUIStore.watch(StoreName.GRP, {
+  currentGroup: (group: IGroupModel) => {
+    memberCount.value = group?.memberCount > 0 ? group?.memberCount - 1 : 0;
+    searchMemberCount.value = memberCount.value;
+    groupID.value = group?.groupID;
+  },
+  currentGroupMemberList: (list: any[]) => {
+    memberList.value = list?.filter(
+      (user: any) => user?.userID !== selfUserID.value,
+    );
+    searchMemberList.value = memberList.value;
+  },
+});
+
+const loadMoreMembers = async () => {
+  try {
+    await TUIGroupService.getGroupMemberList({
+      groupID: groupID.value,
+      count: 50,
+    });
+  } catch (error) {
+    console.log(error);
+  }
+};
+
+const search = async (searchInfo: string) => {
+  try {
+    const res = await TUIGroupService.getGroupMemberProfile({
+      groupID: groupID.value,
+      userIDList: [searchInfo],
+    });
+    const results = res?.data?.memberList?.filter(
+      (member: any) => member?.userID !== selfUserID.value,
+    );
+    if (searchInfo.trim()) {
+      searchMemberList.value = results;
+      searchMemberCount.value = results?.length;
+    } else {
+      searchMemberList.value = memberList.value;
+      searchMemberCount.value = memberCount.value;
+    }
+  } catch {
+    searchMemberList.value = memberList.value;
+    searchMemberCount.value = memberCount.value;
+  }
+};
+
+const submit = (selectedMemberList: string[]) => {
+  const userIDList: string[] = [];
+  selectedMemberList?.forEach((user: any) => {
+    user?.userID && userIDList.push(user.userID);
+  });
+  if (props.type === 'voiceCall') {
+    emits('submit', { userIDList, groupID: groupID.value, type: 1 });
+  } else if (props.type === 'videoCall') {
+    emits('submit', { userIDList, groupID: groupID.value, type: 2 });
+  }
+  searchMemberList.value = memberList.value;
+  toggleShow(false);
+};
+
+const cancel = () => {
+  searchMemberList.value = memberList.value;
+  emits('cancel');
+  toggleShow(false);
+};
+
+const toggleShow = (showStatus: boolean) => {
+  show.value = showStatus;
+};
+
+defineExpose({
+  toggleShow,
+});
+</script>