Skip to content

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

星星系统

parent 9fea7da3
Hide whitespace changes
Inline Side-by-side
Showing with 317 additions and 41 deletions
src/components/map/index.vue
View file @ 591e47de
......@@ -348,6 +348,7 @@
this.thisLesson.categoryId = data.id;
this.thisLesson.domTitle = data.name;
this.thisLesson.day = i;
this.thisLesson.star_num = data.star_num;
this.popupVisible=true;
})
}else{
......
src/components/newLesson/audio.vue
View file @ 591e47de
......@@ -63,6 +63,12 @@
<div class="active" >音频教学</div>
</div>
</div>
<div class="parent-finish">
<div class="finish-block" v-if="contentData.title === 3">
<img :src="finishStuat" @click="finishStudy">
</div>
</div>
<star-block @showShare="share_show = true"/>
</div>
<mt-popup
v-model="popupVisible"
......@@ -84,7 +90,16 @@
<img :src="showObj.audio[index].image"/>
</div>
</mt-popup>
<mt-popup
v-model="popupVisible2" style="background: transparent">
<div @click="popupVisible2=false">
<no-finish-dia/>
</div>
</mt-popup>
<guide-block/>
<div v-if="share_show">
<share-page @closeShare="closeShare()"/>
</div>
</div>
</template>
......@@ -92,20 +107,29 @@
import { Toast } from 'mint-ui';
import guideBlock from '../guide/audio'
import tapToVideo from '../../assets/tapToVideo.png'
import {getUserCollectApi,addUserCollectApi,delUserCollectApi} from "../../service/api";
import {getUserCollectApi,addUserCollectApi,delUserCollectApi,subUserLessonApi } from "../../service/api";
import finishStuat from '../../assets/newLesson/finishStudy.png'
import noFinishDia from './nofinishdia'
import sharePage from './share'
import starBlock from './star'
export default {
name: "fun",
props:[
'contentData'
],
components:{
guideBlock
guideBlock,
noFinishDia,
starBlock,
sharePage
},
data(){
return{
finishStuat:finishStuat,
popupVisible:false,
collectPop:false,
index:0,
popupVisible2:false,
hasCollect:false,
ageShow:false,
imgPop:false,
......@@ -116,6 +140,7 @@
audio:null,
change:false
},
share_show:false,
tapToVideo:tapToVideo,
playFlag:false,
offset:0,
......@@ -128,6 +153,9 @@
this.checkCollect();
},
methods:{
closeShare(){
this.share_show = false
},
// 改变收藏状态
changeCollect(){
if(this.hasCollect){
......@@ -329,7 +357,29 @@
this.playFlag = false;
this.startTime='00:00';
this.overTime='00:00'
}
},
finishStudy(){
let lessonDetail = JSON.parse(localStorage.getItem('lessonDetail'));
let nowTime = Date.parse(new Date());
let lookTime = (nowTime- lessonDetail.nowTime)/1000;
let json = {
page_type:0,
page_id:5,
stay_time:lookTime,
};
subUserLessonApi(this.$route.query.elementId,this.$route.query.category_id,this.$route.query.periods_id,json).then(res=>{
lessonDetail.total_watch_time = res.total_watch_time;
lessonDetail.nowTime = nowTime;
lessonDetail.star_num = res.total_star_num;
localStorage.setItem('lessonDetail',JSON.stringify(lessonDetail));
});
if((Number(lookTime) + Number(lessonDetail.total_watch_time))/60 < 7){
this.popupVisible2 = true
}else{
this.share_show = true
}
},
},
watch:{
'contentData':{
......@@ -590,9 +640,28 @@
.change-block-HP{
display: none;
}
.parent-finish{
position: absolute;
bottom: 10 * @toVw;
width: 100%;
left: 0;
top: 500*@toVw;
.finish-block{
position: absolute;
width: 100%;
left: 0;
padding: 0;
margin: 0;
text-align: center;
bottom: 0;
img{
width: 202*@toVw;
}
}
}
@media screen and (orientation: landscape) {
@toVw:100/667vw;
.finish-block{display: none}
.playImage{background:url('https://static-cdn.changchangenglish.com/new-sing/static/images/playImage.png?v=2') no-repeat;background-size:40*@toVw 225*@toVw;display: inline-block}
._154722344142123489{height:5*@toVw;width:9*@toVw;background-position:0 0;}
._282918034425091245{height:8*@toVw;width:9*@toVw;background-position:0 -4*@toVw;vertical-align: bottom}
......
src/components/newLesson/index.vue
View file @ 591e47de
......@@ -71,8 +71,9 @@
stay_time:lookTime,
};
subUserLessonApi(this.$route.query.elementId,this.$route.query.category_id,this.$route.query.periods_id,json).then(res=>{
lessonDetail.total_watch_time = res;
lessonDetail.total_watch_time = res.total_watch_time;
lessonDetail.nowTime = nowTime;
lessonDetail.star_num = res.total_star_num;
localStorage.setItem('lessonDetail',JSON.stringify(lessonDetail));
});
let query={
......@@ -94,8 +95,9 @@
stay_time:lookTime,
};
subUserLessonApi(this.$route.query.elementId,this.$route.query.category_id,this.$route.query.periods_id,json).then(res=>{
lessonDetail.total_watch_time = res;
lessonDetail.total_watch_time = res.total_watch_time;
lessonDetail.nowTime = nowTime;
lessonDetail.star_num = res.total_star_num;
localStorage.setItem('lessonDetail',JSON.stringify(lessonDetail));
});
switch (type) {
......
src/components/newLesson/look.vue
View file @ 591e47de
......@@ -5,18 +5,36 @@
</div>
<div class="old-content" v-if="contentData.old" v-html="nohidden">
</div>
<div v-if="share_show">
<share-page @closeShare="closeShare()"/>
</div>
<star-block @showShare="share_show = true"/>
</div>
</template>
<script>
import sharePage from './share'
import starBlock from './star'
import guideBlock from '../guide/look'
export default {
name: "look",
props:[
'contentData'
],
data(){
return {
share_show:false
}
},
components:{
guideBlock
guideBlock,
sharePage,
starBlock
},
methods:{
closeShare(){
this.share_show = false
},
},
computed:{
content(){
......@@ -36,27 +54,30 @@
<style scoped lang="less">
@import "../../util/public";
.look-content{
background: white;
width: 315*@toVw;
position: absolute;
top: 80*@toVw;
left: 20*@toVw;
right: 20*@toVw;
bottom: 20*@toVw;
overflow: auto;
margin: auto;
display: block;
border-radius: 8px;
padding: 10*@toVw;
.content{
background: white;
width: 315*@toVw;
position: absolute;
top: 80*@toVw;
left: 20*@toVw;
right: 20*@toVw;
bottom: 20*@toVw;
overflow: auto;
margin: auto;
display: block;
border-radius: 8px;
padding: 10*@toVw;
}
}
@media screen and (orientation: landscape) {
@toVw:100/667vw;
.finish-block{display: none}
.look-content{
position: absolute;
top: 20*@toVw;
width: auto;
bottom: 20*@toVw;
left: 20*@toVw;
right: 20*@toVw;
......
src/components/newLesson/share.vue
View file @ 591e47de
......@@ -34,9 +34,13 @@
</div>
</div>
<div class="share-btn">
<img :src="shareBtn"/>
<img :src="shareBtn" @click="showShare()"/>
</div>
</div>
<img :src="share_close" class="share_close" @click="$emit('closeShare')"/>
<div class="tips" v-if="shareVisible" @click="shareVisible=false">
<img :src="share_tips">
</div>
</div>
</template>
......@@ -45,16 +49,21 @@
import shareConBg from '../../assets/newLesson/shareConBg.png'
import shareTitle from '../../assets/newLesson/shareTitle.png'
import shareBtn from '../../assets/newLesson/share_button.png'
import share_close from '../../assets/newLesson/share_close.png'
import QRCode from 'qrcodejs2'
import html2canvas from 'html2canvas'
import {getUserDetailApi,getwechatParam,getUserWatchApi,getShortApi} from "../../service/api";
import {getUserDetailApi,getwechatParam,getUserWatchApi,getShortApi,subUserLessonApi} from "../../service/api";
import share_code_bg from '../../assets/newLesson/share-code-bg.png'
import share_tips from '../../assets/Bitmap@2x.png'
export default {
name: "share",
data(){
return {
shareVisible:false,
shareBg:shareBg,
share_close:share_close,
share_tips:share_tips,
shareConBg:shareConBg,
shareTitle:shareTitle,
shareBtn:shareBtn,
......@@ -68,6 +77,21 @@
this.initPage()
},
methods:{
showShare(){
this.shareVisible = true;
let lessonDetail = JSON.parse(localStorage.getItem('lessonDetail'));
let nowTime = Date.parse(new Date());
let json = {
page_type:0,
page_id:4,
stay_time:0,
};
subUserLessonApi(this.$route.query.elementId,this.$route.query.category_id,this.$route.query.periods_id,json).then(res=>{
lessonDetail.total_watch_time = res;
lessonDetail.nowTime = nowTime;
localStorage.setItem('lessonDetail',JSON.stringify(lessonDetail));
});
},
initPage(){
getUserDetailApi().then(res=>{
this.userDetail = res;
......@@ -81,7 +105,6 @@
})
},
enableShare: function(option) {
let that = this;
getwechatParam({
api_list: 'onMenuShareAppMessage,onMenuShareTimeline',
url:window.location.href.split('#')[0]
......@@ -103,10 +126,8 @@
imgUrl: option.shareIcon || 'https://cdn.singsingenglish.com/singsing/recommend/logo-refer.png', // 分享图标
success: function() {
console.log('分享成功');
window._hmt.push(['_trackEvent', '分享', "商品页好友分享",`id${that.shopId}`,that.invite_code]);//百度统计
},
cancel: function() {
// alert("失败")
console.log('分享失败')
}
});
......@@ -116,7 +137,7 @@
link: option.shareUrl, // 分享链接
imgUrl: option.shareIcon || 'https://cdn.singsingenglish.com/singsing/recommend/logo-refer.png', // 分享图标
success: function() {
window._hmt.push(['_trackEvent', '分享', "商品页朋友圈分享",`id${that.shopId}`,that.invite_code]);//百度统计
},
cancel: function() {
}
......@@ -360,5 +381,24 @@
}
}
}
.share_close{
position: fixed;
width: 20*@toVw;
top: 19*@toVw;
right: 13*@toVw;
}
.tips{
background: rgba(0,0,0,0.5);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 99999999;
text-align: right;
img{
width: 80%;
}
}
}
</style>
src/components/newLesson/star.vue 0 → 100644
View file @ 591e47de
<template>
<div>
<img :src="star_btn" class="img_btn" @click="showPop">
<mt-popup
v-model="popupVisible" style="background: transparent">
<div class="pop-block">
<img :src="starNum == 0 ? star1 : starNum == 3 ? star3 : star2 " class="star-all"/>
<div class="list">
1.完成今日学习
<div class="star-content">
<img :src="starNum == 0 ? star_default : star_active">
<img :src="starNum < 2 ? star_default : star_active">
</div>
</div>
<div class="list">
2.打卡签到
<div class="star-content">
<img :src="starNum == 3 ? star_active : star_default">
</div>
</div>
<div class="btn-block">
<div class="btn">
<span v-if="starNum < 2" @click="popupVisible = false">继续看课</span>
<span v-if="starNum == 2" @click="showShare()">分享赚星星</span>
<span v-if="starNum == 3" @click="popupVisible = false">关闭</span>
</div>
</div>
</div>
</mt-popup>
</div>
</template>
<script>
import star_btn from '../../assets/star/star_btn.png'
import star1 from '../../assets/star/star1.png'
import star2 from '../../assets/star/star2.png'
import star3 from '../../assets/star/star3.png'
import star_default from '../../assets/star/star_default.png'
import star_active from '../../assets/star/star_active.png'
export default {
name: "star",
data(){
return {
star_btn:star_btn,
star1:star1,
star2:star2,
star3:star3,
popupVisible:false,
star_default:star_default,
star_active:star_active,
starNum:0
}
},
methods:{
showPop(){
this.popupVisible = true;
this.starNum = JSON.parse(localStorage.getItem('lessonDetail')).star_num
},
showShare(){
this.popupVisible = false;
this.$emit('showShare')
}
}
}
</script>
<style scoped lang="less">
@import "../../util/public";
.img_btn{
position: absolute;
bottom: 10*@toVw;
right: 10*@toVw;
width: 50*@toVw;
}
.pop-block{
background: white;
border-radius: 8*@toVw;
width: 230*@toVw;
padding:50*@toVw 10*@toVw 10*@toVw 10*@toVw;
position: relative;
height: 142*@toVw;
.star-all{
width: 154*@toVw;
position: absolute;
top: -40*@toVw;
left: 57*@toVw;
}
.list{
font-size:14*@toVw;
text-align: left;
padding: 7*@toVw 20*@toVw;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(0,0,0,1);
.star-content{
float: right;
width: 50*@toVw;
text-align: right;
img{
width: 17*@toVw;
margin-left: -14*@toVw;
}
}
}
.btn-block{
margin-top: 30*@toVw;
.btn{
width:203 *@toVw;
height:33 *@toVw;
background:rgba(64,169,255,1);
border-radius:17 *@toVw;
color: white;
line-height: 33*@toVw;
text-align: center;
font-size:14px;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(255,255,255,1);
}
}
}
@media screen and (orientation: landscape) {
.img_btn{
display: none;
}
}
</style>
src/components/newLesson/video.vue
View file @ 591e47de
......@@ -33,9 +33,12 @@
<div @click="changeAudio()">音频教学</div>
</div>
</div>
<div class="finish-block" v-if="nowShow === 3">
<img :src="finishStuat" @click="finishStudy">
<div class="parent-finish">
<div class="finish-block" v-if="nowShow === 3">
<img :src="finishStuat" @click="finishStudy">
</div>
</div>
<star-block @showShare="share_show = true"/>
</div>
<mt-popup
v-model="popupVisible" style="background: transparent">
......@@ -45,8 +48,7 @@
</mt-popup>
<guide-block/>
<div v-if="share_show">
<img :src="share_close" class="close-share-show" @click="share_show = false"/>
<share-page/>
<share-page @closeShare="closeShare()"/>
</div>
</div>
......@@ -56,25 +58,25 @@
import luolacoming from '../../assets/newLesson/luoLacoming.png'
import luolalaila from '../../assets/newLesson/luolalaila.png'
import guideBlock from '../guide/video'
import share_close from '../../assets/newLesson/share_close.png'
import {subUserLessonApi} from "../../service/api";
import tapToAudio from '../../assets/tapToAudio.png'
import finishStuat from '../../assets/newLesson/finishStudy.png'
import noFinishDia from './nofinishdia'
import sharePage from './share'
import starBlock from './star'
export default {
name: "play",
components:{
guideBlock,
noFinishDia,
sharePage
sharePage,
starBlock
},
data(){
return{
finishStuat:finishStuat,
popupVisible:false,
ageShow:false,
share_close:share_close,
share_show:false,
showObj:{
video:[],
......@@ -96,6 +98,9 @@
this.changeAge(this.contentData.age)
},
methods:{
closeShare(){
this.share_show = false
},
finishStudy(){
let lessonDetail = JSON.parse(localStorage.getItem('lessonDetail'));
let nowTime = Date.parse(new Date());
......@@ -106,8 +111,9 @@
stay_time:lookTime,
};
subUserLessonApi(this.$route.query.elementId,this.$route.query.category_id,this.$route.query.periods_id,json).then(res=>{
lessonDetail.total_watch_time = res;
lessonDetail.total_watch_time = res.total_watch_time;
lessonDetail.nowTime = nowTime;
lessonDetail.star_num = res.total_star_num;
localStorage.setItem('lessonDetail',JSON.stringify(lessonDetail));
});
if((Number(lookTime) + Number(lessonDetail.total_watch_time))/60 < 7){
......@@ -152,7 +158,7 @@
@import "../../util/public";
.close-share-show{
position: fixed;
z-index: 9999;
z-index: 99;
top: 18*@toVw;
right: 12*@toVw;
width: 20*@toVw;
......@@ -263,16 +269,24 @@
}
}
}
.finish-block{
.parent-finish{
position: absolute;
bottom: 10 * @toVw;
width: 100%;
left: 0;
padding: 0;
margin: 0;
text-align: center;
bottom: 10*@toVw;
img{
width: 202*@toVw;
top: 400*@toVw;
.finish-block{
position: absolute;
width: 100%;
left: 0;
padding: 0;
margin: 0;
text-align: center;
bottom: 0;
img{
width: 202*@toVw;
}
}
}
}
......
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