app/pages/tabbar/im/index.vue

<template>
	<div
		style="height: 100%"
		@click="handleTouchStart"
	>
		<div class="jolkp">
			<div
				class="fan"
				:style="{ marginRight: statue == 0 ? '47.5%' : '47.5%' }"
			>
				<div
					@click="hui(0)"
					:style="{ marginTop: '45px' }"
					v-if="statue != 0"
				>
					<u-icon name="arrow-left"></u-icon>
				</div>
			</div>
			<!-- <TUIContact v-else-if="statue==1"  :stu="2" /> -->
			<div
				@click="hui(6)"
				class="jolkp_z"
				v-if="statue == 0 || 6"
				:style="{ marginTop: '45px' }"
			>
				<div class="tiole">{{ tole }}</div>
			</div>

			<div
				@click="hui(1)"
				class="jolkp_h"
				v-if="statue == 0 || 6"
				:style="{ marginTop: '45px' }"
			></div>
			<view
				class="jolkp_l"
				:style="{ marginTop: '45px' }"
			></view>
			<!-- 弹出框 -->
			<view
				v-if="isPopupVisible"
				class="popup"
				ref="popup"
			>
				<ul>
					<li @click.stop="handleAddFriend">添加好友/群聊</li>
					<li @click.stop="handleMenu()">发起群聊</li>
					<li @click.stop="handleScan">扫一扫</li>
				</ul>
			</view>
		</div>
		<!-- 搜索添加 -->
		<TUIContactsea
			v-if="statue == 2"
			@switchConversation="hui"
		/>
		<!-- 联系人 -->
		<TUIContact
			v-else-if="statue == 1 && isPopupVisible==false"
			style="height: 100%"
		/>
		<!-- 群选择的 -->
		<SelectFriend
			v-else-if="statue == 3 "
			@con="hui"
			:style="{ marginTop: '20px', heigth: '80%' }"
		/>
		<!-- 群类型 -->
		<CreateGroup
			v-else-if="statue == 10 "
			@con="confn"
		/>
		<SelectFriendqlioa
			v-else-if="statue == 4 "
			@concen="concen"
		/>
		<ContactInfo
			v-else-if="statue == 7"
			@concen="concen"
		/>
		<!-- 站内信数据 -->
		<!-- <div > -->
		<scroll-view
			@scrolltolower="lowerBottom"
			scroll-y="true"
			v-else-if="statue == 6 && isPopupVisible==false"
			class="znx"
		>
			<div
				@touchstart="startLongPress(item, index)"
				@touchend="endLongPress(item, index)"
				@click="torut(item)"
				v-for="(item, index) in meList"
				:key="item.id"
				class="tui-conversation-item"
			>
				<div :style="{ transform: 'translateX(' + swipeStates[index] + 'px)' }">
					{{ item.title }}
				</div>
				<div class="content">{{ item.createTime }}</div>
				<div
					class="delete-button"
					@click="deleteMessage(index)"
					v-if="swipeStates[index] <= -50"
				>
					删除
				</div>
			</div>
		</scroll-view>

		<!-- </div> -->
		<!-- 会话 -->
		<TUIConversation
			style="height: 100%"
			v-else
			@state="state"
		/>
		<!-- 未登录显示 -->
		<view
			v-if="showNoLoginPage"
			class="no-login"
			@click="toLogin"
		>
			请登录
		</view>
	</div>
</template>

<script>
// 导入组件
import TUIConversation from '@/TUIKit/components/TUIConversation/index';
import TUIContact from '@/TUIKit/components/TUIContact/index';
import TUIContactsea from '@/TUIKit/components/TUIContact/indexsea';
import { TUILogin } from '@tencentcloud/tui-core';
import ContactSearch from '@/TUIKit/components/TUIContact/contact-search/index.vue';
import CreateGroup from '@/TUIKit/components/TUIGroup/create-group/index.vue';
// import { TUIChatKit } from '@/TUIKit';
import SelectFriend from '@/TUIKit/components/TUIContact/select-friend/index.vue';
import ContactInfo from '@/TUIKit/components/TUIContact/contact-info/index.vue';
import SelectFriendqlioa from '@/TUIKit/components/TUIGroup/index.vue';

import TUICore, { ExtensionInfo, TUIConstants } from '@tencentcloud/tui-core';
import storage from '@/utils/storage.js';
// push
// import { TUIConversationService } from '@tencentcloud/chat-uikit-engine';
// import * as Push from '@/uni_modules/TencentCloud-Push';

import { getUserimInfo, getMember, getMemberstate, getMemberdelete, geterweijki } from '@/api/members';
import { TUITranslateService, TUIStore, StoreName, IGroupModel, TUIFriendService, Friend, FriendApplication, TUIUserService } from '@tencentcloud/chat-uikit-engine';
// TUIChatKit.init();
// let vueVersion = 2;
// vueVersion = 3;

