瀏覽代碼

直播间代码,优先加载视频资源

yuhongqi 1 周之前
父節點
當前提交
7755a3f9bc
共有 1 個文件被更改,包括 100 次插入25 次删除
  1. 100 25
      pages_course/living.vue

+ 100 - 25
pages_course/living.vue

@@ -820,6 +820,11 @@
 				isOnload: false,
 				isOnload: false,
 				isConnecting: false, // 是否正在连接中
 				isConnecting: false, // 是否正在连接中
 				hasInitialized: false,
 				hasInitialized: false,
+				// 请求状态标记,防止重复请求
+				isLoadingLiveInfo: false, // 是否正在加载直播间信息
+				isLoadingVideo: false, // 是否正在加载视频资源
+				hasCheckedLogin: false, // 是否已检查登录状态
+				hasLoadedLocation: false, // 是否已加载位置信息
 
 
 				liveViewersData: [],
 				liveViewersData: [],
 				liveUserCalled: false, //调用过watchUserList没
 				liveUserCalled: false, //调用过watchUserList没
@@ -891,6 +896,7 @@
 				shopping: false,
 				shopping: false,
 				systemInfo: null, // 缓存系统信息,避免重复调用同步API
 				systemInfo: null, // 缓存系统信息,避免重复调用同步API
 				generatingTimer: null, //回访生成中
 				generatingTimer: null, //回访生成中
+				getlivingTimer: null, // getliving 防抖定时器
 				inputInfo: '',
 				inputInfo: '',
 				showWelcomeMessage: false,
 				showWelcomeMessage: false,
 				isShowGoods: false,
 				isShowGoods: false,
@@ -930,7 +936,8 @@
 		async onLoad(options) {
 		async onLoad(options) {
 			this.getMenuButtonInfo(); // 初始化获取胶囊信息
 			this.getMenuButtonInfo(); // 初始化获取胶囊信息
 			this.initTime()
 			this.initTime()
-			this.getLocationByIP();
+			
+			// 解析参数
 			if (options.liveId) {
 			if (options.liveId) {
 				this.liveId = options.liveId;
 				this.liveId = options.liveId;
 			}
 			}
@@ -953,15 +960,27 @@
 				this.qrFrom = `&companyId=${options.companyId}&companyUserId=${options.companyUserId}`;
 				this.qrFrom = `&companyId=${options.companyId}&companyUserId=${options.companyUserId}`;
 			}
 			}
 			this.userinfo = uni.getStorageSync('userinfo');
 			this.userinfo = uni.getStorageSync('userinfo');
-			// this.userData = uni.getStorageSync('userData');
 			console.log('全部参数', options);
 			console.log('全部参数', options);
