提现功能需要添加

TUIKit/components/TUIChat/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="chat" :style="{marginBottom: keywordHight + 'px'}">
+  <div class="chat" :style="{ marginBottom: keywordHight + 'px' }">
     <div :class="['tui-chat', !isPC && 'tui-chat-h5']">
       <div
         v-if="!currentConversationID"
@@ -20,7 +20,10 @@
         <Forward @toggleMultipleSelectMode="toggleMultipleSelectMode" />
         <MessageList
           ref="messageListRef"
-          :class="['tui-chat-message-list', !isPC && 'tui-chat-h5-message-list']"
+          :class="[
+            'tui-chat-message-list',
+            !isPC && 'tui-chat-h5-message-list'
+          ]"
           :isGroup="isGroup"
           :groupID="groupID"
           :isNotInGroup="isNotInGroup"
@@ -33,7 +36,7 @@
           v-if="isNotInGroup"
           :class="{
             'tui-chat-leave-group': true,
-            'tui-chat-leave-group-mobile': isMobile,
+            'tui-chat-leave-group-mobile': isMobile
           }"
         >
           {{ leaveGroupReasonText }}
@@ -63,7 +66,7 @@
               'tui-chat-message-input',
               !isPC && 'tui-chat-h5-message-input',
               isUniFrameWork && 'tui-chat-uni-message-input',
-              isWeChat && 'tui-chat-wx-message-input',
+              isWeChat && 'tui-chat-wx-message-input'
             ]"
             :enableAt="featureConfig.InputMention"
             :isMuted="false"
@@ -78,232 +81,275 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { ref, onMounted, onUnmounted, computed } from '../../adapter-vue';
-import TUIChatEngine, {
-  TUITranslateService,
-  TUIConversationService,
-  TUIStore,
-  StoreName,
-  IMessageModel,
-  IConversationModel,
-} from '@tencentcloud/chat-uikit-engine-lite';
-import TUICore, { TUIConstants, ExtensionInfo } from '@tencentcloud/tui-core-lite';
-import ChatHeader from './chat-header/index.vue';
-import MessageList from './message-list/index.vue';
-import MessageInput from './message-input/index.vue';
-import MultipleSelectPanel from './mulitple-select-panel/index.vue';
-import Forward from './forward/index.vue';
-import MessageInputToolbar from './message-input-toolbar/index.vue';
-import { isPC, isWeChat, isUniFrameWork, isMobile, isApp } from '../../utils/env';
-import { ToolbarDisplayType } from '../../interface';
-import TUIChatConfig from './config';
+  import {
+    ref,
+    onMounted,
+    onUnmounted,
+    computed
+  } from '../../adapter-vue'
+  import TUIChatEngine, {
+    TUITranslateService,
+    TUIConversationService,
+    TUIStore,
+    StoreName,
+    IMessageModel,
+    IConversationModel
+  } from '@tencentcloud/chat-uikit-engine-lite'
+  import TUICore, {
+    TUIConstants,
+    ExtensionInfo
+  } from '@tencentcloud/tui-core-lite'
+  import ChatHeader from './chat-header/index.vue'
+  import MessageList from './message-list/index.vue'
+  import MessageInput from './message-input/index.vue'
+  import MultipleSelectPanel from './mulitple-select-panel/index.vue'
+  import Forward from './forward/index.vue'
+  import MessageInputToolbar from './message-input-toolbar/index.vue'
+  import {
+    isPC,
+    isWeChat,
+    isUniFrameWork,
+    isMobile,
+    isApp
+  } from '../../utils/env'
+  import { ToolbarDisplayType } from '../../interface'
+  import TUIChatConfig from './config'
 
-// @Start uniapp use Chat only
-import { onLoad, onUnload } from '@dcloudio/uni-app';
-import { initChat, logout } from './entry-chat-only.ts';
+  // @Start uniapp use Chat only
+  import { onLoad, onUnload } from '@dcloudio/uni-app'
+  import { initChat, logout } from './entry-chat-only.ts'
 
-onLoad((options) => {
-  initChat(options);
-});
+  onLoad(options => {
+    initChat(options)
+  })
 
-onUnload(() => {
-  // Whether logout is decided by yourself  when the page is unloaded. The default is false.
-  logout(false).then(() => {
-    // Handle success result from promise.then when you set true.
-  }).catch(() => {
-    // handle error
-  });
-});
-// @End uniapp use Chat only
+  onUnload(() => {
+    // Whether logout is decided by yourself  when the page is unloaded. The default is false.
+    logout(false)
+      .then(() => {
+        // Handle success result from promise.then when you set true.
+      })
+      .catch(() => {
+        // handle error
+      })
+  })
+  // @End uniapp use Chat only
 
-const emits = defineEmits(['closeChat']);
+  const emits = defineEmits(['closeChat'])
 
