Skip to content

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

新课包编写

parent b1568128
Hide whitespace changes
Inline Side-by-side
Showing with 477 additions and 16 deletions
config/index.js
View file @ db797dc1
...@@ -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/index.vue
View file @ db797dc1
...@@ -150,6 +150,7 @@ ...@@ -150,6 +150,7 @@
}, },
toMap(data) { toMap(data) {
if (data.periods_info) { if (data.periods_info) {
console.log(data)
this.$router.push({ this.$router.push({
name: 'map', name: 'map',
query: query:
...@@ -158,7 +159,6 @@ ...@@ -158,7 +159,6 @@
parent_category_id: data.periods_info.parent_category_id, parent_category_id: data.periods_info.parent_category_id,
course_type:data.goods_info.course_type course_type:data.goods_info.course_type
} }
}) })
}else{ }else{
Toast('该课程暂无期数') Toast('该课程暂无期数')
......
src/components/map/index.vue
View file @ db797dc1
<template> <template>
<div> <div>
<div class="unit-block">
<swiper :options="swiperOption" class="banner" ref="mySwiper">
<swiper-slide v-for="(data,index) in unitList" :key="index">
<div :class="{'unit-li':true,active:data.category_id == parent_category_id}" @click="changeCateGory(data)">
<div>
Unit
</div>
{{data.category_name}}
</div>
</swiper-slide>
</swiper>
</div>
<div class="lesson-block">
<div class="card-block" v-for="(data,index) in lessonList">
<img :src="data[0].cover"/>
<div class="card-li" v-for="(item,x) in data" @click="showDia(item)">
<div>
<div class="title">
{{item.title | substr10}}
</div>
<div class="tips">
{{item.ele_list[0].title}}
</div>
</div>
<div>
<i class="map actStar" v-for="i in item.ele_list[0].star_num"></i>
<i class="map defultStar" v-for="a in 3-item.ele_list[0].star_num"></i>
</div>
<div>
<i :class="{map:true,right:index !== item.length-1,money:index === lessonList.length-1 && x === data.length-1}"></i>
</div>
</div>
<div class="card-li" v-for="a in 5- data.length" @click="showDia(item)">
<div class="clock-block">
<div class="map clock">
</div>
<br>
课程还未开始
</div>
</div>
</div>
</div>
<mt-popup
v-model="popupVisible" style="background: transparent">
<div v-if="thisLesson" class="popup-block">
<i class="map close" @click="popupVisible=false"></i>
<div class="header" :style="{backgroundImage:`url(${diaBGI})`}">
<div class="title">
{{thisLesson.title}}
</div>
<div class="tips" v-if="thisLesson.content.tips">
{{thisLesson.content.tips.content}}
</div>
</div>
<div class="content" v-if="thisLesson.content.tips">
<div class="tips-title">{{thisLesson.content.tips.title1}}</div>
<div class="title-content">
<ul>
<li v-for="data in splitContent">{{data}}</li>
</ul>
</div>
<div class="tips-title">{{thisLesson.content.tips.title2}}</div>
<div class="title-content">{{thisLesson.content.tips.title2_content}}</div>
</div>
<div>
<i class="map goLesson" @click="goDetail()"></i>
</div>
</div>
</mt-popup>
</div> </div>
</template> </template>
<script> <script>
import {getCourseListApi,getLessonDetailApi} from "../../service/api"; import {getCourseListApi,getLessonDetailApi,getLessonListApi} from "../../service/api";
import diaBGI from '../../assets/newLesson/diaBG.png'
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import {Indicator} from 'mint-ui'
export default { export default {
name: "mapDefault", name: "mapDefault",
components:{
swiper,
swiperSlide,
},
data() { data() {
return { return {
shopType:this.$route.query.course_type, shopType:this.$route.query.course_type,
periods_id:this.$route.query.periods_id diaBGI:diaBGI,
periods_id:this.$route.query.periods_id,
parent_category_id:this.$route.query.parent_category_id,
unitList:[],
popupVisible:false,
lessonList:[],
lesson:'',
thisLesson:null,
swiperOption: {
slidesPerView:4,
pagination: {
el: '.swiper-pagination'
}
},
} }
}, },
mounted(){ mounted(){
this.initPage() this.initPage();
},
filters:{
substr10(value){
return value.substr(0,14)
}
},
computed: {
swiper() {
return this.$refs.mySwiper.swiper
},
splitContent(){
let arr = [];
if(this.thisLesson.content.tips.title1_content){
arr = this.thisLesson.content.tips.title1_content.split('\n');
}
return arr
},
}, },
methods:{ methods:{
// 进入课程
goDetail(){
if(this.thisLesson.content.tips){
let query = {
periods_id:this.periods_id,
category_id:this.thisLesson.category_id,
elementId:this.thisLesson.id,
};
this.$router.push({name:'newLesson',query:query})
}else{
let query = {
periods_id:this.periods_id,
category_id:this.thisLesson.category_id,
parent_category_id:this.parent_category_id,
element_id:this.thisLesson.id,
course_type:this.$route.query.course_type,
type:'1'
};
this.$router.push({name:'lesson',query:query})
}
},
// 切换主题
changeCateGory(data){
this.parent_category_id = data.category_id;
this.$router.push({name:'map',query:{periods_id:this.periods_id,course_type:this.shopType,parent_category_id: this.parent_category_id}});
this.getLessonList()
},
// 显示课程弹窗
showDia(data){
Indicator.open({
spinnerType: 'triple-bounce'
});
getLessonDetailApi(this.periods_id,data.category_id,data.ele_list[0].id).then(res=>{
res.content = JSON.parse(res.content);
this.thisLesson = res;
this.popupVisible=true;
Indicator.close();
})
},
// 页面初始化
initPage(){ initPage(){
this.getLessonList();
this.getUnitList()
},
getUnitList(){
this.unitList = [];
getCourseListApi(this.periods_id).then(res=>{ getCourseListApi(this.periods_id).then(res=>{
this.unitList = res;
this.$nextTick(()=>{
this.swiper.slideTo(this.unitList.length, 300, false)
})
}) })
},
getLessonList(){
this.lessonList=[];
getLessonListApi(this.periods_id,{category_id:this.parent_category_id}).then(res=>{
for(let i = 0; i < res.list.length; i += 5 ){
let list = [];
for (let j = i;j < i+5 && j < res.list.length; j++){
list.push(res.list[j])
}
this.lessonList.push(list)
}
});
} }
} }
} }
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@import "../../util/public"; @import "../../util/public";
.map{background:url('/static/images/map.png') no-repeat;background-size:40px 128px} // 精灵图
.defultStar{height:20px;width:20px;background-position:0 0;} .map{background:url('/static/images/map.png') no-repeat;background-size:136*@toVw 207*@toVw}
.right{height:20px;width:20px;background-position:0 -20px;} .defultStar{height:20*@toVw;width:20*@toVw;background-position:0 0;;display: inline-block}
.actStar{height:20px;width:20px;background-position:0 -40px;} .right{height:20*@toVw;width:20*@toVw;background-position:0 -20*@toVw;display: inline-block}
.clock{height:28px;width:28px;background-position:0 -60px;} .close{position:absolute;top:-11*@toVw;right: -32*@toVw ;height:20*@toVw;width:20*@toVw;background-position:0 -40*@toVw;display: inline-block}
.money{height:40px;width:40px;background-position:0 -88px;} .actStar{height:20*@toVw;width:20*@toVw;background-position:0 -60*@toVw;display: inline-block}
.clock{height:28*@toVw;width:28*@toVw;background-position:0 -80*@toVw;display: inline-block}
.money{height:40*@toVw;width:40*@toVw;background-position:0 -108*@toVw;display: inline-block;animation: dodge 1s infinite;}
.goLesson{height:59*@toVw;width:136*@toVw;background-position:0 -148*@toVw;display: inline-block;margin-top:15*@toVw;margin-bottom: 10*@toVw }
// 主题列表
.unit-block{
box-shadow:0*@toVw 1*@toVw 4*@toVw 0*@toVw rgba(204,204,204,0.5);
.unit-li{
width: 68 * @toVw;
text-align: center;
margin: 10 * @toVw 10 * @toVw 0 10px;
height:52 * @toVw;
border-radius:8 * @toVw 8 * @toVw 0px 0px;
font-size:12* @toVw;
font-family:PingFangSC-Semibold;
font-weight:600;
padding-top: 12 * @toVw;
color:rgba(102,102,102,1);
line-height:20* @toVw;
&.active{
background: #60ADF0;
color: #ffffff;
}
}
}
// 课包样式
.lesson-block{
.card-block{
box-shadow:0* @toVw 2* @toVw 5* @toVw 1* @toVw rgba(153,153,153,0.56);
margin: 20 * @toVw;
border-radius: 8px;
img{
width: 100%;
height: 140 *@toVw;
}
.card-li{
display: flex;
margin: auto;
padding: 10 * @toVw;
border-bottom: 1 * @toVw solid #EEEEEE;
.clock-block{
text-align: center;
font-size:12px;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(153,153,153,1);
line-height:17px;
}
.title{
font-size:16px;
font-family:PingFangSC-Semibold;
font-weight:600;
color:rgba(0,0,0,1);
line-height:28px;
}
.tips{
font-size:14px;
font-family:PingFang-SC-Medium;
font-weight:500;
max-width: 170 * @toVw;
overflow: hidden;
white-space:nowrap;
text-overflow:ellipsis;
color:rgba(102,102,102,1);
line-height:20px;
}
}
}
}
// 弹窗样式
.popup-block{
text-align: center;
background: white;
border-radius: 8*@toVw;
.header{
width: 276 * @toVw;
height: 137 * @toVw;
padding-top: 36 * @toVw;
background-size: 100% 100%;
.title{
text-align: center;
font-size:24px;
font-family:Helvetica-Bold;
font-weight:bold;
color:rgba(255,255,255,1);
line-height:26px;
}
.tips{
width:92px;
height:36px;
background: rgba(0,0,0,0.2);
text-align: center;
border-radius: 4*@toVw;
margin-top: 16*@toVw;
line-height: 36 * @toVw;
font-size:16px;
font-family:PingFang-SC-Bold;
font-weight:bold;
color:rgba(255,255,255,1);
}
}
.content{
padding-top: 14*@toVw;
.tips-title{
height:25*@toVw;
width: fit-content;
margin: 12*@toVw auto 10*@toVw auto;
font-size:16*@toVw;
font-family:PingFangSC-Semibold;
font-weight:600;
color:rgba(145,237,250,1);
line-height:25*@toVw;
display: block;
border-radius: 1000*@toVw;
padding: 3*@toVw 18*@toVw;
border: 2*@toVw solid #91EDFA;
}
.title-content {
word-break: break-all;
padding: 0 18px;
font-size: 12px;
font-family: PingFang-SC-Regular;
font-weight: 400;
color: rgba(136, 136, 136, 1);
line-height: 17px;
ul{
margin: 0;
padding: 0;
font-size:14px;
height:58px;
overflow: hidden;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(102,102,102,1);
line-height:20px;
list-style-type:none;
&:after{
content: '';
display: block;
clear: both;
}
li{
width: 50%;
float: left;
text-align: left;
}
}
}
}
}
@keyframes dodge
{
0%{
transform:scale(0.9,0.9)
}
50%{
transform:scale(1.1,1.1)
}
100%{
transform:scale(0.9,0.9)
}
}
</style> </style>
src/components/newLesson/fun.vue 0 → 100644
View file @ db797dc1
<template>
</template>
<script>
export default {
name: "fun"
}
</script>
<style scoped>
</style>
src/components/newLesson/index.vue 0 → 100644
View file @ db797dc1
<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 0 → 100644
View file @ db797dc1
<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 0 → 100644
View file @ db797dc1
<template>
</template>
<script>
export default {
name: "play"
}
</script>
<style scoped>
</style>
src/router/index.js
View file @ db797dc1
...@@ -13,6 +13,13 @@ const router =new Router({ ...@@ -13,6 +13,13 @@ const router =new Router({
meta:{ meta:{
deep:0 deep:0
} }
}, {
path: '/newLesson',
name: 'newLesson',
component: e=>require(['@/components/newLesson'],e),// 按需加载路由对应页面
meta:{
deep:0
}
}, { }, {
path: '/myGoodsList', path: '/myGoodsList',
name: 'myGoodsList', name: 'myGoodsList',
......
static/images/map.png
View replaced file @ b1568128 View file @ db797dc1
static/images/map.png

5.92 KB | W: | H:

static/images/map.png

34 KB | W: | H:

static/images/map.png
static/images/map.png
static/images/map.png
static/images/map.png
  • 2-up
  • Swipe
  • Onion skin
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