tk-mini-program/TUIKit/components/TUIConversation/index.vue

<template>
  <div class="Navigation">
    <image
      src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Navigationimg.png"
      mode="scaleToFill"
      class="Navigationimg"
    />
    <div class="Return">消息</div>
  </div>
  <div
    class="tui-conversation"
    @click="handleClickConv"
    @touchstart="handleTouchStart"
    @touchend="handleTouchEnd"
  >
    <TUISearch searchType="global" />
    <ConversationHeader v-if="isShowConversationHeader" ref="headerRef" />
    <ConversationNetwork />
    <ConversationList
      ref="conversationListDomRef"
      class="tui-conversation-list"
      @handleSwitchConversation="handleSwitchConversation"
      @getPassingRef="getPassingRef"
    />
  </div>
  <div>
    <tabBar :tabIndex="3"></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 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";
// #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);

TUIStore.watch(StoreName.CONV, {
  totalUnreadCount: (count: number) => {
    totalUnreadCount.value = count;
  },
});

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>
.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;
}
.Navigation-left{
  width: 100%;
  height: 200rpx;
  z-index: 998;
}
.Return {
  width: 70rpx;
  height: 70rpx;
  position: absolute;
  top: 120rpx;
  left: 360rpx;
  z-index: 999;
  font-weight: bold;
}
</style>
<style lang="scss" scoped src="./style/index.scss"></style>