From 961ebe4a25edc54f93cdb20a559426552ddd0bfb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Mon, 9 Mar 2026 18:34:25 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9nvue=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E4=B8=8B=E7=9A=84=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../plugins/video/components/comment-info.vue |  30 ++--
 .../plugins/video/components/comment-more.vue |   2 +-
 pages/plugins/video/detail/detail.nvue        | 146 ++++++++----------
 3 files changed, 78 insertions(+), 100 deletions(-)

diff --git a/pages/plugins/video/components/comment-info.vue b/pages/plugins/video/components/comment-info.vue
index 7b4607df..9b43c30e 100644
--- a/pages/plugins/video/components/comment-info.vue
+++ b/pages/plugins/video/components/comment-info.vue
@@ -1,13 +1,13 @@
 <template> 
-    <view class="flex-row align-s gap-10 wh-auto ht-auto"> 
+    <view class="flex-row align-s wh-auto ht-auto"> 
         <image class="comment-avatar" :src="propComment.user.avatar" mode="aspectFill"></image>
-        <view class="comment-info flex-col jc-c" @tap="comment_reply">
-            <view class="flex-row jc-sb gap-10">
-                <view class="comment-user">{{ propComment.user.user_name_view }}</view>
-                <view class="pr">
+        <view class="comment-info flex-col jc-c" style="margin-left: 20rpx;" @tap="comment_reply">
+            <view class="flex-row jc-sb">
+                <text class="comment-user">{{ propComment.user.user_name_view }}</text>
+                <view class="pr" style="margin-left: 20rpx;">
                     <!-- 直接实现下拉菜单 -->
                     <view class="comment-option" @tap.stop="toggle_dropdown">
-                        <iconfont name="icon-ellipsis" color="#999" size="28rpx" />
+                        <u-icon propName="ellipsis" propColor="#999" propSize="28rpx"></u-icon>
                     </view>
                     <!-- 下拉菜单 -->
                     <view v-if="drop_down_visible && dropdownOptions && Array.isArray(dropdownOptions)" class="dropdown-menu" @tap.stop>
@@ -17,21 +17,21 @@
                     </view>
                 </view> 
             </view>
-            <view v-if="!isEmpty(propComment.reply_comments_text)" class="comment-reply-text">{{ propComment.reply_comments_text}}</view>
-            <view class="comment-text">{{ propComment.content }}</view>
+            <text v-if="!isEmpty(propComment.reply_comments_text)" class="comment-reply-text">{{ propComment.reply_comments_text}}</text>
+            <text class="comment-text">{{ propComment.content }}</text>
             <!-- <view class="comment-images flex-row align-c gap-5"> -->
             <template v-if="!isEmpty(propComment.images)">
                 <image :src="propComment.images" :data-image="propComment.images" @tap="upload_show_event" mode="aspectFill" class="comment-images"></image>
             </template>
             <!-- </view> -->
-            <view class="comment-operation flex-row align-c jc-sb gap-10">
-                <view class="comment-operation-left flex-row align-c gap-10">
-                    <view class="comment-time">{{ propComment.add_time }}</view>
-                    <view class="comment-reply flex-row align-c gap-5">{{ propReplyContent || $t('common.reply') }}({{ propComment.comments_count }})</view>
+            <view class="comment-operation flex-row align-c jc-sb">
+                <view class="comment-operation-left flex-row align-c">
+                    <text class="comment-time">{{ propComment.add_time }}</text>
+                    <text class="comment-reply flex-row align-c gap-5" style="margin-left: 20rpx;">{{ propReplyContent || $t('common.reply') }}({{ propComment.comments_count }})</text>
                 </view>
