app/pages/tabbar/im/index.vue

573 lines
14 KiB
Vue
Raw Normal View History

2025-03-19 15:35:09 +08:00
<template>
2025-04-12 17:11:06 +08:00
<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>
2025-04-09 17:36:48 +08:00
<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>
2025-03-19 15:35:09 +08:00
<!-- 弹出框 -->
2025-04-09 17:36:48 +08:00
<div v-if="isPopupVisible" class="popup" ref="popup">
2025-03-19 15:35:09 +08:00
<ul>
<li @click="handleAddFriend">添加好友/群聊</li>
<li @click="handleMenu()">发起群聊</li>
2025-04-09 17:36:48 +08:00
<li @click="handleScan">扫一扫</li>
2025-03-19 15:35:09 +08:00
</ul>
</div>
</div>
<!-- 搜索添加 -->
2025-04-09 17:36:48 +08:00
<TUIContactsea v-if="statue == 2" @switchConversation="hui" />
2025-03-19 15:35:09 +08:00
<!-- 联系人 -->
2025-04-09 17:36:48 +08:00
<TUIContact v-else-if="statue == 1" style="height: 100%" />
2025-04-21 17:39:41 +08:00
<!-- 群选择的 -->
<SelectFriend
v-else-if="statue == 3"
@con="hui"
:style="{ marginTop: '20px', heigth: '80%' }"
/>
<!-- 群类型 -->
<CreateGroup v-else-if="statue == 10" @con="confn" />
2025-03-19 15:35:09 +08:00
<SelectFriendqlioa v-else-if="statue == 4" @concen="concen" />
2025-04-09 17:36:48 +08:00
<!-- 站内信数据 -->
<!-- <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>
2025-04-12 17:11:06 +08:00
<!-- </div> -->
<!-- 会话 -->
<TUIConversation
style="height: 100%"
v-else
/>
</div>
2025-03-19 15:35:09 +08:00
</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";
2025-04-21 17:39:41 +08:00
import CreateGroup from "@/TUIKit/components/TUIGroup/create-group/index.vue";
2025-03-19 15:35:09 +08:00
import { TUIChatKit } from "@/TUIKit";
import SelectFriend from "@/TUIKit/components/TUIContact/select-friend/index.vue";
import SelectFriendqlioa from "@/TUIKit/components/TUIGroup/index.vue";
2025-04-21 17:39:41 +08:00
2025-03-19 15:35:09 +08:00
import TUICore, { ExtensionInfo, TUIConstants } from "@tencentcloud/tui-core";
import storage from "@/utils/storage.js";
2025-04-22 10:01:19 +08:00
// push
import { TUIConversationService } from '@tencentcloud/chat-uikit-engine';
import * as Push from '@/uni_modules/TencentCloud-Push';
2025-04-09 17:36:48 +08:00
import {
getUserimInfo,
getMember,
getMemberstate,
getMemberdelete,
2025-04-21 17:39:41 +08:00
geterweijki,
2025-04-09 17:36:48 +08:00
} from "@/api/members";
2025-03-19 15:35:09 +08:00
TUIChatKit.init();
let vueVersion = 2;
// vueVersion = 3;
export default {
// 注册组件
components: {
TUIConversation,
TUIContact,
TUIContactsea,
ContactSearch,
SelectFriend,
SelectFriendqlioa,
TUIChatKit,
2025-04-21 17:39:41 +08:00
CreateGroup,
2025-03-19 15:35:09 +08:00
},
data() {
return {
2025-04-09 17:36:48 +08:00
statue: 0, // 0对话记录 1联系人 2添加好友/群聊 3建群 4群名称 6站内信
2025-03-19 15:35:09 +08:00
isPopupVisible: false, // 控制弹出框的显示与隐藏
isq: false,
2025-04-09 17:36:48 +08:00
popupRef: null, // 新增,用于保存弹窗的引用
meList: [],
swipeStates: [],
startX: 0,
tole: 0, //已读未读
cleartime: null,
pageSize: 20,
pageNumber: 1,
total: 0,
loadMoreStatus: "more", // 加载更多状态
2025-03-19 15:35:09 +08:00
};
},
created() {},
onShow() {
// 每次进入页面时调用的方法
//获取用户信息
getUserimInfo()
.then(({ data }) => {
if (data.code == 200) {
const par = data.result;
TUILogin.login({
2025-03-28 16:05:11 +08:00
SDKAppID: par.sdkAppId,
userID: par.userID,
userSig: par.userSig,
2025-03-19 15:35:09 +08:00
useUploadPlugin: true, // If you need to send rich media messages, please set to true.
framework: `vue${vueVersion}`, // framework used vue2 / vue3
2025-04-21 18:04:01 +08:00
}).then(()=>{
Push.setRegistrationID(par.userID, () => {
console.log('设置id设置id设置id设置id设置id设置id设置id设置id设置id设置id', par.userID);
2025-04-12 17:11:06 +08:00
2025-04-21 18:04:01 +08:00
Push.registerPush(
par.sdkAppId,
'vkFpe55aYqfV7Sk5uGaoxhEstJ3tcI9dquk7JwG1GloDSLD2HeMWeQweWWXgNlhC',
(data) => {
console.log('registerPush ok', data);
Push.getRegistrationID((registrationID) => {
console.log('getRegistrationID ok', registrationID);
2025-04-12 17:11:06 +08:00
});
2025-04-21 18:04:01 +08:00
},
(errCode, errMsg) => {
console.error('registerPush failed', errCode, errMsg);
2025-04-12 17:11:06 +08:00
}
2025-04-21 18:04:01 +08:00
);
});
// 监听通知栏点击事件,获取推送扩展信息
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);
2025-04-12 17:11:06 +08:00
}
});
2025-04-21 18:04:01 +08:00
// 监听在线推送
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);
});
})
2025-03-19 15:35:09 +08:00
} else {
// 接口返回非 200 状态码,跳转登录页面
uni.navigateTo({
url: "/pages/passport/login",
});
}
})
.catch(() => {
// 请求失败,跳转登录页面
uni.navigateTo({
url: "/pages/passport/login",
});
});
},
2025-04-09 17:36:48 +08:00
mounted() {
this.getMembermethod();
this.setTime();
// 监听全局点击事件
document.addEventListener("click", (event) =>
this.handleGlobalClick(event)
);
// 监听滚动事件
},
beforeDestroy() {
// 移除全局点击事件
document.removeEventListener("click", this.handleGlobalClick);
// 清除定时器
clearTimeout(this.cleartime);
// 移除滚动事件监听
},
2025-03-19 15:35:09 +08:00
methods: {
2025-04-09 17:36:48 +08:00
lowerBottom() {
2025-04-21 17:39:41 +08:00
if (this.total >= this.meList.length) {
this.pageSize += 10;
2025-04-09 17:36:48 +08:00
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();
});
},
2025-03-19 15:35:09 +08:00
//完成跳转群名
confn() {
2025-04-21 17:39:41 +08:00
this.statue = 0;
2025-04-09 17:36:48 +08:00
this.isPopupVisible = false;
2025-03-19 15:35:09 +08:00
},
concen() {
this.statue = 0;
},
hui(index) {
this.statue = index;
},
fnkiopl() {
this.isPopupVisible = !this.isPopupVisible;
2025-04-09 17:36:48 +08:00
this.popupRef = this.$refs.popup;
},
handleGlobalClick(event) {
if (this.isPopupVisible && event.target._prevClass != "jolkp_l") {
this.isPopupVisible = false;
}
},
2025-04-21 17:39:41 +08:00
2025-04-09 17:36:48 +08:00
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;
});
2025-03-19 15:35:09 +08:00
},
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;
},
2025-04-09 17:36:48 +08:00
handleScan() {
this.isPopupVisible = false;
uni.scanCode({
success: (res) => {
2025-04-21 17:39:41 +08:00
console.log("扫码结果:---", res);
geterweijki(res.result).then((resfn) => {
console.log(resfn, "====");
this.getUserimInfo();
this.statue = 0;
});
this.statue = 0;
2025-04-09 17:36:48 +08:00
// 可以在这里添加处理扫码结果的逻辑
},
fail: (err) => {
console.error("扫码失败:", err);
2025-04-21 17:39:41 +08:00
this.statue = 0;
2025-04-09 17:36:48 +08:00
},
});
},
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);
},
2025-03-19 15:35:09 +08:00
},
};
</script>
2025-03-28 16:05:11 +08:00
<style scoped>
uni-page-body,
html,
body,
page {
2025-04-12 17:11:06 +08:00
width: 100% !important;
height: 100% !important;
overflow: hidden;
2025-03-28 16:05:11 +08:00
}
2025-03-19 15:35:09 +08:00
.jolkp {
2025-04-12 17:11:06 +08:00
height: 66px;
display: flex;
font-size: 15px;
justify-content: end;
/* 设置背景图 */
background-image: url('@/static/im/Rectangle.png');
/* 让背景图覆盖整个元素 */
background-size: cover;
/* 背景图不重复 */
background-repeat: no-repeat;
2025-03-19 15:35:09 +08:00
}
.jolkp_l {
2025-04-12 17:11:06 +08:00
width: 2rem;
height: 2rem;
background-image: url('@/static/im/Frame.png');
/* 让背景图覆盖整个元素 */
background-size: cover;
/* 背景图不重复 */
background-repeat: no-repeat;
margin-top: 35px;
margin-right: 10px;
2025-03-19 15:35:09 +08:00
}
.jolkp_h {
2025-04-12 17:11:06 +08:00
width: 2rem;
height: 2rem;
background-image: url('@/static/im/user.png');
/* 让背景图覆盖整个元素 */
background-size: cover;
/* 背景图不重复 */
background-repeat: no-repeat;
margin-top: 35px;
margin-right: 20px;
2025-03-19 15:35:09 +08:00
}
2025-04-09 17:36:48 +08:00
.jolkp_z {
2025-04-12 17:11:06 +08:00
width: 2rem;
height: 1.5rem;
background-image: url('@/static/im/znx.png');
/* 让背景图覆盖整个元素 */
background-size: cover;
/* 背景图不重复 */
background-size: 100% 100%;
2025-03-19 15:35:09 +08:00
2025-04-12 17:11:06 +08:00
margin-top: 35px;
margin-right: 20px;
2025-04-09 17:36:48 +08:00
}
.tiole {
2025-04-12 17:11:06 +08:00
margin-top: -10px;
margin-left: 105%;
color: #fff;
font-size: 14px;
2025-04-09 17:36:48 +08:00
}
2025-03-19 15:35:09 +08:00
.popup {
2025-04-12 17:11:06 +08:00
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;
2025-03-19 15:35:09 +08:00
}
.popup ul {
2025-04-12 17:11:06 +08:00
list-style-type: none;
padding: 0;
margin: 0;
2025-03-19 15:35:09 +08:00
}
.popup li {
2025-04-12 17:11:06 +08:00
padding: 10px 20px;
cursor: pointer;
2025-03-19 15:35:09 +08:00
}
.popup li:hover {
2025-04-12 17:11:06 +08:00
background-color: #f0f0f0;
2025-03-19 15:35:09 +08:00
}
.fan {
2025-04-12 17:11:06 +08:00
width: 10%;
height: '100%';
font-size: 18px;
display: flex;
2025-04-09 17:36:48 +08:00
2025-04-12 17:11:06 +08:00
padding: 5px;
2025-03-19 15:35:09 +08:00
}
2025-04-09 17:36:48 +08:00
@media screen and (device-width: 393px) and (device-height: 851px) and (-webkit-device-pixel-ratio: 3) {
2025-04-12 17:11:06 +08:00
.fan {
margin-right: 56% !important;
width: 10%;
height: '100%';
font-size: 18px;
display: flex;
margin-top: 85%;
padding: 5px;
}
2025-04-09 17:36:48 +08:00
}
2025-03-19 15:35:09 +08:00
.three {
2025-04-12 17:11:06 +08:00
width: 100%;
height: 10%;
display: flex;
justify-content: space-around;
align-items: center;
background: rgb(255, 255, 255);
2025-03-19 15:35:09 +08:00
}
2025-04-09 17:36:48 +08:00
.con {
2025-04-12 17:11:06 +08:00
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
2025-03-19 15:35:09 +08:00
}
.three_div1 {
2025-04-12 17:11:06 +08:00
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;
2025-03-19 15:35:09 +08:00
}
.three_div2 {
2025-04-12 17:11:06 +08:00
width: 40%;
height: 3rem;
background-image: url('@/static/im/hy.png');
background-size: 100% 100%;
background-repeat: no-repeat;
width: 40%;
2025-03-19 15:35:09 +08:00
}
.three_div3 {
2025-04-12 17:11:06 +08:00
height: 3rem;
background-image: url('@/static/im/da.png');
background-size: 100% 100%;
background-repeat: no-repeat;
width: 40%;
2025-03-19 15:35:09 +08:00
}
2025-04-09 17:36:48 +08:00
.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%;
2025-04-21 17:39:41 +08:00
margin: 10px 10px 10px 5px;
2025-04-09 17:36:48 +08:00
position: relative;
}
.content {
2025-04-12 17:11:06 +08:00
display: flex;
flex: 1;
padding-left: 8px;
justify-content: end;
box-sizing: border-box;
overflow: hidden;
2025-04-09 17:36:48 +08:00
}
.left {
2025-04-12 17:11:06 +08:00
position: relative;
width: 36px;
height: 36px;
2025-04-09 17:36:48 +08:00
}
2025-03-28 16:05:11 +08:00
2025-04-09 17:36:48 +08:00
.znx {
2025-04-12 17:11:06 +08:00
max-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow-y: auto;
2025-04-09 17:36:48 +08:00
}
.delete-button {
2025-04-12 17:11:06 +08:00
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;
2025-04-09 17:36:48 +08:00
}
2025-04-21 17:39:41 +08:00
2025-03-19 15:35:09 +08:00
</style>