frontend/src/components/CComment.vue

<template>
  <div class="comment">
    <div>
      <div class="comment-title">
        <span v-if="comment.topNumber" class="icon blue">{{iconMap['put_on_top']}}</span>
        主题：{{comment.title}}
      </div>
      <div class="comment-content">{{comment.content}}</div>
      <div class="comment-author">{{createTime}} | 作者：{{comment.userName}} <span class="role">{{role}}</span></div>
      <comment-tool-bar
        :top-number="comment.topNumber || ''"
        :user-id="comment.userId" :has-reply="comment.reply || ''"
        @reply="handleReply"
        @delete-reply="handleDeleteReply"
        @delete-comment="handleDeleteComment"
        @to-top="handleToTop"
        @cancel-to-top="handleCancelToTop"
      >
      </comment-tool-bar>
      <div v-if="comment.reply" class="comment-reply">
        <div>教师回复：{{comment.reply.content}}</div>
        <div class="comment-reply-time">{{replyTime}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import iconMap from '@/utils/icon-map'
import { createReply, removeReply } from '@/server/reply'
import { removeComment, topComment, unTopComment } from '@/server/comment'
import CommentToolBar from '@/components/CommentToolBar'

export default {
  components: { CommentToolBar },
  props: ['comment'],
  data () {
    return {
      replyContent: '',
      iconMap: iconMap
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.main.userInfo
    }),
    createTime () {
      return this.$moment(this.comment.createAt).fromNow()
    },
    replyTime () {
      return this.$moment(this.comment.reply.createAt).fromNow()
    },
    role () {
      if (this.comment.userType === 'TEACHER') {
        return '教师'
      } else if (this.comment.userType === 'STUDENT') {
        return '学生'
      }
      return '身份未知'
    }
  },
  methods: {
    handleReply (reply) {
      createReply({ commentId: this.comment.id, content: reply }).then(res => {
        this.$setSuccessMessage('回复成功')
        this.$emit('need-refresh')
      }).catch(err => {
        this.$setErrorMessage(err.response.data.msg)
      })
    },
    handleDeleteReply () {
      const msg = '确定删除该回复吗：\n\n' + this.comment.reply.content
      if (confirm(msg)) {
        removeReply({ replyId: this.comment.reply.id }).then(res => {
          this.$setSuccessMessage('删除成功')
          this.$emit('need-refresh')
        }).catch(err => {
          this.$setErrorMessage(err.response.data.msg)
        })
      }
    },
    handleDeleteComment () {
      const msg = '确定删除该评论吗：\n\n' + '主题：' + this.comment.title
      if (confirm(msg)) {
        removeComment({ commentId: this.comment.id }).then(res => {
          this.$setSuccessMessage('删除成功')
          this.$emit('need-refresh')
        }).catch(err => {
          this.$setErrorMessage(err.response.data.msg)
        })
      }
    },
    handleToTop () {
      topComment({ commentId: this.comment.id }).then(res => {
        this.$setSuccessMessage('置顶成功')
        this.$emit('need-refresh')
      }).catch(err => {
        this.$setErrorMessage(err.response.data.msg)
      })
    },
    handleCancelToTop () {
      unTopComment({ commentId: this.comment.id }).then(res => {
        this.$setSuccessMessage('取消置顶成功')
        this.$emit('need-refresh')
      }).catch(err => {
        this.$setErrorMessage(err.response.data.msg)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/style/theme.scss';

.comment {
  width: 100%;
  padding: 16px 0 16px 0;
  font-weight: bold;
}

.comment-title {
  margin-bottom: 12px;
}

.comment-content {
  color: #6a7a8a;
  font-size: 14px;
  margin-bottom: 8px;
}

.comment-author {
  font-size: 14px;
  color: #7a8a9a;
  margin-bottom: 8px;

  .role {
    display: inline-block;
    padding: 1px 4px;
    color: $theme-blue;
    background: $theme-blue-transparent;
    font-size: 12px;
  }
}

.comment-reply {
  font-size: 14px;
  padding: 4px 8px;
  background: $theme-orange-transparent;

  &-time {
    color: #8a9aaa;
  }
}

.icon {
  font-family: 'iconfont', sans-serif;
  text-align: center;
  padding: 4px 0;
  color: #7a8a9a;

  span {
    font-size: 12px;
  }
}

.blue {
  color: $theme-blue;
  font-size: 16px;
  transform: scale(1.2);
}
</style>