tijiao
This commit is contained in:
@@ -13,21 +13,21 @@
|
||||
<!-- 评论主体-start -->
|
||||
<view class="comment-list" v-if="commentData.comment.length != 0">
|
||||
<!-- 评论主体-顶部数量及发表评论按钮-start -->
|
||||
<view class="comment-num">
|
||||
<!-- <view class="comment-num">
|
||||
<view>共 {{ commentData.commentSize }} 条评论</view>
|
||||
<view class="add-btn">
|
||||
<button type="primary" size="mini" @click="commentInput">
|
||||
发表评论
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<!-- 评论主体-顶部数量及发表评论按钮-end -->
|
||||
<!-- 评论列表-start -->
|
||||
<view class="comment-box" v-for="(item, index) in commentData.comment">
|
||||
<view class="comment-box-item">
|
||||
<view>
|
||||
<image
|
||||
:src="item.avatarUrl || emptyAvatar"
|
||||
:src="item.user.avatar || emptyAvatar"
|
||||
mode="aspectFill"
|
||||
class="avatar"
|
||||
></image>
|
||||
@@ -36,56 +36,46 @@
|
||||
<!-- 父评论体-start -->
|
||||
<view class="comment-main-top">
|
||||
<view class="nick-name-box">
|
||||
<view class="comLogo com1" v-if="index == 0">沙发</view>
|
||||
<view class="comLogo com2" v-if="index == 1">板凳</view>
|
||||
<view class="comLogo com3" v-if="index == 2">地板</view>
|
||||
<view class="comLogo com4" v-if="index > 2"
|
||||
>{{ index + 1 }}楼</view
|
||||
>
|
||||
<view class="nick-name">{{ item.nickName }}</view>
|
||||
</view>
|
||||
<view class="zan-box" @click="like(item.id)">
|
||||
<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=="
|
||||
/>
|
||||
<view class="nick-name" style="font-size: 32rpx">{{
|
||||
item.user.nickname ? item.user.nickname : "普通用户"
|
||||
}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="comment-main-content">
|
||||
{{
|
||||
<view
|
||||
class="comment-main-content"
|
||||
style="color: #555459; line-height: 38rpx"
|
||||
@click="reply(item.user.nickname, item.user.nickname, item.id)"
|
||||
>
|
||||
{{ item.content }}
|
||||
<!-- {{
|
||||
item.content.length > 60
|
||||
? item.content.slice(0, 59)
|
||||
: item.content
|
||||
}}
|
||||
<span v-if="item.content.length > 60">
|
||||
}} -->
|
||||
<!-- <span v-if="item.content.length > 60">
|
||||
{{ item.hasShowMore ? item.content.slice(59) : "..." }}
|
||||
<span class="foot-btn" @click="showMore(item.id)">
|
||||
<span class="foot-btn" @click="showMore(item.id)" style="color: #5188e5 !important;">
|
||||
{{ item.hasShowMore ? "收起" : "展开" }}
|
||||
</span>
|
||||
</span>
|
||||
</span> -->
|
||||
</view>
|
||||
<view class="comment-main-foot">
|
||||
<view class="foot-time">{{ item.createTime }}</view>
|
||||
<view
|
||||
class="foot-btn"
|
||||
@click="reply(item.nickName, item.nickName, item.id)"
|
||||
>回复</view
|
||||
class="foot-time"
|
||||
style="color: #555459; letter-spacing: 1rpx; font-size: 24rpx"
|
||||
>{{ item.createTime }}</view
|
||||
>
|
||||
<view
|
||||
class="foot-btn"
|
||||
@click="reply(item.user.nickname, item.user.nickname, item.id)"
|
||||
>回复</view
|
||||
>
|
||||
<!-- <view
|
||||
class="foot-btn"
|
||||
v-if="item.owner"
|
||||
@click="confirmDelete(item.id)"
|
||||
>删除</view
|
||||
>
|
||||
> -->
|
||||
</view>
|
||||
<!-- 父评论体-end -->
|
||||
<!-- 子评论列表-start -->
|
||||
@@ -93,7 +83,7 @@
|
||||
<view class="comment-sub-item" v-for="each in item.children">
|
||||
<view>
|
||||
<image
|
||||
:src="each.avatarUrl || emptyAvatar"
|
||||
:src="each.user.avatar || emptyAvatar"
|
||||
mode="aspectFill"
|
||||
class="avatar"
|
||||
>
|
||||
@@ -101,50 +91,46 @@
|
||||
</view>
|
||||
<view class="comment-main">
|
||||
<view class="sub-comment-main-top">
|
||||
<view class="nick-name">{{ each.nickName }}</view>
|
||||
<view class="zan-box" @click="like(each.id)">
|
||||
<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=="
|
||||
/>
|
||||
</view>
|
||||
<view
|
||||
class="nick-name"
|
||||
style="font-size: 32rpx"
|
||||
v-if="each.user"
|
||||
>{{
|
||||
each.user.nickname ? each.user.nickname : "普通用户"
|
||||
}}</view
|
||||
>
|
||||
</view>
|
||||
<view class="comment-main-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)">
|
||||
{{ each.hasShowMore ? "收起" : "展开" }}
|
||||
</span>
|
||||
</span>
|
||||
<view
|
||||
class="comment-main-content"
|
||||
style="color: #555459 !important; line-height: 38rpx"
|
||||
>
|
||||
{{ each.content }}
|
||||
</view>
|
||||
<view class="comment-main-foot">
|
||||
<view class="foot-time">{{ each.createTime }}</view>
|
||||
<view
|
||||
class="foot-time"
|
||||
style="
|
||||
color: #555459;
|
||||
letter-spacing: 1rpx;
|
||||
font-size: 24rpx;
|
||||
"
|
||||
>{{ each.createTime }}</view
|
||||
>
|
||||
<view
|
||||
class="foot-btn"
|
||||
@click="reply(item.nickName, each.nickName, item.id)"
|
||||
v-if="each.user"
|
||||
@click="
|
||||
reply(each.user.nickname, each.user.nickname, item.id)
|
||||
"
|
||||
>
|
||||
回复</view
|
||||
>
|
||||
<view
|
||||
<!-- <view
|
||||
class="foot-btn"
|
||||
v-if="each.owner"
|
||||
@click="confirmDelete(each.id)"
|
||||
>删除
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -157,54 +143,70 @@
|
||||
</view>
|
||||
<!-- 评论主体-end -->
|
||||
<!-- 无评论-start -->
|
||||
<view class="comment-none" v-else>
|
||||
|
||||
<view class="comment-none">
|
||||
<image
|
||||
:src="user.icon ? user.icon : '/static/images/avatar.png'"
|
||||
style="
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
margin: 0 10rpx;
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
margin: 0 8rpx;
|
||||
display: block;
|
||||
border-radius: 80rpx;
|
||||
border-radius: 70rpx;
|
||||
"
|
||||
/>
|
||||
<button
|
||||
class="comment-btn"
|
||||
@click="showInput = true"
|
||||
v-if="!showInput"
|
||||
>
|
||||
写评论
|
||||
</button>
|
||||
<!-- background-color: #dadada59; -->
|
||||
<!-- <view style="width: calc(100% - 120rpx);margin-right: 20rpx;position: relative;padding:20rpx 20rpx;border-radius: 10rpx;">
|
||||
<view v-if="currentInputComment" style="position: absolute;top: 10rpx;"><text @click="currentInputComment=''">清空</text><text @click="sendComment">发送</text></view>
|
||||
<textarea style="font-size: 26rpx;width: calc(100%);color: #333;"
|
||||
v-model="currentInputComment"
|
||||
|
||||
auto-height
|
||||
clear
|
||||
maxlength="-1"
|
||||
placeholder="写评论..."
|
||||
placeholder-class=""
|
||||
/>
|
||||
|
||||
</view> -->
|
||||
<view
|
||||
class="input-container"
|
||||
:style="{ bottom: keyboardHeight + 'px' }"
|
||||
v-if="showInput"
|
||||
>
|
||||
<input
|
||||
v-model="commentContent"
|
||||
class="comment-input"
|
||||
placeholder="请输入评论..."
|
||||
@focus="onInputFocus"
|
||||
@blur="onInputBlur"
|
||||
:auto-focus="showInput"
|
||||
/>
|
||||
<button class="send-btn" @click="sendComment">发送</button>
|
||||
</view>
|
||||
<!-- background-color: #dadada59; -->
|
||||
<view
|
||||
style="
|
||||
width: calc(100% - 100rpx);
|
||||
margin-right: 20rpx;
|
||||
position: relative;
|
||||
padding: 20rpx 20rpx;
|
||||
border-radius: 10rpx;
|
||||
"
|
||||
>
|
||||
<view v-if="currentInputComment" style="position: absolute; top: 10rpx"
|
||||
><text @click="currentInputComment = ''">清空</text
|
||||
><text @click="sendComment">发送</text></view
|
||||
>
|
||||
<view
|
||||
style="font-size: 30rpx; width: calc(100%)"
|
||||
@click="showInput = true"
|
||||
v-if="!showInput"
|
||||
>写评论...</view
|
||||
>
|
||||
</view>
|
||||
<view
|
||||
class="input-container"
|
||||
:style="{ bottom: keyboardHeight + 'px' }"
|
||||
v-if="showInput"
|
||||
>
|
||||
<view style="overflow: hidden; margin-bottom: 12rpx"
|
||||
><text
|
||||
@click="
|
||||
showInput = false;
|
||||
commentContent = '';
|
||||
"
|
||||
style="float: left"
|
||||
>取消</text
|
||||
><text @click="sendComment" style="float: right; color: #1985fd"
|
||||
>发送</text
|
||||
></view
|
||||
>
|
||||
<view>
|
||||
<textarea
|
||||
auto-height
|
||||
style="max-height: 200rpx; overflow-y: auto; padding: 20rpx"
|
||||
v-model="commentContent"
|
||||
class="comment-input"
|
||||
maxlength="-1"
|
||||
:placeholder="placeholder ? placeholder : '写评论...'"
|
||||
@focus="onInputFocus"
|
||||
@blur="onInputBlur"
|
||||
:auto-focus="showInput"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 暂无评论,<span @click="commentInput" style="color: #007AFF;">立即评论</span> -->
|
||||
</view>
|
||||
@@ -247,7 +249,7 @@ v-model="currentInputComment"
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import text from 'uview-ui/libs/config/props/text';
|
||||
import text from "uview-ui/libs/config/props/text";
|
||||
|
||||
export default {
|
||||
name: "hb-comment",
|
||||
@@ -281,18 +283,18 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showInput: false, // 是否显示输入框
|
||||
commentContent: '', // 评论内容
|
||||
keyboardHeight: 0, // 软键盘高度
|
||||
keyboardListener: null, // 软键盘监听事件
|
||||
currentInputComment:'',
|
||||
pId: 0,
|
||||
showInput: false, // 是否显示输入框
|
||||
commentContent: "", // 评论内容
|
||||
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",
|
||||
commentData: null,
|
||||
placeholder: "请输入评论",
|
||||
placeholder: "",
|
||||
commentReq: {
|
||||
pId: null, // 评论父id
|
||||
content: null, // 评论内容
|
||||
},
|
||||
pUser: null, // 标签-回复人
|
||||
showTag: false, // 标签展示与否
|
||||
@@ -302,7 +304,12 @@ export default {
|
||||
};
|
||||
},
|
||||
mounted: function () {
|
||||
this.keyboardListener = uni.onKeyboardHeightChange(res => {
|
||||
this.pId = 0;
|
||||
this.showInput = false;
|
||||
this.placeholder = "写评论...";
|
||||
this.commentContent = "";
|
||||
|
||||
this.keyboardListener = uni.onKeyboardHeightChange((res) => {
|
||||
this.keyboardHeight = res.height;
|
||||
});
|
||||
uni.onKeyboardHeightChange((res) => {
|
||||
@@ -316,10 +323,10 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onInputFocus() {
|
||||
onInputFocus() {
|
||||
// 可以在这里添加额外的逻辑,如滚动到输入框位置
|
||||
},
|
||||
|
||||
|
||||
// 输入框失去焦点
|
||||
onInputBlur() {
|
||||
// 如果输入框为空,点击空白处关闭输入框
|
||||
@@ -327,15 +334,16 @@ export default {
|
||||
this.showInput = false;
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// 发送评论
|
||||
sendComment() {
|
||||
if (this.commentContent.trim()) {
|
||||
// 这里添加发送评论的逻辑
|
||||
console.log('发送评论:', this.commentContent);
|
||||
|
||||
console.log("发送评论:", this.commentContent);
|
||||
this.$emit("add", this.commentContent, this.pId);
|
||||
|
||||
// 发送成功后清空并隐藏输入框
|
||||
this.commentContent = '';
|
||||
this.commentContent = "";
|
||||
this.showInput = false;
|
||||
}
|
||||
},
|
||||
@@ -355,13 +363,17 @@ export default {
|
||||
reply(pUser, reUser, pId) {
|
||||
this.pUser = pUser;
|
||||
this.commentReq.pId = pId;
|
||||
if (reUser) {
|
||||
this.commentReq.content = "@" + reUser + " ";
|
||||
} else {
|
||||
this.commentReq.content = "";
|
||||
}
|
||||
this.showTag = true;
|
||||
this.commentInput();
|
||||
this.pId = pId;
|
||||
this.placeholder = "回复 " + pUser + ":";
|
||||
|
||||
// if (reUser) {
|
||||
// this.commentReq.content = "@" + reUser + " ";
|
||||
// } else {
|
||||
// this.commentReq.content = "";
|
||||
// }
|
||||
this.showInput = true;
|
||||
// this.showTag = true;
|
||||
// this.commentInput();
|
||||
},
|
||||
// 删除评论前确认
|
||||
confirmDelete(commentId) {
|
||||
@@ -377,20 +389,20 @@ export default {
|
||||
},
|
||||
});
|
||||
},
|
||||
// 新增评论
|
||||
add() {
|
||||
if (
|
||||
this.commentReq.content == null ||
|
||||
this.commentReq.content.length < 2
|
||||
) {
|
||||
uni.showToast({
|
||||
title: "评论内容过短",
|
||||
duration: 2000,
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.$emit("add", this.commentReq);
|
||||
},
|
||||
// // 新增评论
|
||||
// add() {
|
||||
// if (
|
||||
// this.commentReq.content == null ||
|
||||
// this.commentReq.content.length < 2
|
||||
// ) {
|
||||
// uni.showToast({
|
||||
// title: "评论内容过短",
|
||||
// duration: 2000,
|
||||
// });
|
||||
// return;
|
||||
// }
|
||||
// this.$emit("add", this.commentReq);
|
||||
// },
|
||||
// 点赞评论
|
||||
like(commentId) {
|
||||
this.$emit("like", commentId);
|
||||
@@ -491,7 +503,7 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.hb-comment {
|
||||
// padding: 10rpx;
|
||||
// padding: 10rpx;
|
||||
}
|
||||
|
||||
.top-read {
|
||||
@@ -587,6 +599,8 @@ export default {
|
||||
|
||||
.nick-name {
|
||||
color: #2d8cf0;
|
||||
color: #262626;
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.isLike {
|
||||
@@ -602,7 +616,8 @@ export default {
|
||||
}
|
||||
|
||||
.comment-main-content {
|
||||
padding: 10rpx 10rpx 10rpx 0;
|
||||
padding: 8rpx 10rpx 8rpx 0;
|
||||
// font-size: 30rpx;
|
||||
}
|
||||
|
||||
.comment-main-foot {
|
||||
@@ -630,7 +645,7 @@ export default {
|
||||
}
|
||||
|
||||
.foot-btn {
|
||||
padding-left: 10rpx;
|
||||
padding-left: 20rpx;
|
||||
color: #007aff;
|
||||
}
|
||||
|
||||
@@ -643,9 +658,9 @@ export default {
|
||||
}
|
||||
|
||||
.comment-none {
|
||||
padding: 20rpx 0;
|
||||
padding: 16rpx 0;
|
||||
width: 100%;
|
||||
// text-align: center;
|
||||
// text-align: center;
|
||||
color: #999999;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
@@ -653,6 +668,10 @@ export default {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
border-top: 1rpx solid #e1e1e1;
|
||||
font-size: 32rpx !important;
|
||||
background-color: #fff;
|
||||
|
||||
}
|
||||
|
||||
.comment-submit-box {
|
||||
@@ -716,7 +735,7 @@ export default {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
// display: flex;
|
||||
padding: 10px;
|
||||
background-color: #fff;
|
||||
border-top: 1px solid #eee;
|
||||
@@ -725,11 +744,12 @@ export default {
|
||||
}
|
||||
|
||||
.comment-input {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
// flex: 1;
|
||||
height: 40px;
|
||||
padding: 0 15px;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 20px;
|
||||
border-radius: 20rpx;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user