universal-wechat-uniapp-241007/pages_order/components/list/comment/commentList.vue

<template>
    <view class="commemt">
        <view class="comment-list">
            <commentItem v-for="(item, index) in list" :key="index" :parentId="item.id" :sourceType="params.type"
                :sourceId="params.orderId" :item="item" :subComments="getSubComments(item.id)" 
                @loadSubComments="handleLoadSubComments" @reply="handleReply" />
        </view>

        <view class="submit-box">
            <view class="top">
                <button class="share" open-type="share">
                    <uv-icon color="#00cf05" size="50rpx" name="weixin-fill"></uv-icon>
                </button>

                <input type="text" disabled @click="openCommentPublish" 
                :placeholder="'评论给' + params.name || '他'" />
            </view>
        </view>

        <!-- 评论发布组件 -->
        <commentPublish ref="commentPublish" :params="params" :placeholder="'评论给' + params.name || '他'" @success="handleCommentSuccess" />
    </view>
</template>

<script>
import commentItem from './commentItem.vue'
import commentPublish from './commentPublish.vue'

export default {
    components: {
        commentItem,
        commentPublish,
    },
    props: ['list', 'params'],
    data() {
        return {
            currentReplyComment: null, // 当前回复的评论
            subCommentsMap: {} // 存储子评论数据的映射表，key为父评论ID，value为子评论数组
        }
    },
    methods: {
        // 获取指定父评论的子评论列表
        getSubComments(parentId) {
            return this.subCommentsMap[parentId] || [];
        },
        
        // 打开评论发布弹窗
        openCommentPublish() {
            // 检查用户是否已登录
            if (!this.userInfo || !this.userInfo.id) {
                console.log('用户未登录，跳转到登录页面')
                // 使用utils中的toLogin方法跳转到登录页面
                this.$utils.toLogin()
                return
            }
            this.currentReplyComment = null
            this.$refs.commentPublish.open()
        },

        // 评论发布成功回调
        handleCommentSuccess(successData) {
            console.log('handleCommentSuccess 接收到的数据:', successData);
            
            // 如果是回复评论，需要重新加载对应的子评论列表
            if (successData && successData.isReply && successData.parentId) {
                console.log('准备重新加载子评论，parentId:', successData.parentId);
                // 重新加载子评论数据
                this.loadSubCommentsData(successData.parentId);
            } else {
                console.log('不是回复评论或缺少parentId，successData:', successData);
            }
            
            // 触发父组件刷新主评论列表
            this.$emit('getData')
        },
        
        // 处理加载子评论
        handleLoadSubComments(comment) {
            // 模拟加载子评论数据的API调用
            this.loadSubCommentsData(comment.id);
        },
        
        // 加载子评论数据
        async loadSubCommentsData(parentId) {
            try {
                // 显示加载提示
                uni.showLoading({
                    title: '加载中...'
                });
                
                const apiParams = {
                    pid: parentId,
                    type: this.params.type,
                    orderId: this.params.orderId,
                    page: 1,
                    pageSize: 99999999
                };
                
                // 使用实际的API获取子评论数据
                this.$api('getCommentPage', apiParams, res => {
                    uni.hideLoading();
                    if (res.code === 200) {
                        // 将子评论数据存储到映射表中
                        const subComments = res.result.records || [];
                        this.$set(this.subCommentsMap, parentId, subComments);
                    }
                });
                
            } catch (error) {
                uni.hideLoading();
            }
        },
        
        // 处理回复评论
        handleReply({item, level}) {
            let comment = item
            this.currentReplyComment = comment
            
            // 判断是一级评论还是二级评论
            let replyParams
            let parentCommentId // 用于标识真正的父评论ID（一级评论ID）
            
            if (comment.pid && comment.pid !== 0) {
                // 这是二级评论，回复二级评论时仍然使用原始一级评论的ID作为pid
                parentCommentId = comment.pid // 二级评论的pid就是一级评论的ID
                replyParams = {
                    ...this.params,
                    pid: comment.pid, // 使用原始一级评论的ID
                    parentCommentId: parentCommentId // 添加父评论ID用于更新子评论列表
                }
                if (level == 0) {
                }else{
                    replyParams.replyToId = comment.replyToId
                    replyParams.replyToName = comment.userName
                    replyParams.replyToAvatar = comment.userHead
                }
            } else {
                // 这是一级评论，回复一级评论时使用该评论的ID作为pid
                parentCommentId = comment.id // 一级评论的ID就是父评论ID
                replyParams = {
                    ...this.params,
                    pid: comment.id, // 使用一级评论的ID作为pid
                    replyToId: comment.id,
                    replyToName: comment.userName,
                    replyToAvatar: comment.userHead,
                    parentCommentId: parentCommentId // 添加父评论ID用于更新子评论列表
                }
            }
            
            this.$refs.commentPublish.setReplyParams(replyParams)
            this.$refs.commentPublish.open()
        }
    }
}
</script>

<style scoped lang="scss">
.commemt {
    padding-bottom: env(safe-area-inset-bottom);
}

.comment-list {
    margin-top: 20rpx;
    padding-bottom: 150rpx;
}

.submit-box {
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #fff;
    width: 100%;
    box-shadow: 0 0 6rpx 6rpx #00000011;
    padding-bottom: env(safe-area-inset-bottom);

    .top {
        align-items: center;
        display: flex;
        justify-content: center;

        input {
            background-color: #f3f3f3;
            width: 460rpx;
            height: 40rpx;
            border-radius: 40rpx;
            margin: 20rpx;
            padding: 20rpx 30rpx;
            font-size: 28rpx;
        }
    }
}
</style>