-                <view class="comment-operation-right flex-row align-c gap-5" @tap.stop="comment_like">
-                    <iconfont name="icon-givealike-o-fine" :color="propComment.is_give_thumbs == 0 ? '#000' : '#F4B73F'" size="28rpx" />
-                    <view class="comment-like-num">{{ propComment.give_thumbs_count || 0 }}</view>
+                <view class="comment-operation-right flex-row align-c" style="margin-left: 20rpx;" @tap.stop="comment_like">
+                    <u-icon propName="givealike-o-fine" :propColor="propComment.is_give_thumbs == 0 ? '#000' : '#F4B73F'" propSize="28rpx"></u-icon>
+                    <text class="comment-like-num" style="margin-left: 10rpx;">{{ propComment.give_thumbs_count || 0 }}</text>
                 </view>
             </view>
             <slot name="sub-comment"></slot>
diff --git a/pages/plugins/video/components/comment-more.vue b/pages/plugins/video/components/comment-more.vue
index 7912147e..31380f9d 100644
--- a/pages/plugins/video/components/comment-more.vue
+++ b/pages/plugins/video/components/comment-more.vue
@@ -1,6 +1,6 @@
 <template>
     <view class="more-title flex-row align-c" @tap="comment_more_event">
-        <text>{{ propText || $t('common.expand') }}</text>
+        <text class="more-title">{{ propText || $t('common.expand') }}</text>
         <view class="ml-5">
             <iconfont :name="propIconName" color="#999" size="20rpx" />
         </view>
diff --git a/pages/plugins/video/detail/detail.nvue b/pages/plugins/video/detail/detail.nvue
index c9ba0f34..8688ced0 100644
--- a/pages/plugins/video/detail/detail.nvue
+++ b/pages/plugins/video/detail/detail.nvue
@@ -25,8 +25,8 @@
                                     <text class="action-text">{{ video_item.give_thumbs_count }}</text>
                                 </view>
                                 <view v-if="base_config_data && base_config_data.is_video_comments_show && base_config_data.is_video_comments_show == 1" class="action-item" :data-id="video_item.id" @tap.stop="handle_comment">
-                                    <u-icon propName="comment" propSize="60rpx" propColor="#fff" :data-id="video_item.id"></u-icon>
-                                    <text class="action-text" :data-id="video_item.id">{{ video_item.comments_count }}</text>
+                                    <u-icon propName="comment" propSize="60rpx" propColor="#fff"></u-icon>
+                                    <text class="action-text">{{ video_item.comments_count }}</text>
                                 </view>
                                 <view class="action-item" @tap.stop="handle_share">
                                     <u-icon propName="share-solid" propSize="60rpx" propColor="#fff"></u-icon>
@@ -86,39 +86,39 @@
 		</template>
         
         <!-- 评论弹窗 -->
-        <view v-if="show_comment_modal" class="comment-modal" @tap="close_comment_modal">
+        <view v-if="show_comment_modal" class="comment-modal" :style="width_height_style" @tap="close_comment_modal">
             <view class="comment-content bottom-line-exclude-bottom" @tap.stop :style="commentContentStyle">
                 <view class="comment-header" data-type="header" @tap.stop @touchstart="handle_comment_touch_start" @touchmove="handle_comment_touch_move" @touchend="handle_comment_touch_end">
                     <text class="comment-count">{{$t('common.comment')}}</text>
                     <view class="close-btn" @tap="close_comment_modal">✕</view>
                 </view>
-                <view class="flex-1 flex-row oh" data-type="scroll" @tap.stop @touchstart="handle_comment_touch_start" @touchmove="handle_comment_touch_move" @touchend="handle_comment_touch_end">
+                <view class="flex-1 flex-row oh" :style="'width:' + windowWidth + 'px;'" data-type="scroll" @tap.stop @touchstart="handle_comment_touch_start" @touchmove="handle_comment_touch_move" @touchend="handle_comment_touch_end">
                     <!-- 评论内容区域 -->
