Skip to content

H
h5-base
Commit b1568128 authored by wangwei's avatar wangwei
Browse files
Options

新课包编写

parent 31eda7a9
Hide whitespace changes
Inline Side-by-side
Showing with 17 additions and 544 deletions
config/index.js
View file @ b1568128
...@@ -12,8 +12,8 @@ module.exports = { ...@@ -12,8 +12,8 @@ module.exports = {
assetsPublicPath: '/', assetsPublicPath: '/',
proxyTable: { proxyTable: {
'/api': { '/api': {
target: 'http://local.base-api.sing.com', // 接口的域名 // target: 'http://local.base-api.sing.com', // 接口的域名
// target: 'https://wechat-test.changchangenglish.com', target: 'https://wechat-test.changchangenglish.com',
changeOrigin: true, // 如果接口跨域，需要进行这个参数配置 changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
} }
}, },
......
src/components/map/index.vue
View file @ b1568128
<template> <template>
<div> <div>
<div class="map" v-if="total !== 20 && total !== 0 && total !== null">
<once-map :total="total" :lessonList="lessonList" :shuoming="shuoming" @showDia="showDia"/>
</div>
<div v-if="total === 0" style="margin: 100px 0;text-align: center;font-size: 28px;">
尚未开课
</div>
<div v-if="total === null" style="margin: 100px 0;text-align: center;font-size: 28px;color: #888">
请等待...
</div>
<div class="map" v-if="total === 20">
<div v-if="!titleName || titleName.category_name !== '数字'">
<map-default :total="total" :lessonList="lessonList" :shuoming="shuoming" @showDia="showDia"/>
</div>
<div v-if="titleName && titleName.category_name === '数字'">
<number-map :total="total" :lessonList="lessonList" :shuoming="shuoming" @showDia="showDia"/>
</div>
</div>
<img :src="imgUrl.catalog" class="catalog-icon" @click="showCatalogDialog" v-if="lessonList.length > 0">
<img :src="imgUrl.switchTitle" class="switch-icon" @click="showCourseList" v-if="courseList.length > 0"/>
<bottom-tab/>
<!--课程板块弹窗-->
<mt-popup v-model="showLesson" style="background:transparent ">
<div class="lesson-block">
<img :src="imgUrl.lessonBg" class="lesson-bg"/>
<img :src="imgUrl.close" class="close" @click="showLesson = false"/>
<div class="age-choose" v-if="thisLessonBox && thisLessonBox.ele_list.length > 1">
<div :class="{active:thisLesson.max_age === 3}" @click="chooseAge(3)">0-3岁</div>
<div :class="{active:thisLesson.max_age === 6}" @click="chooseAge(6)">4-6岁</div>
</div>
<div class="list-block" v-if="thisLesson">
<div class="img-block">
<img :src="imgUrl.look" class="look list" @click="goToLesson('1')"/>
</div>
<div class="img-block" v-if="thisLesson">
<img :src="imgUrl.play" class="play list" @click="goToLesson('2')"/>
</div>
<div class="img-block">
<img :src="imgUrl.show" class="show list" @click="goToLesson('3')"/>
</div>
<div class="img-block">
<img :src="imgUrl.jiayou" class="jiayou list" @click="goToLesson('4')"/>
</div>
</div>
</div>
</mt-popup >
<!--说明文字弹窗-->
<mt-popup v-model="shuoming.show" style="background:transparent ">
<div class="shuoming-block" :style="{backgroundImage:`url(${imgUrl.smBg})`}">
<img :src="imgUrl.close" class="close" @click="shuoming.show = false"/>
<div class="content">
<h1>课程介绍：</h1>
欢迎各位来到唱唱英语训练营，我们在每一天的课程中都准备了精彩的英语学习、唱动体验内容等着您哦，通过每日坚持学习与分享打卡收集星星，更可以在课程全部完成后用星星兑换神秘奖品哦！快来带着宝贝一起愉快的在玩耍中学习英语吧！
<h1 class="se">规则介绍：</h1>
1.地图中每一个浮动标志物（岛屿、树屋、房屋等）都对应着当天进行中的课程。
<br>
2.地图中显示灰色的课程是因课程还未开放，请耐心等待，我们会根据课程进度依次开放。
<br>
3.每一天的课程最多可以收集3颗星星。
<br>
4.完成一天的课程（即爸妈看一看和宝贝玩一玩单元）就可获得一颗星星。
<br>
5.填写每日宝贝成长秀并且提交后可获得一颗星星。
<br>
6.完成今日所有课程返回列表后获得最后一颗星星。
<br>
7.完成地图中所有课程内容并且集齐所有星星后，请联系您的私人老师兑换什么奖品哦！
</div>
</div>
</mt-popup>
<!--切换主题弹窗-->
<mt-popup v-model="showChoose" :modal="true" style="background:transparent " :closeOnClickModal="false">
<div class="choose-block" :style="{backgroundImage: `url(${imgUrl.switchBg})`}">
<img :src="imgUrl.closeRed" class="close" @click="closeChoose"/>
<div class="choose-content">
<div class="choose-list" v-for="data in courseList">
<img :src="imgUrl.sureIcon" class="sure-icon" v-if="chooseTitle === data.category_id">
<span @click="subLesson(data)">{{data.category_name}}</span>
</div>
</div>
<img :src="imgUrl.catalogBtn" class="sure-btn" @click="changeLesson"/>
<img :src="imgUrl.switchT" class="title"/>
</div>
</mt-popup>
<!--老师二维码弹窗-->
<mt-popup v-model="teacherQ2">
<div class="teacher-block">
<img :src="imgUrl2.teacherBg" class="teacher-bg"/>
<img :src="teacherDetail.qr" class="qr" v-if="teacherDetail">
<div class="content-text">
<div class="title-text">
请长按识别图中二维码添加老师
</div>
并截图发送领取神秘礼品哦
</div>
<div class="closeBtn" @click="teacherQ2 = false"></div>
</div>
</mt-popup>
<!--当月目录弹窗-->
<mt-popup v-model="showCatalog" :modal="true" style="background:transparent " :closeOnClickModal="false">
<div class="catalog-block" :style="{backgroundImage: `url(${imgUrl.catalogBg})`}">
<img :src="imgUrl.closeRed" class="close" @click="closeCatalog"/>
<div class="choose-content">
<div class="choose-list" v-for="data in lessonList">
<span @click="returnLesson(data)">{{data.title}}</span>
</div>
</div>
<img :src="imgUrl.catalogTitle" class="title"/>
</div>
</mt-popup>
</div> </div>
</template> </template>
<script> <script>
import {mapImage,IndexImage} from "../../util/imgUrl"; import {getCourseListApi,getLessonDetailApi} from "../../service/api";
import {getLessonListApi,getCourseListApi,getTeacherApi} from "../../service/api";
import bottomTab from '../public/bottomTab'
import onceMap from './once'
import mapDefault from './mapDefault'
import numberMap from './numberMap'
import { Toast,MessageBox } from 'mint-ui'
export default { export default {
data(){ name: "mapDefault",
data() {
return { return {
periods_id:this.$route.query.periods_id, shopType:this.$route.query.course_type,
teacherQ2:false, periods_id:this.$route.query.periods_id
parent_category_id:Number(this.$route.query.parent_category_id),
imgUrl:mapImage,
imgUrl2:IndexImage,
chooseTitle:Number(this.$route.query.parent_category_id),
lessonList:[],
courseList:[],
lesson:{},
showCatalog:false,
thisLessonBox:false,
total:null,
teacherDetail:null,
showChoose:false,
showLesson:false,
shuoming:{
show:false
},
thisLesson:false
} }
}, },
computed:{
titleName(){
let lesson = this.courseList.find(i=>{
return i.category_id===Number(this.parent_category_id)
});
this.lesson =lesson;
return lesson
},
indexOfLesson(){
return this.courseList.findIndex(i=>i.category_id===Number(this.parent_category_id))
},
},
components:{
bottomTab,
onceMap,
mapDefault,
numberMap
},
mounted(){ mounted(){
this.initPage() this.initPage()
}, },
methods:{ methods:{
returnLesson(data){
this.closeCatalog();
this.$nextTick(()=>{
let i = this.lessonList.indexOf(data)+1;
document.getElementsByClassName('land20'+i)[0].scrollIntoView({behavior:'smooth',start:'center',block: "end"})
});
},
starNum(data,page_id){
let ret = false;
data.ele_list.forEach(i=>{
if(i.watch_list && i.watch_list.find(i=>{return i.page_id === page_id })){
ret = true
}
});
return ret
},
chooseAge(a){
let thisLesson = this.thisLessonBox.ele_list.find(i=>{
return i.max_age === a
});
if(!!thisLesson){
this.thisLesson = thisLesson
}else{
MessageBox('错误', '暂无课程');
}
},
subLesson(data){
this.chooseTitle = data.category_id;
},
changeLesson(){
this.$router.push({name:'map',query:{periods_id:this.periods_id,parent_category_id:this.chooseTitle,course_type:this.$route.query.course_type}});
this.parent_category_id = this.chooseTitle;
this.showChoose = false;
document.getElementsByClassName('child-view')[0].style.cssText = '-webkit-overflow-scrolling:touch;';
this.$nextTick(()=>{
this.initPage()
});
},
onValuesChange(a,b){
this.lesson = b[0]
},
initPage(){ initPage(){
if(this.$route.query.course_type == 0){
getCourseListApi(this.periods_id).then(res=>{
this.courseList = res;
});
}
if(this.parent_category_id){
getLessonListApi(this.periods_id,{category_id:this.parent_category_id}).then(res=>{
this.lessonList = res.list;
this.total = res.periods_info.current_watch_num || 0;
if(this.$route.query.category_id){
let lesson = this.lessonList.find(i=>{
return i.category_id==this.$route.query.category_id
});
this.showDia(lesson)
}else{
if(res.list && res.list.length > 0){
this.$nextTick(function(){
document.getElementById('nowLesson').scrollIntoView({behavior:'smooth',start:'center',block: "end"})
})
}
}
});
}else{
} getCourseListApi(this.periods_id).then(res=>{
getTeacherApi().then(res=>{
this.teacherDetail = res;
})
},
showDia(data){
this.thisLesson = data.ele_list[0];
this.thisLessonBox = data;
this.showLesson = true
},
showCatalogDialog(){
this.showCatalog = true;
document.getElementsByClassName('child-view')[0].style.overflow = 'hidden'
},
showCourseList(){
this.chooseTitle = this.parent_category_id;
this.showChoose = true;
document.getElementsByClassName('child-view')[0].style.overflow = 'hidden'
},
closeCatalog(){
this.showCatalog = false;
document.getElementsByClassName('child-view')[0].style.cssText = '-webkit-overflow-scrolling:touch;';
}, })
closeChoose(){
this.showChoose = false;
document.getElementsByClassName('child-view')[0].style.cssText = '-webkit-overflow-scrolling:touch;';
},
goToLesson(type){
let typeOption = {
1:'爸妈看一看',
2:'宝贝玩一玩',
3:'宝贝成长秀',
4:'多元趣味课',
};
window._hmt.push(['_trackEvent', '进入课程',typeOption[type],]);//百度统计
let query = {
periods_id:this.thisLessonBox.periods_id,
category_id:this.thisLessonBox.category_id,
parent_category_id:this.parent_category_id,
element_id:this.thisLesson.id,
course_type:this.$route.query.course_type,
type:type
};
this.$router.push({name:'lesson',query:query})
} }
} }
} }
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@import "../../util/public"; @import "../../util/public";
.box-img{ .map{background:url('/static/images/map.png') no-repeat;background-size:40px 128px}
position: fixed; .defultStar{height:20px;width:20px;background-position:0 0;}
left: 14*@toVw; .right{height:20px;width:20px;background-position:0 -20px;}
bottom: 60*@toVw; .actStar{height:20px;width:20px;background-position:0 -40px;}
width: 70*@toVw; .clock{height:28px;width:28px;background-position:0 -60px;}
} .money{height:40px;width:40px;background-position:0 -88px;}
.catalog-icon{
position: fixed;
z-index: 3;
left: 12 * @toVw;
bottom: 66 * @toVw;
width: 58 * @toVw;
}
.switch-icon{
position: fixed;
z-index: 3;
left: 12 * @toVw;
bottom: 150 * @toVw;
width: 58 * @toVw;
}
.lesson-block{
position: relative;
background: rgba(0,0,0,0.5);
width: 308*@toVw;
height: 364*@toVw;
.lesson-bg{
width: 308*@toVw;
height: 364*@toVw;
position: relative;
}
.close{
top: 10*@toVw;
position: absolute;
right: 10*@toVw;
width: 16*@toVw;
}
.age-choose{
position: absolute;
width: 292*@toVw;
border-radius: 8 * @toVw;
top: 43 * @toVw;
height: 30 * @toVw;
line-height: 30 * @toVw;
text-align: center;
background: #666;
color: white;
left: 50%;
margin-left: -146*@toVw;
overflow: hidden;
div{
display: inline-block;
width: 50%;
float: left;
&.active{
background: white;
color: #666;
}
}
}
.list-block{
width: 276*@toVw;
height: 264*@toVw;
border-radius: 8px;
position: absolute;
top: 76*@toVw;
background: white;
left: 50%;
margin-left: -146*@toVw;
padding: 8*@toVw;
.img-block{
position: relative;
overflow: hidden;
border-radius: 8px;
.disable-block{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 7px;
border-radius: 8px;
text-align: center;
background-color: rgba(0,0,0,0.3);
img{
width: 25 * @toVw;
margin-top: 15 * @toVw;
}
}
.list{
width: 100%;
margin-bottom: 3*@toVw;
}
}
}
}
.teacher-block{
position: relative;
width: 74.66666667vw;
background-color: rgba(0,0,0,0.7);
.teacher-bg{
width: 280*@toVw;
}
.qr{
width: 138*@toVw;
height: 138*@toVw;
position: absolute;
top:65 * @toVw;
left: 70 * @toVw;
}
.content-text{
width: 100%;
text-align: center;
position: absolute;
top: 315 * @toVw;
font-size:12 * @toVw;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(153,153,153,1);
line-height:23px;
.title-text{
color: #333;
font-family:PingFang-SC-Medium;
font-weight:500;
margin-bottom: 5 * @toVw;
font-size: 17*@toVw;
}
}
.closeBtn{
position: absolute;
width: 30*@toVw;
height: 30*@toVw;
right: 8*@toVw;
top: 8*@toVw;
}
}
.shuoming-block{
width: 308 * @toVw;
height: 435 *@toVw;
background-size: 100% 100%;
border-radius: 8px;
position: relative;
.close{
position: absolute;
top: 10 * @toVw;
right: 10 * @toVw;
width: 16 * @toVw;
}
.content{
background: white;
width: 262 * @toVw;
height: 313 * @toVw;
border-radius: 8px;
border: 1px solid #333;
line-height: 1.6em;
font-size: 12px;
position: relative;
top: 77 * @toVw;
color: #333;
padding: 15*@toVw;
overflow: auto;
h1{
font-size: 16px;
margin-bottom: 5px;
&.se{
margin-top: 10px;
}
}
}
}
.choose-block{
width: 236 * @toVw;
position: relative;
height: 216 * @toVw;
padding: 82 * @toVw 16 * @toVw 56*@toVw 16 * @toVw;
text-align: center;
font-size: 14 * @toVw;
background-size: 100% 100%;
.choose-content{
width: 236 * @toVw;
position: relative;
box-shadow:1px 1px 2px 0px rgba(153,153,153,0.5);
line-height: 36 * @toVw;
height: 216 * @toVw;
border-radius: 4 * @toVw;
background: white;
margin-bottom: 30 * @toVw;
overflow: auto;
.choose-list{
position: relative;
}
.sure-icon{
width: 20 * @toVw;
position: absolute;
left: 48 * @toVw;
top: 8 * @toVw;
}
.choose-list:nth-child(2n){
background: #eee;
}
}
.title{
width: 192 * @toVw;
position: absolute;
top: 33 * @toVw;
left: 38 * @toVw;
background: transparent;
}
.sure-btn{
position: absolute;
width: 235 * @toVw;
left: 16 * @toVw;
bottom: 10 * @toVw;
}
.close{
position: absolute;
top: 5 * @toVw;
right: 5 * @toVw;
width: 20 * @toVw;
}
.sureBtn{
width: 268px;
}
}
.catalog-block{
width: 236 * @toVw;
position: relative;
height: 302 * @toVw;
padding: 82 * @toVw 16 * @toVw 18*@toVw 16 * @toVw;
text-align: center;
font-size: 14 * @toVw;
background-size: 100% 100%;
.choose-content{
width: 236 * @toVw;
position: relative;
box-shadow:1px 1px 2px 0px rgba(153,153,153,0.5);
line-height: 36 * @toVw;
height: 302 * @toVw;
border-radius: 4 * @toVw;
background: white;
margin-bottom: 30 * @toVw;
overflow: auto;
.choose-list{
position: relative;
}
.sure-icon{
width: 20 * @toVw;
position: absolute;
left: 48 * @toVw;
top: 8 * @toVw;
}
.choose-list:nth-child(2n){
background: #eee;
}
}
.title{
width: 237 * @toVw;
position: absolute;
top: 22 * @toVw;
left: 15 * @toVw;
background: transparent;
}
.sure-btn{
position: absolute;
width: 235 * @toVw;
left: 16 * @toVw;
bottom: 10 * @toVw;
}
.close{
position: absolute;
top: 5 * @toVw;
right: 5 * @toVw;
width: 20 * @toVw;
}
.sureBtn{
width: 268px;
}
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment