app/pages/tabbar/im/index.vue

<template>
	<div style="height: 100%">
		<div class="jolkp">
			<div
				class="fan"
				:style="{ marginRight: statue == 0 ? '50%' : '50%' }"
			>
				<div
					@click="hui(0)"
					:style="{ marginTop: '35px', color: '#fff' }"
					v-if="statue == 1 || 6"
				>
					<
				</div>
			</div>
			<!-- <TUIContact v-else-if="statue==1"  :stu="2" /> -->
			<div
				@click="hui(6)"
				class="jolkp_z"
				v-if="statue == 0 || 6"
				:style="{ marginTop: '40px' }"
			>
				<div class="tiole">{{ tole }}</div>
			</div>

			<div
				@click="hui(1)"
				class="jolkp_h"
				v-if="statue == 0 || 6"
				:style="{ marginTop: '35px' }"
			></div>
			<div
				@click="fnkiopl"
				class="jolkp_l"
				:style="{ marginTop: '35px' }"
			></div>
			<!-- 弹出框 -->
			<div
				v-if="isPopupVisible"
				class="popup"
				ref="popup"
			>
				<ul>
					<li @click="handleAddFriend">添加好友/群聊</li>
					<li @click="handleMenu()">发起群聊</li>
					<li @click="handleScan">扫一扫</li>
				</ul>
			</div>
		</div>
		<!-- 搜索添加 -->
		<TUIContactsea
			v-if="statue == 2"
			@switchConversation="hui"
		/>
		<!-- 联系人 -->
		<TUIContact
			v-else-if="statue == 1"
			style="height: 100%"
		/>
		<SelectFriend
			v-else-if="statue == 3"
			@con="confn"
		/>
		<SelectFriendqlioa
			v-else-if="statue == 4"
			@concen="concen"
		/>
		<!-- 站内信数据 -->
		<!-- <div > -->
		<scroll-view
			@scrolltolower="lowerBottom"
			scroll-y="true"
			v-else-if="statue == 6"
			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
		/>
	</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 { TUIChatKit } from '@/TUIKit';
import SelectFriend from '@/TUIKit/components/TUIContact/select-friend/index.vue';
import SelectFriendqlioa from '@/TUIKit/components/TUIGroup/index.vue';
import TUICore, { ExtensionInfo, TUIConstants } from '@tencentcloud/tui-core';
import storage from '@/utils/storage.js';
import { getUserimInfo, getMember, getMemberstate, getMemberdelete } from '@/api/members';

// push
import { TUIConversationService } from '@tencentcloud/chat-uikit-engine';
import * as Push from '@/uni_modules/TencentCloud-Push';

TUIChatKit.init();
let vueVersion = 2;
// vueVersion = 3;

