train-director/src/views/trainVidoe/viewVideo.vue

<template>
  <div id="viewVideo">
    <detail-frame :title="mainTitle" returns="/trainVidoe/index">
      <el-col :span="24" class="top">
        <span>课程权属：{{ videoInfo.teacher || '中心提供' }}</span>
        <span>所讲课程：{{ videoInfo.subname }}</span>
        <el-link :underline="false" @click="toDownload">点击下载</el-link>
      </el-col>
      <el-col :span="24" class="info">
        <video :src="videoInfo.url" controls="controls">
          您的浏览器不支持 video 标签。
        </video>
      </el-col>
      <el-col :span="24" class="foot" style="display:none">
        <el-input v-model="evaluate" type="textarea" maxlength="300" show-word-limit :autosize="{ minRows: 4, maxRows: 5 }" placeholder="请输入评价"></el-input>
        <el-button type="primary" size="mini" @click="onSubmit">提交评价</el-button>
      </el-col>
    </detail-frame>
  </div>
</template>

<script>
import detailFrame from '@frame/layout/admin/detail-frame';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: trainvideo } = createNamespacedHelpers('trainvideo');
export default {
  name: 'viewVideo',
  props: {},
  components: { detailFrame },
  data: function() {
    return {
      videoInfo: {},
      evaluate: '',
    };
  },
  created() {},
  methods: {
    ...trainvideo(['fetch', 'create', 'update']),
    async search() {
      let res = await this.fetch(this.id);
      if (this.$checkRes(res)) {
        this.$set(this, `videoInfo`, res.data);
      }
    },
    toDownload() {
      let duplicate = _.cloneDeep(this.videoInfo);
      const { url } = duplicate;
      if (url) window.open(url);
    },
    // 提交评价
    onSubmit() {
      console.log(this.evaluate);
    },
  },
  computed: {
    ...mapState(['user']),
    id() {
      return this.$route.query.id;
    },
    isNew() {
      return this.$route.query.id ? false : true;
    },
    mainTitle() {
      let meta = this.$route.meta;
      let main = meta.title || '';
      let sub = meta.sub || '';
      return `${main}${sub}`;
    },
    keyWord() {
      let meta = this.$route.meta;
      let main = meta.title || '';
      return main;
    },
  },
  watch: {
    isNew: {
      immediate: true,
      handler(val) {
        if (val) this.loading = false;
        else this.search();
      },
    },
  },
};
</script>

<style lang="less" scoped>
.top {
  height: 50px;
  text-align: center;
  line-height: 50px;
  span {
    display: inline-block;
    margin: 0 10px;
    font-size: 30px;
    -webkit-text-stroke: 1px #76bdfe;
    font-family: cursive;
  }
}
.info {
  text-align: center;
  margin: 15px 0;
  video {
    width: 50%;
  }
}
.foot {
  padding: 0 20%;
  text-align: center;
  .el-button {
    margin: 15px 0;
  }
}
</style>