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";
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, // If you need to send rich media messages, please set to true.
            framework: `vue${vueVersion}`, // framework used vue2 / vue3
          });
        } 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>