tnbapp/src/components/card/comment-card.vue

<template>
  <div v-infinite-scroll="loadMore" infinite-scroll-disabled="true" infinite-scroll-distance="10">
    <v-row>
      <v-col>
        {{ video.commentCount }} 条评论
      </v-col>
      <v-col>
        <span @click="getNewestComments">最新</span>
      </v-col>
      <v-col>
        <span @click="getHotComments">最热</span>
      </v-col>
    </v-row>
    <v-divider />
    <v-row>
      <div ref="comment" :style="wrapStyle" class="comment-wrap" style="width: 720px; height: 1080px">
        <Comment
          v-model="videoComments"
          :user="currentUser"
          :props="props"
          :before-submit="submit"
          :before-like="like"
          :before-delete="deleteComment"
          :upload-img="uploadImg"
        />
      </div>
    </v-row>
  </div>
</template>

<script>
import Comment from '@/components/comment'
import { videoComment } from '@/api/comment/comment'

export default {
  name: 'CommentCard',
  components: {
    Comment
  },
  props: {
    video: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      commentCount: this.count,
      videoComments: [],
      wrapStyle: '',
      props: {
        id: 'commentId',
        content: 'content',
        imgSrc: 'imgSrc',
        children: 'childrenComments',
        likes: 'likes',
        liked: 'liked',
        reply: 'reply',
        createAt: 'createAt',
        user: 'visitor'
      },
      currentUser: null,
      busy: false,
      page: 1
    }
  },
  created() {
    const userInfo = this.$store.state.user.userInfo
    if (userInfo !== null) {
      this.currentUser = {
        name: userInfo.username,
        avatar: userInfo.avatarUrl
      }
    }
    this.getVideoComment(this.video.videoId, 1)
  },
  mounted() {
    // const header = this.$refs.header
    const header = 10
    this.wrapStyle = `height: calc(100vh - ${header.clientHeight + 20}px)`
  },
  methods: {
    loadMore: function() {
      this.busy = true
      setTimeout(() => {
        this.getVideoComment(this.video.videoId, this.page)
      }, 1000)
    },
    getHotComments() {
      console.log('获取热门评论')
    },
    getNewestComments() {
      console.log('获取最新评论')
    },
    getVideoComment(videoId, page) {
      videoComment(videoId, page).then(res => {
        if (res.code === 0) {
          this.page += 1
          this.busy = false

          for (const item of res.data.list) {
            this.videoComments.push(item)
          }
          console.log('已获取的评论数量: ' + this.videoComments.length)
        } else {
          console.error(res.msg)
        }
      })
        .catch(error => {
          console.error(error.message)
        })
    },
    // 评论相关方法
    async submit(newComment, parent, add) {
      const res = await new Promise((resolve) => {
        setTimeout(() => {
          resolve({ newComment, parent })
        }, 300)
      })
      add(Object.assign(res.newComment, { _id: new Date().getTime() }))
      console.log('addComment: ', res)
    },
    async like(comment) {
      const res = await new Promise((resolve) => {
        setTimeout(() => {
          resolve(comment)
        }, 0)
      })

      console.log('likeComment: ', res)
    },
    async uploadImg({ file, callback }) {
      const res = await new Promise((resolve, reject) => {
        const reader = new FileReader()

        reader.readAsDataURL(file)

        reader.onload = () => {
          resolve(reader.result)
        }

        reader.onerror = () => {
          reject(reader.error)
        }
      })

      callback(res)
      console.log('uploadImg： ', res)
    },
    async deleteComment(comment, parent) {
      const res = await new Promise((resolve) => {
        setTimeout(() => {
          resolve({ comment, parent })
        }, 300)
      })
      console.log('deleteComment: ', res)
    }
  }
}
</script>

<style lang="scss">
  .category-link {
    color: #999;
  }
  a {
    text-decoration: none;
  }
  @mixin scroll-style(
    $thumb: rgba(255, 255, 255, 0.6),
    $track: rgba(255, 255, 255, 0)
  ) {
    &::-webkit-scrollbar,
    &::-webkit-scrollbar-thumb,
    &::-webkit-scrollbar-track {
      border: none;
      box-shadow: none;
    }
    &::-webkit-scrollbar {
      width: 4px;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 2px;
      background: $thumb;
    }
    &::-webkit-scrollbar-track {
      background: $track;
    }
  }
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  html {
    font-size: 14px;
  }

  html,
  body,
  #app {
    height: 100%;
  }

  @media screen and (min-width: 320px) {
    html {
      font-size: calc(14px + 4 * ((100vw - 320px) / (1200 - 320)));
    }
  }

  @media screen and (min-width: 1200px) {
    html {
      font-size: 18px;
    }
  }

  .change-role {
    background: #1c2433;
    color: #eee;
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-content: center;
    .change {
      cursor: pointer;
      padding: 0.4rem;
      margin-right: 2rem;
      font-size: 0.9rem;
      border: 1px solid #e99210;
      border-radius: 5px;
      user-select: none;
      &:hover {
        opacity: 0.9;
      }
    }
    .current-role {
      min-width: 15rem;
      color: #e99210;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px dashed #e99210;
      padding: 0 1rem;
      img {
        width: 1.5rem;
        height: 1.5rem;
        margin-right: 0.5rem;
        border: 1px solid #eee;
        border-radius: 50%;
      }
    }
  }

  .comment-wrap {
    overflow: auto;
    @include scroll-style(#db8f1c, #b9b9b9);
  }

  @media screen and (min-width: 760px) {
    body {
      margin: 0 10%;
      border: 1px dashed #eee;
    }
  }

  @media screen and (max-width: 500px) {
    .change-role .current-role {
      min-width: 5rem;
      padding: 0 0.5rem;
    }
  }
</style>