-                    <scroll-view class="comment-list" scroll-y :scroll-top="comment_scroll_top" show-scrollbar="false" scroll-with-animation @scrolltolower="handle_comment_to_lower_scroll" @scroll="handle_comment_scroll">
-                        <view class="comment-scroll">
+                    <scroll-view class="comment-list flex-row" scroll-y :scroll-top="comment_scroll_top" show-scrollbar="false" scroll-with-animation @scrolltolower="handle_comment_to_lower_scroll" @scroll="handle_comment_scroll">
+                        <view class="comment-scroll flex-row" :style="'width:' + windowWidth + 'px;'">
                             <template v-if="active_comments && active_comments.length > 0">
-                                <view class="comment-item flex-col" v-for="(comment_item, index) in active_comments" :key="index">
-                                    <commentInfoComponent class="wh-auto ht-auto" :propComment="comment_item" :propId="comment_item.id" :propDropDownVisible="active_dropdown_id == comment_item.id" @comment_reply="comment_reply" @comment_like="comment_like" @toggle_dropdown="handle_toggle_dropdown" @dropdown_item_click="handle_dropdown_item_click"></commentInfoComponent>
+                                <view class="comment-item flex-col" v-for="(comment_item, index) in active_comments" :key="index" :style="'width:' + windowWidth + 'px;'">
+                                    <commentInfoComponent :style="'width: ' + windowWidth + 'px;'" :propComment="comment_item" :propId="comment_item.id" :propDropDownVisible="active_dropdown_id == comment_item.id" @comment_reply="comment_reply" @comment_like="comment_like" @toggle_dropdown="handle_toggle_dropdown" @dropdown_item_click="handle_dropdown_item_click"></commentInfoComponent>
                                     <!-- 子评论 -->
-                                    <view class="sub-comment flex-col jc-c gap-10 mt-10">
+                                    <view class="sub-comment flex-col jc-c gap-10 mt-10" >
                                         <view v-if="comment_item.sub_comments && Array.isArray(comment_item.sub_comments) && comment_item.sub_comments.length > 0 && comment_item.show_sub_comment" class="sub-comment-list flex-col jc-c">
                                             <view class="sub-comment-item flex-row align-s gap-10" v-for="(sub_comment_item, sub_comment_index) in comment_item.sub_comments" :key="sub_comment_index">
-                                                <commentInfoComponent class="wh-auto ht-auto" :propComment="sub_comment_item" :propId="sub_comment_item.id" :propDropDownVisible="active_dropdown_id == sub_comment_item.id" @comment_reply="comment_reply" @comment_like="comment_like" @toggle_dropdown="handle_toggle_dropdown" @dropdown_item_click="handle_dropdown_item_click"></commentInfoComponent>
+                                                <commentInfoComponent :style="'width:' + windowWidth + 'px;'" :propComment="sub_comment_item" :propId="sub_comment_item.id" :propDropDownVisible="active_dropdown_id == sub_comment_item.id" @comment_reply="comment_reply" @comment_like="comment_like" @toggle_dropdown="handle_toggle_dropdown" @dropdown_item_click="handle_dropdown_item_click"></commentInfoComponent>
                                             </view>
                                         </view>
                                         <template v-if="comment_item.comments_count > 0">
                                             <template v-if="!comment_item.show_sub_comment">
-                                                <commentMoreComponent :propId="comment_item.id" :propIsLevel="1" :propText="'—— '+ $t('common.expand') + (comment_item.comments_count ? comment_item.comments_count || 0 : 0) + $t('ask-comments.ask-comments.ymmd24')" @comment_more_event="open_sub_comment"></commentMoreComponent>
+                                                <commentMoreComponent :style="'width:' + windowWidth + 'px;'" :propId="comment_item.id" :propIsLevel="1" :propText="'—— '+ $t('common.expand') + (comment_item.comments_count ? comment_item.comments_count || 0 : 0) + $t('ask-comments.ask-comments.ymmd24')" @comment_more_event="open_sub_comment"></commentMoreComponent>
                                             </template>
                                             <template v-else>
                                                 <template v-if="comment_item.show_sub_comment_loading">
