修改课程

pages/courseware/index.vue

@@ -30,12 +30,12 @@
       <h5 class="client-subtitle-title">公司于2007年成立，我们凭借创新的技术、高效的服务响应和强大的战略执行，为用户打造可靠、优质、安全易用的教育软件产品及优质专业的内容制作服务</h5>
       <div class="client-container tc">
           <ul class="learn-box-list">
-            <li><a href="#"></a><div><span><img :src="courseVideoImg1" alt="两分屏类E-Learning课程"><i></i></span><p>两分屏类E-Learning课程</p></div></li>
-            <li><a href="#"></a><div><span><img :src="courseVideoImg2" alt="三分屏类E-Learning课程"><i></i></span><p>三分屏类E-Learning课程</p></div></li>
-            <li><a href="#"></a><div><span><img :src="courseVideoImg3" alt="电子杂志类E-Learning课程"><i></i></span><p>电子杂志类E-Learning课程</p></div></li>
-            <li><a href="#"></a><div><span><img :src="courseVideoImg4" alt="FLASH图文类E-Learning课程"><i></i></span><p>FLASH图文类E-Learning课程</p></div></li>
-            <li><a href="#"></a><div><span><img :src="courseVideoImg5" alt="FLASH交互类E-Learning课程"><i></i></span><p>FLASH交互类E-Learning课程</p></div></li>
-            <li><a href="#"></a><div><span><img :src="courseVideoImg6" alt="视频类E-Learning课程"><i></i></span><p>视频类E-Learning课程</p></div></li>
+            <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9cce7bfa5285890792886060567/v.f30.mp4"></a><div><span><img :src="courseVideoImg1" alt="两分屏类E-Learning课程"><i @click="playVideo(0)"></i></span><p>两分屏类E-Learning课程</p></div></li>
+            <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9ccefbfc5285890792886061298/v.f30.mp4"></a><div><span><img :src="courseVideoImg2" alt="三分屏类E-Learning课程"><i @click="playVideo(1)"></i></span><p>三分屏类E-Learning课程</p></div></li>
+            <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9eeef6ee5285890792886133302/v.f30.mp4"></a><div><span><img :src="courseVideoImg3" alt="电子杂志类E-Learning课程"><i @click="playVideo(2)"></i></span><p>电子杂志类E-Learning课程</p></div></li>
+            <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/64f88fc65285890792885983863/v.f30.mp4"></a><div><span><img :src="courseVideoImg4" alt="FLASH图文类E-Learning课程"><i @click="playVideo(3)"></i></span><p>FLASH图文类E-Learning课程</p></div></li>
+            <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9cc1569e5285890792886059626/v.f30.mp4"></a><div><span><img :src="courseVideoImg5" alt="FLASH交互类E-Learning课程"><i @click="playVideo(4)"></i></span><p>FLASH交互类E-Learning课程</p></div></li>
+            <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9ce0a1a35285890792886070899/v.f30.mp4"></a><div><span><img :src="courseVideoImg6" alt="视频类E-Learning课程"><i @click="playVideo(5)"></i></span><p>视频类E-Learning课程</p></div></li>
           </ul>
           <a class="course-apply-btn">申请方案</a>
       </div>
@@ -47,12 +47,12 @@
       <h5 class="client-subtitle-title">该类课程主要有：长图文、视频、H5交互等多种形式。内容短小精悍，利用碎片化时间，随时随地轻松学习</h5>
       <div class="client-container tc">
         <ul class="learn-box-list">
-          <li><a href="#"></a><div><span><img :src="courseVideoImg7" alt="长图文类微课"><i></i></span><p>长图文类微课</p></div></li>
-          <li><a href="#"></a><div><span><img :src="courseVideoImg8" alt="视频类微课"><i></i></span><p>视频类微课</p></div></li>
-          <li><a href="#"></a><div><span><img :src="courseVideoImg9" alt="H5交互微课"><i></i></span><p>H5交互微课</p></div></li>
-          <li><a href="#"></a><div><span><img :src="courseVideoImg10" alt="情景动画类微课"><i></i></span><p>情景动画类微课</p></div></li>
-          <li><a href="#"></a><div><span><img :src="courseVideoImg11" alt="图文类微课"><i></i></span><p>图文类微课</p></div></li>
-          <li><a href="#"></a><div><span><img :src="courseVideoImg12" alt="PPT微课"><i></i></span><p>PPT微课</p></div></li>
+          <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9f25da7a5285890792886164670/v.f30.mp4"></a><div><span><img :src="courseVideoImg7" alt="长图文类微课"><i @click="playVideo(6)"></i></span><p>长图文类微课</p></div></li>
+          <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9cf441145285890792886083160/v.f30.mp4"></a><div><span><img :src="courseVideoImg8" alt="视频类微课"><i @click="playVideo(7)"></i></span><p>视频类微课</p></div></li>
+          <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/650aa7e15285890792885993830/v.f30.mp4"></a><div><span><img :src="courseVideoImg9" alt="H5交互微课"><i @click="playVideo(8)"></i></span><p>H5交互微课</p></div></li>
+          <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9c2e210d5285890793118303376/v.f30.mp4"></a><div><span><img :src="courseVideoImg10" alt="情景动画类微课"><i @click="playVideo(9)"></i></span><p>情景动画类微课</p></div></li>
+          <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9ee031e15285890792886129559/v.f30.mp4"></a><div><span><img :src="courseVideoImg11" alt="图文类微课"><i @click="playVideo(10)"></i></span><p>图文类微课</p></div></li>
+          <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9a582fcf5285890793118274335/v.f30.mp4"></a><div><span><img :src="courseVideoImg12" alt="PPT微课"><i @click="playVideo(11)"></i></span><p>PPT微课</p></div></li>
         </ul>
         <a class="course-apply-btn">申请方案</a>
       </div>
