消息

TUIKit/components/TUIConversation/index.vue

@@ -1,4 +1,12 @@
 <template>
+  <div class="Navigation">
+    <image
+      src="../../../static/Navigationimg.png"
+      mode="scaleToFill"
+      class="Navigationimg"
+    />
+    <!-- <image @click="" src="../../../static/Return.png" mode="scaleToFill" class="Return" /> -->
+  </div>
   <div
     class="tui-conversation"
     @click="handleClickConv"
@@ -6,10 +14,7 @@
     @touchend="handleTouchEnd"
   >
     <TUISearch searchType="global" />
-    <ConversationHeader
-      v-if="isShowConversationHeader"
-      ref="headerRef"
-    />
+    <ConversationHeader v-if="isShowConversationHeader" ref="headerRef" />
     <ConversationNetwork />
     <ConversationList
       ref="conversationListDomRef"
@@ -18,23 +23,27 @@
       @getPassingRef="getPassingRef"
     />
   </div>
+  <div>
+    <tabBar></tabBar>
+  </div>
 </template>
 <script lang="ts" setup>
-import { TUIStore, StoreName } from '@tencentcloud/chat-uikit-engine';
-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';
+import { TUIStore, StoreName } from "@tencentcloud/chat-uikit-engine";
+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";
+import tabBar from "../../../components/tabBar/tabBar.vue";
 // #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';
+import "./entry.ts";
 // #endif
 
-const emits = defineEmits(['handleSwitchConversation']);
+const emits = defineEmits(["handleSwitchConversation"]);
 
 const totalUnreadCount = ref(0);
 const headerRef = ref<typeof ConversationHeader>();
@@ -57,9 +66,9 @@ TUIStore.watch(StoreName.CUSTOM, {
 
 const handleSwitchConversation = (conversationID: string) => {
   TUIGlobal?.navigateTo({
-    url: '/TUIKit/components/TUIChat/index',
+    url: "/TUIKit/components/TUIChat/index",
   });
-  emits('handleSwitchConversation', conversationID);
+  emits("handleSwitchConversation", conversationID);
 };
 
 const closeChildren = () => {
@@ -81,23 +90,23 @@ const handleTouchStart = (e: any) => {
 const handleTouchEnd = (e: any) => {
   const x = e.changedTouches[0].clientX;
   const y = e.changedTouches[0].clientY;
-  let turn = '';
+  let turn = "";
   if (x - touchX.value > 50 && Math.abs(y - touchY.value) < 50) {
     // Swipe right
-    turn = 'right';
+    turn = "right";
   } else if (x - touchX.value < -50 && Math.abs(y - touchY.value) < 50) {
     // Swipe left
-    turn = 'left';
+    turn = "left";
   }
   if (y - touchY.value > 50 && Math.abs(x - touchX.value) < 50) {
     // Swipe down
-    turn = 'down';
+    turn = "down";
   } else if (y - touchY.value < -50 && Math.abs(x - touchX.value) < 50) {
     // Swipe up
-    turn = 'up';
+    turn = "up";
   }
   // Operate according to the direction
-  if (turn === 'down' || turn === 'up') {
+  if (turn === "down" || turn === "up") {
     closeChildren();
   }
 };
@@ -106,5 +115,35 @@ const getPassingRef = (ref) => {
   ref.value = conversationListDomRef.value;
 };
 </script>
-
+<style>
+.Navigation {
+  width: 100%;
+  height: 100rpx;
+  z-index: 999;
+}
+.Navigationimg {
+  width: 100%;
+  height: 200rpx;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+.Navigation {
+  width: 100%;
+  height: 200rpx;
+  z-index: 999;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+/* .Return {
+  width: 50rpx;
+  height: 50rpx;
+  position: absolute;
+  top: 100rpx;
+  left: 40rpx;
+  z-index: 999;
+} */
+</style>
 <style lang="scss" scoped src="./style/index.scss"></style>