题库中心首页

src/views/questioncenter/main.vue

@@ -8,18 +8,18 @@
       <index-card title="智能练习" class="mb20">
         <mx-image-wrap :list="zhineng"></mx-image-wrap>
       </index-card>
-      <index-card title="精品试卷" class="mb20" more-text="更多">
+      <index-card title="精品试卷" class="mb20" more-text="更多" @more="more('/question-center/bestPaper')">
         <el-tabs type="card">
           <el-tab-pane label="名校试卷">
             <el-row :gutter="20">
-              <el-col :span="8" class="f14 mb15 pointer text-ellipsis" v-for="item in papersList">
+              <el-col :span="8" @click.native="toPreView(item.id, item.papername)" class="f14 mb15 pointer text-ellipsis" v-for="item in papersList">
                 {{ item.papername }}
               </el-col>
             </el-row>
           </el-tab-pane>
           <el-tab-pane label="历年真题">
             <el-row :gutter="20">
-              <el-col :span="8" class="f14 mb15 pointer text-ellipsis" v-for="item in paperYearList">
+              <el-col :span="8" @click.native="toPreView(item.id, item.papername)" class="f14 mb15 pointer text-ellipsis" v-for="item in paperYearList">
                 {{ item.papername }}
               </el-col>
             </el-row>
@@ -29,7 +29,7 @@
       <index-card title="组卷中心" class="mb20">
         <mx-image-wrap :list="zujuan" titleClass="text-white"></mx-image-wrap>
       </index-card>
-      <index-card title="视频课程" more-text="更多">
+      <index-card title="视频课程" more-text="更多" @more="more('/question-center/video_course')">
         <el-tabs type="card">
           <el-tab-pane label="同步课程">
             <el-row :gutter="20">
