TEAMModelOS/TEAMModelOS.SmartClass/ClientApp/view/smart-class/CommentVideo.vue

<template>
  <div class="video-page">
    <!--<div class="video-title">
      <h3 class="video-title-h3">12月03日直播</h3>
    </div>-->
    <div class="video-info">

      <div class="comment-video-src">
        <div>
          <p style=" font-size: 14px; margin-bottom: 20px;"><span class="title-header">标题 : <span class="title-content">创新实验室（学科教室）课例20190508直播</span></span> <span class="title-header">主讲人 : 林燕<span class="title-content"></span></span> <span class="liveStatus">播放成功</span></p>
        </div>
        <video controls="controls" width="780" style="display:block;"
               src="https://teammodelstorage.blob.core.chinacloudapi.cn/teammodelcontest/20190516/acalssOne%E7%BD%91%E9%A1%B5%E7%99%BB%E5%BD%95%E5%AD%A6%E4%B9%A0%E6%96%B9%E6%B3%95.mp4">
          您的浏览器不支持 video 标签。
        </video>
        <p class="average-score">作品当前平均分 : <span>未评</span></p>
      </div>

      <div class="comment-video-detail-info">
        <Tabs value="name1">
          <TabPane label="观课评论" name="name1">
            <div class="review-pane">
              <div class="review-list" v-for="(item,index) in commmentList" :key="index">
                <span class="reviewlist-title">
                  {{item.employeeName}} :&nbsp;
                </span> <span class="reviewlist-content"><span>{{item.content}}</span> <span class="reviewlist-time">({{item.createTimeTip}})</span> <!----></span>
              </div>
            </div>
            <div style="position: relative; padding-top: 20px;"><div class="lastest-comment" style="display: none;">查看最新评论</div> <textarea placeholder="发表您的评论" maxlength="250" class="publish-review"></textarea> <span class="submit-review">提交</span></div>
          </TabPane>
          <TabPane label="专家点评" name="name2">专家点评</TabPane>
        </Tabs>
      </div>
    </div>
    <div class="video-other" style="display:none;">
      <h3 class="video-title-h3">推荐作品</h3>
    </div>
    <div class="videos-wrap" style="display:none;">
      <div class="video-item" v-for="(item , index) in videos" @click="showVideo(index)">
        <img src="../../assets/image/default-act.png" width="95%" />
        <p>{{item.title}}</p>
      </div>
    </div>
  </div>
</template>
<script>
  import rewardList from '@/static/rewardList.json'
  import CList from '@/static/commentList.json'
  export default {
    data() {
      return {
        routerData: {},
        rewardDatas: [],
        commmentList:[],
        videos: [
          {
            title:'12月14日直播'
          },
          {
            title:'12月14日直播'
          },
          {
            title:'12月14日直播'
          },
          {
            title:'12月14日直播'
          },
          {
            title:'12月14日直播'
          },
          {
            title:'12月14日直播'
          },
          {
            title:'12月14日直播'
          },
          {
            title:'12月14日直播'
          }
        ]
      }
    },
    methods: {
      showVideo(index) {
        //alert(index);
        this.$router.push(
          {
            name: 'video',
            query: {
              rewardIndex: index
            }
          }
        );
      }
    },
    mounted() {
      let index = this.$route.query.rewardIndex;
      //alert(index);
      this.commmentList = CList.list;
      this.rewardDatas = rewardList.data.list;
      if (index == undefined) {
        this.routerData = this.rewardDatas[0];
      } else {
        this.routerData = this.rewardDatas[index];
      }
      
    },
    
    watch: {
      $route() {
        let index = this.$route.query.rewardIndex;
        //alert(index);
        if (index == undefined) {
          this.routerData = this.rewardDatas[0];
        } else {
          this.routerData = this.rewardDatas[index];
        }
      }
    }
  }
</script>
<style>
  .video-page {
    width: 1200px;
    margin: 100px auto;
    font-family:none;
  }

  .video-title {
    margin-bottom: 20px;
    height: 20px;
  }

    .video-title-h3 {
      height: 20px;
      font-size: 20px;
      line-height: 20px;
      border-left: 6px solid #37b1fa;
      padding-left: 12px;
    }

  .video-info {
    width: 100%;
    display: table;
  }
  .comment-video-detail-info {
    width:400px;
    background:#ffffff;
    display:table-cell;
    vertical-align:top;
    padding:20px 10px 20px 30px;
    position:relative;
    border-left: 15px solid rgb(252,252,252);
  }
    .comment-video-detail-info .ivu-form-item {
      margin-bottom:8px;
    }
    .comment-video-detail-info .ivu-form .ivu-form-item-label {
      font-size:14px;
      color:#999999;
    }
    .comment-video-detail-info .ivu-form-item-content {
      font-size: 14px;
      color: #ffffff;
    }
  .comment-video-src {
    display:table-cell;
    width:780px;
    box-sizing:border-box;
    padding:20px 20px;
    background:#FFFFFF;
  }
  .download-video {
    text-align:center;
    position:absolute;
    width:100%;
    bottom:20px;
    left:0;
  }
  .video-other {
    margin-top:20px;
  }
  .videos-wrap {
    margin:0px -10px 0px -10px;
  }
  .video-item {
    width: 25%;
    display: inline-block;
    padding: 0px 10px;
    margin-top:20px;
    cursor:pointer;
  }

    .video-item p {
      font-size: 16px;
      color: #000;
      margin-top: 10px;
      text-decoration: none;
      text-indent: 8px;
    }
  .title-header {
    color: #666;
    margin-right: 30px;
    display: inline-block;
  }
  .liveStatus {
    color: #33aafe;
    float: right;
  }

  .review-pane {
    height: 300px;
    background-color: #fff;
    overflow-y: auto;
    position: relative;
  }
  .review-list {
    overflow: hidden;
    font-size: 14px;
    margin: 8px 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f6f6f6;
  }

  .reviewlist-title {
    float: left;
    width: 22%;
    color: #999;
    text-align: right;
    padding-right: 5px;
  }

  .reviewlist-content {
    float: left;
    color: #444;
    width: 76%;
    font-size: 14px;
    word-break: break-all;
  }

  .lastest-comment {
    position: absolute;
    top: -5px;
    right: 20px;
    padding: 5px;
    color: #666;
    z-index: 999;
    cursor: pointer;
  }

  .publish-review {
    padding: 10px;
    background-color: #f1f2f3;
    border: 1px solid #d7d8da;
    font-size: 14px;
    color: #333;
    width: 100%;
    height: 100px;
    resize: none;
    outline: none;
    box-sizing: border-box;
  }

  .submit-review {
    margin-top: 8px;
    color: #fff;
    background-color: #409eff;
    border-color: #409eff;
    margin-right: 10px;
    display: inline-block;
    float: right;
    cursor: pointer;
    width: 45px;
    text-align: center;
    height: 22px;
    line-height: 22px;
    border-radius: 2px;
  }

  .reviewlist-time {
    font-size: 12px;
    color: #ccc;
  }
  .average-score {
    margin-top: 20px;
    color: #666;
    font-size: 14px;
  }

  .average-score span {
    color: #fd8f45;
  }
</style>