From 02b1e9caeda8a8892c0093c39daa8ecd20af24c9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Tue, 23 Sep 2025 11:56:02 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=A1=B5=E9=9D=A2=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../plugins/video/components/comment-info.vue |  22 +-
 pages/plugins/video/detail/detail.vue         | 245 ++++++++++++++----
 pages/plugins/video/detail/video_list.json    |  16 +-
 3 files changed, 223 insertions(+), 60 deletions(-)

diff --git a/pages/plugins/video/components/comment-info.vue b/pages/plugins/video/components/comment-info.vue
index 019c8c66..89b96ee8 100644
--- a/pages/plugins/video/components/comment-info.vue
+++ b/pages/plugins/video/components/comment-info.vue
@@ -1,9 +1,14 @@
 <template> 
     <view class="flex-row align-s gap-10 wh-auto ht-auto"> 
         <image class="comment-avatar" :src="propComment.userHead" mode="aspectFill"></image>
-        <view class="comment-info" @tap="comment_reply">
+        <view class="comment-info flex-col jc-c" @tap="comment_reply">
             <view class="comment-user">{{ propComment.userNick }}</view>
             <view class="comment-text">{{ propComment.content }}</view>
+            <view class="comment-images flex-row align-c gap-5">
+                <view v-for="(item, index) in propComment.images" class="comment-image">
+                    <image :src="item.url" :data-index="index" @tap="upload_show_event" mode="aspectFill" class="wh-auto ht-auto"></image>
+                </view>
+            </view>
             <view class="comment-operation flex-row align-c jc-sb">
                 <view class="comment-operation-left flex-row align-c gap-10">
                     <view class="comment-time">{{ propComment.time }}</view>
@@ -49,7 +54,14 @@
             // 点赞
             comment_like() {
                 this.$emit('comment_like', this.propId, this.propSubId);
-            }
+            },
+            // 上传图片预览
+            upload_show_event(e) {
+                uni.previewImage({
+                    current: this.propComment.images[e.currentTarget.dataset.index].url,
+                    urls: this.propComment.images.map(item => item.url),
+                });
+            },
         }
     }   
 </script>
@@ -62,7 +74,7 @@
 }
 .comment-info {
     flex: 1;
-    gap: 8rpx;
+    gap: 6rpx;
 }
 .comment-user {
     font-size: 24rpx;
@@ -92,4 +104,8 @@
     color: #999999;
     line-height: 34rpx;
 }
+.comment-image {
+    width: 50rpx;
+    height: 50rpx;
+}
 </style>
\ No newline at end of file
diff --git a/pages/plugins/video/detail/detail.vue b/pages/plugins/video/detail/detail.vue
index b8824848..782b0f24 100644
--- a/pages/plugins/video/detail/detail.vue
+++ b/pages/plugins/video/detail/detail.vue
@@ -1,6 +1,6 @@
 <template>
     <view class="content">
-        <swiper class="swiper-container" :key="'top-or-buttom-' + swiper_key" :style="swiperStyle" :vertical="true" :circular="close_circular ? false : true" :current="current_index" easing-function="easeInOutCubic" @change="handleSwiperChange">
+        <swiper class="swiper-container" :key="'top-or-buttom-' + swiper_key" :style="swiperStyle" :vertical="true" :circular="close_circular ? false : true" :current="current_index" easing-function="easeInOutCubic" @change="handle_swiper_change">
             <swiper-item v-for="(video_item, index) in display_video_list" :key="video_item.id">
                 <view class="video-container" @tap="toggle_play_pause">
                     
@@ -53,20 +53,20 @@
                         <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" @comment_reply="comment_reply" @comment_like="comment_like"></commentInfoComponent>
                             <!-- 子评论 -->
-                            <view class="sub-comment flex-col jc-c">
-                                <view v-if="!comment_item.show_sub_comment">
-                                    <commentMoreComponent :propId="comment_item.id" :propText="'—— 展开' + (comment_item.subComments ? comment_item.subComments.length || 0 : 0) + '条回复'" @comment_more_event="open_sub_comment"></commentMoreComponent>
-                                </view>
-                                <template v-else>
-                                    <view v-if="comment_item.subComments && comment_item.subComments.length > 0" 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.subComments" :key="sub_comment_index">
-                                            <commentInfoComponent class="wh-auto ht-auto" :propComment="sub_comment_item" :propId="comment_item.id" :propSubId="sub_comment_item.id" @comment_reply="sub_comment_reply" @comment_like="sub_comment_like"></commentInfoComponent>
-                                        </view>
+                            <view class="sub-comment flex-col jc-c gap-10 mt-10">
+                                <view v-if="comment_item.sub_comments && comment_item.sub_comments.length > 0" 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="comment_item.id" :propSubId="sub_comment_item.id" @comment_reply="sub_comment_reply" @comment_like="sub_comment_like"></commentInfoComponent>
                                     </view>