@@ -64,9 +64,9 @@
       <h5 class="client-subtitle-title">宣传片主要有：手绘动画、MG动画、视频实拍等多种形式。用于企业形象宣传、广告推广等</h5>
       <div class="client-container tc">
         <ul class="learn-box-list">
-          <li><a href="#"></a><div><span><img :src="courseVideoImg13" alt="手绘动画类宣传片"><i></i></span><p>手绘动画类宣传片</p></div></li>
-          <li><a href="#"></a><div><span><img :src="courseVideoImg14" alt="MG动画类宣传片"><i></i></span><p>MG动画类宣传片</p></div></li>
-          <li><a href="#"></a><div><span><img :src="courseVideoImg15" alt="视频类宣传片"><i></i></span><p>视频类宣传片</p></div></li>
+          <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9ce2c5775285890792886074523/v.f30.mp4"></a><div><span><img :src="courseVideoImg13" alt="手绘动画类宣传片"><i @click="playVideo(12)"></i></span><p>手绘动画类宣传片</p></div></li>
+          <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9cbfaddf5285890792886056576/v.f30.mp4"></a><div><span><img :src="courseVideoImg14" alt="MG动画类宣传片"><i @click="playVideo(13)"></i></span><p>MG动画类宣传片</p></div></li>
+          <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9eed5aaf5285890792886130531/v.f30.mp4"></a><div><span><img :src="courseVideoImg15" alt="视频类宣传片"><i @click="playVideo(14)"></i></span><p>视频类宣传片</p></div></li>
         </ul>
         <a class="course-apply-btn">申请方案</a>
       </div>
@@ -78,9 +78,9 @@
       <h5 class="client-subtitle-title">情景动画形式丰富多样，游戏化教学和精美动画相结合，激发学习者兴趣</h5>
       <div class="client-container tc">
         <ul class="learn-box-list">
-          <li><a href="#"></a><div><span><img :src="courseVideoImg16" alt="儿歌动画"><i></i></span><p>儿歌动画</p></div></li>
-          <li><a href="#"></a><div><span><img :src="courseVideoImg17" alt="故事教学"><i></i></span><p>故事教学</p></div></li>
-          <li><a href="#"></a><div><span><img :src="courseVideoImg18" alt="过场动画"><i></i></span><p>过场动画</p></div></li>
+          <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9cc031355285890792886057331/v.f30.mp4"></a><div><span><img :src="courseVideoImg16" alt="儿歌动画"><i @click="playVideo(15)"></i></span><p>儿歌动画</p></div></li>
+          <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9f121cdd5285890792886151677/v.f30.mp4"></a><div><span><img :src="courseVideoImg17" alt="故事教学"><i @click="playVideo(16)"></i></span><p>故事教学</p></div></li>
+          <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9ce35f5f5285890792886075881/v.f30.mp4"></a><div><span><img :src="courseVideoImg18" alt="过场动画"><i @click="playVideo(17)"></i></span><p>过场动画</p></div></li>
         </ul>
         <a class="course-apply-btn">申请方案</a>
       </div>
@@ -105,6 +105,16 @@
         </el-carousel>
       </div>
     </div>
+
+    <el-dialog
+      :title="title"
+      :visible.sync="videoDialogFlag"
+      @close="closeVideoDialog"
+      width="30%"
+      center>
+      <video controls width="300px" height="200px" :src="source"></video>
+      <span>{{footerText}}</span>
+    </el-dialog>
   </div>
 
 
