From bb35671cb3038c1c6e2d2263a223358192772016 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Wed, 10 Dec 2025 17:42:47 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=A1=B5=E9=9D=A2=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/live-content/live-content.vue  | 35 +++++++----------
 .../live/pull/components/video/video.vue      |  2 +-
 pages/plugins/live/pull/mixins/mixins.js      | 33 ++++++----------
 pages/plugins/live/pull/pull.nvue             | 31 ++++++++++++---
 pages/plugins/live/pull/pull.vue              | 39 +++++++++++++++----
 5 files changed, 86 insertions(+), 54 deletions(-)

diff --git a/pages/plugins/live/pull/components/live-content/live-content.vue b/pages/plugins/live/pull/components/live-content/live-content.vue
index bc90b67c..5621349a 100644
--- a/pages/plugins/live/pull/components/live-content/live-content.vue
+++ b/pages/plugins/live/pull/components/live-content/live-content.vue
@@ -1,6 +1,6 @@
 <template>
     <!-- #ifdef APP-NVUE -->
-    <view class="flex-col jc-sb pr pa-10 box-border-box bottom-line-exclude-bottom" :style="'width:' + windowWidth + 'px;height:' + windowHeight + 'px;'">
+    <view class="flex-col jc-sb pr pa-10 box-border-box bottom-line-exclude-bottom" :style="'width:' + propWindowWidth + 'px;height:' + propWindowHeight + 'px;'">
     <!-- #endif -->
     <!-- #ifndef APP-NVUE -->
     <view class="flex-col jc-sb pr pa-10 box-border-box bottom-line-exclude-bottom" style="width: 100vw;height: 100vh;">
@@ -31,15 +31,15 @@
         <view class="flex-1 bottom-line-exclude-bottom flex-row">
             <view class="flex-1 flex-col jc-e">
                 <view class="pr">
-                    <view class="bulletin-area pr pointer-events-auto" :style="'width:' + (windowWidth - 150) + 'px;'">
+                    <view class="bulletin-area pr pointer-events-auto" :style="'width:' + (propWindowWidth - 150) + 'px;'">
                         <!-- #ifdef APP-NVUE -->
                         <!-- nvue 使用 list进行列表渲染 -->
-                        <list class="bulletin-area" :style="'width:' + (windowWidth - 150) + 'px;'" :show-scrollbar="false" loadmoreoffset="30" @scroll="scroll_event" @loadmore="scroll_to_lower_event">
+                        <list class="bulletin-area" :style="'width:' + (propWindowWidth - 150) + 'px;'" :show-scrollbar="false" loadmoreoffset="30" @scroll="scroll_event" @loadmore="scroll_to_lower_event">
                             <cell v-for="(item, index) in bulletins" :key="item.id" ref="bulletin_index">
                         <!-- #endif -->
                         <!-- #ifndef APP-NVUE -->
                         <!-- scroll-view 只有非nvue的页面使用 -->
-                        <scroll-view scroll-y class="bulletin-area" :style="'width:' + (windowWidth - 150) + 'px;'" :show-scrollbar="false" lower-threshold="30" :scroll-with-animation="true" :scroll-top="scroll_top" @scroll="scroll_event" @scroll_to_lower_event="scroll_to_lower_event">
+                        <scroll-view scroll-y class="bulletin-area" :style="'width:' + (propWindowWidth - 150) + 'px;'" :show-scrollbar="false" lower-threshold="30" :scroll-with-animation="true" :scroll-top="scroll_top" @scroll="scroll_event" @scroll_to_lower_event="scroll_to_lower_event">
                             <view v-for="(item, index) in bulletins" :key="item.id">
                         <!-- #endif -->
                         <!-- 中间弹幕区域 -->
@@ -116,7 +116,7 @@
                     </view>
                 </view>
                 <!-- 底部谁来了的提示-->
