vue2+评价回复功能

界面：

后端代码格式：

前端代码

<template>

  <div>
    <div v-loading="loading" >

        <div class="single-course-intro d-flex align-items-center justify-content-center"
             :style="'background-image: url(' + course.imageUrl + ');'">
          <div class="single-course-intro-content text-center">
            <h3>{
  { course.courseName | simpleStrFilter }}</h3>
            <div class="meta d-flex align-items-center justify-content-center"
                 v-if="course.college">
              <a href="#">{
  { course.teacher }}</a>
              <span><i class="fa fa-circle" aria-hidden="true"></i></span>
              <a href="#">{
  { course.college }} &amp; {
  { course.major }}</a>
            </div>
            <div class="price">{
  { course.chargeType === 1 ? $t('exam.course.charge') : $t('exam.course.free') }}
              <h6 v-if="course.chargePrice > 0">{
  { course.chargePrice }}</h6>
            </div>
            <div class="favorite-btn" v-show="favoriteBtnText !== undefined" @click="handleFavorite" >
              <i :class="detail.favorite ? 'favorite-icon el-icon-star-on' : 'cancel-favorite-icon el-icon-star-off'"></i>
              <span>{
  { favoriteBtnText }}</span>
            </div>
          </div>
        </div>
        <div class="single-course-content padding-50">
          <el-row class="my-content-container ml-100 mr-100">
            <el-col :span="18" style="padding-right: 40px;">
              <el-tabs v-model="activeName">
                <el-tab-pane name="desc">
                  <span slot="label">
                    <span class="exam-content-btn">{
  {$t('exam.course.courseIntroduction')}}</span>
                  </span>
                  <div class="clever-description">
                    <div class="about-course mb-30">
                      <p v-html="course.courseDescription"></p>
                    </div>
                  </div>
                </el-tab-pane>
                <el-tab-pane name="chapter">
                  <span slot="label">
                    <span class="exam-content-btn">{
  {$t('exam.course.chapter')}}</span>
                  </span>
                  <div class="about-curriculum mb-30">
                    <transition name="fade-transform" mode="out-in"
                                v-for="chapter in detail.chapters" :key="chapter.chapter.id">
                      <div class="chapter-container">
                        <p class="chapter-title">{
  { chapter.chapter.title }}</p>
                        <div class="section-container"
                             v-for="section in chapter.sections" :key="section.section.id">
                          <p class="section-title" @click="handleClickSection(section.section)">
                            {
  { section.section.title }}
                            <span class="section-learn-hour" v-if="section.section && section.section.learnHour !== undefined">
                              <i class="el-icon-caret-right"></i>&nbsp;{
  {
                                section.section.learnHour
                              }}{
  {$t('exam.course.hour')}}
                            </span>
                          </p>
                          <div class="point-container" v-for="point in section.points"
                               :key="point.id">
                            <p class="point-title" @click="handleClickPoint(section.section, point)">
                              {
  { point.title }}
                              <span class="section-learn-hour">
                              <i class="el-icon-caret-right"></i>&nbsp;{
  {
                                  point.learnHour
                                }}{
  {$t('exam.course.hour')}}
                            </span>
                            </p>
                          </div>
                        </div>
                      </div>
                    </transition>
                  </div>
                </el-tab-pane>
                <el-tab-pane name="evaluate">
                  <span slot="label">
                    <span class="exam-content-btn">{
  {$t('exam.course.courseEvaluation')}}</span>
                  </span>
                  <div class="about-review mb-30">
                    <div>
                      <el-form :model="evaluate">
                        <el-form-item label="">
                          <el-input type="textarea" :rows="3" :placeholder="$t('exam.course.inputEvaluation')"
                                    v-model="evaluate.evaluateContent"></el-input>
                        </el-form-item>
                        <el-form-item label="">
                          <el-rate v-model="evaluate.evaluateLevel"></el-rate>
                        </el-form-item>
                        <el-form-item>
                          <el-button type="primary" class="clever-btn"
                                     @click="handleSubmitEvaluate">{
  {$t('submit')}}
                          </el-button>
                        </el-form-item>
                      </el-form>
                    &l