export default {
	// 注册组件
	components: {
		TUIConversation,
		TUIContact,
		TUIContactsea,
		ContactSearch,
		SelectFriend,
		SelectFriendqlioa,
		// TUIChatKit,
		CreateGroup,
		ContactInfo
	},
	data() {
		return {
			showNoLoginPage: false,
			statue: 1, // 0对话记录  1联系人 2添加好友/群聊  3建群  4群名称  6站内信 10群类型  7扫码后用户详情
			isPopupVisible: false, // 控制弹出框的显示与隐藏
			isq: false,
			popupRef: null, // 新增，用于保存弹窗的引用
			meList: [],
			swipeStates: [],
			startX: 0,
			tole: 0, //已读未读
			timer: null, //获取站内信
			pageSize: 20,
			pageNumber: 1,
			total: 0,
			loadMoreStatus: 'more' // 加载更多状态
		};
	},
	onTabItemTap(e) {
		let tabIndex = e.index;
		console.log(tabIndex);
		if (tabIndex == 2) {
			// 检测登录状态
			if (!storage.getHasLogin()) {
				this.removeTimer();
				// 未登录
				uni.navigateTo({
					url: '/pages/passport/login'
				});
				this.showNoLoginPage = true;
			} else {
				this.removeTimer();
				this.setTime();
				this.showNoLoginPage = false;
			}
		}
	},
	onUnload() {},
	created() {},
	onHide() {
		console.log('IM页面隐藏');
		this.removeTimer();
	},
	onShow() {
		// 检测登录状态
		if (!storage.getHasLogin()) {
			this.removeTimer();
			// 未登录
			this.showNoLoginPage = true;
		} else {
			this.setTime();
			this.showNoLoginPage = false;
		}
	},

	mounted() {
		this.getMembermethod();
		this.setTime();

		// 监听自定义全局点击事件
		uni.$on('globalClick', (event) => {
			// console.log(event, "====+++");
			this.handleGlobalClick(event);
		});

		// // 在页面根元素上监听触摸开始事件并触发自定义全局点击事件
		// uni.onTouchStart((event) => {
		//   uni.$emit("globalClick", event);
		// });
	},
	beforeDestroy() {
		// 移除全局点击事件监听
		uni.$off('globalClick');
		// 清除定时器
		this.removeTimer();
	},
	methods: {
		toLogin() {
			uni.navigateTo({
				url: '/pages/passport/login'
			});
		},
		state(item) {
			this.isPopupVisible = item;
		},
		handleTouchStart(event) {
			uni.$emit('globalClick', event);
		},
		handleGlobalClick(event) {
			const query = uni.createSelectorQuery().in(this);
			query
				.select('.jolkp_l')
				// 获取节点的布局位置和尺寸信息
				.boundingClientRect((rect) => {
					if (rect) {
						const clickX = event.clientX || event.touches[0].clientX;
						const clickY = event.clientY || event.touches[0].clientY;

						if (clickX >= rect.left && clickX <= rect.width + rect.left && clickY >= rect.top && clickY <= rect.top + rect.height * 2) {
							// this.statue = 0; // 点击在节点范围内，执行相应操作
							console.log('点击是在节点范围');
							this.isPopupVisible = !this.isPopupVisible; // 隐藏弹出框
						} else {
							// this.statue = 0; // 点击在节点范围内，执行相应操作
							console.log('否');
							this.isPopupVisible = false; // 隐藏弹出框
						}
					}
				})
				// 执行查询操作
				.exec(() => {
					// this.isPopupVisible = true; // 隐藏弹出框
				});
		},
		lowerBottom() {
			if (this.total >= this.meList.length) {
				this.pageSize += 10;
				this.getMembermethod();
			}
		},
		removeTimer() {
			if (this.timer) {
				clearInterval(this.timer);
				this.timer = null;
			}
		},
		setTime() {
			if (this.timer) {
				return;
			}
			this.timer = setInterval(() => {
				this.getMembermethod();
			}, 10000);
		},
		torut(item) {
			this.isPopupVisible = false;
			const itemJson = encodeURIComponent(JSON.stringify(item));
			// 使用 uni.navigateTo 方法跳转到详情页，并传递信息
			uni.navigateTo({
				url: `/pages/tabbar/im/details/index?item=${itemJson}`
			});
			getMemberstate({ messageId: item.messageId }).then((res) => {
				this.getMembermethod();
			});
		},
		//完成跳转群名
		confn() {
			this.statue = 0;
			this.isPopupVisible = false;
		},
		concen() {
			this.statue = 0;
		},
		hui(index) {
			this.statue = index;
		},
		fnkiopl() {
			this.isPopupVisible = !this.isPopupVisible;
			this.popupRef = this.$refs.popup;
		},

		getMembermethod() {
			const param = {
				pageSize: this.pageSize,
				pageNumber: this.pageNumber
			};
			getMember(param).then((res) => {
				this.total = res.data.result.total;
				if (this.pageNumber === 1) {
					this.meList = res.data.result.records;
				} else {
					this.meList = this.meList.concat(res.data.result.records);
				}
				this.swipeStates = new Array(this.meList.length).fill(0);
				this.tole = this.meList.filter((item) => item.status === 'UN_READY').length;
			});
		},
		handleMenu() {
			const fn = [...TUICore.getExtensionList(TUIConstants.TUISearch.EXTENSION.SEARCH_MORE.EXT_ID)];
			const item = fn[1];
			const {
				listener = {
					onClicked: () => {}
				}
			} = item;
			listener?.onClicked?.(item);
			this.statue = 3;
		},
		// 处理添加好友/群聊点击事件
		handleAddFriend() {
			this.statue = 2;
			this.isPopupVisible = false;
		},
		handleScan() {
			this.isPopupVisible = false;
			uni.scanCode({
				success: (res) => {
					console.log('扫码结果:---', res.result);
					const params = {
						userID: res.result //userID
					};
					console.log('params', params);
					TUIStore.update(StoreName.CUSTOM, 'currentContactInfo', params);
					this.statue = 7;
				}
			});
		},
		startLongPress(item, index) {
			this.longPressTimer = setTimeout(() => {
				uni.showModal({
					title: '确认删除',
					content: '确定要删除这条消息吗？',
					success: (res) => {
						if (res.confirm) {
							getMemberdelete({ messageId: item.messageId }).then((res) => {
								this.getMembermethod();
							});
						}
					}
				});
			}, 2000);
		},
		endLongPress() {
			clearTimeout(this.longPressTimer);
		}
	}
};
</script>

