tijiao
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user