+                                </view>
+                                <template v-if="!comment_item.show_sub_comment">
+                                    <commentMoreComponent :propId="comment_item.id" :propText="'—— 展开' + (comment_item.sub_comments ? comment_item.sub_comments.length || 0 : 0) + '条回复'" @comment_more_event="open_sub_comment"></commentMoreComponent>
+                                </template>
+                                <template v-else>
                                     <template v-if="comment_item.show_sub_comment_loading">
                                         <loading-component></loading-component>
                                     </template>
-                                    <view v-else class="sub-comment-more mt-10 flex-row align-c gap-10">
+                                    <view v-else class="sub-comment-more flex-row align-c gap-10">
                                         <view v-if="!comment_item.is_exactly">
                                             <commentMoreComponent :propId="comment_item.id" propText="展开" @comment_more_event="open_sub_comment"></commentMoreComponent>
                                         </view>
@@ -80,12 +80,18 @@
                 <view class="comment-input-container">
                     <view class="comment-input-content flex-col jc-c">
                         <view class="flex-row align-c gap-10 wh-auto ht-auto">
-                            <input class="comment-input" type="text" placeholder="请输入您的精彩评论" @confirm="send_comment" />
-                            <view style="font-size:32rpx">@</view>
-                            <view>
+                            <input :value="comment_input_value" class="comment-input" type="text" confirm-type="send" :placeholder="input_placeholder" @input="comment_input_event" @confirm="send_comment" />
+                            <view style="font-size:32rpx;color: #999;" data-type="@" @tap="comment_input_change">@</view>
+                            <view data-type="image" @tap="comment_input_change">
                                 <iconfont name="icon-layout-module-single-images" size="32rpx" color="#999"></iconfont>
                             </view>
                         </view>
+                        <view v-if="form_images_list.length > 0" class="pr w h comment-input-img-container">
+                            <view v-for="(item, index) in form_images_list" :key="index" class="comment-input-img pr">
+                                <iconfont name="icon-close" size="10" color="#000" class="comment-input-img-close" :data-index="index" @tap="comment_input_img_close"></iconfont>
+                                <image :src="item.url" :data-index="index" @tap="upload_show_event" mode="aspectFill" class="wh-auto ht-auto"></image>
+                            </view>
+                        </view>
                     </view>
                 </view>
             </view>
@@ -94,8 +100,9 @@
 </template>
 
 <script>
+    const app = getApp();
     import videoList from '@/pages/plugins/video/detail/video_list.json';
-    import { get_math } from '@/common/js/common/common.js';
+    import { get_math, isEmpty } from '@/common/js/common/common.js';
     import loadingComponent from '@/pages/plugins/video/components/loading.vue';
     import commentInfoComponent from '@/pages/plugins/video/components/comment-info.vue';
     import commentMoreComponent from '@/pages/plugins/video/components/comment-more.vue';
@@ -124,6 +131,10 @@
                 is_slide_start: false,
                 swiper_key: get_math(),
                 comment_scroll_top: 0,
+                input_placeholder: '请输入您的精彩评论',
+                comment_input_value: '',
+                propMaxNum: 1,
+                form_images_list: [],
             };
         },
         computed: {
@@ -156,6 +167,7 @@
             }, 200);
         },
         methods: {
+            isEmpty,
             // 初始化显示数据
             init_display_data() {
                 this.current_video_id = this.videoData[0].id;
@@ -214,14 +226,97 @@
                     display_video_list: list
                 })
             },
-            
-            // 预加载相邻数据
-            preload_adjacent_data() {
-                // 这里可以添加预加载逻辑，比如提前加载视频封面等
-                console.log('预加载数据，当前视频ID:', this.current_video_id);
+            // 评论输入框事件
+            comment_input_event(e) {
+                this.comment_input_value = e.detail.value;
             },
+            comment_input_change(e) {
+                const { type } = e.currentTarget.dataset;
+                if (type == '@') {
+                    this.comment_input_value = '@';
+                } else if (type == 'image') {
+                    var self = this;
+                    uni.chooseImage({
+                        count: self.propMaxNum,
+                        success(res) {
+                            var success = 0;
+                            var fail = 0;
+                            var length = res.tempFilePaths.length;
+                            var count = 0;
+                            self.upload_one_by_one(res.tempFilePaths, success, fail, count, length, 'uploadimage');
+                        },
+                    });
+                }
+            },
+            // 采用递归的方式上传多张
+            upload_one_by_one(img_paths, success, fail, count, length, action) {
+                var self = this;
+                if (self.form_images_list.length <= this.propMaxNum) {
+                    uni.uploadFile({
+                        url: app.globalData.get_request_url('index', 'ueditor'),
+                        filePath: img_paths[count],
+                        name: 'upfile',
+                        formData: {
+                            action: action,
+                            path_type: self.propPathType,
+                        },
+                        success: function (res) {
+                            success++;
+                            if (res.statusCode == 200) {
+                                var data = typeof res.data == 'object' ? res.data : JSON.parse(res.data);
+                                if (data.code == 0 && (data.data.url || null) != null) {
+                                    var list = self.form_images_list;
+                                    list.push({
+                                        url: data.data.url,
+                                        name: data.data.original,
+                                        size: data.data.size,
+                                    });
+                                    self.setData({
+                                        form_images_list: list,
+                                    });
+                                    self.$emit('call-back', self.form_images_list, self.propCallData);
+                                } else {
+                                    app.globalData.showToast(data.msg);
+                                }
+                            }
+                        },
+                        fail: function (e) {
+                            console.log(e);
+                            fail++;
+                        },
+                        complete: function (e) {
+                            count++;
 
-            handleSwiperChange(event) {
+                            // 下一张
+                            if (count >= length) {
+                                // 上传完毕，作一下提示
+                                //app.showToast('上传成功' + success +'张', 'success');
+                            } else {
+                                // 递归调用，上传下一张
+                                self.upload_one_by_one(img_paths, success, fail, count, length, action);
+                            }
+                        },
+                    });
+                }
+            },
+            // 上传图片预览
+            upload_show_event(e) {
+                uni.previewImage({
+                    current: this.form_images_list[e.currentTarget.dataset.index].url,
+                    urls: this.form_images_list.map(item => item.url),
+                });
+            },
+            // 评论输入图片删除
+            comment_input_img_close(e) {
+                const { index } = e.currentTarget.dataset;
+                var list = this.form_images_list;
+                list.splice(index, 1);
+                this.setData({
+                    form_images_list: list,
+                });
+            },
+            // 视频滚动处理逻辑
+            handle_swiper_change(event) {
                 const { current } = event.detail;
 
                 const previousIndex = this.current_index;
@@ -244,7 +339,6 @@
                             this.getVideoByIndex(1),
                             this.getVideoByIndex(2)
                         ];
-                        console.log('更新显示数据', list);
                         
                         this.setData({
                             is_slide_start: false,
@@ -278,7 +372,7 @@
                     }
                 }, 100);
             },
-
+            // 切换播放暂停
             toggle_play_pause() {
                 if (!this.video_contexts[this.current_index]) return; // 当前播放的视频索引为1
 
@@ -289,7 +383,7 @@
                     this.video_contexts[this.current_index].play();  // 播放中间的视频
                 }
             },
-
+            // 收藏
             handle_like(e) {
                 const video = e.currentTarget.dataset.value;
                 video.is_fabulous = !video.is_fabulous;
@@ -308,7 +402,7 @@
                     show_sub_comment: false,
                     show_sub_comment_loading: false,
                     is_exactly: false,
-                    subComments: [],
+                    sub_comments: [],
                 }));
                 this.setData({
                     active_comments: new_data,
@@ -336,7 +430,6 @@
                     this.move_distance = 0;   
                 }
             },