-                <!-- <view v-if="is_user_comes" class="flex-row mt-3 pointer-events-auto" :style="'max-width:' + (windowWidth - 100) + 'px;'">
+                <!-- <view v-if="is_user_comes" class="flex-row mt-3 pointer-events-auto" :style="'max-width:' + (propWindowWidth - 100) + 'px;'">
                     <view class="user-comes flex-row">
                         <text class="user-name cr-blue">{{ commons_name }}</text>
                         <text class="user-name cr-d">来了</text>
@@ -149,7 +149,7 @@
             </view>
         </view>
         <!-- 添加评论 -->
-        <view v-if="is_add_comment" class="keyboard-input pointer-events-auto" :style="'width:' + windowWidth + 'px;bottom:' + listener_height + 'px;'">
+        <view v-if="is_add_comment" class="keyboard-input pointer-events-auto" :style="'width:' + propWindowWidth + 'px;bottom:' + listener_height + 'px;'">
             <view class="keyboard-input-border" style="padding: 16rpx 22rpx;border: 2rpx solid #ddd;border-radius: 50rpx;">
                 <input :value="comment_value" :focus="is_add_comment" type="text" confirm-type="done" :adjust-position="false" :auto-blur="true" placeholder="说点什么" @input="(e) => comment_value = e.detail.value" @blur="() => is_add_comment = false" @confirm="comment_input_confirm" />
             </view>
@@ -197,7 +197,15 @@
             propLiveShowImgs: {
                 type: Array,
                 default: () => []
-            }
+            },
+            propWindowWidth: {
+                type: Number,
+                default: 0
+            },
+            propWindowHeight: {
+                type: Number,
+                default: 0
+            },
         },
         data() {
             return {
@@ -226,8 +234,6 @@
                     goods_price: '99.00'
                 },
                 //#region 头部样式和页面宽度处理
-                windowWidth: 0,
-                windowHeight: 0,
                 header_style: '',
                 //#endregion
                 
@@ -324,8 +330,6 @@
          * 组件挂载后执行初始化操作
          */
         mounted() {
-            console.log('1111');
-            
             // 初始化窗口信息和滚动条高度
             this.init_window_info();
             // 滚动到评论区底部
@@ -339,8 +343,6 @@
          * 组件销毁前清理资源
          */
         beforeDestroy() {
-            console.log('222');
-            
             // 清理socket连接
             this.clear_interval_task();
             this.unbind_keyboard_listener();
@@ -359,10 +361,6 @@
              * 获取屏幕宽高，并根据不同平台设置头部样式
              */
             init_window_info() {
-                const data = uni.getWindowInfo();
-                this.windowWidth = data.windowWidth;
-                this.windowHeight = data.windowHeight;
-            
                 // 菜单按钮位置信息, uniappx中没有这个方法，但是能使用
                 this.header_style = 'padding-top: 20rpx;';
                 // 设置有胶囊的时候头部显示的位置
@@ -602,7 +600,6 @@
                         break;
                     // 消息
                     case 'message':
-                        console.log(data, 'message');
                         // 如果最后前一条是进入直播间的提示，则删除
                         if (this.bulletins.length > 0 && this.bulletins[this.bulletins.length - 1].type == 'go') {
                             this.bulletins.splice(this.bulletins.length - 1, 1);
@@ -615,13 +612,11 @@
                                 user_name: data.data.user.nickname,
                                 text: data.content,
                             });
-                            console.log(this.bulletins);
                             // 添加内容之后，需要滚动到最后
                             this.scroll_to_lower();
                         });
                         break;
                     case 'live-status':
-                        console.log(data.content, 'live-status');
                         this.$emit('liveStatus', data.content); 
                         break;
                 }
diff --git a/pages/plugins/live/pull/components/video/video.vue b/pages/plugins/live/pull/components/video/video.vue
index d3d17a09..27ae7739 100644
--- a/pages/plugins/live/pull/components/video/video.vue
+++ b/pages/plugins/live/pull/components/video/video.vue
@@ -1,6 +1,6 @@
 <template>
     <!-- #ifdef H5 -->
