You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
185 lines
6.3 KiB
185 lines
6.3 KiB
<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() {
|
|
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>
|