<style scoped>
.no-login {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-color: #000;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999999;
	font-size: 36rpx;
	font-weight: 600;
	color: #fff;
}
uni-page-body,
html,
body,
page {
	width: 100% !important;
	height: 100% !important;
	overflow: hidden;
}
.jolkp {
	position: sticky;
	top: 0;
	height: 75px;
	display: flex;
	font-size: 15px;
	justify-content: end;
	/* background: green; */
	/* 设置背景图 */
	/* background-image: url('@/static/im/Rectangle.png'); */
	/* 让背景图覆盖整个元素 */
	background-size: cover;
	/* 背景图不重复 */
	background-repeat: no-repeat;
}

.jolkp_l {
	width: 1.8rem;
	height: 1.8rem;
	background-image: url('@/static/im/Frame.png');
	/* 让背景图覆盖整个元素 */
	background-size: cover;
	/* 背景图不重复 */
	background-repeat: no-repeat;
	margin-top: 35px;
	margin-right: 10px;
}

.jolkp_h {
	width: 1.8rem;
	height: 1.8rem;
	background-image: url('@/static/im/user.png');
	/* 让背景图覆盖整个元素 */
	background-size: cover;
	/* 背景图不重复 */
	background-repeat: no-repeat;
	margin-top: 35px;
	margin-right: 20px;
}
.jolkp_z {
	width: 1.8rem;
	height: 1.8rem;
	background-image: url('@/static/im/znx.png');
	/* 让背景图覆盖整个元素 */
	background-size: cover;
	/* 背景图不重复 */
	background-size: 100% 100%;

	margin-right: 20px;
}
.tiole {
	margin-top: -10px;
	margin-left: 105%;
	color: #fff;
	font-size: 14px;
}
.popup {
	position: absolute;
	top: 75px;
	/* 调整弹出框的位置 */
	right: 5px;
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	z-index: 3;
}

.popup ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.popup li {
	padding: 10px 20px;
	cursor: pointer;
	z-index: 999999;
}

.popup li:hover {
	background-color: #f0f0f0;
}

.fan {
	width: 10%;
	height: '100%';
	font-size: 18px;
	display: flex;

	padding: 5px;
}
@media screen and (device-width: 393px) and (device-height: 851px) and (-webkit-device-pixel-ratio: 3) {
	.fan {
		margin-right: 56% !important;
		width: 10%;
		height: '100%';
		font-size: 18px;
		display: flex;
		margin-top: 80%;
		/* padding: 5px; */
	}
}
.three {
	width: 100%;
	height: 10%;
	display: flex;
	justify-content: space-around;
	align-items: center;
	background: rgb(255, 255, 255);
}
.con {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.three_div1 {
	height: 3rem;
	width: 40%;
	background-image: url('@/static/im/kf.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
	justify-content: end;
}

.three_div2 {
	width: 40%;
	height: 3rem;
	background-image: url('@/static/im/hy.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	width: 40%;
}

.three_div3 {
	height: 3rem;
	background-image: url('@/static/im/da.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	width: 40%;
}
.tui-conversation-item {
	/* height: 10%; */
	padding: 12px;
	display: flex;
	align-items: center;
	cursor: pointer;
	box-sizing: border-box;
	overflow: hidden;
	border: 1px solid #d9d9d9;
	width: 98%;
	margin: 10px 10px 10px 5px;
	position: relative;
}
.content {
	display: flex;
	flex: 1;
	padding-left: 8px;
	justify-content: end;
	box-sizing: border-box;
	overflow: hidden;
}
.left {
	position: relative;
	width: 36px;
	height: 36px;
}

.znx {
	max-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	overflow-y: auto;
}
.delete-button {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 100px;
	background-color: red;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
</style>