-    <h5-hls-video :propSrc="propSrc" propAutoplay :propMuted="muted" class="video-size" @hlsError="error" @ended="ended" @autoPlaySuccess="auto_play_success" @autoPlayError="auto_play_error"></h5-hls-video>
+    <h5-hls-video :propSrc="propSrc" propAutoplay :propMuted="muted" poster="https://new.shopxo.vip/static/upload/images/common/2019/01/14/1547448705165706.png" class="video-size"  @hlsError="error" @ended="ended" @autoPlaySuccess="auto_play_success" @autoPlayError="auto_play_error"></h5-hls-video>
     <!-- #endif -->
     <!-- #ifdef MP -->
     <live-player :src="propSrc" autoplay :muted="muted" class="video-size" @statechange="statechange" @error="error" />
diff --git a/pages/plugins/live/pull/mixins/mixins.js b/pages/plugins/live/pull/mixins/mixins.js
index 2f82fa8b..bb71089f 100644
--- a/pages/plugins/live/pull/mixins/mixins.js
+++ b/pages/plugins/live/pull/mixins/mixins.js
@@ -26,7 +26,7 @@ export default {
             lastTapPosition: { x: 0, y: 0 }, // 记录上次点击位置
             lastLikeTime: 0, // 记录上次点赞时间，用于防抖
             live_status: 'start',
-            live_end_msg: '直播已结束',
+            live_be_right_back: false,
         }
     },
 
