150 lines
4.0 KiB
Vue
150 lines
4.0 KiB
Vue
<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"
|
|
@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></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;
|
|
}
|
|
/* .Return {
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
position: absolute;
|
|
top: 100rpx;
|
|
left: 40rpx;
|
|
z-index: 999;
|
|
} */
|
|
</style>
|
|
<style lang="scss" scoped src="./style/index.scss"></style>
|