Browse Source

fix(comment): 修复评论回复功能并优化样式

修复评论回复时参数传递不正确的问题,改进回复逻辑区分一级和二级评论。优化评论组件样式,使用标准化的rpx单位并移除无用代码。添加图片上传的压缩选项配置。
master
主管理员 4 days ago
parent
commit
c23d4dbb37
4 changed files with 77 additions and 64 deletions
  1. +1
    -1
      config.js
  2. +65
    -58
      pages_order/components/list/comment/commentItem.vue
  3. +8
    -4
      pages_order/components/list/comment/commentList.vue
  4. +3
    -1
      pages_order/components/list/comment/commentPublish.vue

+ 1
- 1
config.js View File

@ -7,7 +7,7 @@ import uvUI from '@/uni_modules/uv-ui-tools'
Vue.use(uvUI); Vue.use(uvUI);
// 当前环境 // 当前环境
const type = 'local'
const type = 'prod'
// 环境配置 // 环境配置


+ 65
- 58
pages_order/components/list/comment/commentItem.vue View File

@ -10,9 +10,9 @@
<view class="username">{{ item.userName }}</view> <view class="username">{{ item.userName }}</view>
<view class="comment-content" v-html="$utils.stringFormatHtml(item.userValue)"></view> <view class="comment-content" v-html="$utils.stringFormatHtml(item.userValue)"></view>
<view class="comment-meta"> <view class="comment-meta">
<text class="time">{{ item.createTime }}</text>
<text class="location">贵州</text>
<text class="reply-btn" @click.stop="handleReply">回复</text>
<text class="time">{{ $timeUtils.formatTime(item.createTime) }}</text>
<!-- <text class="location">贵州</text> -->
<text class="reply-btn" @click.stop="handleReply(0)">回复</text>
</view> </view>
</view> </view>
</view> </view>
@ -41,7 +41,8 @@
</view> </view>
<view class="sub-comment-content" v-html="$utils.stringFormatHtml(subComment.userValue)"></view> <view class="sub-comment-content" v-html="$utils.stringFormatHtml(subComment.userValue)"></view>
<view class="sub-comment-meta"> <view class="sub-comment-meta">
<text class="sub-time">{{ subComment.createTime }}</text>
<text class="sub-time">{{ $timeUtils.formatTime(subComment.createTime) }}</text>
<!-- <text class="location">贵州</text> -->
<text class="sub-reply-btn" @click.stop="handleSubReply(subComment)">回复</text> <text class="sub-reply-btn" @click.stop="handleSubReply(subComment)">回复</text>
</view> </view>
</view> </view>
@ -111,12 +112,18 @@
// //
handleReply() { handleReply() {
this.$emit('reply', this.item);
this.$emit('reply', {
item : this.item,
level : 0,
});
}, },
// //
handleSubReply(subComment) { handleSubReply(subComment) {
this.$emit('reply', subComment);
this.$emit('reply', {
item : subComment,
level : 1,
});
} }
} }
} }
@ -125,20 +132,20 @@
<style scoped lang="scss"> <style scoped lang="scss">
.comment { .comment {
background-color: #fff; background-color: #fff;
padding: 30rpx 40rpx;
margin-bottom: 2rpx;
border-bottom: 2rpx solid #f5f5f5;
padding: 26.25rpx 35rpx;
margin-bottom: 1.75rpx;
border-bottom: 1.75rpx solid #f5f5f5;
.comment-header { .comment-header {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
.avatar { .avatar {
width: 80rpx;
height: 80rpx;
width: 70rpx;
height: 70rpx;
border-radius: 50%; border-radius: 50%;
overflow: hidden; overflow: hidden;
margin-right: 20rpx;
margin-right: 17.5rpx;
flex-shrink: 0; flex-shrink: 0;
image { image {
@ -151,40 +158,41 @@
flex: 1; flex: 1;
.username { .username {
font-size: 28rpx;
font-size: 24.5rpx;
font-weight: 600; font-weight: 600;
color: $uni-text-color; color: $uni-text-color;
margin-bottom: 8rpx;
margin-bottom: 7rpx;
} }
.comment-content { .comment-content {
font-size: 30rpx;
font-size: 26.25rpx;
line-height: 1.5; line-height: 1.5;
color: $uni-text-color; color: $uni-text-color;
margin-bottom: 12rpx;
margin-bottom: 10.5rpx;
word-break: break-all; word-break: break-all;
} }
.comment-meta { .comment-meta {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 24rpx;
font-size: 21rpx;
color: $uni-text-color-grey; color: $uni-text-color-grey;
.time { .time {
margin-right: 20rpx;
margin-right: 17.5rpx;
} }
.location { .location {
margin-right: 20rpx;
margin-right: 17.5rpx;
} }
.reply-btn { .reply-btn {
color: $uni-text-color-grey; color: $uni-text-color-grey;
padding: 8rpx 16rpx;
padding: 7rpx 14rpx;
background-color: #f5f5f5; background-color: #f5f5f5;
border-radius: 20rpx;
font-size: 22rpx;
border-radius: 17.5rpx;
font-size: 19.25rpx;
margin-left: auto;
} }
} }
} }
@ -193,27 +201,27 @@
.images { .images {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: 20rpx;
margin-left: 100rpx;
margin-top: 17.5rpx;
margin-left: 87.5rpx;
.image { .image {
margin: 10rpx;
margin: 8.75rpx;
image { image {
height: 120rpx;
width: 120rpx;
border-radius: 12rpx;
height: 105rpx;
width: 105rpx;
border-radius: 10.5rpx;
} }
} }
} }
// //
.sub-comments-list { .sub-comments-list {
margin-top: 20rpx;
margin-left: 100rpx;
margin-top: 17.5rpx;
margin-left: 87.5rpx;
.sub-comment-item { .sub-comment-item {
margin-bottom: 30rpx;
margin-bottom: 26.25rpx;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
@ -224,11 +232,11 @@
align-items: flex-start; align-items: flex-start;
.sub-avatar { .sub-avatar {
width: 60rpx;
height: 60rpx;
width: 52.5rpx;
height: 52.5rpx;
border-radius: 50%; border-radius: 50%;
overflow: hidden; overflow: hidden;
margin-right: 16rpx;
margin-right: 14rpx;
flex-shrink: 0; flex-shrink: 0;
image { image {
@ -241,47 +249,47 @@
flex: 1; flex: 1;
.sub-username { .sub-username {
font-size: 26rpx;
font-size: 22.75rpx;
font-weight: 600; font-weight: 600;
color: $uni-text-color; color: $uni-text-color;
margin-bottom: 6rpx;
margin-bottom: 5.25rpx;
.reply-to { .reply-to {
font-size: 24rpx;
font-size: 21rpx;
color: $uni-color-primary; color: $uni-color-primary;
font-weight: 500; font-weight: 500;
margin-left: 10rpx;
margin-left: 8.75rpx;
} }
} }
.sub-comment-content { .sub-comment-content {
font-size: 28rpx;
font-size: 24.5rpx;
line-height: 1.5; line-height: 1.5;
color: $uni-text-color; color: $uni-text-color;
margin-bottom: 10rpx;
margin-bottom: 8.75rpx;
word-break: break-all; word-break: break-all;
} }
.sub-comment-meta { .sub-comment-meta {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 22rpx;
font-size: 19.25rpx;
color: $uni-text-color-grey; color: $uni-text-color-grey;
.sub-time { .sub-time {
margin-right: 16rpx;
margin-right: 14rpx;
} }
.sub-location { .sub-location {
margin-right: 16rpx;
margin-right: 14rpx;
} }
.sub-reply-btn { .sub-reply-btn {
color: $uni-text-color-grey; color: $uni-text-color-grey;
padding: 6rpx 12rpx;
padding: 5.25rpx 10.5rpx;
background-color: #f5f5f5; background-color: #f5f5f5;
border-radius: 16rpx;
font-size: 20rpx;
border-radius: 14rpx;
font-size: 17.5rpx;
margin-left: auto; margin-left: auto;
} }
} }
@ -291,17 +299,17 @@
.sub-comment-images { .sub-comment-images {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: 12rpx;
margin-left: 76rpx;
margin-top: 10.5rpx;
margin-left: 66.5rpx;
.sub-image { .sub-image {
margin-right: 8rpx;
margin-bottom: 8rpx;
margin-right: 7rpx;
margin-bottom: 7rpx;
image { image {
width: 96rpx;
height: 96rpx;
border-radius: 8rpx;
width: 84rpx;
height: 84rpx;
border-radius: 7rpx;
} }
} }
} }
@ -309,16 +317,15 @@
} }
.load-more-section { .load-more-section {
margin-top: 20rpx;
margin-left: 100rpx;
margin-left: 87.5rpx;
.load-more-btn { .load-more-btn {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
padding: 8rpx 16rpx;
padding: 7rpx 14rpx;
background-color: #f5f5f5; background-color: #f5f5f5;
border-radius: 20rpx;
font-size: 24rpx;
border-radius: 17.5rpx;
font-size: 21rpx;
color: $uni-text-color-grey; color: $uni-text-color-grey;
} }
} }


+ 8
- 4
pages_order/components/list/comment/commentList.vue View File

@ -105,7 +105,8 @@ export default {
}, },
// //
handleReply(comment) {
handleReply({item, level}) {
let comment = item
this.currentReplyComment = comment this.currentReplyComment = comment
// //
@ -118,11 +119,14 @@ export default {
replyParams = { replyParams = {
...this.params, ...this.params,
pid: comment.pid, // 使ID pid: comment.pid, // 使ID
replyToId: comment.id,
replyToName: comment.userName,
replyToAvatar: comment.userHead,
parentCommentId: parentCommentId // ID parentCommentId: parentCommentId // ID
} }
if (level == 0) {
}else{
replyParams.replyToId = comment.replyToId
replyParams.replyToName = comment.userName
replyParams.replyToAvatar = comment.userHead
}
} else { } else {
// 使IDpid // 使IDpid
parentCommentId = comment.id // IDID parentCommentId = comment.id // IDID


+ 3
- 1
pages_order/components/list/comment/commentPublish.vue View File

@ -17,7 +17,9 @@
<view class="images box"> <view class="images box">
<uv-upload :fileList="fileList" :maxCount="imageMax" multiple width="150rpx" height="150rpx" <uv-upload :fileList="fileList" :maxCount="imageMax" multiple width="150rpx" height="150rpx"
@delete="deleteImage" @afterRead="afterRead" :previewFullImage="true"></uv-upload>
@delete="deleteImage" @afterRead="afterRead"
:sizeType="['original', 'compressed']"
:previewFullImage="true"></uv-upload>
</view> </view>
<view class="uni-color-btn" @click="submit"> <view class="uni-color-btn" @click="submit">


Loading…
Cancel
Save