|
|
@@ -6,7 +6,7 @@
|
|
|
<el-tabs class="live-console-tab-left" v-model="tabRight.activeName" @tab-click="handleClick" :stretch="true">
|
|
|
<el-tab-pane label="讨论" name="talk">
|
|
|
<el-scrollbar style="height: 500px; width: 100%;" ref="manageRightRef">
|
|
|
- <el-row v-for="m in msgList" :key="m.id">
|
|
|
+ <el-row v-for="m in msgList" >
|
|
|
<el-row v-if="m.userId !== userId" style="margin-top: 5px" type="flex" align="top" >
|
|
|
<el-col :span="3" style="margin-left: 10px"><el-avatar :src="m.avatar"/></el-col>
|
|
|
<el-col :span="15">
|
|
|
@@ -101,7 +101,7 @@
|
|
|
class="custom-video"
|
|
|
style="display: block; background: #000; height: 40vh;"
|
|
|
>
|
|
|
- <source :src="videoUrl" type="video/mp4">
|
|
|
+ <source :src="videoUrl" type="application/x-mpegURL">
|
|
|
</video>
|
|
|
<!-- 自定义进度条容器 -->
|
|
|
<div ref="progressBar" class="progress-container">
|
|
|
@@ -123,7 +123,7 @@
|
|
|
playsinline
|
|
|
style="display: block; background: #000; height: 40vh;"
|
|
|
>
|
|
|
- <source :src="videoUrl" type="video/mp4">
|
|
|
+ <source :src="videoUrl" type="application/x-mpegURL">
|
|
|
</video>
|
|
|
</div>
|
|
|
<div style="border-radius: 5px; overflow: hidden;" v-else>
|
|
|
@@ -186,7 +186,7 @@
|
|
|
<el-tabs class="live-console-tab-right" v-model="tabLeft.activeName" @tab-click="handleClick" :stretch="true">
|
|
|
<el-tab-pane :label="onlineLabel" name="online">
|
|
|
<el-scrollbar ref="manageLeftRef_online" style="height: 800px; width: 100%;">
|
|
|
- <el-row style="margin-top: 10px" type="flex" align="middle" v-for="u in onlineUserList" :key="u.userId">
|
|
|
+ <el-row style="margin-top: 10px" type="flex" align="middle" v-for="u in onlineDisplayList" :key="u.userId">
|
|
|
<el-col :span="20">
|
|
|
<el-row type="flex" align="middle">
|
|
|
<el-col :span="4" style="padding-left: 10px;"><el-avatar :src="u.avatar"></el-avatar></el-col>
|
|
|
@@ -208,7 +208,7 @@
|
|
|
</el-tab-pane>
|
|
|
<el-tab-pane :label="offlineLabel" name="offline">
|
|
|
<el-scrollbar ref="manageLeftRef_offline" style="height: 800px; width: 100%;">
|
|
|
- <el-row style="margin-top: 10px" type="flex" align="middle" v-for="u in offlineUserList" :key="u.userId">
|
|
|
+ <el-row style="margin-top: 10px" type="flex" align="middle" v-for="u in offlineDisplayList" :key="u.userId">
|
|
|
<el-col :span="20">
|
|
|
<el-row type="flex" align="middle">
|
|
|
<el-col :span="4" style="padding-left: 10px;"><el-avatar :src="u.avatar"></el-avatar></el-col>
|
|
|
@@ -230,7 +230,7 @@
|
|
|
</el-tab-pane>
|
|
|
<el-tab-pane :label="silencedUserLabel" name="silenced">
|
|
|
<el-scrollbar ref="manageLeftRef_silenced" style="height: 800px; width: 100%;">
|
|
|
- <el-row style="margin-top: 10px" type="flex" align="middle" v-for="u in silencedUserList" :key="u.userId">
|
|
|
+ <el-row style="margin-top: 10px" type="flex" align="middle" v-for="u in silencedDisplayList" :key="u.userId">
|
|
|
<el-col :span="20">
|
|
|
<el-row type="flex" align="middle">
|
|
|
<el-col :span="4" style="padding-left: 10px;"><el-avatar :src="u.avatar"></el-avatar></el-col>
|
|
|
@@ -258,7 +258,7 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import {blockUser, changeUserStatus, watchUserList} from '@/api/live/liveWatchUser'
|
|
|
+import {blockUser, changeUserStatus, getLiveUserTotals, watchUserList} from '@/api/live/liveWatchUser'
|
|
|
import { getLiveVideoByLiveId } from '@/api/live/liveVideo'
|
|
|
import {getLivingUrl, getLive, delLive} from '@/api/live/live'
|
|
|
import { getLiveOrderTimeGranularity } from '@/api/live/liveOrder'
|
|
|
@@ -328,6 +328,50 @@ export default {
|
|
|
// ... 其他数据
|
|
|
chatScrollTop: 0, // 保存聊天滚动位置,
|
|
|
liveId: null,
|
|
|
+ userTotal: {
|
|
|
+ online: 0, // 在线总人数
|
|
|
+ offline: 0, // 离线总人数
|
|
|
+ silenced: 0 // 禁言总人数
|
|
|
+ },
|
|
|
+ // 各Tab的显示列表（仅存储当前需要展示的数据）
|
|
|
+ onlineDisplayList: [], // 在线用户显示列表
|
|
|
+ offlineDisplayList: [], // 离线用户显示列表
|
|
|
+ silencedDisplayList: [], // 禁言用户显示列表
|
|
|
+ // 各Tab的分页参数
|
|
|
+ pageParams: {
|
|
|
+ online: {
|
|
|
+ currentPage: 1, // 当前页（下一页加载用）
|
|
|
+ pageSize: 20, // 当前页（下一页加载用）
|
|
|
+ prevPage: 0, // 上一页页码（上一页加载用）
|
|
|
+ totalLoaded: 0, // 已加载总条数
|
|
|
+ total: 0, // 总数据量
|
|
|
+ hasMore: true, // 是否有下一页
|
|
|
+ hasPrev: false // 是否有上一页
|
|
|
+ },
|
|
|
+ offline: {
|
|
|
+ currentPage: 1,
|
|
|
+ pageSize: 20,
|
|
|
+ prevPage: 0,
|
|
|
+ totalLoaded: 0,
|
|
|
+ total: 0,
|
|
|
+ hasMore: true,
|
|
|
+ hasPrev: false
|
|
|
+ },
|
|
|
+ silenced: {
|
|
|
+ currentPage: 1,
|
|
|
+ pageSize: 20,
|
|
|
+ prevPage: 0,
|
|
|
+ totalLoaded: 0,
|
|
|
+ total: 0,
|
|
|
+ hasMore: true,
|
|
|
+ hasPrev: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ scrLoading: {
|
|
|
+ online: { next: false, prev: false },
|
|
|
+ offline: { next: false, prev: false },
|
|
|
+ silenced: { next: false, prev: false }
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
@@ -340,7 +384,6 @@ export default {
|
|
|
this.getList()
|
|
|
this.connectWebSocket()
|
|
|
this.getLive()
|
|
|
- console.log(this.liveId)
|
|
|
this.searchQuery.liveId = this.liveId
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -350,32 +393,14 @@ export default {
|
|
|
companyId() {
|
|
|
return this.$store.state.user.user.companyId
|
|
|
},
|
|
|
- onlineUserList() {
|
|
|
- return this.userList.filter(u => u.online === 0)
|
|
|
- },
|
|
|
onlineLabel() {
|
|
|
- if (this.onlineUserList.length > 0) {
|
|
|
- return '在线(' + this.onlineUserList.length + ')'
|
|
|
- }
|
|
|
- return '在线'
|
|
|
- },
|
|
|
- offlineUserList() {
|
|
|
- return this.userList.filter(u => u.online === 1)
|
|
|
+ return `在线(${this.userTotal.online})`;
|
|
|
},
|
|
|
offlineLabel() {
|
|
|
- if (this.offlineUserList.length > 0) {
|
|
|
- return '离线(' + this.offlineUserList.length + ')'
|
|
|
- }
|
|
|
- return '离线'
|
|
|
- },
|
|
|
- silencedUserList() {
|
|
|
- return this.userList.filter(u => u.msgStatus === 1)
|
|
|
+ return `离线(${this.userTotal.offline})`;
|
|
|
},
|
|
|
silencedUserLabel() {
|
|
|
- if (this.silencedUserList.length > 0) {
|
|
|
- return '禁言(' + this.silencedUserList.length + ')'
|
|
|
- }
|
|
|
- return '禁言'
|
|
|
+ return `禁言(${this.userTotal.silenced})`;
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
@@ -389,6 +414,24 @@ export default {
|
|
|
this.$refs.manageRightRef.wrap.addEventListener('scroll', this.saveChatScrollPosition);
|
|
|
}
|
|
|
});
|
|
|
+ this.initScrollListeners();
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ this.saveTabScrollPositions()
|
|
|
+ // 移除滚动监听（避免内存泄漏）
|
|
|
+ const scrollRefs = {
|
|
|
+ online: this.$refs.manageLeftRef_online,
|
|
|
+ offline: this.$refs.manageLeftRef_offline,
|
|
|
+ silenced: this.$refs.manageLeftRef_silenced
|
|
|
+ };
|
|
|
+ Object.keys(scrollRefs).forEach(tabName => {
|
|
|
+ const scrollEl = scrollRefs[tabName]?.wrap;
|
|
|
+ if (scrollEl) {
|
|
|
+ scrollEl.removeEventListener('scroll', () =>
|
|
|
+ this.handleTabScroll(tabName, scrollEl)
|
|
|
+ );
|
|
|
+ }
|
|
|
+ })
|
|
|
},
|
|
|
// 使用 deactivated 和 activated 钩子替代 beforeDestroy 和 destroyed
|
|
|
deactivated() {
|
|
|
@@ -401,7 +444,6 @@ export default {
|
|
|
this.$nextTick(() => {
|
|
|
const video = this.$refs.videoPlayer;
|
|
|
if (video != null) {
|
|
|
- video.play();
|
|
|
this.initVideoPlayer(this.liveInfo.startTime)
|
|
|
}
|
|
|
})
|
|
|
@@ -457,12 +499,9 @@ export default {
|
|
|
this.startTime = new Date(res.data.startTime).getTime()
|
|
|
this.processInterval = setInterval(this.updateLiveProgress, 1000);
|
|
|
} else {
|
|
|
- console.log("getinfo")
|
|
|
this.liveType = 2
|
|
|
this.videoUrl = res.data.videoUrl;
|
|
|
this.$nextTick(() => {
|
|
|
- const video = this.$refs.videoPlayer;
|
|
|
- video.play()
|
|
|
this.initVideoPlayer(res.data.startTime)
|
|
|
})
|
|
|
}
|
|
|
@@ -477,9 +516,18 @@ export default {
|
|
|
},
|
|
|
initVideoPlayer: function (startTime) {
|
|
|
const video = this.$refs.videoPlayer;
|
|
|
- console.log(123)
|
|
|
-
|
|
|
|
|
|
+ this.hls = new Hls();
|
|
|
+ this.hls.attachMedia(video);
|
|
|
+ this.hls.on(Hls.Events.MEDIA_ATTACHED, () => {
|
|
|
+ this.hls.loadSource(this.videoUrl);
|
|
|
+ this.hls.on(Hls.Events.STREAM_LOADED, (event, data) => {
|
|
|
+ video.play();
|
|
|
+ });
|
|
|
+ });
|
|
|
+ this.hls.on(Hls.Events.ERROR, (event, data) => {
|
|
|
+ console.error('HLS 错误:', data);
|
|
|
+ });
|
|
|
// 1. 初始化开播时间
|
|
|
startTime = new Date(startTime).getTime();
|
|
|
this.startTime = startTime;
|
|
|
@@ -543,7 +591,6 @@ export default {
|
|
|
|
|
|
const currentTime = new Date().getTime();
|
|
|
const elapsedTime = currentTime - this.startTime; // 总流逝时间（毫秒）
|
|
|
- console.log(this.startTime)
|
|
|
|
|
|
if (elapsedTime < 0) {
|
|
|
elapsedTimeEl.textContent = '00:00:00';
|
|
|
@@ -658,27 +705,221 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
handleClick(tab) {
|
|
|
+ const tabName = tab.name;
|
|
|
+ const params = this.pageParams[tabName];
|
|
|
+ const displayList = this[`${tabName}DisplayList`];
|
|
|
+ // 首次切换到该Tab或列表为空时初始化
|
|
|
+ if (displayList.length < 20) {
|
|
|
+ // 重置分页参数
|
|
|
+ params.currentPage = 1;
|
|
|
+ params.pageSize = 20;
|
|
|
+ params.prevPage = 0;
|
|
|
+ params.totalLoaded = 0;
|
|
|
+ params.hasMore = true;
|
|
|
+ params.hasPrev = false;
|
|
|
+ // 加载第一页
|
|
|
+ this.loadNextPage(tabName);
|
|
|
+ } else {
|
|
|
+ // 非首次切换，恢复滚动位置
|
|
|
+ this.$nextTick(() => {
|
|
|
+ const scrollEl = this.getScrollElement(tabName);
|
|
|
+ if (scrollEl) {
|
|
|
+ scrollEl.scrollTop = this.tabScrollPositions[tabName] || 0;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ saveTabScrollPositions() {
|
|
|
+ this.tabScrollPositions = {
|
|
|
+ online: this.getScrollElement('online')?.scrollTop || 0,
|
|
|
+ offline: this.getScrollElement('offline')?.scrollTop || 0,
|
|
|
+ silenced: this.getScrollElement('silenced')?.scrollTop || 0
|
|
|
+ };
|
|
|
+ },
|
|
|
+ // 加载指定Tab的用户列表（核心加载逻辑）
|
|
|
+ loadNextPage(tabName) {
|
|
|
+ const params = this.pageParams[tabName];
|
|
|
+ const displayList = this[`${tabName}DisplayList`];
|
|
|
+ console.log(`加载 ${tabName} 用户列表`)
|
|
|
+ console.log(!params.hasMore || this.scrLoading[tabName].next)
|
|
|
+ console.log(params.currentPage)
|
|
|
+ // 若没有更多数据或正在加载，直接返回
|
|
|
+ if (!params.hasMore || this.scrLoading[tabName].next) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ this.scrLoading[tabName].next = true;
|
|
|
+ const queryParams = {
|
|
|
+ liveId: this.liveId,
|
|
|
+ pageNum: params.currentPage,
|
|
|
+ pageSize: 20,
|
|
|
+ online: tabName === 'online' ? 0 : 1,
|
|
|
+ msgStatus: tabName === 'silenced' ? 1 : 0
|
|
|
+ };
|
|
|
+ // 调用接口加载对应状态的分页数据（需后端支持按状态筛选）
|
|
|
+ watchUserList(queryParams).then(response => {
|
|
|
+ this.scrLoading[tabName].next = false;
|
|
|
+ if (response.code !== 200) return;
|
|
|
+
|
|
|
+ const { rows, total } = response;
|
|
|
+ params.total = total; // 记录总数据量
|
|
|
+ // 过滤重复数据（基于userId）
|
|
|
+ const newRows = rows.filter(row =>
|
|
|
+ !displayList.some(u => u.userId === row.userId)
|
|
|
+ );
|
|
|
+ displayList.push(...newRows)
|
|
|
+ // 添加新数据并限制最大长度（避免内存占用过大）
|
|
|
+ if (displayList.length >= 40) { // 最大保留100条
|
|
|
+ this[`${tabName}DisplayList`] = displayList.slice(-40);
|
|
|
+ // 记录滚动位置（用于加载后校准）
|
|
|
+ const scrollEl = this.getScrollElement(tabName);
|
|
|
+ // 校准滚动位置（保持视觉连续性）
|
|
|
+ this.$nextTick(() => {
|
|
|
+ if (scrollEl) {
|
|
|
+ scrollEl.scrollTop = scrollEl.scrollHeight * 0.5;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ // 更新分页状态
|
|
|
+ params.hasMore = params.currentPage * params.pageSize < total;
|
|
|
+ params.currentPage += 1;
|
|
|
+ params.hasPrev = params.currentPage > 2; // 当前页>2时一定有上一页
|
|
|
+ params.prevPage = params.currentPage - 2;
|
|
|
+ }).catch(() => {
|
|
|
+ this.scrLoading[tabName].next = false;
|
|
|
+ });
|
|
|
},
|
|
|
+ // 新增：加载上一页（向上滚动时）
|
|
|
+ loadPrevPage(tabName) {
|
|
|
+ const params = this.pageParams[tabName];
|
|
|
+ const displayList = this[`${tabName}DisplayList`];
|
|
|
+ // 边界校验：无上一页/正在加载/当前页<=1
|
|
|
+ console.log(`加载 ${tabName} 上一页`);
|
|
|
+ console.log(!params.hasPrev || this.scrLoading[tabName].prev || params.currentPage <= 1)
|
|
|
+ if (!params.hasPrev || this.scrLoading[tabName].prev || params.currentPage <= 1) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.scrLoading[tabName].prev = true;
|
|
|
+ const targetPage = params.prevPage > 0 ? params.prevPage : params.currentPage - 2;
|
|
|
+ const queryParams = {
|
|
|
+ liveId: this.liveId,
|
|
|
+ pageNum: targetPage,
|
|
|
+ pageSize: 20,
|
|
|
+ online: tabName === 'online' ? 0 : 1,
|
|
|
+ msgStatus: tabName === 'silenced' ? 1 : 0
|
|
|
+ };
|
|
|
+ watchUserList(queryParams).then(response => {
|
|
|
+ this.scrLoading[tabName].prev = false;
|
|
|
+ if (response.code !== 200) return;
|
|
|
+
|
|
|
+ const { rows } = response;
|
|
|
+ if (rows.length === 0) {
|
|
|
+ params.hasPrev = false;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 记录滚动位置（用于加载后校准）
|
|
|
+ const scrollEl = this.getScrollElement(tabName);
|
|
|
+ const scrollTop = scrollEl?.scrollTop || 0;
|
|
|
+ const itemHeight = 80; // 预估行高（根据实际样式调整）
|
|
|
+ const newItemsHeight = rows.length * itemHeight;
|
|
|
+
|
|
|
+ // 过滤重复数据并添加到列表头部
|
|
|
+ const newRows = rows.filter(row => !displayList.some(u => u.userId === row.userId));
|
|
|
+ this[`${tabName}DisplayList`] = [...newRows, ...displayList];
|
|
|
+ params.totalLoaded += newRows.length;
|
|
|
+
|
|
|
+ // 限制最大长度
|
|
|
+ if (this[`${tabName}DisplayList`].length > 40) {
|
|
|
+ this[`${tabName}DisplayList`] = this[`${tabName}DisplayList`].slice(0, 40);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 更新分页状态
|
|
|
+ params.prevPage = targetPage - 1;
|
|
|
+ params.hasPrev = targetPage > 1; // 上一页页码>1时还有更多上一页
|
|
|
+ params.currentPage = params.currentPage - 1;
|
|
|
+ if(params.currentPage * 20 < params.total) params.hasMore = true;
|
|
|
+ // 校准滚动位置（保持视觉连续性）
|
|
|
+ this.$nextTick(() => {
|
|
|
+ if (scrollEl) {
|
|
|
+ scrollEl.scrollTop = scrollEl.scrollHeight * 0.5;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }).catch(() => {
|
|
|
+ this.scrLoading[tabName].prev = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 辅助：获取Tab对应的滚动容器
|
|
|
+ getScrollElement(tabName) {
|
|
|
+ const scrollRefs = {
|
|
|
+ online: this.$refs.manageLeftRef_online,
|
|
|
+ offline: this.$refs.manageLeftRef_offline,
|
|
|
+ silenced: this.$refs.manageLeftRef_silenced
|
|
|
+ };
|
|
|
+ return scrollRefs[tabName]?.wrap;
|
|
|
+ },
|
|
|
+
|
|
|
getList() {
|
|
|
this.resetParams()
|
|
|
- this.loadUserList()
|
|
|
+ // this.loadUserList()
|
|
|
+ this.loadUserTotals(); // 先加载总人数
|
|
|
+ // this.handleClick('online')
|
|
|
+ this.handleClick({name:'online'})
|
|
|
this.loadMsgList()
|
|
|
},
|
|
|
+ loadUserTotals() {
|
|
|
+ if (!this.liveId) return;
|
|
|
+ // 假设后端提供一个接口返回总人数（如果没有，可通过首次加载全量数据后统计）
|
|
|
+ getLiveUserTotals({ liveId: this.liveId }).then(res => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.userTotal = res.data; // { online, offline, silenced }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
resetParams() {
|
|
|
- this.userList= []
|
|
|
- this.userParams = {
|
|
|
- pageNum: 1,
|
|
|
- pageSize: 10,
|
|
|
- liveId: this.liveId
|
|
|
- }
|
|
|
- this.msgList = []
|
|
|
+ // 重置各Tab的显示列表和分页参数
|
|
|
+ this.onlineDisplayList = [];
|
|
|
+ this.offlineDisplayList = [];
|
|
|
+ this.silencedDisplayList = [];
|
|
|
+ this.pageParams = {
|
|
|
+ online: {
|
|
|
+ currentPage: 1, // 当前页（下一页加载用）
|
|
|
+ pageSize: 20, // 当前页（下一页加载用）
|
|
|
+ prevPage: 0, // 上一页页码（上一页加载用）
|
|
|
+ totalLoaded: 0, // 已加载总条数
|
|
|
+ total: 0, // 总数据量
|
|
|
+ hasMore: true, // 是否有下一页
|
|
|
+ hasPrev: false // 是否有上一页
|
|
|
+ },
|
|
|
+ offline: {
|
|
|
+ currentPage: 1,
|
|
|
+ pageSize: 20,
|
|
|
+ prevPage: 0,
|
|
|
+ totalLoaded: 0,
|
|
|
+ total: 0,
|
|
|
+ hasMore: true,
|
|
|
+ hasPrev: false
|
|
|
+ },
|
|
|
+ silenced: {
|
|
|
+ currentPage: 1,
|
|
|
+ pageSize: 20,
|
|
|
+ prevPage: 0,
|
|
|
+ totalLoaded: 0,
|
|
|
+ total: 0,
|
|
|
+ hasMore: true,
|
|
|
+ hasPrev: false
|
|
|
+ }
|
|
|
+ };
|
|
|
+ // 消息参数保留
|
|
|
+ this.msgList = [];
|
|
|
this.msgParams = {
|
|
|
pageNum: 1,
|
|
|
pageSize: 10,
|
|
|
liveId: this.liveId
|
|
|
- }
|
|
|
+ };
|
|
|
},
|
|
|
loadUserList() {
|
|
|
+ if(this.liveId == null) return
|
|
|
// 直播间用户
|
|
|
watchUserList({
|
|
|
liveId: this.liveId,
|
|
|
@@ -755,7 +996,6 @@ export default {
|
|
|
this.saveChatScrollPosition();
|
|
|
},
|
|
|
blockUser(u){
|
|
|
- console.log(u)
|
|
|
this.$confirm('是否确认封禁用户账号为:"' + u.nickName + '-' + u.userId + '"?', "警告", {
|
|
|
confirmButtonText: "确定",
|
|
|
cancelButtonText: "取消",
|
|
|
@@ -772,7 +1012,6 @@ export default {
|
|
|
avatar: this.$store.state.user.user.avatar,
|
|
|
nickName: this.$store.state.user.user.nickName
|
|
|
}
|
|
|
- console.log(msg)
|
|
|
this.socket.send(JSON.stringify(msg))
|
|
|
this.msgSuccess("封禁成功");
|
|
|
}).catch(() => {});
|
|
|
@@ -795,6 +1034,8 @@ export default {
|
|
|
user.msgStatus = u.msgStatus;
|
|
|
}
|
|
|
});
|
|
|
+ // 4. 关键：重新筛选所有Tab的显示列表，确保状态同步
|
|
|
+ this.refreshUserDisplayLists(u);
|
|
|
|
|
|
let msg = u.msgStatus === 0 ? "已解禁" : "已禁言"
|
|
|
this.msgSuccess(msg);
|
|
|
@@ -803,9 +1044,51 @@ export default {
|
|
|
this.msgError("操作失败");
|
|
|
})
|
|
|
},
|
|
|
+
|
|
|
+ // 新增：重新筛选所有Tab的显示列表
|
|
|
+ refreshUserDisplayLists(user) {
|
|
|
+ const { userId, msgStatus: newStatus, online } = user;
|
|
|
+ const oldStatus = newStatus === 1 ? 0 : 1; // 操作前的状态（反向）
|
|
|
+
|
|
|
+ // 1. 禁言操作（newStatus=1）：从原在线/离线列表移除，加入禁言列表
|
|
|
+ if (newStatus === 1) {
|
|
|
+ // 从在线/离线列表中移除该用户（根据当前在线状态）
|
|
|
+ if (online === 0) {
|
|
|
+ this.onlineDisplayList = this.onlineDisplayList.filter(u => u.userId !== userId);
|
|
|
+ this.userTotal.online = Math.max(0, this.userTotal.online - 1);
|
|
|
+ } else {
|
|
|
+ this.offlineDisplayList = this.offlineDisplayList.filter(u => u.userId !== userId);
|
|
|
+ this.userTotal.offline = Math.max(0, this.userTotal.offline - 1);
|
|
|
+ }
|
|
|
+ this.userTotal.silenced = this.userTotal.silenced + 1;
|
|
|
+ // 添加到禁言列表（去重+限制长度）
|
|
|
+ const silencedList = this.silencedDisplayList.filter(u => u.userId !== userId);
|
|
|
+ silencedList.push(user);
|
|
|
+ this.silencedDisplayList = silencedList.slice(-40);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 2. 解禁操作（newStatus=0）：从禁言列表移除，回到原在线/离线列表
|
|
|
+ else {
|
|
|
+ // 从禁言列表移除
|
|
|
+ this.silencedDisplayList = this.silencedDisplayList.filter(u => u.userId !== userId);
|
|
|
+ this.userTotal.silenced = Math.max(0, this.userTotal.silenced - 1);
|
|
|
+ // 回到对应的在线/离线列表（根据当前在线状态）
|
|
|
+ if (online === 0) {
|
|
|
+ // 加入在线列表（去重+限制长度）
|
|
|
+ const onlineList = this.onlineDisplayList.filter(u => u.userId !== userId);
|
|
|
+ onlineList.push(user);
|
|
|
+ this.onlineDisplayList = onlineList.slice(-40);
|
|
|
+ this.userTotal.online = this.userTotal.online + 1;
|
|
|
+ } else {
|
|
|
+ // 加入离线列表（去重+限制长度）
|
|
|
+ const offlineList = this.offlineDisplayList.filter(u => u.userId !== userId);
|
|
|
+ offlineList.push(user);
|
|
|
+ this.offlineDisplayList = offlineList.slice(-40);
|
|
|
+ this.userTotal.offline = this.userTotal.offline + 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
connectWebSocket() {
|
|
|
- console.log('connectWebSocket')
|
|
|
- console.log(this.liveWsUrl)
|
|
|
this.$store.dispatch('initLiveWs', {
|
|
|
liveWsUrl: this.liveWsUrl,
|
|
|
liveId: this.liveId,
|
|
|
@@ -828,6 +1111,9 @@ export default {
|
|
|
message.msgStatus = 0
|
|
|
}
|
|
|
delete message.params
|
|
|
+ if(this.msgList.length > 50){
|
|
|
+ this.msgList.shift()
|
|
|
+ }
|
|
|
this.msgList.push(message)
|
|
|
// 移动到底部
|
|
|
this.$nextTick(() => {
|
|
|
@@ -836,16 +1122,49 @@ export default {
|
|
|
}, 200)
|
|
|
})
|
|
|
} else if (cmd === 'entry' || cmd === 'out') {
|
|
|
- let user = data
|
|
|
- if(this.userList.length > 0){
|
|
|
- this.userList = this.userList.filter(u => u.userId !== user.userId)
|
|
|
+ const user = data;
|
|
|
+ const online = cmd === 'entry' ? 0 : 1; // 0=在线，1=离线
|
|
|
+ const info = {
|
|
|
+ online:online,
|
|
|
+ msgStatus: user.msgStatus || 0,
|
|
|
+ nickName: user.nickName || '',
|
|
|
+ userType: user.userType || 0,
|
|
|
+ userId: user.userId || '',
|
|
|
+ };
|
|
|
+
|
|
|
+ // 1. 更新总人数（在线/离线互转）
|
|
|
+ if (cmd === 'entry') {
|
|
|
+ this.userTotal.online += 1;
|
|
|
+ this.userTotal.offline = Math.max(0, this.userTotal.offline - 1); // 确保不小于0
|
|
|
+ } else {
|
|
|
+ this.userTotal.offline += 1;
|
|
|
+ this.userTotal.online = Math.max(0, this.userTotal.online - 1); // 确保不小于0
|
|
|
+ }
|
|
|
+ // 2. 强制更新相关列表（无论当前激活哪个Tab）
|
|
|
+ if (cmd === 'entry') {
|
|
|
+ // 用户进入：从离线列表删除，添加到在线列表
|
|
|
+ this.offlineDisplayList = this.offlineDisplayList.filter(u => u.userId !== user.userId);
|
|
|
+ const newOnlineList = this.onlineDisplayList.filter(u => u.userId !== user.userId);
|
|
|
+ newOnlineList.push(info);
|
|
|
+ this.onlineDisplayList = newOnlineList.slice(-40); // 限制最大50条
|
|
|
+ } else {
|
|
|
+ // 用户离开：从在线列表删除，添加到离线列表
|
|
|
+ this.onlineDisplayList = this.onlineDisplayList.filter(u => u.userId !== user.userId);
|
|
|
+ const newOfflineList = this.offlineDisplayList.filter(u => u.userId !== user.userId);
|
|
|
+ newOfflineList.push(info);
|
|
|
+ this.offlineDisplayList = newOfflineList.slice(-40); // 限制最大50条
|
|
|
}
|
|
|
- let online = 0
|
|
|
- if (cmd === 'out') {
|
|
|
- online = 1
|
|
|
+ // 3. 处理禁言列表（如果用户是禁言状态，无论进出都要同步）
|
|
|
+ if (info.msgStatus === 1) {
|
|
|
+ // 禁言用户：从禁言列表删除旧数据，添加新数据
|
|
|
+ const newSilencedList = this.silencedDisplayList.filter(u => u.userId !== user.userId);
|
|
|
+ newSilencedList.push(info);
|
|
|
+ this.silencedDisplayList = newSilencedList.slice(-40);
|
|
|
+ } else {
|
|
|
+ // 非禁言用户：从禁言列表删除（如果存在）
|
|
|
+ this.silencedDisplayList = this.silencedDisplayList.filter(u => u.userId !== user.userId);
|
|
|
}
|
|
|
- let info = {"avatar":user.avatar, "nickName":user.nickName,"liveId":this.liveId, "msgStatus":user.msgStatus,"online": online,"userId":user.userId};
|
|
|
- this.userList.push(info)
|
|
|
+
|
|
|
} else if (cmd === 'live_start') {
|
|
|
|
|
|
} else if (cmd === 'live_end') {
|
|
|
@@ -873,6 +1192,43 @@ export default {
|
|
|
|
|
|
this.newMsg = '';
|
|
|
},
|
|
|
+ // 初始化滚动监听（在mounted中调用）
|
|
|
+ initScrollListeners() {
|
|
|
+ // 为每个Tab的滚动容器添加监听
|
|
|
+ this.$nextTick(() => {
|
|
|
+ const scrollRefs = {
|
|
|
+ online: this.$refs.manageLeftRef_online,
|
|
|
+ offline: this.$refs.manageLeftRef_offline,
|
|
|
+ silenced: this.$refs.manageLeftRef_silenced
|
|
|
+ };
|
|
|
+
|
|
|
+ Object.keys(scrollRefs).forEach(tabName => {
|
|
|
+ const scrollEl = scrollRefs[tabName]?.wrap;
|
|
|
+ if (scrollEl) {
|
|
|
+ scrollEl.addEventListener('scroll', () =>
|
|
|
+ this.handleTabScroll(tabName, scrollEl)
|
|
|
+ );
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 处理Tab滚动事件（判断是否触底）
|
|
|
+ handleTabScroll(tabName, scrollEl) {
|
|
|
+ const { scrollTop, scrollHeight, clientHeight } = scrollEl;
|
|
|
+ const bottomThreshold = 50; // 距离底部100px触发下一页
|
|
|
+ const topThreshold = 50; // 距离顶部100px触发上一页
|
|
|
+
|
|
|
+ // 加载下一页（滚动到底部附近）
|
|
|
+ if (scrollHeight - scrollTop - clientHeight < bottomThreshold) {
|
|
|
+ this.loadNextPage(tabName);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 加载上一页（滚动到顶部附近）
|
|
|
+ if (scrollTop < topThreshold) {
|
|
|
+ this.loadPrevPage(tabName);
|
|
|
+ }
|
|
|
+ },
|
|
|
},
|
|
|
destroyed() {
|
|
|
this.hls?.destroy();
|
|
|
@@ -950,11 +1306,11 @@ export default {
|
|
|
outline: none !important; /* 移除焦点轮廓 */
|
|
|
}
|
|
|
/* 额外的兼容性隐藏 */
|
|
|
-.custom-video {
|
|
|
+.custom-video::-webkit-media-controls {
|
|
|
display: none !important;
|
|
|
}
|
|
|
|
|
|
-.custom-video {
|
|
|
+.custom-video::-webkit-media-controls-panel {
|
|
|
display: none !important;
|
|
|
}
|
|
|
/* 进度条容器 */
|