@@ -125,6 +125,15 @@ export default {
     this.getVideoList(2)
   },
   methods: {
+    toPreView(paperId, paperName) {
+      this.$router.push({
+        path: '/question-center/bestPaper/preview',
+        query: { paperId, paperName }
+      })
+    },
+    more(path) {
+      this.$router.push(path)
+    },
     getPaperList() {
       papersList({
         subjectName: '所有',

src/views/videocourse/compoent/aliplayer.vue

@@ -1,331 +1,331 @@
-
-<template>
-  <!-- :style='playStyle' -->
-    <div class="prism-player" :id="playerId" :cover="cover"></div>
-</template>
-<script>
-export default {
-  name: "Aliplayer",
-  props: {
-    playStyle: {
-      type: String,
-      default: "",
-    },
-    aliplayerSdkPath: {
-      // Aliplayer 代码的路径
-      type: String,
-      // default: '//g.alicdn.com/de/prismplayer/2.6.0/aliplayer-min.js'
-      default: "https://g.alicdn.com/de/prismplayer/2.9.7/aliplayer-min.js",
-    },
-    autoplay: {
-      type: Boolean,
-      default: false,
-    },
-
-    encryptType: {
-      type: Number,
-      default: 1,
-    },
-
-    isLive: {
-      type: Boolean,
-      default: false,
-    },
-    playsinline: {
-      type: Boolean,
-      default: false,
-    },
-    width: {
-      type: String,
-      default: "100%",
-    },
-    height: {
-      type: String,
-      default: "100%",
-    },
-    controlBarVisibility: {
-      type: String,
-      default: "always",
-    },
-    useH5Prism: {
-      type: Boolean,
-      default: false,
-    },
-    useFlashPrism: {
-      type: Boolean,
-      default: false,
-    },
-    vid: {
-      type: String,
-      default: "",
-    },
-    playauth: {
-      type: String,
-      default: "",
-    },
-    source: {
-      type: String,
-      default: "",
-    },
-    cover: {
-      type: String,
-      default: "",
-    },
-    format: {
-      type: String,
-      default: "m3u8",
-    },
-    x5_video_position: {
-      type: String,
-      default: "top",
-    },
-    x5_type: {
-      type: String,
-      default: "h5",
-    },
-    x5_fullscreen: {
-      type: Boolean,
-      default: false,
-    },
-    x5_orientation: {
-      type: Number,
-      default: 2,
-    },
-    autoPlayDelay: {
-      type: Number,
-      default: 0,
-    },
-    autoPlayDelayDisplayText: {
-      type: String,
-    },
-  },
-  data() {
-    return {
-      playerId: "aliplayer_" + Math.random() * 100000000000000000,
-      scriptTagStatus: 0,
+
+<template>
+  <!-- :style='playStyle' -->
+    <div class="prism-player" :id="playerId" :cover="cover"></div>
+</template>
+<script>
+export default {
+  name: "Aliplayer",
+  props: {
+    playStyle: {
+      type: String,
+      default: "",
+    },
+    aliplayerSdkPath: {
+      // Aliplayer 代码的路径
+      type: String,
+      // default: '//g.alicdn.com/de/prismplayer/2.6.0/aliplayer-min.js'
+      // default: "https://g.alicdn.com/de/prismplayer/2.9.7/aliplayer-min.js",
+    },
+    autoplay: {
+      type: Boolean,
+      default: false,
+    },
+
+    encryptType: {
+      type: Number,
+      default: 1,
+    },
+
+    isLive: {
+      type: Boolean,
+      default: false,
+    },
+    playsinline: {
+      type: Boolean,
+      default: false,
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "100%",
+    },
+    controlBarVisibility: {
+      type: String,
+      default: "always",
+    },
+    useH5Prism: {
+      type: Boolean,
+      default: false,
+    },
+    useFlashPrism: {
+      type: Boolean,
+      default: false,
+    },
+    vid: {
+      type: String,
+      default: "",
+    },
+    playauth: {
+      type: String,
+      default: "",
+    },
+    source: {
+      type: String,
+      default: "",
+    },
+    cover: {
+      type: String,
+      default: "",
+    },
+    format: {
+      type: String,
+      default: "m3u8",
+    },
+    x5_video_position: {
+      type: String,
+      default: "top",
+    },
+    x5_type: {
+      type: String,
+      default: "h5",
+    },
+    x5_fullscreen: {
+      type: Boolean,
+      default: false,
+    },
+    x5_orientation: {
+      type: Number,
+      default: 2,
+    },
+    autoPlayDelay: {
+      type: Number,
+      default: 0,
+    },
+    autoPlayDelayDisplayText: {
+      type: String,
+    },
+  },
+  data() {
+    return {
+      playerId: "aliplayer_" + Math.random() * 100000000000000000,
+      scriptTagStatus: 0,
       instance: null,
-      show:true
-    };
-  },
-  created() {
-    // this.dataUpdate();
-    if (window.Aliplayer !== undefined) {
-      // 如果全局对象存在，说明编辑器代码已经初始化完成，直接加载编辑器
-      this.scriptTagStatus = 2;
-      this.initAliplayer();
-    } else {
-      // 如果全局对象不存在，说明编辑器代码还没有加载完成，需要加载编辑器代码
-      this.insertScriptTag();
-    }
+      show:true
+    };
+  },
+  created() {
+    // this.dataUpdate();
+    if (window.Aliplayer !== undefined) {
+      // 如果全局对象存在，说明编辑器代码已经初始化完成，直接加载编辑器
+      this.scriptTagStatus = 2;
+      this.initAliplayer();
+    } else {
+      // 如果全局对象不存在，说明编辑器代码还没有加载完成，需要加载编辑器代码
+      this.insertScriptTag();
+    }
   },
    destroyed () {
 
-    },
-  mounted() {
-    if (window.Aliplayer !== undefined) {
-      // 如果全局对象存在，说明编辑器代码已经初始化完成，直接加载编辑器
-      this.scriptTagStatus = 2;
-      this.initAliplayer();
-    } else {
-      // 如果全局对象不存在，说明编辑器代码还没有加载完成，需要加载编辑器代码
-      this.insertScriptTag();
-    }
-  },
-  watch: {
-    vid() {
-      console.log(this.vid)
+    },
+  mounted() {
+    if (window.Aliplayer !== undefined) {
+      // 如果全局对象存在，说明编辑器代码已经初始化完成，直接加载编辑器
+      this.scriptTagStatus = 2;
+      this.initAliplayer();
+    } else {
+      // 如果全局对象不存在，说明编辑器代码还没有加载完成，需要加载编辑器代码
+      this.insertScriptTag();
+    }
+  },
+  watch: {
+    vid() {
+      console.log(this.vid)
     },
     playauth(){
       if(this.playauth){
         this.initAliplayer()
       }
-    }
-  },
-  methods: {
-    insertScriptTag() {
-      const _this = this;
-      let playerScriptTag = document.getElementById("playerScriptTag");
-      // 如果这个tag不存在，则生成相关代码tag以加载代码
-      if (playerScriptTag === null) {
-        playerScriptTag = document.createElement("script");
-        playerScriptTag.type = "text/javascript";
-        playerScriptTag.src = this.aliplayerSdkPath;
-        playerScriptTag.id = "playerScriptTag";
-        let s = document.getElementsByTagName("head")[0];
-        s.appendChild(playerScriptTag);
-      }
-      if (playerScriptTag.loaded) {
-        _this.scriptTagStatus++;
-      } else {
-        playerScriptTag.addEventListener("load", () => {
-          _this.scriptTagStatus++;
-          playerScriptTag.loaded = true;
-          _this.initAliplayer();
-        });
-      }
-      _this.initAliplayer();
-    },
-    initAliplayer() {
-      const _this = this;
-      // scriptTagStatus 为 2 的时候，说明两个必需引入的 js 文件都已经被引入，且加载完成
-      if (_this.scriptTagStatus === 2 && _this.instance === null) {
-        // Vue 异步执行 DOM 更新，这样一来代码执行到这里的时候可能 template 里面的 script 标签还没真正创建
-        // 所以，我们只能在 nextTick 里面初始化 Aliplayer
-        console.log(_this.cover);
-        _this.$nextTick(() => {
-          // console.log(_this.encryptType)
-          // console.log(_this.vid)
-          // console.log(_this.playauth)
-          _this.instance = window.Aliplayer({
-            id: _this.playerId,
-            autoplay: _this.autoplay,
-            vid: _this.vid,
-            playauth: _this.playauth,
-            source: _this.source,
-            cover: _this.cover,
-            //当播放私有加密流时需要设置。
-            encryptType: _this.encryptType,
-
-            /*   isLive: _this.isLive,
-            playsinline: _this.playsinline,
-            format: _this.format,
-            width: _this.width,
-            height: _this.height,
-            controlBarVisibility: _this.controlBarVisibility,
-            useH5Prism: _this.useH5Prism,
-            useFlashPrism: _this.useFlashPrism,
-
-            x5_video_position: _this.x5_video_position,
-            x5_type: _this.x5_type,
-            x5_fullscreen: _this.x5_fullscreen,
-            x5_orientation: _this.x5_orientation,
-            autoPlayDelay: _this.autoPlayDelay,
-            autoPlayDelayDisplayText: _this.autoPlayDelayDisplayText, */
-          });
-          // 绑定事件，当 AliPlayer 初始化完成后，将编辑器实例通过自定义的 ready 事件交出去
-          _this.instance.on("ready", () => {
-            this.$emit("ready", _this.instance);
-          });
+    }
+  },
+  methods: {
+    insertScriptTag() {
+      const _this = this;
+      let playerScriptTag = document.getElementById("playerScriptTag");
+      // 如果这个tag不存在，则生成相关代码tag以加载代码
+      if (playerScriptTag === null) {
+        playerScriptTag = document.createElement("script");
+        playerScriptTag.type = "text/javascript";
+        playerScriptTag.src = this.aliplayerSdkPath;
+        playerScriptTag.id = "playerScriptTag";
+        let s = document.getElementsByTagName("head")[0];
+        s.appendChild(playerScriptTag);
+      }
+      if (playerScriptTag.loaded) {
+        _this.scriptTagStatus++;
+      } else {
+        playerScriptTag.addEventListener("load", () => {
+          _this.scriptTagStatus++;
+          playerScriptTag.loaded = true;
+          _this.initAliplayer();
+        });
+      }
+      _this.initAliplayer();
+    },
+    initAliplayer() {
+      const _this = this;
+      // scriptTagStatus 为 2 的时候，说明两个必需引入的 js 文件都已经被引入，且加载完成
+      if (_this.scriptTagStatus === 2 && _this.instance === null) {
+        // Vue 异步执行 DOM 更新，这样一来代码执行到这里的时候可能 template 里面的 script 标签还没真正创建
+        // 所以，我们只能在 nextTick 里面初始化 Aliplayer
+        console.log(_this.cover);
+        _this.$nextTick(() => {
+          // console.log(_this.encryptType)
+          // console.log(_this.vid)
+          // console.log(_this.playauth)
+          _this.instance = window.Aliplayer({
+            id: _this.playerId,
+            autoplay: _this.autoplay,
+            vid: _this.vid,
+            playauth: _this.playauth,
+            source: _this.source,
+            cover: _this.cover,
+            //当播放私有加密流时需要设置。
+            encryptType: _this.encryptType,
+
+            /*   isLive: _this.isLive,
+            playsinline: _this.playsinline,
+            format: _this.format,
+            width: _this.width,
+            height: _this.height,
+            controlBarVisibility: _this.controlBarVisibility,
+            useH5Prism: _this.useH5Prism,
+            useFlashPrism: _this.useFlashPrism,
+
+            x5_video_position: _this.x5_video_position,
+            x5_type: _this.x5_type,
+            x5_fullscreen: _this.x5_fullscreen,
+            x5_orientation: _this.x5_orientation,
+            autoPlayDelay: _this.autoPlayDelay,
+            autoPlayDelayDisplayText: _this.autoPlayDelayDisplayText, */
+          });
+          // 绑定事件，当 AliPlayer 初始化完成后，将编辑器实例通过自定义的 ready 事件交出去
+          _this.instance.on("ready", () => {
+            this.$emit("ready", _this.instance);
+          });
           _this.instance.on("play", () => {
             this.$emit("play", _this.instance);
             document.getElementsByTagName('video')[0].style.zIndex="1"
            document.getElementsByClassName("prism-cover")[0].style.display = 'none'
            document.getElementsByClassName("prism-cover")[1].style.display = 'none'
-          });
-          _this.instance.on("pause", () => {
-            this.$emit("pause", _this.instance);
-          });
-          _this.instance.on("ended", () => {
-            this.$emit("ended", _this.instance);
-          });
-          _this.instance.on("liveStreamStop", () => {
-            this.$emit("liveStreamStop", _this.instance);
-          });
-          _this.instance.on("m3u8Retry", () => {
-            this.$emit("m3u8Retry", _this.instance);
-          });
-          _this.instance.on("hideBar", () => {
-            this.$emit("hideBar", _this.instance);
-          });
-          _this.instance.on("waiting", () => {
-            this.$emit("waiting", _this.instance);
-          });
-          _this.instance.on("snapshoted", () => {
-            this.$emit("snapshoted", _this.instance);
-          });
-        });
-      }
-    },
-    /**
-     * 播放视频
-     */
-    play: function () {
-      this.instance.play();
-    },
-    /**
-     * 暂停视频
-     */
-    pause: function () {
-      this.instance.pause();
-    },
-    /**
-     * 重播视频
-     */
-    replay: function () {
-      this.instance.replay();
-    },
-    /**
-     * 跳转到某个时刻进行播放
-     * @argument time 的单位为秒
-     */
-    seek: function (time) {
-      this.instance.seek(time);
-    },
-    /**
-     * 获取当前时间 单位秒
-     */
-    getCurrentTime: function () {
-      return this.instance.getCurrentTime();
-    },
-    dispose() {},
-    /**
-     *获取视频总时长，返回的单位为秒
-     * @returns 返回的单位为秒
-     */
-    getDuration: function () {
-      return this.instance.getDuration();
-    },
-    /**
-       获取当前的音量，返回值为0-1的实数ios和部分android会失效
-       */
-    getVolume: function () {
-      return this.instance.getVolume();
-    },
-    /**
-       设置音量，vol为0-1的实数，ios和部分android会失效
-       */
-    setVolume: function (vol) {
-      this.instance.setVolume(vol);
-    },
-    /**
-     *直接播放视频url，time为可选值（单位秒）目前只支持同种格式（mp4/flv/m3u8）之间切换暂不支持直播rtmp流切换
-     *@argument url 视频地址
-     *@argument time 跳转到多少秒
-     */
-    loadByUrl: function (url, time) {
-      this.instance.loadByUrl(url, time);
-    },
-    /**
-     * 设置播放速度
-     *@argument speed 速度
-     */
-    setSpeed: function (speed) {
-      this.instance.setSpeed(speed);
-    },
-    /**
-     * 设置播放器大小w,h可分别为400px像素或60%百分比chrome浏览器下flash播放器分别不能小于397x297
-     *@argument w 播放器宽度
-     *@argument h 播放器高度
-     */
-    setPlayerSize: function (w, h) {
-      this.instance.setPlayerSize(w, h);
-    },
-    replay(vid,playAuth) {
-      this.instance.replayByVidAndPlayAuth(vid,playAuth)
-    },
-    /**
-     * 目前只支持HTML5界面上的重载功能,暂不支持直播rtmp流切换m3u8）之间切换,暂不支持直播rtmp流切换
-     *@argument vid 视频id
-     *@argument playauth 播放凭证
-     */
-    reloaduserPlayInfoAndVidRequestMts: function (vid, playauth) {
-      this.instance.reloaduserPlayInfoAndVidRequestMts(vid, playauth);
-    },
-  },
-};
-</script>
-<!-- playauth -->
-<style>
-/* @import url(https://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css); */
-@import url(https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css);
+          });
+          _this.instance.on("pause", () => {
+            this.$emit("pause", _this.instance);
+          });
+          _this.instance.on("ended", () => {
+            this.$emit("ended", _this.instance);
+          });
+          _this.instance.on("liveStreamStop", () => {
+            this.$emit("liveStreamStop", _this.instance);
+          });
+          _this.instance.on("m3u8Retry", () => {
+            this.$emit("m3u8Retry", _this.instance);
+          });
+          _this.instance.on("hideBar", () => {
+            this.$emit("hideBar", _this.instance);
+          });
+          _this.instance.on("waiting", () => {
+            this.$emit("waiting", _this.instance);
+          });
+          _this.instance.on("snapshoted", () => {
+            this.$emit("snapshoted", _this.instance);
+          });
+        });
+      }
+    },
+    /**
+     * 播放视频
+     */
+    play: function () {
+      this.instance.play();
+    },
+    /**
+     * 暂停视频
+     */
+    pause: function () {
+      this.instance.pause();
+    },
+    /**
+     * 重播视频
+     */
+    replay: function () {
+      this.instance.replay();
+    },
+    /**
+     * 跳转到某个时刻进行播放
+     * @argument time 的单位为秒
+     */
+    seek: function (time) {
+      this.instance.seek(time);
+    },
+    /**
+     * 获取当前时间 单位秒
+     */
+    getCurrentTime: function () {
+      return this.instance.getCurrentTime();
+    },
+    dispose() {},
+    /**
+     *获取视频总时长，返回的单位为秒
+     * @returns 返回的单位为秒
+     */
+    getDuration: function () {
+      return this.instance.getDuration();
+    },
+    /**
+       获取当前的音量，返回值为0-1的实数ios和部分android会失效
+       */
+    getVolume: function () {
+      return this.instance.getVolume();
+    },
+    /**
+       设置音量，vol为0-1的实数，ios和部分android会失效
+       */
+    setVolume: function (vol) {
+      this.instance.setVolume(vol);
+    },
+    /**
+     *直接播放视频url，time为可选值（单位秒）目前只支持同种格式（mp4/flv/m3u8）之间切换暂不支持直播rtmp流切换
+     *@argument url 视频地址
+     *@argument time 跳转到多少秒
+     */
+    loadByUrl: function (url, time) {
+      this.instance.loadByUrl(url, time);
+    },
+    /**
+     * 设置播放速度
+     *@argument speed 速度
+     */
+    setSpeed: function (speed) {
+      this.instance.setSpeed(speed);
+    },
+    /**
+     * 设置播放器大小w,h可分别为400px像素或60%百分比chrome浏览器下flash播放器分别不能小于397x297
+     *@argument w 播放器宽度
+     *@argument h 播放器高度
+     */
+    setPlayerSize: function (w, h) {
+      this.instance.setPlayerSize(w, h);
+    },
+    replay(vid,playAuth) {
+      this.instance.replayByVidAndPlayAuth(vid,playAuth)
+    },
+    /**
+     * 目前只支持HTML5界面上的重载功能,暂不支持直播rtmp流切换m3u8）之间切换,暂不支持直播rtmp流切换
+     *@argument vid 视频id
+     *@argument playauth 播放凭证
+     */
+    reloaduserPlayInfoAndVidRequestMts: function (vid, playauth) {
+      this.instance.reloaduserPlayInfoAndVidRequestMts(vid, playauth);
+    },
+  },
+};
+</script>
+<!-- playauth -->
+<style>
+/* @import url(https://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css); */
+/*@import url(https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css);*/
 </style>