-                                                    <loading-component></loading-component>
+                                                    <loading-component :style="'width:' + windowWidth + 'px;'"></loading-component>
                                                 </template>
                                                 <view v-else class="sub-comment-more flex-row align-c gap-10">
                                                     <template v-if="comment_item.page != null && comment_item.page < comment_item.page_total">
-                                                        <commentMoreComponent :propId="comment_item.id" :propIsLevel="2" :propText="$t('common.expand')" @comment_more_event="open_sub_comment"></commentMoreComponent>
+                                                        <commentMoreComponent :style="'width:' + windowWidth + 'px;'" :propId="comment_item.id" :propIsLevel="2" :propText="$t('common.expand')" @comment_more_event="open_sub_comment"></commentMoreComponent>
                                                     </template>
-                                                    <commentMoreComponent :propId="comment_item.id" :propText="$t('common.retract')" propIconName="icon-arrow-top" @comment_more_event="close_sub_comment"></commentMoreComponent>
+                                                    <commentMoreComponent :style="'width:' + windowWidth + 'px;'" :propId="comment_item.id" :propText="$t('common.retract')" propIconName="icon-arrow-top" @comment_more_event="close_sub_comment"></commentMoreComponent>
                                                 </view>
                                             </template>
                                         </template>
@@ -148,7 +148,7 @@
                             </view>
                         </view>
                         <view class="flex-row align-c gap-10 wh-auto ht-auto pr-16 box-border-box">
-                            <input :value="comment_input_value" class="comment-input" type="text" confirm-type="send" :adjust-position="false" :placeholder="input_placeholder" @focus="add_comment" @input="comment_input_event" @confirm="send_comment" />
+                            <input :value="comment_input_value" class="comment-input" type="text" confirm-type="send" :adjust-position="false" :placeholder="$t('video-detail.video-detail.98yyuf')" @focus="add_comment" @input="comment_input_event" @confirm="send_comment" />
                             <component-upload :propMaxNum="1" :propPathType="editor_path_type" propSlot propSingleCall propIsAllInfo @call-back="upload_images_event">
                                 <u-icon propName="layout-module-single-images" propSize="32rpx" propColor="#999"></u-icon>
                             </component-upload>
