<template> <div class="lesson"> <!--看一看1--> <transition name="fade" v-if="nowLesson && nowLesson.key === 'look1'"> <look1-div :nowLesson="nowLesson" @goNext="goNext"></look1-div> </transition> <!--玩一玩1--> <transition name="fade" v-if="nowLesson && nowLesson.key === 'play1'"> <video1-div :nowLesson="nowLesson" @goNext="goNext"></video1-div> </transition> <!--玩一玩音频--> <transition name="fade" v-if="nowLesson && nowLesson.key === 'radio1'"> <audio1-div :nowLesson="nowLesson" @goNext="goNext"></audio1-div> </transition> <!--秀宝贝1--> <transition name="fade" v-if="nowLesson && nowLesson.key === 'show1'"> <show1-div :nowLesson="nowLesson" :showData="showData" :lessonTitle="lessonTitle" :isShare="isShare" @goNext="goNext" @subLog="subLog"></show1-div> </transition> <!--加油包1--> <transition name="fade" v-if="nowLesson && nowLesson.key === 'refueling1'"> <refueling1-div :nowLesson="nowLesson" @goNext="goNext"></refueling1-div> </transition> <!--加油包2--> <transition name="fade" v-if="nowLesson && nowLesson.key === 'refueling2'"> <refueling2-div :nowLesson="nowLesson" @goNext="goNext"></refueling2-div> </transition> <img :src="starUrl" class="star-img" v-show="starShow"> </div> </template> <script> import {getLessonDetailApi,subUserLessonApi} from "../service/api"; import look1Div from './mould/look1' import video1Div from './mould/video1' import audio1Div from './mould/audio1' import show1Div from './mould/show1' import refueling1Div from './mould/refueling1' import refueling2Div from './mould/refueling2' import starUrl from '../assets/map20/star.png' export default { name: "lesson", components:{ look1Div, video1Div, audio1Div, show1Div, refueling1Div, refueling2Div }, data(){ let query = this.$route.query; let nowTime = Date.parse(new Date()); return{ periods_id:query.periods_id, isShare:false, starUrl:starUrl, category_id:query.category_id, parent_category_id:query.parent_category_id, element_id:query.element_id, type:Number(query.type), watch_list:[], lessonList:null, starShow:false, id:0, nowLesson:null, lessonTitle:null, showData:null, DocumentTitle:'唱唱启蒙英语', timeLong:nowTime, } }, mounted(){ this.initPage(); }, methods:{ // 初始化页面 initPage(){ getLessonDetailApi(this.periods_id,this.category_id,this.element_id).then(res=>{ this.lessonList = JSON.parse(res.content); this.lessonTitle = res.title; this.id = res.id; this.watch_list = res.watch_list; if(!!this.watch_list.find(i=>{return i.page_id === 1})){ this.lessonList.find(i=>{return i.name === 1|| i.name === '看一看-1'}).content.timeLang = 0 } if(!!this.watch_list.find(i=>{return i.page_type === 1})){ this.showData = this.watch_list.find(i=>{return i.page_type === 1}).learn_report } if(!!this.watch_list.find(i=>{return i.page_type === 4})){ this.isShare = true } this.nowLesson = this.lessonList.find(i=>{ if(this.type===1){ return i.name === this.type }else if(this.type===2){ return i.name === this.type }else if(this.type===3){ return i.name === this.type }else if(this.type===4){ return i.name === this.type } }); let nowNameList = this.lessonList.filter(a=>{return a.name === this.nowLesson.name && a.key === this.nowLesson.key}); this.nowLesson.content.mouldIndex = `${nowNameList.indexOf(this.nowLesson)*1 + 1}`; if(this.nowLesson.name === 1){ this.DocumentTitle = '爸妈看一看'; window._hmt.push(['_trackEvent', '看课', "切换到爸妈看一看",`periods_id=${this.periods_id}&category_id=${this.category_id}&element_id=${this.element_id}`]);//百度统计 }else if(this.nowLesson.name === 2){ this.DocumentTitle = '宝贝玩一玩'; window._hmt.push(['_trackEvent', '看课', "切换到宝贝玩一玩",`periods_id=${this.periods_id}&category_id=${this.category_id}&element_id=${this.element_id}`]);//百度统计 }else if(this.nowLesson.name === 3){ this.DocumentTitle = '爸妈秀宝贝'; window._hmt.push(['_trackEvent', '看课', "切换到爸妈秀宝贝",`periods_id=${this.periods_id}&category_id=${this.category_id}&element_id=${this.element_id}`]);//百度统计 }else if(this.nowLesson.name === 4){ this.DocumentTitle = '多元趣味课'; window._hmt.push(['_trackEvent', '看课', "切换到多元趣味课",`periods_id=${this.periods_id}&category_id=${this.category_id}&element_id=${this.element_id}`]);//百度统计 } }); }, // 提交秀宝贝记录 subLog(data){ let json = { page_type:1, page_id:3, stay_time:1, learn_report:data }; let str = data.replace(/(^\s*)|(\s*$)/g, ""); if(str && str !== ''){ window._hmt.push(['_trackEvent', '成长秀记录','有内容记录']);//百度统计 }else{ window._hmt.push(['_trackEvent', '成长秀记录','无内容记录']) } subUserLessonApi(this.id, this.category_id, this.periods_id,json).then(()=>{ }) }, backToList(){ let json = { periods_id:this.$route.query.periods_id, parent_category_id:this.$route.query.parent_category_id, course_type:this.$route.query.course_type }; this.$router.push({name:'map',query:json}) }, // 切换页面 goNext(data) { this.starShow = false; let stay_time = Date.parse(new Date()) - this.timeLong; if((!data.i && data.i !== 0)|| data.i === '' || data.i === -1){ if(data.i === -1){ if(!this.watch_list.find(i=>{return i.page_id === 5})){ this.$nextTick(()=>{ this.starShow = true; }) } let json = { page_type: 0, page_id: 5, stay_time: stay_time / 1000 }; subUserLessonApi(this.id, this.category_id, this.periods_id, json).then(res => { this.backToList() }) }else{ this.backToList() } } let page_id = 0; if(data.next){ if (this.nowLesson.name === 1) { page_id = 1 } else if (this.nowLesson.name === 2 ) { if(!this.watch_list.find(i=>{return i.page_id === 2})){ this.starShow = false; this.$nextTick(()=>{ this.starShow = true; }); } page_id = 2 } else if (this.nowLesson.name === 3) { if(!this.watch_list.find(i=>{return i.page_id === 3})){ this.starShow = false; this.$nextTick(()=>{ this.starShow = true; }); } page_id = 3 } let json = { page_type: 0, page_id: page_id, stay_time: stay_time / 1000 }; subUserLessonApi(this.id, this.category_id, this.periods_id, json).then(res => { this.timeLong += stay_time; getLessonDetailApi(this.periods_id,this.category_id,this.element_id).then(res=>{ this.watch_list = res.watch_list; if(!!this.watch_list.find(i=>{return i.page_id === 1})){ this.lessonList.find(i=>{return i.name === 1 || i.name === '看一看-1'}).content.timeLang = 0 } }) }); } this.nowLesson = ''; this.$nextTick(()=>{ this.nowLesson = this.lessonList[data.i]; let nowNameList = this.lessonList.filter(a=>{return a.name === this.nowLesson.name && a.key === this.nowLesson.key}); this.nowLesson.content.mouldIndex = `${nowNameList.indexOf(this.nowLesson)*1 + 1}`; if(this.nowLesson.name === 1){ this.DocumentTitle = '爸妈看一看'; window._hmt.push(['_trackEvent', '看课', "切换到爸妈看一看",]);//百度统计 }else if(this.nowLesson.name === 2){ this.DocumentTitle = '宝贝玩一玩'; window._hmt.push(['_trackEvent', '看课', "切换到宝贝玩一玩",]);//百度统计 }else if(this.nowLesson.name === 3){ this.DocumentTitle = '爸妈秀宝贝'; window._hmt.push(['_trackEvent', '看课', "切换到爸妈秀宝贝",]);//百度统计 }else if(this.nowLesson.name === 4){ this.DocumentTitle = '多元趣味课'; window._hmt.push(['_trackEvent', '看课', "切换到多元趣味课",]);//百度统计 } }); }, }, watch:{ DocumentTitle(value){ document.title = value } } } </script> <style scoped lang="less"> @import "../util/public"; .star-img{ position: absolute; z-index: 10; bottom: 0; width: 1px; right: 0; animation:myfirst 2s 1; animation-direction: normal } @keyframes myfirst { 0% { transform:translate(0,0) rotate(30deg) scale(0,0); } 50%{ transform:translate(-180 * @toVw,-300 * @toVw) rotate(340deg) scale(40,40) } to { transform:translate(0 * @toVw,-800 * @toVw) rotate(720deg) scale(0,0) } } .popup-block{ background-color: transparent; .tip{ position: fixed; top: 0; width: 300 * @toVw; z-index: 100; right: 0; } .showFinish-block{ background-size: 100% 100%; position: relative; top: 80 * @toVw; width: 313 * @toVw; height: 439 * @toVw; background-color: rgba(0,0,0,0.5); .header{ position: absolute; width: 100%; text-align: center; top: 110 * @toVw; img{ width: 48 * @toVw; border-radius: 1000px; } } .text1{ position: absolute; right: 125 * @toVw; width: 3em; text-align: center; top: 181 * @toVw; font-size:12px; font-family:PingFang-SC-Regular; font-weight:400; color:rgba(51,51,51,1); line-height:17px; } .text2{ position: absolute; right: 125 * @toVw; width: 3em; text-align: center; top: 225 * @toVw; font-size:12px; font-family:PingFang-SC-Regular; font-weight:400; color:rgba(51,51,51,1); line-height:17px; } .text3{ position: absolute; right: 125 * @toVw; width: 3em; text-align: center; top: 273 * @toVw; font-size:12px; font-family:PingFang-SC-Regular; font-weight:400; color:rgba(51,51,51,1); line-height:17px; } } } .lesson{ height: 100%; min-height: 500 * @toVw; overflow: auto; .finishBtn{ width: 100%; text-align: center; position: absolute; top: 375 * @toVw; img{ width: 215 * @toVw; } } } .fade-enter-active, .fade-leave-active { transition: opacity .5s; } .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { opacity: 0; } </style>