+			
+			// 优先判断登录状态,然后加载数据
 			try {
 			try {
 				const isLogin = await this.utils.checkLiveToken();
 				const isLogin = await this.utils.checkLiveToken();
+				this.hasCheckedLogin = true;
 				if (isLogin) {
 				if (isLogin) {
-					this.haveLogin()
+					// 登录后:优先加载直播间信息,然后加载视频资源
+					await this.haveLogin();
+				} else {
+					// 未登录:先登录,登录成功后再加载数据
+					this.goLogin();
 				}
 				}
 			} catch (error) {
 			} catch (error) {
 				console.error('初始化失败:', error);
 				console.error('初始化失败:', error);
+				this.hasCheckedLogin = true;
+			}
+			
+			// 异步加载位置信息(不阻塞主流程)
+			if (!this.hasLoadedLocation) {
+				this.getLocationByIP();
 			}
 			}
 			//获取键盘高度 - 针对iPhone优化(使用缓存的系统信息)
 			//获取键盘高度 - 针对iPhone优化(使用缓存的系统信息)
 			uni.onKeyboardHeightChange((res) => {
 			uni.onKeyboardHeightChange((res) => {
@@ -1026,13 +1045,17 @@
 			// 初始化网络状态监听
 			// 初始化网络状态监听
 			this.initNetworkStatusListener();
 			this.initNetworkStatusListener();
 		},
 		},
-		onPullDownRefresh() {
-			this.getLiveMsg(this.liveItem);
-			// this.getliveUser();
+		async onPullDownRefresh() {
+			// 下拉刷新时,重新加载数据
+			if (this.liveId) {
+				// 重置加载状态,允许重新加载
+				this.isLoadingLiveInfo = false;
+				await this.getliving(this.liveId);
+				await this.getLiveMsg(this.liveItem);
+			}
 			setTimeout(() => {
 			setTimeout(() => {
 				uni.stopPullDownRefresh();
 				uni.stopPullDownRefresh();
 			}, 1000);
 			}, 1000);
-			this.getliving(this.liveId);
 		},
 		},
 		mounted() {
 		mounted() {
 			// 获取 video 上下文
 			// 获取 video 上下文
@@ -1052,18 +1075,26 @@
 			this.isIOS = systemInfo.platform === 'ios';
 			this.isIOS = systemInfo.platform === 'ios';
 		},
 		},
 		async onShow() {
 		async onShow() {
-			try {
-				const isLogin = await this.utils.checkLiveToken();
-				if (isLogin) {
-					this.haveLogin()
-				} else {
-					this.goLogin();
+			// 如果还没有检查过登录状态,则检查(避免重复检查)
+			if (!this.hasCheckedLogin) {
+				try {
+					const isLogin = await this.utils.checkLiveToken();
+					this.hasCheckedLogin = true;
+					if (isLogin) {
+						await this.haveLogin();
+					} else {
+						this.goLogin();
+					}
+				} catch (error) {
+					console.error('初始化失败:', error);
+					this.hasCheckedLogin = true;
 				}
 				}
-			} catch (error) {
-				console.error('初始化失败:', error);
 			}
 			}
-
-			this.getLocationByIP();
+			
+			// 位置信息只加载一次
+			if (!this.hasLoadedLocation) {
+				this.getLocationByIP();
+			}
 
 
 			this.uuId = generateRandomString(16);
 			this.uuId = generateRandomString(16);
 			const isLiveLogin = uni.getStorageSync('isLiveLogin');
 			const isLiveLogin = uni.getStorageSync('isLiveLogin');
@@ -1311,6 +1342,12 @@
 			// 关闭WebSocket连接(会自动清理相关资源)
 			// 关闭WebSocket连接(会自动清理相关资源)
 			this.closeWebSocket(true);
 			this.closeWebSocket(true);
 
 
+			// 清除 getliving 防抖定时器
+			if (this.getlivingTimer) {
+				clearTimeout(this.getlivingTimer);
+				this.getlivingTimer = null;
+			}
+
 			// 清除所有定时器(使用增强清理)
 			// 清除所有定时器(使用增强清理)
 			this.clearAllTimersEnhanced();
 			this.clearAllTimersEnhanced();
 
 
@@ -1368,8 +1405,13 @@
 						return;
 						return;
 					}
 					}
 					// 状态变化时,调用getliving更新直播间数据
 					// 状态变化时,调用getliving更新直播间数据
-					// console.log(`liveItem.status从${oldStatus}变为${newStatus},触发getliving请求`);
-					this.getliving(this.liveId);
+					// 添加防抖,避免频繁请求
+					if (this.getlivingTimer) {
+						clearTimeout(this.getlivingTimer);
+					}
+					this.getlivingTimer = setTimeout(() => {
+						this.getliving(this.liveId);
+					}, 500); // 500ms 防抖
 				},
 				},
 				deep: true
 				deep: true
 			},
 			},
