添加聊天

TUIKit/components/TUIConversation/index.vue

@@ -0,0 +1,191 @@
+<template>
+  <div
+    class="tui-conversation"
+    @click="handleClickConv"
+    @touchstart="handleTouchStart"
+    @touchend="handleTouchEnd"
+  >
+    <ConversationHeader>
+      <TUISearch searchType="global" />
+    </ConversationHeader>
+    <ConversationNetwork />
+    <ConversationList
+      ref="conversationListDomRef"
+      class="tui-conversation-list"
+      @handleSwitchConversation="handleSwitchConversation"
+      @getPassingRef="getPassingRef"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+import { TUIStore, StoreName } from '@tencentcloud/chat-uikit-engine-lite';
+import { TUIGlobal } from '@tencentcloud/universal-api';
+import { ref } from '../../adapter-vue';
+import TUISearch from '../TUISearch/index.vue';
+import ConversationList from './conversation-list/index.vue';
+import ConversationHeader from './conversation-header/index.vue';
+import ConversationNetwork from './conversation-network/index.vue';
+import { onHide } from '@dcloudio/uni-app';
+// #ifdef MP-WEIXIN
+// uniapp packaged mini-programs are integrated by default, and the default initialization entry file is imported here
+// TUIChatKit init needs to be encapsulated because uni vue2 will report an error when compiling H5 directly through conditional compilation
+import './entry.ts';
+// #endif
+
+const emits = defineEmits(['handleSwitchConversation']);
+
+const totalUnreadCount = ref(0);
+const headerRef = ref<typeof ConversationHeader>();
+const conversationListDomRef = ref<typeof ConversationList>();
+const touchX = ref<number>(0);
+const touchY = ref<number>(0);
+const isShowConversationHeader = ref<boolean>(true);
+
+const getTabBarConfig = () => {
+  try {
+    // 方法1: 从 getApp() 全局数据中获取
+    const app = getApp();
+    if (app?.globalData?.tabBar) {
+      return app.globalData.tabBar;
+    }
+    
+    // 方法2: 从 pages.json 配置中读取（如果可访问）
+    // @ts-ignore
+    if (typeof __uniConfig !== 'undefined' && __uniConfig.tabBar) {
+      // @ts-ignore
+      return __uniConfig.tabBar;
+    }
+    
+    // 方法3: 尝试调用 uni.getTabBar() 检测是否存在 tabbar
+    try {
+      const tabBar = uni.getTabBar && uni.getTabBar();
+      if (tabBar) {
+        return { list: tabBar};
+      }
+    } catch (e) {
+      return null;
+    }
+    
+    return null;
+  } catch (error) {
+    return null;
+  }
+};
+
+const getTabBarIndex = () => {
+  try {
+  
+    const pages = getCurrentPages();
+    if (!pages || pages.length === 0) return;
+    
+    const currentPage = pages[pages.length - 1];
+    const currentRoute = currentPage.route;
+    
+    const isTUIConversationPage = currentRoute && (
+      currentRoute.includes('TUIKit/components/TUIConversation/index') ||
+      currentRoute.includes('TUIConversation')
+    );
+    
+    if (!isTUIConversationPage) {
+      return;
+    }
+    
+    const tabBarConfig = getTabBarConfig();
+    
+    if (!tabBarConfig) {
+      return;
+    }
+    
+    let tabBarIndex = -1;
+    
+    if (tabBarConfig.list && Array.isArray(tabBarConfig.list)) {
+      tabBarIndex = tabBarConfig.list.findIndex((item: any) => {
+        const pagePath = item.pagePath || '';
+        return pagePath.includes('TUIConversation') || 
+                pagePath.includes('TUIKit/components/TUIConversation/index');
+      });
+    }
+    return tabBarIndex;
+  } catch (error) {
+    return -1;
+  }
+};
+
+TUIStore.watch(StoreName.CONV, {
+  totalUnreadCount: (count: number) => {
+    totalUnreadCount.value = count;
+    const tabBarIndex = getTabBarIndex() ?? -1;
+    if (tabBarIndex >= 0) {
+      if (count > 0) {
+        uni.setTabBarBadge({
+          index: tabBarIndex,
+          text: count > 99 ? '99+' : count.toString(),
+        });
+      } else {
+        uni.removeTabBarBadge({
+          index: tabBarIndex,
+        });
+      }
+    }
+  },
+});
+
+TUIStore.watch(StoreName.CUSTOM, {
+  isShowConversationHeader: (showStatus: boolean) => {
+    isShowConversationHeader.value = showStatus !== false;
+  },
+});
+
+const handleSwitchConversation = (conversationID: string) => {
+  TUIGlobal?.navigateTo({
+    url: '/TUIKit/components/TUIChat/index',
+  });
+  emits('handleSwitchConversation', conversationID);
+};
+
+const closeChildren = () => {
+  headerRef?.value?.closeChildren();
+  conversationListDomRef?.value?.closeChildren();
+};
+
+const handleClickConv = () => {
+  closeChildren();
+};
+
+onHide(closeChildren);
+
+const handleTouchStart = (e: any) => {
+  touchX.value = e.changedTouches[0].clientX;
+  touchY.value = e.changedTouches[0].clientY;
+};
+
+const handleTouchEnd = (e: any) => {
+  const x = e.changedTouches[0].clientX;
+  const y = e.changedTouches[0].clientY;
+  let turn = '';
+  if (x - touchX.value > 50 && Math.abs(y - touchY.value) < 50) {
+    // Swipe right
+    turn = 'right';
+  } else if (x - touchX.value < -50 && Math.abs(y - touchY.value) < 50) {
+    // Swipe left
+    turn = 'left';
+  }
+  if (y - touchY.value > 50 && Math.abs(x - touchX.value) < 50) {
+    // Swipe down
+    turn = 'down';
+  } else if (y - touchY.value < -50 && Math.abs(x - touchX.value) < 50) {
+    // Swipe up
+    turn = 'up';
+  }
+  // Operate according to the direction
+  if (turn === 'down' || turn === 'up') {
+    closeChildren();
+  }
+};
+
+const getPassingRef = (ref) => {
+  ref.value = conversationListDomRef.value;
+};
+</script>
+
+<style lang="scss" scoped src="./style/index.scss"></style>