608 lines
14 KiB
Vue
608 lines
14 KiB
Vue
<template>
|
|
<div style="height: 100%" @click="handleTouchStart">
|
|
<div class="jolkp">
|
|
<div
|
|
class="fan"
|
|
:style="{ marginRight: statue == 0 ? '47.5%' : '47.5%' }"
|
|
>
|
|
<div @click="hui(0)" :style="{ marginTop: '45px' }" v-if="statue != 0">
|
|
<u-icon name="arrow-left"></u-icon>
|
|
</div>
|
|
</div>
|
|
<!-- <TUIContact v-else-if="statue==1" :stu="2" /> -->
|
|
<div
|
|
@click="hui(6)"
|
|
class="jolkp_z"
|
|
v-if="statue == 0 || 6"
|
|
:style="{ marginTop: '45px' }"
|
|
>
|
|
<div class="tiole">{{ tole }}</div>
|
|
</div>
|
|
|
|
<div
|
|
@click="hui(1)"
|
|
class="jolkp_h"
|
|
v-if="statue == 0 || 6"
|
|
:style="{ marginTop: '45px' }"
|
|
></div>
|
|
<view class="jolkp_l" :style="{ marginTop: '45px' }"></view>
|
|
<!-- 弹出框 -->
|
|
<view v-if="isPopupVisible" class="popup" ref="popup">
|
|
<ul>
|
|
<li @click.stop="handleAddFriend">添加好友/群聊</li>
|
|
<li @click.stop="handleMenu()">发起群聊</li>
|
|
<li @click.stop="handleScan">扫一扫</li>
|
|
</ul>
|
|
</view>
|
|
</div>
|
|
<!-- 搜索添加 -->
|
|
<TUIContactsea v-if="statue == 2" @switchConversation="hui" />
|
|
<!-- 联系人 -->
|
|
<TUIContact
|
|
v-else-if="statue == 1 && isPopupVisible == false"
|
|
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" />
|
|
<ContactInfo v-else-if="statue == 7" @concen="concen" />
|
|
<!-- 站内信数据 -->
|
|
<!-- <div > -->
|
|
<scroll-view
|
|
@scrolltolower="lowerBottom"
|
|
scroll-y="true"
|
|
v-else-if="statue == 6 && isPopupVisible == false"
|
|
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 @state="state" />
|
|
<!-- 未登录显示 -->
|
|
<view v-if="showNoLoginPage" class="no-login" @click="toLogin">
|
|
请登录
|
|
</view>
|
|
</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 ContactInfo from "@/TUIKit/components/TUIContact/contact-info/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";
|
|
import {
|
|
TUITranslateService,
|
|
TUIStore,
|
|
StoreName,
|
|
IGroupModel,
|
|
TUIFriendService,
|
|
Friend,
|
|
FriendApplication,
|
|
TUIUserService,
|
|
} from "@tencentcloud/chat-uikit-engine";
|
|
// TUIChatKit.init();
|
|
// let vueVersion = 2;
|
|
// vueVersion = 3;
|
|
|
|
export default {
|
|
// 注册组件
|
|
components: {
|
|
TUIConversation,
|
|
TUIContact,
|
|
TUIContactsea,
|
|
ContactSearch,
|
|
SelectFriend,
|
|
SelectFriendqlioa,
|
|
// TUIChatKit,
|
|
CreateGroup,
|
|
ContactInfo,
|
|
},
|
|
data() {
|
|
return {
|
|
showNoLoginPage: false,
|
|
statue: 1, // 0对话记录 1联系人 2添加好友/群聊 3建群 4群名称 6站内信 10群类型 7扫码后用户详情
|
|
isPopupVisible: false, // 控制弹出框的显示与隐藏
|
|
isq: false,
|
|
popupRef: null, // 新增，用于保存弹窗的引用
|
|
meList: [],
|
|
swipeStates: [],
|
|
startX: 0,
|
|
tole: 0, //已读未读
|
|
timer: null, //获取站内信
|
|
pageSize: 20,
|
|
pageNumber: 1,
|
|
total: 0,
|
|
loadMoreStatus: "more", // 加载更多状态
|
|
};
|
|
},
|
|
onTabItemTap(e) {
|
|
let tabIndex = e.index;
|
|
console.log(tabIndex);
|
|
if (tabIndex == 2) {
|
|
// 检测登录状态
|
|
if (!storage.getHasLogin()) {
|
|
this.removeTimer();
|
|
// 未登录
|
|
uni.navigateTo({
|
|
url: "/pages/passport/login",
|
|
});
|
|
this.showNoLoginPage = true;
|
|
} else {
|
|
this.removeTimer();
|
|
this.setTime();
|
|
this.showNoLoginPage = false;
|
|
}
|
|
}
|
|
},
|
|
onUnload() {},
|
|
created() {},
|
|
onHide() {
|
|
console.log("IM页面隐藏");
|
|
this.removeTimer();
|
|
},
|
|
onShow() {
|
|
// 检测登录状态
|
|
if (!storage.getHasLogin()) {
|
|
this.removeTimer();
|
|
// 未登录
|
|
this.showNoLoginPage = true;
|
|
} else {
|
|
this.setTime();
|
|
this.showNoLoginPage = false;
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
this.getMembermethod();
|
|
this.setTime();
|
|
|
|
// 监听自定义全局点击事件
|
|
uni.$on("globalClick", (event) => {
|
|
this.handleGlobalClick(event);
|
|
});
|
|
|
|
// // 在页面根元素上监听触摸开始事件并触发自定义全局点击事件
|
|
// uni.onTouchStart((event) => {
|
|
// uni.$emit("globalClick", event);
|
|
// });
|
|
},
|
|
beforeDestroy() {
|
|
// 移除全局点击事件监听
|
|
uni.$off("globalClick");
|
|
// 清除定时器
|
|
this.removeTimer();
|
|
},
|
|
methods: {
|
|
toLogin() {
|
|
uni.navigateTo({
|
|
url: "/pages/passport/login",
|
|
});
|
|
},
|
|
state(item) {
|
|
this.isPopupVisible = item;
|
|
},
|
|
handleTouchStart(event) {
|
|
uni.$emit("globalClick", event);
|
|
},
|
|
handleGlobalClick(event) {
|
|
const query = uni.createSelectorQuery().in(this);
|
|
query
|
|
.select(".jolkp_l")
|
|
// 获取节点的布局位置和尺寸信息
|
|
.boundingClientRect((rect) => {
|
|
if (rect) {
|
|
const clickX = event.clientX || event.touches[0].clientX;
|
|
const clickY = event.clientY || event.touches[0].clientY;
|
|
|
|
if (
|
|
clickX >= rect.left &&
|
|
clickX <= rect.width + rect.left &&
|
|
clickY >= rect.top &&
|
|
clickY <= rect.top + rect.height * 2
|
|
) {
|
|
// this.statue = 0; // 点击在节点范围内，执行相应操作
|
|
if (this.statue == 2) {
|
|
return;
|
|
} else {
|
|
this.isPopupVisible = !this.isPopupVisible; // 隐藏弹出框
|
|
}
|
|
} else {
|
|
// this.statue = 0; // 点击在节点范围内，执行相应操作
|
|
this.isPopupVisible = false; // 隐藏弹出框
|
|
}
|
|
}
|
|
})
|
|
// 执行查询操作
|
|
.exec(() => {
|
|
// this.isPopupVisible = true; // 隐藏弹出框
|
|
});
|
|
},
|
|
lowerBottom() {
|
|
if (this.total >= this.meList.length) {
|
|
this.pageSize += 10;
|
|
this.getMembermethod();
|
|
}
|
|
},
|
|
removeTimer() {
|
|
if (this.timer) {
|
|
clearInterval(this.timer);
|
|
this.timer = null;
|
|
}
|
|
},
|
|
setTime() {
|
|
if (this.timer) {
|
|
return;
|
|
}
|
|
this.timer = setInterval(() => {
|
|
this.getMembermethod();
|
|
}, 10000);
|
|
},
|
|
torut(item) {
|
|
this.isPopupVisible = false;
|
|
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;
|
|
},
|
|
|
|
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.result);
|
|
const params = {
|
|
userID: res.result, //userID
|
|
};
|
|
console.log("params", params);
|
|
TUIStore.update(StoreName.CUSTOM, "currentContactInfo", params);
|
|
this.statue = 7;
|
|
},
|
|
});
|
|
},
|
|
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>
|
|
.no-login {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
background-color: #000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 9999999;
|
|
font-size: 36rpx;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
}
|
|
uni-page-body,
|
|
html,
|
|
body,
|
|
page {
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
overflow: hidden;
|
|
}
|
|
.jolkp {
|
|
position: sticky;
|
|
top: 0;
|
|
height: 75px;
|
|
display: flex;
|
|
font-size: 15px;
|
|
justify-content: end;
|
|
/* background: green; */
|
|
/* 设置背景图 */
|
|
/* background-image: url('@/static/im/Rectangle.png'); */
|
|
/* 让背景图覆盖整个元素 */
|
|
background-size: cover;
|
|
/* 背景图不重复 */
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.jolkp_l {
|
|
width: 1.8rem;
|
|
height: 1.8rem;
|
|
background-image: url("@/static/im/Frame.png");
|
|
/* 让背景图覆盖整个元素 */
|
|
background-size: cover;
|
|
/* 背景图不重复 */
|
|
background-repeat: no-repeat;
|
|
margin-top: 35px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.jolkp_h {
|
|
width: 1.8rem;
|
|
height: 1.8rem;
|
|
background-image: url("@/static/im/user.png");
|
|
/* 让背景图覆盖整个元素 */
|
|
background-size: cover;
|
|
/* 背景图不重复 */
|
|
background-repeat: no-repeat;
|
|
margin-top: 35px;
|
|
margin-right: 20px;
|
|
}
|
|
.jolkp_z {
|
|
width: 1.8rem;
|
|
height: 1.8rem;
|
|
background-image: url("@/static/im/znx.png");
|
|
/* 让背景图覆盖整个元素 */
|
|
background-size: cover;
|
|
/* 背景图不重复 */
|
|
background-size: 100% 100%;
|
|
|
|
margin-right: 20px;
|
|
}
|
|
.tiole {
|
|
margin-top: -10px;
|
|
margin-left: 105%;
|
|
color: #fff;
|
|
font-size: 14px;
|
|
}
|
|
.popup {
|
|
position: absolute;
|
|
top: 75px;
|
|
/* 调整弹出框的位置 */
|
|
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;
|
|
z-index: 999999;
|
|
}
|
|
|
|
.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: 80%;
|
|
/* 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>
|