@@ -1747,20 +1789,30 @@
 				this.user.nickname = e.detail.value
 				this.user.nickname = e.detail.value
 			},
 			},
 			async haveLogin() {
 			async haveLogin() {
+				// 防止重复执行
+				if (this.isOnload) {
+					return;
+				}
+				
 				this.userInfo = uni.getStorageSync('userInfo');
 				this.userInfo = uni.getStorageSync('userInfo');
 				if (this.userInfo) {
 				if (this.userInfo) {
 					await this.getUserInfo();
 					await this.getUserInfo();
 				}
 				}
 
 
-				// this.initTime();
 				if (this.liveId) {
 				if (this.liveId) {
-					// 先获取直播间信息
+					// 优先加载直播间信息(包含视频资源URL)
 					await this.getliving(this.liveId);
 					await this.getliving(this.liveId);
 					this.isOnload = true;
 					this.isOnload = true;
 
 
-					await this.getLiveMsg(this.liveItem);
-					await this.getliveViewData();
-					// await this.getliving(this.liveId);
+					// 然后加载其他数据(并行执行,不阻塞视频加载)
+					Promise.all([
+						this.getLiveMsg(this.liveItem),
+						this.getliveViewData()
+					]).catch(err => {
+						console.error('加载数据失败:', err);
+					});
+					
+					// 其他非关键数据异步加载
 					this.getCurrentActivities();
 					this.getCurrentActivities();
 					this.getliveOrder();
 					this.getliveOrder();
 					this.initSocket();
 					this.initSocket();
@@ -1832,6 +1884,12 @@
 			},
 			},
 			clickTabs(item) {},
 			clickTabs(item) {},
 			getLocationByIP() {
 			getLocationByIP() {
+				// 防止重复请求
+				if (this.hasLoadedLocation) {
+					return;
+				}
+				this.hasLoadedLocation = true;
+				
 				// 高德IP定位API,需要替换成你的key
 				// 高德IP定位API,需要替换成你的key
 				const key = '4e13632be0cc278f56825919603c07cf';
 				const key = '4e13632be0cc278f56825919603c07cf';
 				uni.request({
 				uni.request({
@@ -1846,10 +1904,12 @@
 							console.log('用户所在地:', this.location);
 							console.log('用户所在地:', this.location);
 						} else {
 						} else {
 							console.error('获取位置失败:', res.data);
 							console.error('获取位置失败:', res.data);
+							this.hasLoadedLocation = false; // 失败后允许重试
 						}
 						}
 					},
 					},
 					fail: (err) => {
 					fail: (err) => {
 						console.error('请求失败:', err);
 						console.error('请求失败:', err);
+						this.hasLoadedLocation = false; // 失败后允许重试
 					}
 					}
 				});
 				});
 			},
 			},
@@ -3785,11 +3845,21 @@
 			// 修改获取直播信息方法
 			// 修改获取直播信息方法
 			async getliving(liveId) {
 			async getliving(liveId) {
 				if (!liveId) return;
 				if (!liveId) return;
+				
+				// 防止重复请求
+				if (this.isLoadingLiveInfo) {
+					console.log('正在加载直播间信息,跳过重复请求');
+					return;
+				}
+				
+				this.isLoadingLiveInfo = true;
 				const param = {
 				const param = {
 					id: liveId
 					id: liveId
 				};
 				};
 				try {
 				try {
 					const res = await getlive(param);
 					const res = await getlive(param);
+					this.isLoadingLiveInfo = false;
+					
 					if (res.code !== 200) {
 					if (res.code !== 200) {
 						uni.showToast({
 						uni.showToast({
 							title: res.msg,
 							title: res.msg,
@@ -3882,6 +3952,7 @@
 						this.playVideo();
 						this.playVideo();
 					}
 					}
 				} catch (err) {
 				} catch (err) {
+					this.isLoadingLiveInfo = false;
 					console.error('获取直播信息失败:', err);
 					console.error('获取直播信息失败:', err);
 					uni.showToast({
 					uni.showToast({
 						title: '获取直播信息失败',
 						title: '获取直播信息失败',
@@ -3938,11 +4009,14 @@
 			//直播间点赞、关注、在线人数数据
 			//直播间点赞、关注、在线人数数据
 			getliveViewData() {
 			getliveViewData() {
 				if (!this.liveId) return;
 				if (!this.liveId) return;
-				getLiveViewData(this.liveId).then((res) => {
+				
+				// 使用 Promise 包装,支持 await
+				return getLiveViewData(this.liveId).then((res) => {
 					if (res.code == 200) {
 					if (res.code == 200) {
 						// 强制响应式更新,确保数据实时显示
 						// 强制响应式更新,确保数据实时显示
 						this.liveViewData = res;
 						this.liveViewData = res;
 					}
 					}
+					return res;
 				}).catch((error) => {
 				}).catch((error) => {
 					console.error('获取直播间数据失败:', error);
 					console.error('获取直播间数据失败:', error);
 					// 失败时兜底,避免显示异常
 					// 失败时兜底,避免显示异常
@@ -3950,6 +4024,7 @@
 						like: 0,
 						like: 0,
 						watchCount: 0
 						watchCount: 0
 					};
 					};
+					throw error;
 				});
 				});
 			},
 			},
 			// 30秒刷新一下直播间点赞数
 			// 30秒刷新一下直播间点赞数