This commit is contained in:
2025-08-12 17:11:08 +08:00
parent 4cca2c8aec
commit a4d52c864b
9 changed files with 2766 additions and 265 deletions

View File

@@ -1,5 +1,5 @@
<template>
<view class="hb-comment">
<view class="hb-comment" style="height: 80vh">
<!-- 阅读数-start -->
<!-- 阅读数-end -->
@@ -27,7 +27,14 @@
<view class="comment-box-item">
<view>
<image
:src="item.user.avatar || emptyAvatar"
v-if="item.user.avatar"
:src="item.user.avatar"
mode="aspectFill"
class="avatar"
></image>
<image
v-else
src="/static/icon/noIcon.png"
mode="aspectFill"
class="avatar"
></image>
@@ -36,14 +43,19 @@
<!-- 父评论体-start -->
<view class="comment-main-top">
<view class="nick-name-box">
<view class="nick-name" style="font-size: 32rpx">{{
item.user.nickname ? item.user.nickname : "普通用户"
}}</view>
<view class="nick-name"
>{{ item.user.nickname ? item.user.nickname : "普通用户" }}
<text
class="zuozhe"
v-if="user.userId || user.id == item.user.userId"
>作者</text
></view
>
</view>
</view>
<view
class="comment-main-content"
style="color: #555459; line-height: 38rpx"
style="color: #232325; line-height: 38rpx"
@click="reply(item.user.nickname, item.user.nickname, item.id)"
>
{{ item.content }}
@@ -62,11 +74,12 @@
<view class="comment-main-foot">
<view
class="foot-time"
style="color: #555459; letter-spacing: 1rpx; font-size: 24rpx"
style="color: #b7b8ba; letter-spacing: 1rpx; font-size: 24rpx"
>{{ item.createTime }}</view
>
<view
class="foot-btn"
style="color: #777775"
@click="reply(item.user.nickname, item.user.nickname, item.id)"
>回复</view
>
@@ -79,30 +92,38 @@
</view>
<!-- 父评论体-end -->
<!-- 子评论列表-start -->
<view class="comment-sub-box">
<view class="comment-sub-box" v-if="item.children.length != 0">
<view class="comment-sub-item" v-for="each in item.children">
<view>
<image
:src="each.user.avatar || emptyAvatar"
v-if="each.user.avatar"
:src="each.user.avatar"
mode="aspectFill"
class="avatar"
>
</image>
></image>
<image
v-else
src="/static/icon/noIcon.png"
mode="aspectFill"
class="avatar"
></image>
</view>
<view class="comment-main">
<view class="sub-comment-main-top">
<view
class="nick-name"
style="font-size: 32rpx"
v-if="each.user"
<view class="nick-name" v-if="each.user"
>{{
each.user.nickname ? each.user.nickname : "普通用户"
}}</view
>
}}
<text
class="zuozhe"
v-if="user.userId || user.id == each.user.userId"
>作者</text
>
</view>
</view>
<view
class="comment-main-content"
style="color: #555459 !important; line-height: 38rpx"
style="color: #232325 !important; line-height: 38rpx"
>
{{ each.content }}
</view>
@@ -110,7 +131,7 @@
<view
class="foot-time"
style="
color: #555459;
color: #b7b8ba;
letter-spacing: 1rpx;
font-size: 24rpx;
"
@@ -118,6 +139,7 @@
>
<view
class="foot-btn"
style="color: #777775"
v-if="each.user"
@click="
reply(each.user.nickname, each.user.nickname, item.id)
@@ -144,8 +166,18 @@
<!-- 评论主体-end -->
<!-- 无评论-start -->
<view class="comment-none">
<image
:src="user.icon ? user.icon : '/static/images/avatar.png'"
<image v-if="user.icon"
:src="user.icon"
style="
width: 70rpx;
height: 70rpx;
margin: 0 8rpx;
display: block;
border-radius: 70rpx;
"
/>
<image v-else
src="/static/icon/noIcon.png"
style="
width: 70rpx;
height: 70rpx;
@@ -169,9 +201,10 @@
><text @click="currentInputComment = ''">清空</text
><text @click="sendComment">发送</text></view
>
<!-- @click="showInput = true" -->
<view
style="font-size: 30rpx; width: calc(100%)"
@click="showInput = true"
@click="reply('', '', 0)"
v-if="!showInput"
>写评论...</view
>
@@ -289,8 +322,7 @@ export default {
keyboardHeight: 0, // 软键盘高度
keyboardListener: null, // 软键盘监听事件
currentInputComment: "",
emptyAvatar:
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAABF5JREFUWEfFl11oHFUUx//nbmKwxdJ9qFL7YPEhRJC2gljjF60WG0WsoNkWfSnZ7Jy7FVPF0AoKpmBFqyIG3Jk7G1iIQXHbBz+KbbGtRfBbMe2LseKjiVDoiqIhwZ0jV3fb3cnM7kQCuU+7M+ec/+9+nHPPEJZ50DLrY1EApVJp9fz8/BYRuZ2INgDYWJvAWRE5R0RnZmZmPh4ZGZlPOrFEAMVi8e4gCPYSUZ+IXGGFgiCYIaJpKyQi1yql1orIFgAXARxRSvm5XO67diBtAYwxRQCDAE4RUUkpdWxwcNCKLBiu665TSj0kIpqIbgTgMzO3gmgJYIz5CMB9AIaZ+bXGQMVi8RoRuZeI/lZKHc1ms3/U34+Pj6+cnZ3dC+AggGPMfH8cRCyAMUZqThlmPlwPUCgU0qlUyq7Kww1BrbjHzPsahYwx/QDK9hkzR2pFPjTGnAWwIexkjOkRkRIR3Rozo5Miskdr/VMIxE7mHDPXD+2l1wsA6nseBMHmfD7/dSjQOwB2tTlYC/bddd1blFJfARhj5lyjfxNA7bSfitpz3/d3iYgFaDuUUjeHM8AY8zSAV5VS9+RyudP1IE0Axpj3Aaxk5m1hFc/zPiWiO9uq/2dwiJn3h22NMScB/MnMOxYAjI6Orurq6rpgU0hrXYpw/hFAd0KAD5n5wbCt7/t7ROT1ubm5NUNDQ7/b95dWwHXd7Uqp452dnVcPDAxciACwDlclAbAFynGcdRGr2EtEnwdB0JfP5080ARhjDhLRbY7jbI0SMcZUAKxOAgDgN2ZOx8SxGfEiMz/bBOD7/lgQBCu01o/GOH4PYFNCgElmvinK1vf9X2xxchzHVtfLW2CMOQpgipmHYwBeBtBUaOJgRKSgtX48Js63AH5l5geaADzPe1cpddFxnHyM42YAXyZYAXt+epn557iVFJHzWuudYYDnlFJ9juPcESfi+35JRHa3gdjPzIfibIwxNtPe0Fq/EAZ4hIhcZl4T5+y67nql1CcA1kfZENFnrSZQ6ycqItKvtT4SBthIRJMdHR092WzW5nzk8H1/WEReiQHY4TjOB3G+nuf9qyEim7TW9r65fAjL5fKVlUrlPICXmPnNFquwWym1oFBZ+yAItubz+TMtAJ4gon3pdLo7k8nMNgHYP7ZeE5EWkbuYeaYx0NjY2HXValUDeApAV4zIJIADzPxe+H2hULg+lUp9U6sBl3qLprugXC6nKpXKF0R02nGcZ2wQ3/e3ichOEckQ0aoEWQDbsgF4a3p6eqLeH3qeN0FE3el0ujeTyVTrcaKuY1uIjIg8CaCfiLYnEW1hY4WPi8gEgMeY+e1G27iGxHYxtptZynGYmTPhgK1asqWEiBRfcAjDdMaYpYCIFW8LUMuM54nIsb3/YvbDXskiYtuzA6382n4X1CDWAnCSgNSFa98ETakcWbwWMytjzAoAPUEQ3JBKpXrs75r/VLVanVJK/VC7Uf9KGjfRCiQN9n/slh3gHz9i4jC+FVL5AAAAAElFTkSuQmCC",
emptyAvatar: "/static/icon/noIcon.png",
commentData: null,
placeholder: "",
commentReq: {
@@ -364,7 +396,13 @@ export default {
this.pUser = pUser;
this.commentReq.pId = pId;
this.pId = pId;
this.placeholder = "回复 " + pUser + ":";
if (pId != 0) {
var str = pUser ? pUser : "普通用户 ";
this.placeholder = "回复 " + str + ":";
} else {
var str = "";
this.placeholder = "写评论...";
}
// if (reUser) {
// this.commentReq.content = "@" + reUser + " ";
@@ -541,16 +579,19 @@ export default {
}
.comment-box-item {
width: 100%;
display: flex;
}
.comment-main {
width: calc(100% - 70rpx);
padding-left: 20rpx;
}
.comment-main-top {
width: 600rpx;
padding-top: 6rpx;
padding-top: 12rpx;
display: flex;
justify-content: space-between;
}
@@ -599,8 +640,9 @@ export default {
.nick-name {
color: #2d8cf0;
color: #262626;
font-size: 40rpx;
color: #494943;
line-height: 30rpx;
// font-size: 40rpx;
}
.isLike {
@@ -616,13 +658,20 @@ export default {
}
.comment-main-content {
width: 100%;
padding: 8rpx 10rpx 8rpx 0;
text-align: justify;
white-space: pre-wrap;
word-wrap: break-word;
// font-size: 30rpx;
}
.comment-main-foot {
display: flex;
font-size: 22rpx;
line-height: 24rpx;
margin-top: 6rpx;
margin-top: 6rpx;
}
.replayTag {
@@ -655,6 +704,7 @@ export default {
.comment-sub-item {
display: flex;
margin-bottom: 12rpx;
}
.comment-none {
@@ -671,7 +721,6 @@ export default {
border-top: 1rpx solid #e1e1e1;
font-size: 32rpx !important;
background-color: #fff;
}
.comment-submit-box {
@@ -763,4 +812,17 @@ export default {
font-size: 14px;
line-height: 40px;
}
.foot-time {
// line-height: 24rpx;
}
.zuozhe {
background-color: #f72f56;
font-size: 20rpx;
border-radius: 6rpx;
color: #fff;
padding: 2rpx 10rpx;
margin-left: 20rpx;
line-height: 20rpx;
margin-top: -4rpx;
}
</style>