-const groupID = ref(undefined);
-const isGroup = ref(false);
-const isNotInGroup = ref(false);
-const notInGroupReason = ref<number>();
-const currentConversationID = ref();
-const isMultipleSelectMode = ref(false);
-const inputToolbarDisplayType = ref<ToolbarDisplayType>('none');
-const messageInputRef = ref();
-const messageListRef = ref<InstanceType<typeof MessageList>>();
-const headerExtensionList = ref<ExtensionInfo[]>([]);
-const featureConfig = TUIChatConfig.getFeatureConfig();
-const keywordHight = ref(0);
+  const groupID = ref(undefined)
+  const isGroup = ref(false)
+  const isNotInGroup = ref(false)
+  const notInGroupReason = ref<number>()
+  const currentConversationID = ref()
+  const isMultipleSelectMode = ref(false)
+  const inputToolbarDisplayType = ref<ToolbarDisplayType>('none')
+  const messageInputRef = ref()
+  const messageListRef = ref<InstanceType<typeof MessageList>>()
+  const headerExtensionList = ref<ExtensionInfo[]>([])
+  const featureConfig = TUIChatConfig.getFeatureConfig()
+  const keywordHight = ref(0)
 
-const systemInfo = uni.getSystemInfoSync();
-const screenHeight = systemInfo.screenHeight;
+  const systemInfo = uni.getSystemInfoSync()
+  const screenHeight = systemInfo.screenHeight
 