-
             // 评论拖拽中
             handle_comment_touch_move(e) {
                 // 只有滚动到顶部时才允许拖拽
@@ -364,29 +457,49 @@
                 let comment_text = '';
                 if (e.type === 'confirm') {
                     comment_text = e.detail.value;
-                } else {
-                    // 获取输入框的值
-                    const input_element = this.$el.querySelector('.comment-input');
-                    comment_text = input_element.value;
                 }
                 
                 if (!comment_text.trim()) return;
-                
+                // 创建新的评论对象
                 const newComment = {
                     id: `c${Date.now()}`,
                     userHead: 'http://8.146.211.120:8080/upload/avatar/d5537aa243ef6a74a50bf4ffd4ca6876.jpg',
                     userNick: '我',
+                    reply: '',
+                    images: this.form_images_list,
                     content: comment_text,
                     time: new Date().toLocaleString()
                 };
-                this.active_comments.list.unshift(newComment);
-                this.active_comments.count++;
-                
-                // 清空输入框
-                const input_element = this.$el.querySelector('.comment-input');
-                if (input_element) {
-                    input_element.value = '';
+                const new_comments = JSON.parse(JSON.stringify(this.active_comments));
+                if (!isEmpty(this.comment_id)) {
+                    new_comments.forEach(item => {
+                        if (item.id === this.comment_id) {
+                            // 如果回复的是子评论
+                            if (!isEmpty(this.sub_comment_id)) {
+                                const new_data = item.sub_comments.find(item => item.id === this.sub_comment_id);
+                                if (new_data) {
+                                    newComment.reply = new_data.userNick;
+                                }
+                            }
+                            item.sub_comments.unshift(newComment);
+                        }
+                    });
+                } else {
+                    // 如果是新评论的话，需要有子评论的数组
+                    newComment.sub_comments = [];
+                    // 添加数据
+                    new_comments.unshift(newComment);
+                    new_comments.count++;
                 }
+                // 清空输入框, 更新数据内容
+                this.setData({
+                    form_images_list: [],
+                    comment_input_value: '',
+                    active_comments: new_comments,
+                    comment_id: '',
+                    sub_comment_id: '',
+                    input_placeholder: '请输入您的精彩评论',
+                });
             },
             // 展开子评论
             open_sub_comment(id) {
@@ -395,7 +508,7 @@
                     comment.show_sub_comment = true;
                     comment.show_sub_comment_loading = true;
                     setTimeout(() => {
-                        comment.subComments.push({
+                        comment.sub_comments.push({
                             id: `c${Date.now()}`,
                             userHead: 'http://8.146.211.120:8080/upload/avatar/d5537aa243ef6a74a50bf4ffd4ca6876.jpg', // Placeholder avatar
                             userNick: '我',
@@ -433,24 +546,46 @@
             },
             // 主评论回复
             comment_reply(id) {
-                const index = this.active_comments.findIndex(item => item.id === id);
-                if (index >= 0) {
-                    const data = this.active_comments[index];
-                    this.input_placeholder = `回复 ${data.userNick};`;
-
+                const data = this.active_comments.find(item => item.id === id);
+                if (!isEmpty(data)) {
+                    this.setData({ 
+                        input_placeholder: `@${data.userNick}`,
+                        comment_id: id,
+                        sub_comment_id: '',
+                    });
                 }
             },
             // 主评论点赞
             comment_like(id) {
-
+                const data = this.active_comments.find(item => item.id === id);
+                if (!isEmpty(data)) {
+                    this.setData({ 
+                        comment_id: id,
+                        sub_comment_id: '',
+                    });
+                }
             },
             // 子评论回复
-            sub_comment_reply(id) {
-
+            sub_comment_reply(id, sub_id) {
+                const data = this.active_comments.find(item => item.id === id);
+                if (!isEmpty(data)) {
+                    const sub_data = data.sub_comments.find(item => item.id === sub_id);
+                    this.setData({ 
+                        input_placeholder: `@${sub_data.userNick}`,
+                        comment_id: id,
+                        sub_comment_id: sub_id,
+                    });
+                }
             },
             // 子评论点赞
             sub_comment_like(id) {
-
+                const data = this.active_comments.find(item => item.id === id);
+                if (!isEmpty(data)) {
+                    this.setData({ 
+                        comment_id: id,
+                        sub_comment_id: '',
+                    });
+                }
             },
             handle_slider_change(e) {
                 const seek_time = e.detail.value;
@@ -649,7 +784,6 @@
     }
     
     .sub-comment {
-        margin-top: 22rpx;
         margin-left: 100rpx;
     }
     
@@ -677,5 +811,18 @@
         padding-right: 16rpx;
         font-size: 28rpx;
     }
+    .comment-input-img-container {
+        padding: 10rpx 16rpx 16rpx 16rpx;
+    }
+    .comment-input-img-close {
+        position: absolute;
+        right: -10rpx;
+        top: -10rpx;
+        z-index: 2;
+    }
+    .comment-input-img {
+        width: 50rpx;
+        height: 50rpx;
+    }
 </style>
 
diff --git a/pages/plugins/video/detail/video_list.json b/pages/plugins/video/detail/video_list.json
index a9fcfdf1..e54ccc70 100644
--- a/pages/plugins/video/detail/video_list.json
+++ b/pages/plugins/video/detail/video_list.json
@@ -4,7 +4,7 @@
         "isFabulous": 1,
         "userNick": "WX: MAMBA_4EVER24",
         "videoContent": "第一条视频",
-        "fabulousCount": 1,
+        "fabulous_count": 1,
         "videoUrl": "http://8.146.211.120:8080/upload/douyin/e6fddef474951cc15f5aeb99219b4a91.mp4",
         "posterUrl": "http://8.146.211.120:8080/upload/notes/ce5082f76cc9bd82a2bd97ce8b45ea32.jpg",
         "userHead": "http://8.146.211.120:8080/upload/notes/8f5ebdab07f9fb592895bd3f0f230ea9.jpg",
@@ -47,7 +47,7 @@
         "isFabulous": 0,
         "userNick": "WX: MAMBA_4EVER24",
         "videoContent": "第二条视频",
-        "fabulousCount": 1,
+        "fabulous_count": 1,
         "videoUrl": "http://8.146.211.120:8080/upload/douyin/0985b0f3879c7dca9f6c1c6fb59d4a79.mp4",
         "posterUrl": "http://8.146.211.120:8080/upload/background/dab42015a50709f68a75306a572aaaca.jpg",
         "userHead": "http://8.146.211.120:8080/upload/background/735feb718119ea7e5f206be7b4410dd6.jpg",
@@ -61,7 +61,7 @@
         "isFabulous": 1,
         "userNick": "WX: MAMBA_4EVER24",
         "videoContent": "第三条视频内容",
-        "fabulousCount": 1,
+        "fabulous_count": 1,
         "videoUrl": "http://8.146.211.120:8080/upload/douyin/a4832a9a37b44196b49c646db148ec65.mp4",
         "posterUrl": "http://8.146.211.120:8080/upload/background/8049cff58c46adf4164907fb3abe63a8.jpg",
         "userHead": "http://8.146.211.120:8080/upload/notes/b11b2d741a5132b0d733a9861c9f6c7c.jpg",
@@ -83,7 +83,7 @@
         "isFabulous": 1,
         "userNick": "WX: MAMBA_4EVER24",
         "videoContent": "第四条视频内容",
-        "fabulousCount": 1,
+        "fabulous_count": 1,
         "videoUrl": "http://shopxo.com/static/upload/video/goods/2023/08/17/1692267725487534.mp4",
         "posterUrl": "http://8.146.211.120:8080/upload/background/8049cff58c46adf4164907fb3abe63a8.jpg",
         "userHead": "http://8.146.211.120:8080/upload/notes/b11b2d741a5132b0d733a9861c9f6c7c.jpg",
@@ -105,7 +105,7 @@
         "isFabulous": 1,
         "userNick": "WX: MAMBA_4EVER24",
         "videoContent": "第五条视频内容",
-        "fabulousCount": 1,
+        "fabulous_count": 1,
         "videoUrl": "http://shopxo.com/static/upload/video/goods/2019/01/14/1547458876723311.mp4",
         "posterUrl": "",
         "userHead": "",
@@ -127,7 +127,7 @@
         "isFabulous": 1,
         "userNick": "WX: MAMBA_4EVER24",
         "videoContent": "第六条视频内容",
-        "fabulousCount": 1,
+        "fabulous_count": 1,
         "videoUrl": "http://shopxo.com/static/upload/video/goods/2023/08/17/1692267246598639.mp4",
         "posterUrl": "",
         "userHead": "",
@@ -149,7 +149,7 @@
         "isFabulous": 1,
         "userNick": "WX: MAMBA_4EVER24",
         "videoContent": "第七条视频内容",
-        "fabulousCount": 1,
+        "fabulous_count": 1,
         "videoUrl": "http://8.146.211.120:8080/upload/douyin/a4832a9a37b44196b49c646db148ec65.mp4",
         "posterUrl": "",
         "userHead": "",
@@ -171,7 +171,7 @@
         "isFabulous": 1,
         "userNick": "WX: MAMBA_4EVER24",
         "videoContent": "第八条视频内容",
-        "fabulousCount": 1,
+        "fabulous_count": 1,
         "videoUrl": "http://shopxo.com/static/upload/video/goods/2023/08/17/1692267725487534.mp4",
         "posterUrl": "",
         "userHead": "",