tnbapp/src/components/card/UserCommentCard.vue

<template>
  <el-card class="comment-card shadow-box">
    <div slot="header" class="comment-header">
      <span>全部评论 <small>{{ totalSize }}</small></span>
    </div>
    <div class="comment-container">
      <comment
          v-model="dataList"
          :user="currentUser"
          :props="commentProps"
          :before-submit="submit"
          :before-like="like"
          :before-delete="deleteComment"
          :upload-img="uploadImg"
      />
      <div class="pagination-wrapper">
        <el-pagination
            :small="screenWidth <= 768"
            hide-on-single-page
            background
            layout="prev, pager, next"
            :page-size="pageSize"
            :current-page="currentPage"
            :total="totalSize"
            @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </el-card>
</template>

<script>
import comment from '@/components/comment'
import { publishComment, getComment } from '@/api/comment'

export default {
  name: 'UserCommentCard',
  components: { comment },
  props: {
    videoId: { type: String, required: true },
    currentUser: { type: Object, required: true },
    screenWidth: { type: Number, default: 1200 }
  },
  data() {
    return {
      currentPage: 1,
      pageSize: 20,
      totalSize: 0,
      dataList: [],
      commentProps: {
        id: 'commentId',
        content: 'content',
        imgSrc: 'imageUrl',
        children: 'children',
        likes: 'likes',
        liked: 'liked',
        reply: 'reply',
        createAt: 'createAt',
        total: 'total',
        user: 'user'
      }
    }
  },
  watch: {
    videoId: {
      immediate: true,
      handler(newVal) {
        if (newVal) this.getCommentWrapper(1)
      }
    }
  },
  methods: {
    handleCurrentChange(page) {
      this.currentPage = page
      this.getCommentWrapper(page)
      window.scrollTo({ top: document.querySelector('.comment-card').offsetTop - 100, behavior: 'smooth' })
    },
    getCommentWrapper(pageNumber) {
      getComment(this.videoId, pageNumber).then(resp => {
        if (resp.code === 0) {
          this.dataList = resp.data.list
          this.totalSize = resp.data.totalSize
        } else {
          this.$message.error(resp.msg)
        }
      }).catch(err => this.$message.error(err.message))
    },
    async submit(newComment, parent, add) {
      // 模拟延迟
      await new Promise(resolve => setTimeout(resolve, 300))

      const payload = { newComment, parent, postId: this.videoId }
      publishComment(payload).then(resp => {
        if (resp.code === 0) {
          add(Object.assign(newComment, { postId: this.videoId }))
          if (parent === null) this.totalSize += 1
          this.$notify.success({ message: '评论已发布' })
        } else {
          this.$notify.warning({ message: '评论发布失败' })
        }
      })
    },
    async like(comment) {
      console.log('Like comment:', comment)
      // 这里可以调用点赞接口
    },
    async deleteComment(comment, parent) {
      console.log('Delete comment:', comment)
      // 这里可以调用删除接口
    },
    async uploadImg({ file, callback }) {
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = () => callback(reader.result)
    }
  }
}
</script>

<style scoped>
.comment-card { margin-bottom: 40px; }
.comment-header { font-weight: 600; font-size: 18px; }
.comment-header small { font-weight: normal; color: #909399; margin-left: 8px; }
.pagination-wrapper { margin-top: 30px; display: flex; justify-content: center; }
</style>