@@ -51,11 +51,10 @@ export default {
         // 分享菜单处理
         app.globalData.page_share_handle();
 
-        // #ifdef APP-NVUE
         const data = uni.getWindowInfo();
         this.windowWidth = data.windowWidth;
         this.windowHeight = data.windowHeight;
-        // #endif
+
         this.init();
         // 页面显示时，连接直播间socket, 避免用户切换到其他页面，再切换回来时，socket连接断开
         if (this.$refs.liveContent) {
@@ -122,19 +121,14 @@ export default {
         /**
          * 标记直播结束或者直播暂停
          */
-        ended() {
-            // 如果已经暂停了就不需要处理了
+        ended(flag) {
             if (!this.is_live_ended) {
-                this.is_live_ended = true;
-                if (this.live_status == 'stop') {
-                    this.live_end_msg = '直播已结束';
-                } else if (['pause', 'resume'].includes(this.live_status)) {
-                    this.live_end_msg = '主播暂时离开，请稍等...';
-                    // 直播状态为resume时，如果结束了，就需要重新请求直播间状态
-                    console.log(this.live_status);
-                    if (this.live_status == 'resume') {
-                        this.socket_live_status('resume');
-                    }
+                if (!['pause', 'resume'].includes(this.live_status)) {
+                    this.is_live_ended = true;
+                } else {
+                    // 暂停直播了或者继续直播了，则提示用户当前主播暂时离开
+                    this.live_be_right_back = true;
+                    this.socket_live_status(this.live_status);
                 }
             }
         },
@@ -220,14 +214,11 @@ export default {
             this.lastTapPosition = { x, y };
         },
         socket_live_status(status) {
-            console.log(status, '直播间状态');
             this.live_status = status;
-            // 如果是开始直播了或者继续直播了，则取消直播结束标记
-            console.log(this.is_live_ended);
-            if (['start', 'resume'].includes(status) && this.is_live_ended) {
+            // 如果是暂停直播了或者继续直播了，则提示用户当前主播暂时离开
+            if (['pause', 'resume'].includes(status) && !this.is_live_ended && this.live_be_right_back) {
                 setTimeout(() => {
-                    console.log('继续直播标记');
-                    this.is_live_ended = false;
+                    this.live_be_right_back = false;
                 }, 5000);
             }
         }
diff --git a/pages/plugins/live/pull/pull.nvue b/pages/plugins/live/pull/pull.nvue
index 914584a1..a847ac74 100644
--- a/pages/plugins/live/pull/pull.nvue
+++ b/pages/plugins/live/pull/pull.nvue
@@ -1,23 +1,26 @@
 <template>
     <view :class="theme_view + ' flex-row pr'" :style="'width:' + windowWidth + 'px;height:' + windowHeight + 'px;'">
-        <view v-if="!is_live_ended" class="flex-1 pr" @dblclick="handle_double_click" @touchend="handle_touch_end" :data-ignore="false">
-            <live-video ref="live-video" :propSrc="live_config.pull_flv_url || 'http://live-pull-all.shopxo.vip/68f764013572f9240ca7ce6c/shopxo122.m3u8'" @ended="ended"></live-video>
-
+        <view class="flex-1 pr live-bg" @dblclick="handle_double_click" @touchend="handle_touch_end" :data-ignore="false">
+            <live-video v-if="!is_live_ended" ref="live-video" :propSrc="live_config.pull_flv_url || 'http://live-pull-all.shopxo.vip/68f764013572f9240ca7ce6c/shopxo122.m3u8'" @ended="ended"></live-video>
             <!-- 简化版点赞效果组件 -->
             <full-screen-like-effect ref="fullScreenLikeEffect" :propCustomImages="like_show_imgs" :style="'width:' + windowWidth + 'px;height:' + windowHeight + 'px;'"></full-screen-like-effect>
         </view>
         <template v-if="!is_loading">
             <view class="live-content" :style="'width:' + windowWidth + 'px;height:' + windowHeight + 'px;'">
-                <live-content ref="liveContent" :propLiveConfig="live_config" :propLiveShowImgs="like_show_imgs" @liveBack="live_back" @handleDoubleClick="handle_double_click" @handleTouchEnd="handle_touch_end" @liveStatus="socket_live_status"></live-content>
+                <live-content ref="liveContent" :propWindowWidth="windowWidth" :propWindowHeight="windowHeight" :propLiveConfig="live_config" :propLiveShowImgs="like_show_imgs" @liveBack="live_back" @handleDoubleClick="handle_double_click" @handleTouchEnd="handle_touch_end" @liveStatus="socket_live_status"></live-content>
             </view>
             <view v-if="is_live_ended" class="live-ended flex-row align-c jc-c" :style="'width:' + windowWidth + 'px;height:' + windowHeight + 'px;'">
                 <view class="flex-col align-c">
-                    <text class="live-ended-text">{{live_end_msg}}</text>
+                    <text class="live-ended-text">直播已结束</text>
                     <button plain size="mini" class="mt-10 live-ended-button" @tap="live_back">
                         <text class="cr-f pa-5">退出直播间</text>
                     </button>
                 </view>
             </view>
+            <!-- 主播暂时离开的提示信息-->
+            <view v-if="live_be_right_back" class="live-pause flex-row align-c jc-c pointer-events-none" :style="'width:' + windowWidth + 'px;'">
+                <view class="live-pause-tips pointer-events-auto">直播连接失败，正在尝试重新连接...</view>
+            </view>
         </template>
     </view>
 </template>
@@ -44,6 +47,24 @@
     }
 </script>
 <style lang="scss" scoped>
+    .live-bg {
+        background-image: linear-gradient(to bottom,#ba623c,#14766a);
+    }
+    .live-pause {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 9;
+        height: 600rpx;
+        background: transparent;
+        .live-pause-tips {
+            background: rgba(0, 0, 0, 0.5);
+            border-radius: 20rpx;
+            padding: 15rpx 20rpx;
+            font-size: 32rpx;
+            color: #fff;
+        }
+    }
     .live-content {
         position: absolute;
         top: 0;
diff --git a/pages/plugins/live/pull/pull.vue b/pages/plugins/live/pull/pull.vue
index 8f132f7a..325b9a2a 100644
--- a/pages/plugins/live/pull/pull.vue
+++ b/pages/plugins/live/pull/pull.vue
@@ -1,17 +1,17 @@
 <template>
-    <view :class="theme_view + ' live-bg'">
-        <view v-if="!is_live_ended" class="w h pr" @dblclick="handle_double_click" @touchend="handle_touch_end" :data-ignore="false">
-            <live-video ref="liveVideo" :propSrc="live_config.pull_flv_url || 'http://live-pull-all.shopxo.vip/68f764013572f9240ca7ce6c/shopxo122.m3u8'" @ended="ended" @mutedAutoPlaySuccess="muted_auto_play_success"></live-video>
+    <view :class="theme_view + ' re'">
+        <view class="pr live-bg" @dblclick="handle_double_click" @touchend="handle_touch_end" :data-ignore="false">
+            <live-video v-if="!is_live_ended && !live_be_right_back" ref="liveVideo" :propSrc="live_config.pull_flv_url || 'http://live-pull-all.shopxo.vip/68f764013572f9240ca7ce6c/shopxo122.m3u8'" @ended="ended" @mutedAutoPlaySuccess="muted_auto_play_success"></live-video>
             <!-- 简化版点赞效果组件 -->
             <full-screen-like-effect ref="fullScreenLikeEffect" :propCustomImages="like_show_imgs"></full-screen-like-effect>
         </view>
         <template v-if="!is_loading"> 
             <view class="live-content pointer-events-none">
-                <live-content ref="liveContent" :propLiveConfig="live_config" :propLiveShowImgs="like_show_imgs" @liveBack="live_back" @liveStatus="socket_live_status"></live-content>
+                <live-content ref="liveContent" :propWindowWidth="windowWidth" :propLiveConfig="live_config" :propLiveShowImgs="like_show_imgs" @liveBack="live_back" @liveStatus="socket_live_status"></live-content>
             </view>
             <view v-if="is_live_ended" class="live-ended flex-row align-c jc-c">
                 <view class="flex-col align-c">
-                    <text class="live-ended-text">{{live_end_msg}}</text>
+                    <text class="live-ended-text">直播已结束</text>
                     <button plain size="mini" class="mt-10 live-ended-button" @tap.stop="live_back">
                         <text class="cr-f pa-5">退出直播间</text>
                     </button>
@@ -23,6 +23,10 @@
                     因浏览器限制静音，<text class="ml-5 cr-f live-muted-text" @tap="muted_tap">请点击打开声音</text>
                 </view>
             </view>
+            <!-- 主播暂时离开的提示信息-->
+            <view v-if="live_be_right_back" class="live-pause flex-row align-c jc-c pointer-events-none">
+                <view class="live-pause-tips pointer-events-auto">直播连接失败，正在尝试重新连接中...</view>
+            </view>
         </template>
     </view>
 </template>
@@ -53,7 +57,9 @@
             },
             // 静音提示点击
             muted_tap() {
-                this.$refs.liveVideo.muted_tap();
+                if (this.$refs.liveVideo) {
+                    this.$refs.liveVideo.muted_tap();
+                }
                 // 关闭静音提示
                 this.is_muted_auto_play_success = false;
             }
@@ -63,15 +69,34 @@
 <style lang="scss" scoped>
     .live-bg {
         background-image: linear-gradient(to bottom,#ba623c,#14766a);
+        width: 100vw;
+        height: 100vh;
     }
     .live-content {
         position: absolute;
         top: 0;
         left: 0;
-        z-index: 9;
+        z-index: 8;
         width: 100%;
         height: 100%;
     }
+    .live-pause {
+        position: absolute;
+        top: 0;
+        left: 50%;
+        transform: translateX(-50%);
+        z-index: 9;
+        width: 100%;
+        height: 600rpx;
+        background: transparent;
+        .live-pause-tips {
+            background: rgba(0, 0, 0, 0.5);
+            border-radius: 20rpx;
+            padding: 15rpx 20rpx;
+            font-size: 28rpx;
+            color: #fff;
+        }
+    }
     .live-muted {
         position: absolute;
         top: 50%;