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-player class="video-player-box" style="width:800px;"
                      ref="videoPlayer"
                      :options="playerOptions"
                      :playsinline="true">
        </video-player>
        <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'
  import"videojs-contrib-hls.js/src/videojs.hlsjs"
  export default {
    data() {
      return {
        playerOptions: {
          playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
          autoplay: false, //如果true,浏览器准备好时开始回放。
          controls: true, //控制条
          preload: 'auto', //视频预加载
          muted: false, //默认情况下将会消除任何音频。
          loop: false, //导致视频一结束就重新开始。
          language: 'zh-CN',
          aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
          fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
          sources: [{
            type: 'application/x-mpegURL',
            src: 'https://teammodelstorage.blob.core.chinacloudapi.cn/teammodelcontest/20190517/demo/2019.m3u8'
          }],
          poster: "http://static.smartisanos.cn/pr/img/video/video_03_cc87ce5bdb.jpg", //你的封面地址
          width: document.documentElement.clientWidth,
          notSupportedMessage: '此视频暂无法播放，请稍后再试' //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        },
        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>