@@ -113,11 +123,15 @@
 <script>
   export default {
     name:       'courseware',
-    layout:'templateA',
-    async fetch({  $axios,store, params }) {
-      try {
-        store.commit('footerFlag',false)
-      } catch(e) {
+    layout:'templateB',
+    async asyncData({ $axios, query }) {
+      console.log('query2:', query);
+      let [res1,res2] =  await Promise.all([
+                                             await $axios.$post(`/home/news/carousel`).then(res=>{
+                                               return res
+                                             }),
+                                           ])
+      return {topCarousels : res1.data.data,
 
       }
     },
@@ -146,11 +160,130 @@
         courseVideoImg16:  require(`~/static/images/client/course/course-video-img16.png`),
         courseVideoImg17:  require(`~/static/images/client/course/course-video-img17.png`),
         courseVideoImg18:  require(`~/static/images/client/course/course-video-img18.png`),
+        videoDialogFlag:false,
+        source:'',
+        footerText:'',
+        title:'',
+        videoArray:[
+          {
+            url:'https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9cce7bfa5285890792886060567/v.f30.mp4',
+            fotterText:'教师视频与讲课PowerPoint课件一并摄制下来生成的课件，因此被称为‘二分屏’课件。',
+            title:'两分屏类E-Learning课程',
+          },
+          {
+            url:'https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9ccefbfc5285890792886061298/v.f30.mp4',
+            fotterText:'是把教师视频与PowerPoint课件一并摄制下来，生成电脑格式的文件，通过Windows系统里的IE浏览器进行播放',
+            title:'三分屏类E-Learning课程',
+          },
+          {
+            url:'https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9eeef6ee5285890792886133302/v.f30.mp4',
+            fotterText:'兼具了平面与互联网两者的特点，且融入了图像、文字、声音、视频、游戏等相互动态结合来呈现给读者',
+            title:'电子杂志类E-Learning课程',
+          },
+          {
+            url:'https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/64f88fc65285890792885983863/v.f30.mp4',
+            fotterText:'主要以图片的形式表现教学者的作用和教与学之间的关系，从而改变教育的本质',
+            title:'FLASH图文类E-Learning课程',
+          },
+          {
+            url:'https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9cc1569e5285890792886059626/v.f30.mp4',
+            fotterText:'是可以操作互动的教学，简单的比较，交互式是游戏',
+            title:'FLASH交互类E-Learning课程',
+          },
+          {
+            url:'https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9ce0a1a35285890792886070899/v.f30.mp4',
+            fotterText:'以视频的形式表现出要授予的课程内容',
+            title:'视频类E-Learning课程',
+          },
+
+          //微课程
+
+          {
+            url:'https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9f25da7a5285890792886164670/v.f30.mp4',
+            fotterText:'是通过图片发布文字信息的一种形式',
+            title:'长图文类微课',
+          },
+          {
+            url:'https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9cf441145285890792886083160/v.f30.mp4',
+            fotterText:'以简短视频的形式讲授一两个知识点，没有复杂的课程体',
+            title:'视频类微课',
+          },
+          {
+            url:'https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/650aa7e15285890792885993830/v.f30.mp4',
+            fotterText:'指页面内可以包含图片、链接，甚至音乐、程序等非文字元素互动教学',
+            title:'H5交互微课',
+          },
+
+          {
+            url:'https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9c2e210d5285890793118303376/v.f30.mp4',
+            fotterText:'以故事情景引出产品内容的介绍',
+            title:'情景动画类微课',
+          },
+          {
+            url:'https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9ee031e15285890792886129559/v.f30.mp4',
+            fotterText:'主要以图片的形式表现，图片有手绘原素相结合，更加明确的展示了课程的内容',
+            title:'图文类微课',
+          },
+          {
+            url:'https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9a582fcf5285890793118274335/v.f30.mp4',
+            fotterText:'主要是以教师根据教学内容PPT进行假想授课',
+            title:'PPT微课',
+          },
+
+
+
+          //宣传片
+          {
+            url:'https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9ce2c5775285890792886074523/v.f30.mp4',
+            fotterText:'一张张手绘画出来制作合成动画形式',
+            title:'手绘动画类宣传片',
+          },
+          {
+            url:'https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9cbfaddf5285890792886056576/v.f30.mp4',
+            fotterText:'是平面设计与动画片之间的一种产物，MG的重点是非叙述性非具象化的视觉表现形式，节奏感更强，动画的流畅与每屏之前的衔接性更好',
+            title:'MG动画类宣传片',
+          },
+          {
+            url:'https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9eed5aaf5285890792886130531/v.f30.mp4',
+            fotterText:'以拍摄视频的形式呈现出企业的介绍和产品宣传',
+            title:'视频类宣传片',
+          },
+          // 情景动画
+          {
+            url:'https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9cc031355285890792886057331/v.f30.mp4',
+            fotterText:'以经典儿歌结合动画表达出课程要讲授的内容',
+            title:'儿歌动画',
+          },
+          {
+            url:'https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9f121cdd5285890792886151677/v.f30.mp4',
+            fotterText:'是教师在课堂上根据所讲授的内容穿插些相关的简明、短小故事、以说明注解强调所讲内容',
+            title:'故事教学',
+          },
+          {
+            url:'https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9ce35f5f5285890792886075881/v.f30.mp4',
+            fotterText:'以情景动画形式丰富多样，游戏化教学和精美动画相结合',
+            title:'过场动画',
+          },
+        ],
+
       };
     },
     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 = '';
+      }
     },
     created() {