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="hui"
      :style="{ marginTop: '20px', heigth: '80%' }"
    />
    <!-- 群类型 -->
    <CreateGroup v-else-if="statue == 10" @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 CreateGroup from "@/TUIKit/components/TUIGroup/create-group/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";
// 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";
TUIChatKit.init();
let vueVersion = 2;
// vueVersion = 3;

export default {
  // 注册组件
  components: {
    TUIConversation,
    TUIContact,
    TUIContactsea,
    ContactSearch,
    SelectFriend,
    SelectFriendqlioa,
    TUIChatKit,
    CreateGroup,
  },
  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, // If you need to send rich media messages, please set to true.
            framework: `vue${vueVersion}`, // framework used vue2 / vue3
          }).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);
          geterweijki(res.result).then((resfn) => {
            console.log(resfn, "====");
            this.getUserimInfo();
            this.statue = 0;
          });
          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: 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>