-const windowResizeCallback = (res) => {
-  const value = screenHeight - res.size.windowHeight;
-  if (value > 0 && inputToolbarDisplayType.value !== 'dialog') {
-    inputToolbarDisplayType.value = 'none';
+  const windowResizeCallback = res => {
+    const value = screenHeight - res.size.windowHeight
+    if (value > 0 && inputToolbarDisplayType.value !== 'dialog') {
+      inputToolbarDisplayType.value = 'none'
+    }
+    uni.$emit('scroll-to-bottom')
+    keywordHight.value = value
   }
-  uni.$emit('scroll-to-bottom');
-  keywordHight.value = value;
-};
-uni.onWindowResize(windowResizeCallback);
+  uni.onWindowResize(windowResizeCallback)
 
-onMounted(() => {
-  TUIStore.watch(StoreName.CONV, {
-    currentConversation: onCurrentConversationUpdate,
-  });
-});
+  onMounted(() => {
+    TUIStore.watch(StoreName.CONV, {
+      currentConversation: onCurrentConversationUpdate
+    })
+  })
 
-onUnmounted(() => {
-  TUIStore.unwatch(StoreName.CONV, {
-    currentConversation: onCurrentConversationUpdate,
-  });
-  reset();
-});
+  onUnmounted(() => {
+    TUIStore.unwatch(StoreName.CONV, {
+      currentConversation: onCurrentConversationUpdate
+    })
+    reset()
+  })
 
-const isInputToolbarShow = computed<boolean>(() => {
-  return isUniFrameWork ? inputToolbarDisplayType.value !== 'none' : true;
-});
+  const isInputToolbarShow = computed<boolean>(() => {
+    return isUniFrameWork
+      ? inputToolbarDisplayType.value !== 'none'
+      : true
+  })
 
-const leaveGroupReasonText = computed<string>(() => {
-  let text = '';
-  switch (notInGroupReason.value) {
-    case 4:
-      text = TUITranslateService.t('TUIChat.您已被管理员移出群聊');
-      break;
-    case 5:
-      text = TUITranslateService.t('TUIChat.该群聊已被解散');
-      break;
-    case 8:
-      text = TUITranslateService.t('TUIChat.您已退出该群聊');
-      break;
-    default:
-      text = TUITranslateService.t('TUIChat.您已退出该群聊');
-      break;
+  const leaveGroupReasonText = computed<string>(() => {
+    let text = ''
+    switch (notInGroupReason.value) {
+      case 4:
+        text = TUITranslateService.t('TUIChat.您已被管理员移出群聊')
+        break
+      case 5:
+        text = TUITranslateService.t('TUIChat.该群聊已被解散')
+        break
+      case 8:
+        text = TUITranslateService.t('TUIChat.您已退出该群聊')
+        break
+      default:
+        text = TUITranslateService.t('TUIChat.您已退出该群聊')
+        break
+    }
+    return text
+  })
+
+  const reset = () => {
+    TUIConversationService.switchConversation('')
   }
-  return text;
-});
 
-const reset = () => {
-  TUIConversationService.switchConversation('');
-};
+  const closeChat = (conversationID: string) => {
+    emits('closeChat', conversationID)
+    reset()
+  }
 
-const closeChat = (conversationID: string) => {
-  emits('closeChat', conversationID);
-  reset();
-};
+  const insertEmoji = (emojiObj: object) => {
+    messageInputRef.value?.insertEmoji(emojiObj)
+  }
 
-const insertEmoji = (emojiObj: object) => {
-  messageInputRef.value?.insertEmoji(emojiObj);
-};
+  const handleEditor = (message: IMessageModel, type: string) => {
+    if (!message || !type) return
+    switch (type) {
+      case 'reference':
+        // todo
+        break
+      case 'reply':
+        // todo
+        break
+      case 'reedit':
+        if (message?.payload?.text) {
+          messageInputRef?.value?.reEdit(message?.payload?.text)
+        }
+        break
+      default:
+        break
+    }
+  }
 
-const handleEditor = (message: IMessageModel, type: string) => {
-  if (!message || !type) return;
-  switch (type) {
-    case 'reference':
-      // todo
-      break;
-    case 'reply':
-      // todo
-      break;
-    case 'reedit':
-      if (message?.payload?.text) {
-        messageInputRef?.value?.reEdit(message?.payload?.text);
+  const handleGroup = () => {
+    headerExtensionList.value[0].listener.onClicked({
+      groupID: groupID.value
+    })
+  }
+
+  function changeToolbarDisplayType(type: ToolbarDisplayType) {
+    setTimeout(() => {
+      inputToolbarDisplayType.value =
+        inputToolbarDisplayType.value === type ? 'none' : type
+      if (inputToolbarDisplayType.value !== 'none' && isUniFrameWork) {
+        uni.$emit('scroll-to-bottom')
       }
-      break;
-    default:
-      break;
-  }
-};
-
-const handleGroup = () => {
-  headerExtensionList.value[0].listener.onClicked({ groupID: groupID.value });
-};
-
-function changeToolbarDisplayType(type: ToolbarDisplayType) {
-  setTimeout(() => {
-    inputToolbarDisplayType.value = inputToolbarDisplayType.value === type ? 'none' : type;
-    if (inputToolbarDisplayType.value !== 'none' && isUniFrameWork) {
-      uni.$emit('scroll-to-bottom');
-    }
-  }, 100)
-}
-
-function scrollToLatestMessage() {
-  messageListRef.value?.scrollToLatestMessage();
-}
-
-function toggleMultipleSelectMode(visible?: boolean) {
-  isMultipleSelectMode.value = visible === undefined ? !isMultipleSelectMode.value : visible;
-}
-
-function mergeForwardMessage() {
-  messageListRef.value?.mergeForwardMessage();
-}
-
-function oneByOneForwardMessage() {
-  messageListRef.value?.oneByOneForwardMessage();
-}
-
-function updateUIUserNotInGroup(conversation: IConversationModel) {
-  if (conversation?.operationType > 0) {
-    headerExtensionList.value = [];
-    isNotInGroup.value = true;
-    /**
-     * 4 - be removed from the group
-     * 5 - group is dismissed
-     * 8 - quit group
-     */
-    notInGroupReason.value = conversation?.operationType;
-  } else {
-    isNotInGroup.value = false;
-    notInGroupReason.value = undefined;
-  }
-}
-
-function onCurrentConversationUpdate(conversation: IConversationModel) {
-  updateUIUserNotInGroup(conversation);
-  // return when currentConversation is null
-  if (!conversation) {
-    return;
-  }
-  // return when currentConversationID.value is the same as conversation.conversationID.
-  if (currentConversationID.value === conversation?.conversationID) {
-    return;
+    }, 100)
   }
 
-  isGroup.value = false;
-  let conversationType = TUIChatEngine.TYPES.CONV_C2C;
-  const conversationID = conversation.conversationID;
-  if (conversationID.startsWith(TUIChatEngine.TYPES.CONV_GROUP)) {
-    conversationType = TUIChatEngine.TYPES.CONV_GROUP;
-    isGroup.value = true;
-    groupID.value = conversationID.replace(TUIChatEngine.TYPES.CONV_GROUP, '');
+  function scrollToLatestMessage() {
+    messageListRef.value?.scrollToLatestMessage()
   }
 
-  headerExtensionList.value = [];
-  isMultipleSelectMode.value = false;
-  // Initialize chatType
-  TUIChatConfig.setChatType(conversationType);
-  // While converstaion change success, notify callkit and roomkit、or other components.
-  TUICore.notifyEvent(TUIConstants.TUIChat.EVENT.CHAT_STATE_CHANGED, TUIConstants.TUIChat.EVENT_SUB_KEY.CHAT_OPENED, { groupID: groupID.value });
-  // The TUICustomerServicePlugin plugin determines if the current conversation is a customer service conversation, then sets chatType and activates the conversation.
-  TUICore.callService({
-    serviceName: TUIConstants.TUICustomerServicePlugin.SERVICE.NAME,
-    method: TUIConstants.TUICustomerServicePlugin.SERVICE.METHOD.ACTIVE_CONVERSATION,
-    params: { conversationID: conversationID },
-  });
-  // When open chat in room, close main chat ui and reset theme.
-  if (TUIChatConfig.getChatType() === TUIConstants.TUIChat.TYPE.ROOM) {
-    if (TUIChatConfig.getFeatureConfig(TUIConstants.TUIChat.FEATURE.InputVoice) === true) {
-      TUIChatConfig.setTheme('light');
-      currentConversationID.value = '';
-      return;
+  function toggleMultipleSelectMode(visible?: boolean) {
+    isMultipleSelectMode.value =
+      visible === undefined ? !isMultipleSelectMode.value : visible
+  }
+
+  function mergeForwardMessage() {
+    messageListRef.value?.mergeForwardMessage()
+  }
+
+  function oneByOneForwardMessage() {
+    messageListRef.value?.oneByOneForwardMessage()
+  }
+
+  function updateUIUserNotInGroup(conversation: IConversationModel) {
+    if (conversation?.operationType > 0) {
+      headerExtensionList.value = []
+      isNotInGroup.value = true
+      /**
+       * 4 - be removed from the group
+       * 5 - group is dismissed
+       * 8 - quit group
+       */
+      notInGroupReason.value = conversation?.operationType
+    } else {
+      isNotInGroup.value = false
+      notInGroupReason.value = undefined
     }
   }
-  // Get chat header extensions
-  if (TUIChatConfig.getChatType() === TUIConstants.TUIChat.TYPE.GROUP) {
-    headerExtensionList.value = TUICore.getExtensionList(TUIConstants.TUIChat.EXTENSION.CHAT_HEADER.EXT_ID);
+
+  function onCurrentConversationUpdate(conversation: IConversationModel) {
+    updateUIUserNotInGroup(conversation)
+    // return when currentConversation is null
+    if (!conversation) {
+      return
+    }
+    // return when currentConversationID.value is the same as conversation.conversationID.
+    if (currentConversationID.value === conversation?.conversationID) {
+      return
+    }
+
+    isGroup.value = false
+    let conversationType = TUIChatEngine.TYPES.CONV_C2C
+    const conversationID = conversation.conversationID
+    if (conversationID.startsWith(TUIChatEngine.TYPES.CONV_GROUP)) {
+      conversationType = TUIChatEngine.TYPES.CONV_GROUP
+      isGroup.value = true
+      groupID.value = conversationID.replace(
+        TUIChatEngine.TYPES.CONV_GROUP,
+        ''
+      )
+    }
+
+    headerExtensionList.value = []
+    isMultipleSelectMode.value = false
+    // Initialize chatType
+    TUIChatConfig.setChatType(conversationType)
+    // While converstaion change success, notify callkit and roomkit、or other components.
+    TUICore.notifyEvent(
+      TUIConstants.TUIChat.EVENT.CHAT_STATE_CHANGED,
+      TUIConstants.TUIChat.EVENT_SUB_KEY.CHAT_OPENED,
+      { groupID: groupID.value }
+    )
+    // The TUICustomerServicePlugin plugin determines if the current conversation is a customer service conversation, then sets chatType and activates the conversation.
+    TUICore.callService({
+      serviceName: TUIConstants.TUICustomerServicePlugin.SERVICE.NAME,
+      method:
+        TUIConstants.TUICustomerServicePlugin.SERVICE.METHOD
+          .ACTIVE_CONVERSATION,
+      params: { conversationID: conversationID }
+    })
+    // When open chat in room, close main chat ui and reset theme.
+    if (TUIChatConfig.getChatType() === TUIConstants.TUIChat.TYPE.ROOM) {
+      if (
+        TUIChatConfig.getFeatureConfig(
+          TUIConstants.TUIChat.FEATURE.InputVoice
+        ) === true
+      ) {
+        TUIChatConfig.setTheme('light')
+        currentConversationID.value = ''
+        return
+      }
+    }
+    // Get chat header extensions
+    if (TUIChatConfig.getChatType() === TUIConstants.TUIChat.TYPE.GROUP) {
+      headerExtensionList.value = TUICore.getExtensionList(
+        TUIConstants.TUIChat.EXTENSION.CHAT_HEADER.EXT_ID
+      )
+    }
+    TUIStore.update(
+      StoreName.CUSTOM,
+      'activeConversation',
+      conversationID
+    )
+    currentConversationID.value = conversationID
   }
-  TUIStore.update(StoreName.CUSTOM, 'activeConversation', conversationID);
-  currentConversationID.value = conversationID;
-}
 </script>
 
-<style scoped lang="scss" src="./style/index.scss"></style>
+<style scoped lang="scss" src="./style/index.scss">
+
+</style>