| | |
| | | <text class="iconfont close-icon" @click="closeCommentPopup"></text> |
| | | </view> |
| | | |
| | | <scroll-view class="comment-list" scroll-y> |
| | | <scroll-view class="comment-list" scroll-y :show-scrollbar="false" @scrolltolower="getCommentPage"> |
| | | <view v-if="commentLoading" class="loading"> |
| | | <uni-load-more status="loading"></uni-load-more> |
| | | </view> |
| | |
| | | </view> |
| | | |
| | | <view v-else class="comment-item" v-for="comment in comments" :key="comment.id"> |
| | | <image class="avatar" :src="comment.user.avatar || '/static/default-avatar.png'"></image> |
| | | <image class="avatar" :src="comment.userAvatar || '/static/default-avatar.png'"></image> |
| | | <view class="comment-content"> |
| | | <text class="nickname">{{comment.user.nickname}}</text> |
| | | <text class="content">{{comment.content}}</text> |
| | | <text class="nickname">{{comment.userNickname}}</text> |
| | | <text class="content">{{comment.commentContent}}</text> |
| | | <text class="time">{{formatTime(comment.createTime)}}</text> |
| | | </view> |
| | | </view> |
| | |
| | | replyId: null |
| | | } |
| | | }, |
| | | async getCommentPage() { |
| | | this.commentQuery.pageNumber += 1; |
| | | getVideoComments(this.commentQuery).then(res => { |
| | | this.comments.push(res.data.data) |
| | | }) |
| | | }, |
| | | // 显示评论弹窗 |
| | | async showComments(item) { |
| | | this.commentForm.videoId = item.id; |
| | | this.$refs.commentPopup.open(); |
| | | this.commentLoading = true; |
| | | this.commentQuery.videoId = item.id |
| | | // 首次加载评论分页大小增加一倍,以产生滚动条,后续可触发 |
| | | getVideoComments(this.commentQuery).then(res => { |
| | | this.comments = res.data.data |
| | | }).catch(() => { |
| | |
| | | background-color: #fff; |
| | | border-radius: 20rpx 20rpx 0 0; |
| | | padding-bottom: env(safe-area-inset-bottom); |
| | | height: 50vh; |
| | | height: 60vh; |
| | | display: flex; |
| | | flex-direction: column; |
| | | } |
| | |
| | | |
| | | .comment-list { |
| | | flex: 1; |
| | | padding: 20rpx; |
| | | padding: 0rpx 20rpx 20rpx 20rpx; |
| | | box-sizing: border-box; |
| | | height: calc(60vh - 260rpx); |
| | | } |
| | | |
| | | .comment-item { |
| | | display: flex; |
| | | padding: 20rpx 0; |
| | | border-bottom: 1rpx solid #f5f5f5; |
| | | padding: 10rpx 0; |
| | | } |
| | | |
| | | .avatar { |
| | |
| | | } |
| | | |
| | | .nickname { |
| | | font-size: 26rpx; |
| | | font-size: 24rpx; |
| | | color: #666; |
| | | display: block; |
| | | margin-bottom: 10rpx; |
| | | } |
| | | |
| | | .content { |
| | | font-size: 30rpx; |
| | | font-size: 24rpx; |
| | | color: #333; |
| | | display: block; |
| | | margin-bottom: 10rpx; |