export default {
	// 注册组件
	components: {
		TUIConversation,
		TUIContact,
		TUIContactsea,
		ContactSearch,
		SelectFriend,
		SelectFriendqlioa,
		TUIChatKit
	},
	data() {
		return {
			statue: 0, // 0对话记录  1联系人 2添加好友/群聊  3建群  4群名称  6站内信
			isPopupVisible: false, // 控制弹出框的显示与隐藏
			isq: false,
			popupRef: null, // 新增，用于保存弹窗的引用
			meList: [],
			swipeStates: [],
			startX: 0,
			tole: 0, //已读未读
			cleartime: null,
			pageSize: 20,
			pageNumber: 1,
			total: 0,
			loadMoreStatus: 'more' // 加载更多状态
		};
	},
	created() {},
	onShow() {
		// 每次进入页面时调用的方法
		//获取用户信息
		getUserimInfo()
			.then(({ data }) => {
				if (data.code == 200) {
					const par = data.result;
					TUILogin.login({
						SDKAppID: par.sdkAppId,
						userID: par.userID,
						userSig: par.userSig,
						useUploadPlugin: true,
						framework: `vue${vueVersion}`
					}).then(() => {
						Push.setRegistrationID(par.userID, () => {
							console.log('设置id设置id设置id设置id设置id设置id设置id设置id设置id设置id', par.userID);

							Push.registerPush(
								par.sdkAppId,
								'vkFpe55aYqfV7Sk5uGaoxhEstJ3tcI9dquk7JwG1GloDSLD2HeMWeQweWWXgNlhC',
								(data) => {
									console.log('registerPush ok', data);
									Push.getRegistrationID((registrationID) => {
										console.log('getRegistrationID ok', registrationID);
									});
								},
								(errCode, errMsg) => {
									console.error('registerPush failed', errCode, errMsg);
								}
							);
						});
						// 监听通知栏点击事件，获取推送扩展信息
						Push.addPushListener(Push.EVENT.NOTIFICATION_CLICKED, (res) => {
							console.log('notification clicked', res);
							// 解析扩展信息，跳转到相应的会话（代码仅供参考，发布前需要完善）
							try {
								const data = JSON.parse(res.data);
								const conv_type = data?.entity?.chatType === 1 ? 'C2C' : 'GROUP';
								// 根据推送信息拼的 conversationID
								const conversationID = `${conv_type}${data.entity.sender}`;
								// 切换会话
								TUIConversationService.switchConversation(conversationID);
								const chatPath = '/TUIKit/components/TUIChat/index';
								uni.navigateTo({ url: chatPath });
							} catch (error) {
								console.log('error', error);
							}
						});
						// 监听在线推送
						Push.addPushListener(Push.EVENT.MESSAGE_RECEIVED, (res) => {
							// res 为消息内容
							console.log('message received', res);
						});
						// 监听在线推送被撤回
						Push.addPushListener(Push.EVENT.MESSAGE_REVOKED, (res) => {
							// res 为被撤回的消息 ID
							console.log('message revoked', res);
						});
					});
				} else {
					// 接口返回非 200 状态码，跳转登录页面
					uni.navigateTo({
						url: '/pages/passport/login'
					});
				}
			})
			.catch(() => {
				// 请求失败，跳转登录页面
				uni.navigateTo({
					url: '/pages/passport/login'
				});
			});
	},
	mounted() {
		this.getMembermethod();
		this.setTime();
		// 监听全局点击事件
		document.addEventListener('click', (event) => this.handleGlobalClick(event));
		// 监听滚动事件
	},
	beforeDestroy() {
		// 移除全局点击事件
		document.removeEventListener('click', this.handleGlobalClick);
		// 清除定时器
		clearTimeout(this.cleartime);
		// 移除滚动事件监听
	},
	methods: {
		lowerBottom() {
			if (this.total >= this.meList.length) {
				this.pageSize += 10;
				this.getMembermethod();
			}
		},
		setTime() {
			const th = this;
			this.cleartime = setTimeout(() => {
				this.getMembermethod();
				th.setTime(); //递归调用setTime函数，实现每10秒执行一次getMembermethod函数的效果
			}, 10000);
		},
		torut(item) {
			// 将 item 对象转换为 JSON 字符串，以便在 URL 中传递
			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;
		},
		handleGlobalClick(event) {
			if (this.isPopupVisible && event.target._prevClass != 'jolkp_l') {
				this.isPopupVisible = false;
			}
		},

		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);
					this.statue = 0;
					// 可以在这里添加处理扫码结果的逻辑
				},
				fail: (err) => {
					console.error('扫码失败:', err);
					this.statue = 0;
				}
			});
		},
		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>
uni-page-body,
html,
body,
page {
	width: 100% !important;
	height: 100% !important;
	overflow: hidden;
}
.jolkp {
	height: 66px;
	display: flex;
	font-size: 15px;
	justify-content: end;
	/* 设置背景图 */
	background-image: url('@/static/im/Rectangle.png');
	/* 让背景图覆盖整个元素 */
	background-size: cover;
	/* 背景图不重复 */
	background-repeat: no-repeat;
}

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

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

	margin-top: 35px;
	margin-right: 20px;
}
.tiole {
	margin-top: -10px;
	margin-left: 105%;
	color: #fff;
	font-size: 14px;
}
.popup {
	position: absolute;
	top: 65px;
	/* 调整弹出框的位置 */
	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;
}

.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: 85%;
		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-top: 10px;
	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>