@@ -262,16 +262,7 @@
         data() {
             return {
                 theme_view: app.globalData.get_theme_value_view(),
-                // 5,7,0 是误差，， 10 是下边距，66是高度，bar_height是不同小程序下的导航栏距离顶部的高度
-                // #ifdef MP
-                top_content_style: 'padding-top:' + (bar_height + 5) + 'px;padding-bottom:10px;',
-                // #endif
-                // #ifdef H5 || MP-TOUTIAO
-                top_content_style: 'padding-top:' + (bar_height + 7) + 'px;padding-bottom:10px;',
-                // #endif
-                // #ifdef APP
                 top_content_style: 'padding-top:' + bar_height + 'px;padding-bottom:10px;',
-                // #endif
                 data_list_loding_status:  1,
                 data_list_loding_msg: '',
                 video_data_list: [],
@@ -296,7 +287,6 @@
                 is_slide_start: false,
                 swiper_key: get_math(),
                 comment_scroll_top: 0, // 评论滚动距离顶部的距离
-                input_placeholder: $t('video-detail.video-detail.98yyuf'),
                 comment_input_value: '',
                 propMaxNum: 1,
                 form_images_list: [],
@@ -345,7 +335,7 @@
             },
             // 评论内容区域高度
             commentContentStyle() {
-                return this.show_comment_modal && this.move_distance > 0 ? `transform: translateY(3px); height: calc(${this.windowHeight * 0.7 } + 20rpx - ${this.move_distance}px);` : `transform: translateY(0); height: calc(${this.windowHeight * 0.7 } + 20rpx);`;
+                return this.show_comment_modal && this.move_distance > 0 ? `transform: translateY(3px); width:${this.windowWidth }px; height: calc(${this.windowHeight * 0.7 - 10} - ${this.move_distance}px);` : `transform: translateY(0); width:${this.windowWidth }px;height: calc(${this.windowHeight * 0.7 + 10 }px);`;
             },
             // 当前播放视频的索引
             current_video_index() { 
@@ -487,13 +477,9 @@
                     // #endif
                     this.header_padding_left = padding_left;
                     this.menu_button_info = menu_button_info;
-                    this.current_video_id = isEmpty(this.current_video_id) ? this.params.id : this.current_video_id;
-                    // top_content_style 为undefined， 在这里重新赋值
-                    console.log(this.top_content_style);
-                    this.top_content_style = 'padding-top:' + bar_height + 'px;padding-bottom:10px;';
-                    // if (!isEmpty(this.current_video_id)) {
-                        this.get_video_detail(this.current_video_id || 2);
-                    // }
+                    this.current_video_id = isEmpty(this.current_video_id) ? this.params.id : this.current_video_id;
+                    
+                    this.get_video_detail(this.current_video_id);
                 } catch (error) {
                     console.error('init error:', error);
                 }
@@ -624,17 +610,14 @@
                                 if (is_last == 1 && is_next == 1) {
                                     setTimeout(() => { 
                                         // 更新显示数据数据信息
-                                        this.update_display_data(true);
-                                        console.log(this.display_video_list, '1125');
+                                        this.update_display_data();
 
                                         if (this.display_video_list && this.display_video_list.length > 0) {
                                             // 更新分享信息
-                                            this.update_share_info(this.display_video_list[this.current_index]);
-                                            
-                                            this.create_video_contexts = [];
-                                            this.video_contexts = [];
+                                            this.update_share_info(this.display_video_list[this.current_index]);
+                                            
                                             this.display_video_list.forEach((item, index) => {
-                                                // this.create_video_contexts[index] = uni.createVideoContext(`video_${index}`, this);
+                                                // this.create_video_contexts[index] = uni.createVideoContext(`video_${index}`, this);
                                                 this.$set(this.create_video_contexts, index, uni.createVideoContext(`video_${index}`, this));  
                                                 //#ifdef H5
                                                 if (document.getElementById(`video_${index}`) != null && this.video_contexts) { 
@@ -826,9 +809,7 @@
             // 切换播放暂停
             toggle_play_pause() {
                 try {
-                    const currentIndex = this.current_index;
-                    console.log(this.create_video_contexts);
-                    console.log(this.video_contexts);
+                    const currentIndex = this.current_index;
                     // 检查视频上下文是否存在
                     const videoContext = this.create_video_contexts[currentIndex] || this.video_contexts[currentIndex];
                     if (!videoContext) {
@@ -956,7 +937,7 @@
             /*
              * 更新显示的视频数据
              */
-            update_display_data(flag = false) {
+            update_display_data() {
                 try {
                     let list = [];
                     // 如果当前索引为0，只显示当前元素和下一个元素
@@ -967,14 +948,8 @@
                     } else {
                         list = this.update_video_list([1, -1, 0]);
                     }
-                    // this.$set(this, 'display_video_list', list)
                     // 刷新数据
                     this.update_display_video_list(list);
-                    // 第一次需要强制刷新
-                    if (flag) {
-                        // 页面数据不更新，执行强制刷新
-                        this.$forceUpdate();
-                    }
                 } catch (error) {
                     console.error('update_display_data error:', error);
                 }
@@ -1077,27 +1052,27 @@
             },
             // 打开评论区
             handle_comment(e) {
-                try {
+                try {
                     e.stopPropagation();
                     // const id = this.current_video_id;
-                    const old_data = this.video_data_list.find(item => item.id == this.current_video_id);
-                    console.log(old_data);
-                    if (old_data && old_data.comments_list) {
-                        console.log('2225');
-                        // 初始化评论数据
-                        const new_data = old_data.comments_list.map(item1 => ({
-                            ...item1,
-                            show_sub_comment: false,
-                            show_sub_comment_loading: false,
-                            page: 0,
-                            sub_comments: [],
-                        }));
-                        this.active_comments = new_data;
-                        this.comments_page = 1;
-                        this.comments_page_total = 5;
-                        this.comment_item_loading = false;
-                        this.show_comment_modal = true;
-                        this.move_distance = 0;
+                    const old_data = this.video_data_list.find(item => item.id == this.current_video_id);
+                    console.log(old_data);
+                    if (old_data && old_data.comments_list) {
+                        console.log('2225');
+                        // 初始化评论数据
+                        const new_data = old_data.comments_list.map(item1 => ({
+                            ...item1,
+                            show_sub_comment: false,
+                            show_sub_comment_loading: false,
+                            page: 0,
+                            sub_comments: [],
+                        }));
+                        this.active_comments = new_data;
+                        this.comments_page = 1;
+                        this.comments_page_total = 5;
+                        this.comment_item_loading = false;
+                        this.show_comment_modal = true;
+                        this.move_distance = 0;
                     }
                 } catch (error) {
                     console.error('handle_comment error:', error);
@@ -1295,7 +1270,6 @@
                                 this.form_images_list = [];
                                 this.comment_input_value = '';
                                 this.comments_reply_data = {};
-                                this.input_placeholder = $t('video-detail.video-detail.98yyuf');
                             } else {
                                 if (app.globalData.is_login_check(res.data)) {
                                     app.globalData.showToast(res.data.msg);
@@ -1515,12 +1489,12 @@
                     if (e.detail.duration > 0) {
                         duration = e.detail.duration;
                     }
-                    // #endif
-                    // this.$nextTick(() => {
-                        // this.current_video_duration = duration;
-                        // this.current_video_progress = e.detail.currentTime;
-                    // })
-                    this.$set(this, 'current_video_duration', duration);
+                    // #endif
+                    // this.$nextTick(() => {
+                        // this.current_video_duration = duration;
+                        // this.current_video_progress = e.detail.currentTime;
+                    // })
+                    this.$set(this, 'current_video_duration', duration);
                     this.$set(this, 'current_video_progress', e.detail.currentTime)
                 } catch (error) {
                     console.error('handle_time_update error:', error);
@@ -2070,7 +2044,7 @@
         bottom: 60rpx;
         left: 20rpx;
         right: 20rpx;
-        display: flex;
+        display: flex;
         flex-direction: row;
         align-items: center;
         z-index: 11;
@@ -2092,15 +2066,17 @@
     /* 评论弹窗样式 */
     .comment-modal {
         position: fixed;
-        top: 0;
-        left: 50%;
-        transform: translateX(-50%);
+        top: 0;
+        left: 0;
+        // left: 50%;
+        // transform: translateX(-50%);
         width: 100%;
         height: 100%;
         max-width: 1600rpx;
         background-color: rgba(0, 0, 0, 0.5);
         z-index: 99;
-        display: flex;
+        display: flex;
+        flex-direction: row;
         justify-content: center;
         align-items: flex-end;
     }
@@ -2120,7 +2096,8 @@
         padding: 30rpx;
         box-sizing: border-box;
         border-bottom: 2rpx solid #eee;
-        display: flex;
+        display: flex;
+        flex-direction: row;
         justify-content: space-between;
         align-items: center;
     }
@@ -2140,7 +2117,7 @@
         overflow: hidden;
     }
     
-    .comment-list .comment-scroll {
+    .comment-scroll {
         width: 100%;
         height: 100%;
         padding: 30rpx;
@@ -2159,7 +2136,8 @@
         gap: 40rpx;
     }
     .comment-input-container {
-        display: flex;
+        display: flex;
+        flex-direction: row;
         padding: 20rpx;
         border-top: 2rpx solid #eee;
     }