This commit is contained in:
2025-06-13 20:46:10 +08:00
parent a3e6a6d8b8
commit 898b816655
52 changed files with 2250 additions and 3785 deletions
@@ -20,32 +20,41 @@
<view class="comment-num">
<view>共 {{commentData.commentSize}} 条评论</view>
<view class="add-btn">
<button type="primary" size="mini" @click="commentInput_">发表评论</button>
<view
:style="btn_send_commends_font_color + btn_send_commends_color"
class="btn_commends"
@click="commentInput_">发表评论</view>
</view>
</view>
<!-- 评论主体-顶部数量及发表评论按钮-end -->
<!-- 评论列表-start -->
<view class="comment-box" v-for="(item, index) in commentData.comment" :key="index">
<view class="comment-box-item">
<view>
<cloud-image v-if="item.avatarUrl" height="70rpx" width="70rpx" borderRadius="50%"
@click="toCommentPersonalpage(item)"
:src="item.avatarUrl.url"></cloud-image>
@click="toCommentPersonalpage(item)" :src="item.avatarUrl.url"></cloud-image>
</view>
<view class="comment-main">
<!-- 父评论体-start -->
<view class="comment-main-top">
<view class="nick-name-box" @click="toCommentPersonalpage(item)">
<view class="comLogo com4">{{index + 1}}楼</view>
<view class="nick-name">{{item.nickName}}</view>
<!-- <view class="comLogo com4">{{index + 1}}楼</view> -->
<view class="nick-name" :style="nickname_color">{{item.nickName}}</view>
</view>
<view class="zan-box" @click="like(item)">
<span
:class="item.hasLike ? 'isLike' : 'notLike'">{{item.likeNum == 0 ? '抢首赞' : item.likeNum}}</span>
<img style="width: 14px; height: 14px;" v-if="!item.hasLike"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAApVJREFUWEfFlz9oFEEUxr93SWEhFkIaBUljo4WgATEaiI0GwVLBQg2EzLd3hSBqLI2lRgWLY+ftSSQgggoWNv5pImLUwjQBg1goqCCIIBqwueSeTLg7Ln9Mcmdub7vdnZnvN9+8fe+toMWXtFgfDQGMjo52zM7OHgMwIyLTg4ODk41upG4A7/0OEbkPYGdFVEQuOOeuNQJRN4CqBvGw+3dm9kZEBsrCPSRf1gvRCIAFETPrjqLodZIkY2Z2SkQmnHMHUgMgOQ8fx3FvJpMZB/CDZEfqACEgi8XidwA/SW5uKkCN2AzJTYscmCTZ1VQA7/2AiNwSkefOuYNBLEmSnJnlATwgebypAKr6CMBRANdJng9i3vu8iORE5Mrc3NyTlQDM7HMul/tYO2bNX0GhUDhRKpXumtlvAPuiKJouOzBuZr117HyBU6sCqOpeAH0AhssiwyQvVwTjOO5va2s7vRaAGtCrJC+GOVUAVb1UTjDVDLd4URHJOuf8WsSWG5MkSbeZTYR3lc+4CpAkyUpWht3fI/m+UfEwL5/Pb2xvb59ZFkBV5zNchazsSBBeYPn/ABQKhZ5SqfQCwBTJXYuPoOkAqnoGwE0Ad0ieTB3Ae39bRPoBDJEcSR1AVd8C2CMifc65p6kCmJkkSfIHwAYAW0h+SxVAVXcDmDSzL1EUbasEc20eaGoQVuoIgMckj6QOoKo3AJwFMEJyqBUAIegOAegnOdYKgK8AtmYyma7aLjqVGPDebxeRDwB+AeggWUzVAVV1ABTAK5L7l+0HVPUTgM7Q7VQGhPJZe99oHagpw4dJPvsXQPixONeoyErzRGTKzB7W9hFLjiA8iOO4M7iw3hDZbLbq6pIeY73F6l1v1Zas3gXrHf8XhhNvMGSmtPYAAAAASUVORK5CYII=" />
<img style="width: 14px; height: 14px;" v-else
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAfVJREFUWEfFl79LHEEUx7/vclr4g51TLFQQW9FNDFhFBDvjtcF0gXSp5eYuWJlUAW9NIP9BIFUEOxFtTKF2FrezKFgkkEBS3h4SAtHbJ6vu5W5d1F3cm20WZt+b7+e9mTfzlqD5Ic36SATw+OPJQP2ft+ABJwQ+VFIcJA0kEYBpVfcAehKIMqHoFISVBCI2wOS76mi9g76HxTLwZiqybzcuRGwAc7WWB/NGWIhBu440ZlIHmFitLRPzm+tC9EtJY1gjAP9VMtelEQC2kuJR6gCm5X4BsBAWImDdluJZqgBjH/4MZr3TYzB6IoRWmHnzJgDK0g+1KL4128SqgnD9x432yn5NSfE88L0VYPx9rS/jYR6EJTCPJxQNu60oKV77gw2Ai/Ly1/ZKRElx8c20XL4n0ZZpgvkbAKbl7gCYDax0ALREmjJAo2SbM9A+AKLPqmC8aNkD4bVOMwPEKNlFUdYGkAE9rUhjSxvA2YOOoaPF7t+6AH4qKUauHURt3AObSoq8NgAGyo4UJW0ABH5py9wnbQAAppq76HYfRLXOXmPg4BWdasoA7yuZm47sB0zL9Vvt0TQvI/bqc06pfzsS4KHlWgwUUgKwmWjdKRhvI1q5/0P+T8dZ9jILTjH31X9PlKuNKzppXxDMFeV/a0eUVPSuftoBzgHKR/ohZwAugwAAAABJRU5ErkJggg==" />
:style="item.hasLike ? select_font_color : icon_font_color"
:class="item.hasLike ? 'isLike' : 'notLike'">
{{item.likeNum == 0 ? '抢首赞' : item.likeNum}}
</span>
<uni-icons
type="hand-up" size="24"
:color="item.hasLike?select_icon_color:icon_color">
</uni-icons>
</view>
</view>
@@ -59,56 +68,65 @@
</text>
<!-- {{item.content.length > 60 && !item.hasShowMore ? item.content.slice(0, 59) : item.content}} -->
<!-- <span class="foot-btn" @click="showMore(item.id)">
{{item.hasShowMore ? '收起' : '展开'}}
</span> -->
</view>
<view class="comment-main-foot">
<view class="foot-time">{{item.createTime}}</view>
<view class="foot-btn" @click="reply(item)">回复</view>
<view class="foot-btn" v-if="item.owner" @click="confirmDelete(item)">删除</view>
<view class="foot-btn" @click="reply(item)" :style="btn_color">
回复
</view>
<view class="foot-btn" v-if="item.owner" @click="confirmDelete(item)" :style="btn_color">
删除
</view>
</view>
<view class="" v-if="item.replyCount > 0" @click="getTreeComment(item)">
——<text class="font-size-20 color-bule"> 共有{{ item.replyCount }}条评论点击展开</text>
——<text class="font-size-20"> 共有{{ item.replyCount }}条评论点击展开</text>
</view>
<!-- 父评论体-end -->
<!-- 子评论列表-start -->
<view class="comment-sub-box">
<view class="comment-sub-item" v-for="each in item.children">
<view>
<cloud-image v-if="each.avatarUrl" height="70rpx" width="70rpx" borderRadius="50%"
@click="toCommentPersonalpage(each)"
:src="each.avatarUrl.url"></cloud-image>
<cloud-image v-if="each.avatarUrl" height="70rpx" width="70rpx" borderRadius="50%"
@click="toCommentPersonalpage(each)" :src="each.avatarUrl.url"></cloud-image>
</view>
<view class="comment-main">
<view class="sub-comment-main-top">
<view class="nick-name" @click="toCommentPersonalpage(each)">{{each.nickName}}</view>
<view class="nick-name" :style="nickname_color"
@click="toCommentPersonalpage(each)">{{each.nickName}}</view>
<view class="zan-box" @click="like(each)">
<span
:class="each.hasLike ? 'isLike' : 'notLike'">{{each.likeNum == 0 ? '抢首赞' : each.likeNum}}</span>
<img style="width: 14px; height: 14px;" v-if="!each.hasLike"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAApVJREFUWEfFlz9oFEEUxr93SWEhFkIaBUljo4WgATEaiI0GwVLBQg2EzLd3hSBqLI2lRgWLY+ftSSQgggoWNv5pImLUwjQBg1goqCCIIBqwueSeTLg7Ln9Mcmdub7vdnZnvN9+8fe+toMWXtFgfDQGMjo52zM7OHgMwIyLTg4ODk41upG4A7/0OEbkPYGdFVEQuOOeuNQJRN4CqBvGw+3dm9kZEBsrCPSRf1gvRCIAFETPrjqLodZIkY2Z2SkQmnHMHUgMgOQ8fx3FvJpMZB/CDZEfqACEgi8XidwA/SW5uKkCN2AzJTYscmCTZ1VQA7/2AiNwSkefOuYNBLEmSnJnlATwgebypAKr6CMBRANdJng9i3vu8iORE5Mrc3NyTlQDM7HMul/tYO2bNX0GhUDhRKpXumtlvAPuiKJouOzBuZr117HyBU6sCqOpeAH0AhssiwyQvVwTjOO5va2s7vRaAGtCrJC+GOVUAVb1UTjDVDLd4URHJOuf8WsSWG5MkSbeZTYR3lc+4CpAkyUpWht3fI/m+UfEwL5/Pb2xvb59ZFkBV5zNchazsSBBeYPn/ABQKhZ5SqfQCwBTJXYuPoOkAqnoGwE0Ad0ieTB3Ae39bRPoBDJEcSR1AVd8C2CMifc65p6kCmJkkSfIHwAYAW0h+SxVAVXcDmDSzL1EUbasEc20eaGoQVuoIgMckj6QOoKo3AJwFMEJyqBUAIegOAegnOdYKgK8AtmYyma7aLjqVGPDebxeRDwB+AeggWUzVAVV1ABTAK5L7l+0HVPUTgM7Q7VQGhPJZe99oHagpw4dJPvsXQPixONeoyErzRGTKzB7W9hFLjiA8iOO4M7iw3hDZbLbq6pIeY73F6l1v1Zas3gXrHf8XhhNvMGSmtPYAAAAASUVORK5CYII=" />
<img style="width: 14px; height: 14px;" v-else
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAfVJREFUWEfFl79LHEEUx7/vclr4g51TLFQQW9FNDFhFBDvjtcF0gXSp5eYuWJlUAW9NIP9BIFUEOxFtTKF2FrezKFgkkEBS3h4SAtHbJ6vu5W5d1F3cm20WZt+b7+e9mTfzlqD5Ic36SATw+OPJQP2ft+ABJwQ+VFIcJA0kEYBpVfcAehKIMqHoFISVBCI2wOS76mi9g76HxTLwZiqybzcuRGwAc7WWB/NGWIhBu440ZlIHmFitLRPzm+tC9EtJY1gjAP9VMtelEQC2kuJR6gCm5X4BsBAWImDdluJZqgBjH/4MZr3TYzB6IoRWmHnzJgDK0g+1KL4128SqgnD9x432yn5NSfE88L0VYPx9rS/jYR6EJTCPJxQNu60oKV77gw2Ai/Ly1/ZKRElx8c20XL4n0ZZpgvkbAKbl7gCYDax0ALREmjJAo2SbM9A+AKLPqmC8aNkD4bVOMwPEKNlFUdYGkAE9rUhjSxvA2YOOoaPF7t+6AH4qKUauHURt3AObSoq8NgAGyo4UJW0ABH5py9wnbQAAppq76HYfRLXOXmPg4BWdasoA7yuZm47sB0zL9Vvt0TQvI/bqc06pfzsS4KHlWgwUUgKwmWjdKRhvI1q5/0P+T8dZ9jILTjH31X9PlKuNKzppXxDMFeV/a0eUVPSuftoBzgHKR/ohZwAugwAAAABJRU5ErkJggg==" />
:style="each.hasLike ? select_font_color : icon_font_color"
:class="each.hasLike ? 'isLike' : 'notLike'">
{{each.likeNum == 0 ? '抢首赞' : each.likeNum}}
</span>
<uni-icons
type="hand-up" size="24"
:color="each.hasLike?select_icon_color:icon_color">
</uni-icons>
</view>
</view>
<view class="comment-main-content">
{{each.content.length > 60 ? each.content.slice(0, 59) : each.content}}
{{each.content}}
<!-- {{each.content.length > 60 ? each.content.slice(0, 59) : each.content}}
<span v-if="each.content.length > 60">
{{each.hasShowMore ? each.content.slice(59) : '...'}}
<span class="foot-btn" @click="showMore(each.id)">
<span class="foot-btn" @click="showMore(each.id)" :style="btn_color">
{{each.hasShowMore ? '收起' : '展开'}}
</span>
</span>
</span> -->
</view>
<view class="comment-main-foot">
<view class="foot-time">{{each.createTime}}</view>
<view class="foot-btn" @click="reply(each)">
回复</view>
<view class="foot-btn" v-if="each.owner" @click="confirmDelete(each)">删除
<view class="foot-btn" @click="reply(each)" :style="btn_color">
回复
</view>
<view class="foot-btn" v-if="each.owner" @click="confirmDelete(each)"
:style="btn_color">
删除
</view>
</view>
</view>
@@ -139,7 +157,9 @@
</view>
</view>
<view>
<view class="btn-click" @click="selectAdd()">发布</view>
<view class="btn-click"
@click="selectAdd()">发布</view>
</view>
</view>
<textarea class="textarea" v-model="commentReq.content" :placeholder="placeholder"
@@ -152,9 +172,61 @@
</template>
<script>
import cloudImage from "@/components/cloud-image.vue"
export default {
name: 'hb-comment',
components: {
cloudImage
},
props: {
select_font_color: {
type: String,
default: () => {
return "";
}
},
icon_font_color: {
type: String,
default: () => {
return "";
}
},
btn_send_commends_color: {
type: String,
default: () => {
return "";
}
},
btn_send_commends_font_color: {
type: String,
default: () => {
return "";
}
},
select_icon_color: {
type: String,
default: () => {
return "";
}
},
icon_color: {
type: String,
default: () => {
return "";
}
},
btn_color: {
type: String,
default: () => {
return "";
}
},
user_name_color: {
type: String,
default: () => {
return "";
}
},
cmData: {
type: Object,
default: () => {
@@ -183,6 +255,7 @@
immediate: true
}
},
data() {
return {
"emptyAvatar": "https://qnycdn.mymoyu.top/static/avatar.jpg",
@@ -205,6 +278,14 @@
this.KeyboardHeight = res.height;
})
},
computed: {
nickname_color() {
if (!this.user_name_color) {
return "";
}
return `color: ${this.user_name_color};`
},
},
methods: {
toCommentPersonalpage(item) {
console.log(item);
@@ -311,8 +392,10 @@
},
// 点赞完成-本地修改点赞结果
likeComplete(comment) {
console.log(comment)
comment.hasLike = !comment.hasLike;
comment.likeNum += comment.hasLike ? 1 : -1;
console.log(comment.likeNum);
},
// 删除完成-本地删除评论
@@ -483,13 +566,11 @@
.isLike {
font-size: 28rpx;
padding-right: 10rpx;
color: #2d8cf0;
}
.notLike {
font-size: 28rpx;
padding-right: 10rpx;
color: #999999;
}
.comment-main-content {
@@ -522,7 +603,6 @@
.foot-btn {
padding-left: 10rpx;
color: #007AFF;
}
.comment-sub-box {
@@ -563,7 +643,6 @@
}
.btn-click {
color: #007AFF;
font-size: 28rpx;
padding: 10rpx;
}
@@ -594,4 +673,11 @@
.color-bule {
color: #333;
}
.btn_commends {
text-align: center;
width: 150rpx;
height: 40rpx;
padding: 10rpx 20rpx;
border-radius: 20rpx;
}
</style>