更新

src/router/index.js

@@ -126,6 +126,12 @@ const routes = [
         meta: { title: '课程培训', sub: '管理' },
         component: () => import('@/views/trainVidoe/detail.vue'),
       },
+      {
+        path: '/trainVidoe/viewVideo',
+        name: 'trainVidoe_viewVideo',
+        meta: { title: '课程培训', sub: '管理' },
+        component: () => import('@/views/trainVidoe/viewVideo.vue'),
+      },
       // 积分榜
       {
         path: '/league/index',

src/views/trainVidoe/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="index">
     <list-frame :title="mainTitle" @query="search" :total="total" :needFilter="false" @add="$router.push({ path: '/trainVidoe/detail' })">
-      <data-table :fields="fields" :data="list" :opera="opera" @edit="toEdit" @delete="toDelete"></data-table>
+      <data-table :fields="fields" :data="list" :opera="opera" @edit="toEdit" @view="toview" @delete="toDelete"></data-table>
     </list-frame>
   </div>
 </template>
@@ -23,6 +23,11 @@ export default {
   data: function() {
     return {
       opera: [
+        {
+          label: '编辑',
+          icon: 'el-icon-view',
+          method: 'view',
+        },
         {
           label: '编辑',
           icon: 'el-icon-edit',
@@ -73,6 +78,10 @@ export default {
     toEdit({ data }) {
       this.$router.push({ path: '/trainVidoe/detail', query: { id: data.id } });
     },
+    // 观看
+    toview({ data }) {
+      this.$router.push({ path: '/trainVidoe/viewVideo', query: { id: data.id } });
+    },
     // 删除
     async toDelete({ data }) {
       let res = await this.delete(data.id);

src/views/trainVidoe/viewVideo.vue

@@ -0,0 +1,108 @@
+<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-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);
+      }
+    },
+    // 提交评价
+    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>