502 lines
12 KiB
Vue
502 lines
12 KiB
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>
|