新课包编写

config/index.js

@@ -12,8 +12,8 @@ module.exports = {
     assetsPublicPath: '/',
     proxyTable: {
       '/api': {
-        // target: 'http://local.base-api.sing.com', // 接口的域名
-        target: 'https://wechat-test.changchangenglish.com',
+        target: 'http://local.base-api.sing.com', // 接口的域名
+        // target: 'https://wechat-test.changchangenglish.com',
         changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
       }
     },

src/components/index.vue

@@ -150,6 +150,7 @@
       },
       toMap(data) {
         if (data.periods_info) {
+          console.log(data)
           this.$router.push({
             name: 'map',
             query:
@@ -158,7 +159,6 @@
                 parent_category_id: data.periods_info.parent_category_id,
                 course_type:data.goods_info.course_type
               }
-
           })
         }else{
           Toast('该课程暂无期数')

src/components/newLesson/fun.vue

+<template>
+
+</template>
+
+<script>
+    export default {
+        name: "fun"
+    }
+</script>
+
+<style scoped>
+
+</style>

src/components/newLesson/index.vue

+<template>
+  <div>
+    <div class="header">
+      <i :class="{lessonHeader:true, defaultLook:nowShow !== 1,look:nowShow===1}" @click="nowShow = 1"></i>
+      <i :class="{lessonHeader:true, defaultPlay:nowShow !== 2,play:nowShow===2}" @click="nowShow = 2"></i>
+      <i :class="{lessonHeader:true, defaultFun:nowShow !== 3,fun:nowShow===3}" @click="nowShow = 3"></i>
+      <i class="lessonHeader home"></i>
+    </div>
+    <div>
+      <look-block v-if="nowShow === 1" :contentData="lesson.content.look"/>
+      <play-block v-if="nowShow === 2"/>
+      <fun-block v-if="nowShow === 3"/>
+    </div>
+  </div>
+</template>
+
+<script>
+  import {getLessonDetailApi} from "../../service/api";
+  import lookBlock from './look'
+  import playBlock from './play'
+  import funBlock from './fun'
+  export default {
+    name: "index",
+    data(){
+      let query = this.$route.query;
+      return {
+        periods_id:query.periods_id,
+        category_id:query.category_id,
+        elementId:query.elementId,
+        lesson:null,
+        nowShow:0
+      }
+    },
+    components:{
+      lookBlock,
+      playBlock,
+      funBlock
+    },
+    mounted(){
+      this.initPage()
+    },
+    methods:{
+      initPage(){
+        getLessonDetailApi(this.periods_id,this.category_id,this.elementId).then(res=>{
+          res.content = JSON.parse(res.content);
+          console.log(res);
+          this.lesson = res;
+          this.nowShow = 1
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+@import "../../util/public";
+.lessonHeader{background:url('/static/images/lessonHeader.png')  no-repeat;background-size:102*@toVw 334*@toVw;display: inline-block}
+.home{height:46*@toVw;width:46*@toVw;background-position:0 0;}
+.play{height:48*@toVw;width:102*@toVw;background-position:0 -46*@toVw;}
+.look{height:48*@toVw;width:102*@toVw;background-position:0 -94*@toVw;}
+.fun{height:48*@toVw;width:102*@toVw;background-position:0 -142*@toVw;}
+.defaultFun{height:48*@toVw;width:102*@toVw;background-position:0 -190*@toVw;}
+.defaultLook{height:48*@toVw;width:102*@toVw;background-position:0 -238*@toVw;}
+.defaultPlay{height:48*@toVw;width:102*@toVw;background-position:0 -286*@toVw;}
+  .header{
+    display: flex;
+    padding: 5*@toVw;
+    background:rgba(255,255,255,1);
+    box-shadow:0*@toVw 2*@toVw 3*@toVw 0*@toVw rgba(0,0,0,0.1);
+  }
+</style>

src/components/newLesson/look.vue

+<template>
+  <div class="look-content">
+    <div class="content" v-html="contentData.content">
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "look",
+    props:[
+      'contentData'
+    ]
+  }
+</script>
+
+<style scoped lang="less">
+  @import "../../util/public";
+  .look-content{
+    background: #EEEEEE;
+    padding: 20*@toVw;
+    .content{
+      background: white;
+      border-radius: 8px;
+      padding: 10*@toVw;
+    }
+  }
+</style>

src/components/newLesson/play.vue

+<template>
+
+</template>
+
+<script>
+    export default {
+        name: "play"
+    }
+</script>
+
+<style scoped>
+
+</style>

src/router/index.js

@@ -13,6 +13,13 @@ const router =new Router({
       meta:{
         deep:0
       }
+    }, {
+      path: '/newLesson',
+      name: 'newLesson',
+      component: e=>require(['@/components/newLesson'],e),// 按需加载路由对应页面
+      meta:{
+        deep:0
+      }
     }, {
       path: '/myGoodsList',
       name: 'myGoodsList',