修改播放视频

pages/resources/index.vue

@@ -53,7 +53,7 @@
           <li>
             <a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9cc031355285890792886057331/v.f30.mp4"></a>
             <div>
-              <span><img :src="courseVideoImg16" alt="FLASH动画课程"><i @click="playVideo(15)"></i></span>
+              <span><img :src="courseVideoImg16" alt="FLASH动画课程"><i @click="playVideo(0)"></i></span>
               <p>FLASH动画课程</p>
               <p class="course-explain-black">主要以图文动画的形式表现教学者的作用和教与学之间的关系，从而改变学习的本质</p>
             </div>
@@ -61,14 +61,14 @@
           <li>
             <a href="https://spdb.mtavip.com/65615d29a5da4478b8d4ebfd6810d2da/65ab43fa5fb942aab2af981c2f7ea5c7-da005714eae365940692db31fbf6e9b8-fd.mp4"></a>
             <div>
-              <span><img :src="courseVideoImg8" alt="视频课程"><i @click="playVideo(7)"></i></span>
+              <span><img :src="courseVideoImg8" alt="视频课程"><i @click="playVideo(1)"></i></span>
               <p>视频课程</p>
               <p class="course-explain-black">把教师视频与PowerPoint课件一并摄制下来，生成为视频课件</p>
             </div>
           </li>
           <li>
             <a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9ce0a1a35285890792886070899/v.f30.mp4"></a>
-            <div><span><img :src="courseVideoImg6" alt="名师讲堂"><i @click="playVideo(5)"></i></span>
+            <div><span><img :src="courseVideoImg6" alt="名师讲堂"><i @click="playVideo(2)"></i></span>
               <p>名师讲堂</p>
               <p class="course-explain-black">各行各业讲师汇聚一堂，为不同专属领域打造明星级课堂</p>
             </div>
@@ -97,6 +97,16 @@
         </ul>
       </div>
     </div>
+    <!--  视频播放弹窗 -->
+    <el-dialog
+      :title="title"
+      :visible.sync="videoDialogFlag"
+      @close="closeVideoDialog"
+      class="course-video-dialog"
+      center>
+      <video controls :src="source" class="course-video-box"></video>
+      <p>{{footerText}}</p>
+    </el-dialog>
   </div>
 </template>
 
@@ -129,6 +139,27 @@
         courseVideoImg6:  require(`~/static/images/client/course/course-video-img6.png`),
         courseVideoImg8:  require(`~/static/images/client/course/course-video-img8.png`),
         courseVideoImg16:  require(`~/static/images/client/course/course-video-img16.png`),
+        videoArray:[
+          {
+            url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/113211bf-1747089269d-0006-732a-c93-687b7.mp4',
+            fotterText:'以情景动画形式丰富多样，游戏化教学和精美动画相结合',
+            title:'过场动画',
+          },
+          {
+            url:'https://spdb.mtavip.com/65615d29a5da4478b8d4ebfd6810d2da/65ab43fa5fb942aab2af981c2f7ea5c7-da005714eae365940692db31fbf6e9b8-fd.mp4',
+            fotterText:'以简短视频的形式讲授一两个知识点，没有复杂的课程体',
+            title:'视频类微课',
+          },
+          {
+            url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/359ee794-17470899bcf-0006-732a-c93-687b7.mp4',
+            fotterText:'以视频的形式表现出要授予的课程内容',
+            title:'视频类E-Learning课程',
+          },
+        ],
+        videoDialogFlag:false,
+        source:'',
+        footerText:'',
+        title:'',
       };
     },
     head(){
@@ -148,6 +179,20 @@
     },
     computed: {},
     methods:  {
+      playVideo(index){
+        this.videoDialogFlag = true
+        this.source = this.videoArray[index].url
+        this.footerText = this.videoArray[index].fotterText
+        this.title = this.videoArray[index].title
+      },
+
+      closeVideoDialog(){
+
+        this.videoDialogFlag = false;
+        this.source = '';
+        this.footerText = '';
+        this.title = '';
+      },
       goIntroductionPage(){
         this.$router.push({ name: 'introduction' });
       },