Skip to content

H
h5-base
Commit 15e79249 authored by IvyXia123's avatar IvyXia123
Browse files
Options

星星测试提交

parent 8aae6476
Hide whitespace changes
Inline Side-by-side
Showing with 4568 additions and 3925 deletions
package-lock.json
View file @ 15e79249
......@@ -4416,6 +4416,16 @@
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
},
"fundebug-javascript": {
"version": "1.9.0",
"resolved": "https://registry.npmjs.org/fundebug-javascript/-/fundebug-javascript-1.9.0.tgz",
"integrity": "sha512-i+a9IIGyhIOPEBLbaH6plnMrPTukZ0YN7fXFZRQ6O+CwyQxNqQYye1PEax1LZeD3OJLp5UNRjtAlNSwb5grN3Q=="
},
"fundebug-vue": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/fundebug-vue/-/fundebug-vue-0.0.1.tgz",
"integrity": "sha512-dk6D5FASmvhUwepc5SL6221B9NHw6hZ7ZLU/nWuyRcrBrrOWbxiH30CrEYwr6VK76UlUb6mpJ+Mzr2r7sfqk8w=="
},
"get-caller-file": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.3.tgz",
......
src/components/growthRecord.vue 0 → 100644
View file @ 15e79249
<template>
<div class="growthRecord" @scroll="scrollEvent">
<div class="year-header" id="yearHeader" ref="yearHeader">{{ dataTimer }}</div>
<div class="growthRecord-content" v-for="(item, index) in scoringCategoryData" :key="index">
<!-- 年 -->
<div class="growthRecord-content-year">{{ item.year }}年</div>
<div class="growthRecord-content-children" :data-timer="itemChild.cur_date" v-for="itemChild in item.monthArr">
<!-- 月，日 -->
<div class="growthRecord-content-left">
<span class="day">{{ itemChild.month.split('-')[1] }}</span><span class="mouth">{{ itemChild.month.split('-')[0] }}月</span>
</div>
<!-- 月日对应的content -->
<div class="growthRecord-content-right">
<div class="growthRecord-content-right-sleeping">{{ itemChild.element_title }}</div>
<div class="growthRecord-content-right-title">
<span class="title">{{ itemChild.category_name.split(' ')[0] + ' ' +itemChild.category_name.split(' ')[1] }}</span>
<img class="scoring-category-active" :src="scoringCategoryImage.scoringCategory1Active" alt="">
<span class="num">{{ itemChild.interest }}</span>
<img class="scoring-category-active" :src="scoringCategoryImage.scoringCategory2Active" alt="">
<span class="num">{{ itemChild.concent }}</span>
<img class="scoring-category-active" :src="scoringCategoryImage.scoringCategory3Active" alt="">
<span class="num">{{ itemChild.parent_child }}</span>
</div>
<div class="rowthRecord-content-sub">
<span class="text">{{ itemChild.growth_record }}</span>
<!-- <span class=""><img class="xiajiantou" :src="scoringCategoryImage.xiajiantou" alt=""></span>-->
</div>
<div class="timer">{{ itemChild.created_at.split(' ')[1] }}</div>
</div>
</div>
</div>
</div>
</template>
<script type="text/ecmascript-6">
import { getUserGrowthListApi } from "../service/api";
import { scoringCategory } from "../util/imgUrl";
export default {
name: 'growthRecord',
data() {
return {
dataTimer: '', // 获取滚动时间
scoringCategoryData: [], // 获取数据
scoringCategoryImage: scoringCategory // 获取图片
}
},
methods: {
async userGrowthRecordList() {
const userGrowthRecordData = await getUserGrowthListApi();
console.log(userGrowthRecordData)
userGrowthRecordData.map(item => {
// 重新转化数据
item.monthArr = [];
Object.values(item.month).map(itemchild => item.monthArr.push(itemchild[0]))
})
this.scoringCategoryData = userGrowthRecordData;
// 初始化滚动值
this.dataTimer = userGrowthRecordData[0].monthArr[0].cur_date;
},
/**
* 滚动监听
* @param e
*/
scrollEvent(e) {
let scroll = document.documentElement.scrollTop || document.body.scrollTop,
growthRecordContentChildren = document.querySelectorAll('.growthRecord-content-children');
for(let i = 0; i < growthRecordContentChildren.length; i++) {
let top = growthRecordContentChildren[i].offsetTop, // 获取 dom 离顶端的高度
height = growthRecordContentChildren[i].offsetHeight, // 获取 dom 高度
dataTimer = growthRecordContentChildren[i].getAttribute('data-timer'); // 获取 dom 里的时间
if(scroll >= top && scroll <= top + height)
this.dataTimer = dataTimer;
}
}
},
mounted() {
window.addEventListener('scroll', this.scrollEvent, false)
this.userGrowthRecordList()
}
}
</script>
<style lang="less" type="text/less">
@import "../util/public";
.growthRecord {
width: 100%;
padding: 20 * @toVw;
box-sizing: border-box;
.year-header {
width: 100%;
height: 30 * @toVw;
padding-left: 20 * @toVw;
position: fixed;
line-height: 30 * @toVw;
background: #F8F8F8;
top: 0;
left: 0;
z-index: 10;
font-size: 14 * @toVw;
}
.growthRecord-content {
width: 100%;
/* 年 */
.growthRecord-content-year {
padding: 16 * @toVw 0;
font-size: 24 * @toVw;
font-weight: 500;
color: #333333;
}
/* 月，日 */
.growthRecord-content-children {
width: 100%;
overflow: hidden;
padding-bottom: 15 * @toVw;
.growthRecord-content-left {
width: 60 * @toVw;
float: left;
.day {
font-size: 22 * @toVw;
font-weight: 500;
color: #333;
}
.mouth {
padding-left: 2px;
font-size: 14 * @toVw;
color: #333;
}
}
/* 月日对应的content */
.growthRecord-content-right {
width: calc(100% - 16vw);
padding: 12 * @toVw;
float: left;
background: #e2f3fe;
border-radius: 5 * @toVw;
box-sizing: border-box;
.growthRecord-content-right-sleeping {
padding-bottom: 11 * @toVw;
font-size: 14 * @toVw;
font-weight: 500;
color: #333;
}
.growthRecord-content-right-title {
.title {
padding-right: 12 * @toVw;
vertical-align: middle;
font-size: 13 * @toVw;
font-weight: 500;
color: #333;
}
.scoring-category-active {
width: 20 * @toVw;
height: 20 * @toVw;
padding-left: 13 * @toVw;
vertical-align: middle;
}
.num {
vertical-align: middle;
font-size: 13 * @toVw;
color: #666666;
}
}
.rowthRecord-content-sub {
position: relative;
padding-top: 10 * @toVw;
line-height: 21 * @toVw;
font-size: 14 * @toVw;
color: #666666;
.text {
word-wrap: break-word;
word-break: break-all;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
/*text-align-last:justify;*/
/*text-align:justify;*/
/*text-justify:distribute-all-lines;*/
}
.xiajiantou {
width: 17 * @toVw;
height: 10 * @toVw;
position: absolute;
bottom: 0;
right: 0;
}
}
.timer {
padding-top: 10 * @toVw;
color: #666666;
font-size: 12 * @toVw;
}
}
}
}
}
</style>
src/components/mine/index.vue
View file @ 15e79249
......@@ -23,6 +23,9 @@
<van-cell title="我的订单" ref="order" to="/order" @click="toOrder" is-link>
<img slot="icon" :src="image.order" />
</van-cell>
<van-cell title="成长记录" ref="star" to="/growthRecord" @click="toStar" is-link>
<img slot="icon" :src="image.yizi" />
</van-cell>
<van-cell v-if="acitivityType==1" title="我的星星" ref="star" to="/starRank" @click="toStar" is-link>
<img slot="icon" :src="image.mine_icon_star" />
<!-- <div class="starNum" v-if="starNum">{{starNum}}颗</div> -->
......
src/components/newLesson/audio.vue
View file @ 15e79249
......@@ -159,672 +159,403 @@
</template>
<script>
import { Toast } from "vant";
import { Popup } from "mint-ui";
import tapToVideo from "../../assets/tapToVideo.png";
import { ImagePreview } from "vant";
import {
getUserCollectApi,
addUserCollectApi,
delUserCollectApi,
subUserLessonApi,
getUserWatchApi
} from "../../service/api";
import finishStuat from "../../assets/newLesson/finishStudy.png";
import noFinishDia from "./nofinishdia";
import sharePage from "./share";
import starBlock from "./star";
import audioGood from "../../assets/good.mp3";
import audioGreat from "../../assets/great.mp3";
import audioPerfect from "../../assets/perfect.mp3";
export default {
name: "fun",
props: ["contentData"],
components: {
noFinishDia,
starBlock,
sharePage,
[Popup.name]: Popup
},
data() {
return {
imgModel: false,
userCourse: {},
finishStuat: finishStuat,
popupVisible: false,
collectPop: false,
index: 0,
star: false,
popupVisible2: false,
hasCollect: false,
ageShow: false,
imgPop: false,
startTime: "00:00",
overTime: "00:00",
range: 0,
showObj: {
audio: null,
change: false
},
share_show: false,
tapToVideo: tapToVideo,
playFlag: false,
offset: 0,
timer: null,
playType: Number(localStorage.getItem("playType")) | 0,
audioPoint: "",
stay_time: ""
};
},
mounted() {
this.changeAge(this.contentData.age);
this.userCourse = JSON.parse(localStorage.getItem("userCourse"));
if (this.userCourse.periods_list) {
this.checkCollect();
}
},
methods: {
ImagePreviewF(index) {
ImagePreview({
images: [this.showObj.audio[index].image],
lazyLoad: true,
startPosition: 0,
showIndex: false
});
},
changeStar(data) {
this.star = data;
},
backList() {
this.$emit("backList");
},
closeShare() {
this.share_show = false;
},
sendConsole(data) {
this.$sa.track("watchClick", {
buttonName: data,
dayModule: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(0, 9),
weekName: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
elementName:
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
0,
9
) +
"-" +
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
themeID: JSON.parse(localStorage.getItem("lessonDetail")).themeID,
themeName: JSON.parse(localStorage.getItem("lessonDetail")).themeName,
goodsID: JSON.parse(localStorage.getItem("lessonDetail")).goodsID,
classID: JSON.parse(localStorage.getItem("lessonDetail")).classID,
partName: this.contentData.partName,
elementID: this.$route.query.elementId.toString()
});
},
// 改变收藏状态
changeCollect() {
if (this.hasCollect) {
// 神策埋点 点击操作
this.$sa.track("watchClick", {
dayModule: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(0, 9),
weekName: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
elementName:
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
0,
9
) +
"-" +
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
themeID: JSON.parse(localStorage.getItem("lessonDetail")).themeID,
themeName: JSON.parse(localStorage.getItem("lessonDetail")).themeName,
goodsID: JSON.parse(localStorage.getItem("lessonDetail")).goodsID,
classID: JSON.parse(localStorage.getItem("lessonDetail")).classID,
buttonName: "取消收藏",
partName: this.contentData.partName,
elementID: this.$route.query.elementId.toString()
});
delUserCollectApi(this.hasCollect).then(res => {
this.hasCollect = false;
Toast("取消收藏");
this.checkCollect();
});
} else {
// 神策埋点 点击操作
this.$sa.track("watchClick", {
dayModule: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(0, 9),
weekName: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
elementName:
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
0,
9
) +
"-" +
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
themeID: JSON.parse(localStorage.getItem("lessonDetail")).themeID,
themeName: JSON.parse(localStorage.getItem("lessonDetail")).themeName,
goodsID: JSON.parse(localStorage.getItem("lessonDetail")).goodsID,
classID: JSON.parse(localStorage.getItem("lessonDetail")).classID,
buttonName: "添加收藏",
partName: this.contentData.partName,
elementID: this.$route.query.elementId.toString()
});
let lessonDetail = JSON.parse(localStorage.getItem("lessonDetail"));
let json = {
category_id: lessonDetail.id,
type: 1,
title: this.showObj.audio[this.index].title,
sub_title: "来自于 " + lessonDetail.title,
url: this.showObj.audio[this.index].url,
cover: this.showObj.audio[this.index].image
};
addUserCollectApi(json)
.then(res => {
Toast("收藏成功,快去主页收藏夹看一看吧");
this.checkCollect();
})
.catch(this.checkCollect());
}
import { Toast } from "vant";
import { Popup } from "mint-ui";
import tapToVideo from "../../assets/tapToVideo.png";
import { ImagePreview } from "vant";
import {
getUserCollectApi,
addUserCollectApi,
delUserCollectApi,
subUserLessonApi,
getUserWatchApi
} from "../../service/api";
import finishStuat from "../../assets/newLesson/finishStudy1.png";
import noFinishDia from "./nofinishdia";
import sharePage from "./share";
import starBlock from "./star";
import audioGood from "../../assets/good.mp3";
import audioGreat from "../../assets/great.mp3";
import audioPerfect from "../../assets/perfect.mp3";
export default {
name: "fun",
props: ["contentData"],
components: {
noFinishDia,
starBlock,
sharePage,
[Popup.name]: Popup
},
// 获取收藏状态
checkCollect() {
let json = {
url: this.showObj.audio[this.index].url
data() {
return {
imgModel: false,
userCourse: {},
finishStuat: finishStuat,
popupVisible: false,
collectPop: false,
index: 0,
star: false,
popupVisible2: false,
hasCollect: false,
ageShow: false,
imgPop: false,
startTime: "00:00",
overTime: "00:00",
range: 0,
showObj: {
audio: null,
change: false
},
share_show: false,
tapToVideo: tapToVideo,
playFlag: false,
offset: 0,
timer: null,
playType: Number(localStorage.getItem("playType")) | 0,
audioPoint: "",
stay_time: ""
};
// debugger
getUserCollectApi(json).then(res => {
this.hasCollect = res.list.length < 1 ? false : res.list[0].id;
});
},
// 播放音频
onPlay(flag) {
if (flag) {
// 神策埋点 点击操作
this.$sa.track("watchClick", {
dayModule: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(0, 9),
weekName: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
elementName:
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
0,
9
) +
"-" +
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
themeID: JSON.parse(localStorage.getItem("lessonDetail")).themeID,
themeName: JSON.parse(localStorage.getItem("lessonDetail")).themeName,
goodsID: JSON.parse(localStorage.getItem("lessonDetail")).goodsID,
classID: JSON.parse(localStorage.getItem("lessonDetail")).classID,
buttonName: "播放音频",
partName: this.contentData.partName,
elementID: this.$route.query.elementId.toString()
});
mounted() {
if(this.$route.params.evaluate === 1)
this.finishStudy()
this.changeAge(this.contentData.age);
this.userCourse = JSON.parse(localStorage.getItem("userCourse"));
if (this.userCourse.periods_list) {
this.checkCollect();
}
setTimeout(()=>{
this.$refs.audio.play();
},100)
// this.$refs.audio.play();
// this.$nextTick(()=>{
// // console.log(this.$refs.audio)
// this.$refs.audio.play();
// })
},
// 播放暂停
onStop(flag) {
if (flag) {
// 神策埋点 点击操作
methods: {
ImagePreviewF(index) {
ImagePreview({
images: [this.showObj.audio[index].image],
lazyLoad: true,
startPosition: 0,
showIndex: false
});
},
changeStar(data) {
this.star = data;
},
backList() {
this.$emit("backList");
},
closeShare() {
this.share_show = false;
},
sendConsole(data) {
this.$sa.track("watchClick", {
buttonName: data,
dayModule: JSON.parse(
localStorage.getItem("lessonDetail")
localStorage.getItem("lessonDetail")
).domTitle.slice(0, 9),
weekName: JSON.parse(
localStorage.getItem("lessonDetail")
localStorage.getItem("lessonDetail")
).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
elementName:
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
0,
9
) +
"-" +
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
themeID: JSON.parse(localStorage.getItem("lessonDetail")).themeID,
themeName: JSON.parse(localStorage.getItem("lessonDetail")).themeName,
goodsID: JSON.parse(localStorage.getItem("lessonDetail")).goodsID,
classID: JSON.parse(localStorage.getItem("lessonDetail")).classID,
buttonName: "暂停播放",
partName: this.contentData.partName,
elementID: this.$route.query.elementId.toString()
});
}
this.$refs.audio.pause();
this.playFlag = false;
// console.log(this.$refs.imgItem)
var iTransform = getComputedStyle(this.$refs.imgItem).transform;
var cTransform = getComputedStyle(this.$refs.imageBlock).transform;
this.$refs.imageBlock.style.transform =
cTransform === "none" ? iTransform : iTransform.concat(" ", cTransform);
this.$refs.imgItem.classList.remove("swin");
},
lastOne() {
this.$sa.track("watchClick", {
dayModule: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(0, 9),
weekName: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
elementName:
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
0,
9
) +
"-" +
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
themeID: JSON.parse(localStorage.getItem("lessonDetail")).themeID,
themeName: JSON.parse(localStorage.getItem("lessonDetail")).themeName,
goodsID: JSON.parse(localStorage.getItem("lessonDetail")).goodsID,
classID: JSON.parse(localStorage.getItem("lessonDetail")).classID,
buttonName: "上一首",
partName: this.contentData.partName,
elementID: this.$route.query.elementId.toString()
});
if (this.index > 0) {
this.index--;
this.keepPlay();
} else if (this.playType === 0 && this.showObj.audio.length > 1) {
this.index = this.showObj.audio.length - 1;
this.keepPlay();
} else {
Toast("已经是第一首");
}
},
changeIndex(i) {
this.index = i;
this.popupVisible = false;
this.keepPlay();
},
keepPlay() {
if (this.playFlag) {
this.$nextTick(() => {
this.onPlay();
});
} else {
this.$nextTick(() => {
this.onStop();
});
}
},
nextOne(flag) {
if (flag) {
// 神策埋点 点击操作
this.$sa.track("watchClick", {
dayModule: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(0, 9),
weekName: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
elementName:
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
0,
9
) +
"-" +
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
0,
9
) +
"-" +
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
themeID: JSON.parse(localStorage.getItem("lessonDetail")).themeID,
themeName: JSON.parse(localStorage.getItem("lessonDetail")).themeName,
goodsID: JSON.parse(localStorage.getItem("lessonDetail")).goodsID,
classID: JSON.parse(localStorage.getItem("lessonDetail")).classID,
buttonName: "下一首",
partName: this.contentData.partName,
elementID: this.$route.query.elementId.toString()
});
}
if (this.index < this.showObj.audio.length - 1) {
this.index++;
this.keepPlay();
} else if (this.playType === 0 && this.showObj.audio.length > 1) {
this.index = 0;
this.keepPlay();
} else {
Toast("已经是最后一首");
}
},
// 音频准备就绪
canPlay() {
let audio = this.$refs.audio;
this.offset = Math.ceil(parseInt(audio.duration) | 0);
this.$nextTick(() => {
this.getDuration();
});
},
// 播放中方法
playing() {
let audio = this.$refs.audio;
this.playFlag = true;
this.$refs.imgItem.classList.add("swin");
this.timer = setInterval(() => {
let min = null;
if (parseInt(audio.currentTime / 60) < 10) {
min = "0" + parseInt(audio.currentTime / 60);
} else {
min = parseInt(audio.currentTime / 60);
}
let sec = parseInt(audio.currentTime % 60);
if (sec < 10) {
sec = "0" + sec;
}
this.startTime = min + ":" + sec; /* 00:00 */
this.range = parseInt(audio.currentTime);
if (this.range === this.offset && this.offset !== 0) {
this.range = 0; /*播放结束后进度条归零*/
this.startTime = "00:00"; /*播放结束后时间归零*/
this.onOver();
clearInterval(this.timer);
}
}, 1000);
},
// 暂停计时器
stopTime() {
clearInterval(this.timer);
},
// 获取音频总长度
getDuration() {
let min = null;
if (this.offset === 0) {
this.overTime = "正在加载中...";
} else {
if (parseInt(this.offset / 60) < 10) {
min = "0" + parseInt(this.offset / 60);
} else {
min = parseInt(this.offset / 60);
}
let sec = parseInt(this.offset % 60);
if (sec < 10) {
sec = "0" + sec;
}
this.overTime = min + ":" + sec; /* 00:00 */
}
},
// 播放完毕
onOver() {
switch (this.playType) {
case 0:
if (this.index < this.showObj.audio.length - 1) {
this.index++;
} else {
this.index = 0;
}
this.$nextTick(() => {
this.onPlay();
});
break;
case 1:
this.range = 0;
this.$nextTick(() => {
this.onPlay();
});
break;
case 2:
if (this.index < this.showObj.audio.length - 1) {
this.index++;
this.$nextTick(() => {
this.onPlay();
});
} else {
this.index = 0;
this.$nextTick(() => {
this.onStop();
});
}
}
},
// 改变循环状态
changeType() {
this.playType < 2 ? this.playType++ : (this.playType = 0);
window.localStorage.setItem("playType", this.playType);
switch (this.playType) {
case 1:
},
// 改变收藏状态
changeCollect() {
if (this.hasCollect) {
// 神策埋点 点击操作
this.$sa.track("watchClick", {
dayModule: JSON.parse(
localStorage.getItem("lessonDetail")
localStorage.getItem("lessonDetail")
).domTitle.slice(0, 9),
weekName: JSON.parse(
localStorage.getItem("lessonDetail")
localStorage.getItem("lessonDetail")
).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
elementName:
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
0,
9
) +
"-" +
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
),
elementName:
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
0,
9
) +
"-" +
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
themeID: JSON.parse(localStorage.getItem("lessonDetail")).themeID,
themeName: JSON.parse(localStorage.getItem("lessonDetail"))
.themeName,
themeName: JSON.parse(localStorage.getItem("lessonDetail")).themeName,
goodsID: JSON.parse(localStorage.getItem("lessonDetail")).goodsID,
classID: JSON.parse(localStorage.getItem("lessonDetail")).classID,
buttonName: "单曲循环",
buttonName: "取消收藏",
partName: this.contentData.partName,
elementID: this.$route.query.elementId.toString()
});
Toast("单曲循环");
break;
case 2:
delUserCollectApi(this.hasCollect).then(res => {
this.hasCollect = false;
Toast("取消收藏");
this.checkCollect();
});
} else {
// 神策埋点 点击操作
this.$sa.track("watchClick", {
dayModule: JSON.parse(
localStorage.getItem("lessonDetail")
localStorage.getItem("lessonDetail")
).domTitle.slice(0, 9),
weekName: JSON.parse(
localStorage.getItem("lessonDetail")
localStorage.getItem("lessonDetail")
).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
elementName:
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
0,
9
) +
"-" +
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
0,
9
) +
"-" +
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
themeID: JSON.parse(localStorage.getItem("lessonDetail")).themeID,
themeName: JSON.parse(localStorage.getItem("lessonDetail")).themeName,
goodsID: JSON.parse(localStorage.getItem("lessonDetail")).goodsID,
classID: JSON.parse(localStorage.getItem("lessonDetail")).classID,
buttonName: "添加收藏",
partName: this.contentData.partName,
elementID: this.$route.query.elementId.toString()
});
let lessonDetail = JSON.parse(localStorage.getItem("lessonDetail"));
let json = {
category_id: lessonDetail.id,
type: 1,
title: this.showObj.audio[this.index].title,
sub_title: "来自于 " + lessonDetail.title,
url: this.showObj.audio[this.index].url,
cover: this.showObj.audio[this.index].image
};
addUserCollectApi(json)
.then(res => {
Toast("收藏成功,快去主页收藏夹看一看吧");
this.checkCollect();
})
.catch(this.checkCollect());
}
},
// 获取收藏状态
checkCollect() {
let json = {
url: this.showObj.audio[this.index].url
};
// debugger
getUserCollectApi(json).then(res => {
this.hasCollect = res.list.length < 1 ? false : res.list[0].id;
});
},
// 播放音频
onPlay(flag) {
if (flag) {
// 神策埋点 点击操作
this.$sa.track("watchClick", {
dayModule: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(0, 9),
weekName: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
),
elementName:
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
0,
9
) +
"-" +
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
themeID: JSON.parse(localStorage.getItem("lessonDetail")).themeID,
themeName: JSON.parse(localStorage.getItem("lessonDetail"))
.themeName,
themeName: JSON.parse(localStorage.getItem("lessonDetail")).themeName,
goodsID: JSON.parse(localStorage.getItem("lessonDetail")).goodsID,
classID: JSON.parse(localStorage.getItem("lessonDetail")).classID,
buttonName: "顺序播放",
buttonName: "播放音频",
partName: this.contentData.partName,
elementID: this.$route.query.elementId.toString()
});
Toast("顺序播放");
break;
case 0:
}
this.$nextTick(()=>{
this.$refs.audio.play();
})
},
// 播放暂停
onStop(flag) {
if (flag) {
// 神策埋点 点击操作
this.$sa.track("watchClick", {
dayModule: JSON.parse(
localStorage.getItem("lessonDetail")
localStorage.getItem("lessonDetail")
).domTitle.slice(0, 9),
weekName: JSON.parse(
localStorage.getItem("lessonDetail")
localStorage.getItem("lessonDetail")
).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
elementName:
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
0,
9
) +
"-" +
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
themeID: JSON.parse(localStorage.getItem("lessonDetail")).themeID,
themeName: JSON.parse(localStorage.getItem("lessonDetail")).themeName,
goodsID: JSON.parse(localStorage.getItem("lessonDetail")).goodsID,
classID: JSON.parse(localStorage.getItem("lessonDetail")).classID,
buttonName: "暂停播放",
partName: this.contentData.partName,
elementID: this.$route.query.elementId.toString()
});
}
this.$refs.audio.pause();
this.playFlag = false;
// console.log(this.$refs.imgItem)
var iTransform = getComputedStyle(this.$refs.imgItem).transform;
var cTransform = getComputedStyle(this.$refs.imageBlock).transform;
this.$refs.imageBlock.style.transform =
cTransform === "none" ? iTransform : iTransform.concat(" ", cTransform);
this.$refs.imgItem.classList.remove("swin");
},
lastOne() {
this.$sa.track("watchClick", {
dayModule: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(0, 9),
weekName: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
elementName:
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
0,
9
0,
9
) +
"-" +
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
themeID: JSON.parse(localStorage.getItem("lessonDetail")).themeID,
themeName: JSON.parse(localStorage.getItem("lessonDetail")).themeName,
goodsID: JSON.parse(localStorage.getItem("lessonDetail")).goodsID,
classID: JSON.parse(localStorage.getItem("lessonDetail")).classID,
buttonName: "上一首",
partName: this.contentData.partName,
elementID: this.$route.query.elementId.toString()
});
if (this.index > 0) {
this.index--;
this.keepPlay();
} else if (this.playType === 0 && this.showObj.audio.length > 1) {
this.index = this.showObj.audio.length - 1;
this.keepPlay();
} else {
Toast("已经是第一首");
}
},
changeIndex(i) {
this.index = i;
this.popupVisible = false;
this.keepPlay();
},
keepPlay() {
if (this.playFlag) {
this.$nextTick(() => {
this.onPlay();
});
} else {
this.$nextTick(() => {
this.onStop();
});
}
},
nextOne(flag) {
if (flag) {
// 神策埋点 点击操作
this.$sa.track("watchClick", {
dayModule: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(0, 9),
weekName: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
),
elementName:
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
0,
9
) +
"-" +
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
themeID: JSON.parse(localStorage.getItem("lessonDetail")).themeID,
themeName: JSON.parse(localStorage.getItem("lessonDetail"))
.themeName,
themeName: JSON.parse(localStorage.getItem("lessonDetail")).themeName,
goodsID: JSON.parse(localStorage.getItem("lessonDetail")).goodsID,
classID: JSON.parse(localStorage.getItem("lessonDetail")).classID,
buttonName: "列表循环",
buttonName: "下一首",
partName: this.contentData.partName,
elementID: this.$route.query.elementId.toString()
});
Toast("列表循环");
break;
}
},
changeAge(value) {
if (this.contentData.content.age && value === 2) {
this.showObj = {
audio: this.contentData.content.audio2,
change: this.contentData.content.change2
};
} else {
this.showObj = {
audio: this.contentData.content.audio,
change: this.contentData.content.change
};
}
this.playFlag = false;
this.startTime = "00:00";
this.overTime = "00:00";
},
finishStudy() {
this.sendConsole("完成今日学习");
let lessonDetail = JSON.parse(localStorage.getItem("lessonDetail"));
let query = JSON.parse(sessionStorage.getItem("classQuery"));
let nowTime = Date.parse(new Date());
let lookTime = (nowTime - lessonDetail.nowTime) / 1000;
let json = {
page_type: 0,
page_id: 5,
stay_time: lookTime
};
subUserLessonApi(
query.elementId,
query.category_id,
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;
// debugger
}
if (this.index < this.showObj.audio.length - 1) {
this.index++;
this.keepPlay();
} else if (this.playType === 0 && this.showObj.audio.length > 1) {
this.index = 0;
this.keepPlay();
} else {
getUserWatchApi({ category_id: query.category_id }).then(res => {
this.$store.dispatch("setWatchDetail", res);
this.share_show = true;
// debugger
});
setTimeout(() => {
if (this.$store.state.lookStatus == 0) {
this.audioPoint = audioGood;
} else if (this.$store.state.lookStatus == 1) {
this.audioPoint = audioGreat;
} else {
this.audioPoint = audioPerfect;
}
this.$refs.audioDom.load();
setTimeout(() => {
this.$refs.audioDom.play();
}, 100);
}, 300);
Toast("已经是最后一首");
}
});
// this.$refs.sharePage.playAudio()
// this.$refs.sharePage.initPage()
}
},
watch: {
contentData: {
handler: function() {
//特别注意，不能用箭头函数，箭头函数，this指向全局
this.changeAge(this.contentData.age);
this.index = 0;
this.checkCollect();
},
deep: true
},
index(value) {
this.checkCollect();
},
range(value, value2) {
let audio = this.$refs.audio;
if (Math.abs(value - value2) > 2) {
// 音频准备就绪
canPlay() {
let audio = this.$refs.audio;
this.offset = Math.ceil(parseInt(audio.duration) | 0);
this.$nextTick(() => {
this.getDuration();
});
},
// 播放中方法
playing() {
let audio = this.$refs.audio;
this.playFlag = true;
this.$refs.imgItem.classList.add("swin");
this.timer = setInterval(() => {
let min = null;
if (parseInt(audio.currentTime / 60) < 10) {
......@@ -838,466 +569,331 @@ export default {
}
this.startTime = min + ":" + sec; /* 00:00 */
this.range = parseInt(audio.currentTime);
if (this.range == this.offset && this.offset !== 0) {
if (this.range === this.offset && this.offset !== 0) {
this.range = 0; /*播放结束后进度条归零*/
this.startTime = "00:00"; /*播放结束后时间归零*/
this.onOver();
clearInterval(this.timer);
}
}, 1000);
audio.currentTime = value;
},
// 暂停计时器
stopTime() {
clearInterval(this.timer);
},
// 获取音频总长度
getDuration() {
let min = null;
if (this.offset === 0) {
this.overTime = "正在加载中...";
} else {
if (parseInt(this.offset / 60) < 10) {
min = "0" + parseInt(this.offset / 60);
} else {
min = parseInt(this.offset / 60);
}
let sec = parseInt(this.offset % 60);
if (sec < 10) {
sec = "0" + sec;
}
this.overTime = min + ":" + sec; /* 00:00 */
}
},
// 播放完毕
onOver() {
switch (this.playType) {
case 0:
if (this.index < this.showObj.audio.length - 1) {
this.index++;
} else {
this.index = 0;
}
this.$nextTick(() => {
this.onPlay();
});
break;
case 1:
this.range = 0;
this.$nextTick(() => {
this.onPlay();
});
break;
case 2:
if (this.index < this.showObj.audio.length - 1) {
this.index++;
this.$nextTick(() => {
this.onPlay();
});
} else {
this.index = 0;
this.$nextTick(() => {
this.onStop();
});
}
}
},
// 改变循环状态
changeType() {
this.playType < 2 ? this.playType++ : (this.playType = 0);
window.localStorage.setItem("playType", this.playType);
switch (this.playType) {
case 1:
// 神策埋点 点击操作
this.$sa.track("watchClick", {
dayModule: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(0, 9),
weekName: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
elementName:
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
0,
9
) +
"-" +
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
themeID: JSON.parse(localStorage.getItem("lessonDetail")).themeID,
themeName: JSON.parse(localStorage.getItem("lessonDetail"))
.themeName,
goodsID: JSON.parse(localStorage.getItem("lessonDetail")).goodsID,
classID: JSON.parse(localStorage.getItem("lessonDetail")).classID,
buttonName: "单曲循环",
partName: this.contentData.partName,
elementID: this.$route.query.elementId.toString()
});
Toast("单曲循环");
break;
case 2:
// 神策埋点 点击操作
this.$sa.track("watchClick", {
dayModule: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(0, 9),
weekName: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
elementName:
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
0,
9
) +
"-" +
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
themeID: JSON.parse(localStorage.getItem("lessonDetail")).themeID,
themeName: JSON.parse(localStorage.getItem("lessonDetail"))
.themeName,
goodsID: JSON.parse(localStorage.getItem("lessonDetail")).goodsID,
classID: JSON.parse(localStorage.getItem("lessonDetail")).classID,
buttonName: "顺序播放",
partName: this.contentData.partName,
elementID: this.$route.query.elementId.toString()
});
Toast("顺序播放");
break;
case 0:
// 神策埋点 点击操作
this.$sa.track("watchClick", {
dayModule: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(0, 9),
weekName: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
elementName:
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
0,
9
) +
"-" +
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
themeID: JSON.parse(localStorage.getItem("lessonDetail")).themeID,
themeName: JSON.parse(localStorage.getItem("lessonDetail"))
.themeName,
goodsID: JSON.parse(localStorage.getItem("lessonDetail")).goodsID,
classID: JSON.parse(localStorage.getItem("lessonDetail")).classID,
buttonName: "列表循环",
partName: this.contentData.partName,
elementID: this.$route.query.elementId.toString()
});
Toast("列表循环");
break;
}
},
changeAge(value) {
if (this.contentData.content.age && value === 2) {
this.showObj = {
audio: this.contentData.content.audio2,
change: this.contentData.content.change2
};
} else {
this.showObj = {
audio: this.contentData.content.audio,
change: this.contentData.content.change
};
}
this.playFlag = false;
this.startTime = "00:00";
this.overTime = "00:00";
},
finishStudy() {
this.sendConsole("完成今日学习");
let lessonDetail = JSON.parse(localStorage.getItem("lessonDetail"));
let query = JSON.parse(sessionStorage.getItem("classQuery"));
let nowTime = Date.parse(new Date());
let lookTime = (nowTime - lessonDetail.nowTime) / 1000;
let json = {
page_type: 0,
page_id: 5,
stay_time: lookTime
};
subUserLessonApi(
query.elementId,
query.category_id,
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;
// debugger
} else {
getUserWatchApi({ category_id: query.category_id }).then(res => {
this.$store.dispatch("setWatchDetail", res);
// 从评价页面返回过来
if(this.$route.params.evaluate === 1){
this.share_show = true;
this.$route.params.evaluate = 0
} else {
this.$router.push({path: '/evaluate'})
}
// debugger
});
setTimeout(() => {
if (this.$store.state.lookStatus == 0) {
this.audioPoint = audioGood;
} else if (this.$store.state.lookStatus == 1) {
this.audioPoint = audioGreat;
} else {
this.audioPoint = audioPerfect;
}
this.$refs.audioDom.load();
setTimeout(() => {
this.$refs.audioDom.play();
}, 100);
}, 300);
}
});
// this.$refs.sharePage.playAudio()
// this.$refs.sharePage.initPage()
}
},
watch: {
contentData: {
handler: function() {
//特别注意，不能用箭头函数，箭头函数，this指向全局
this.changeAge(this.contentData.age);
this.index = 0;
this.checkCollect();
},
deep: true
},
index(value) {
this.checkCollect();
},
range(value, value2) {
let audio = this.$refs.audio;
if (Math.abs(value - value2) > 2) {
this.timer = setInterval(() => {
let min = null;
if (parseInt(audio.currentTime / 60) < 10) {
min = "0" + parseInt(audio.currentTime / 60);
} else {
min = parseInt(audio.currentTime / 60);
}
let sec = parseInt(audio.currentTime % 60);
if (sec < 10) {
sec = "0" + sec;
}
this.startTime = min + ":" + sec; /* 00:00 */
this.range = parseInt(audio.currentTime);
if (this.range == this.offset && this.offset !== 0) {
this.range = 0; /*播放结束后进度条归零*/
this.startTime = "00:00"; /*播放结束后时间归零*/
this.onOver();
clearInterval(this.timer);
}
}, 1000);
audio.currentTime = value;
}
}
}
}
};
};
</script>
<style scoped lang="less">
@import "../../util/public";
.playImage {
background-size: 40 * @toVw 290 * @toVw;
display: inline-block;
}
.imgBox {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
.box {
width: 100%;
height: 100vh;
transform: translateX(0px);
img {
position: absolute;
width: 80vw;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}
}
._282918034425091245 {
height: 8 * @toVw;
width: 9 * @toVw;
background-position: 0 0;
}
._154722344142123489 {
height: 5 * @toVw;
width: 9 * @toVw;
background-position: 0 -8 * @toVw;
vertical-align: bottom;
}
.next {
height: 16 * @toVw;
width: 16 * @toVw;
background-position: 0 -13 * @toVw;
}
.listPlay {
height: 16 * @toVw;
width: 16 * @toVw;
background-position: 0 -29 * @toVw;
}
.replay {
height: 16 * @toVw;
width: 16 * @toVw;
background-position: 0 -45 * @toVw;
}
.toBig {
height: 16 * @toVw;
width: 16 * @toVw;
background-position: 0 -61 * @toVw;
}
.replayAll {
height: 16 * @toVw;
width: 16 * @toVw;
background-position: 0 -77 * @toVw;
}
.collectDefault {
height: 16 * @toVw;
width: 16 * @toVw;
background-position: 0 -93 * @toVw;
}
.collect {
height: 16 * @toVw;
width: 16 * @toVw;
background-position: 0 -109 * @toVw;
}
.last {
height: 16 * @toVw;
width: 16 * @toVw;
background-position: 0 -125 * @toVw;
}
.list {
height: 16 * @toVw;
width: 16 * @toVw;
background-position: 0 -141 * @toVw;
}
.close {
height: 17 * @toVw;
width: 17 * @toVw;
background-position: 0 -157 * @toVw;
}
.zDefaultIcon {
height: 18 * @toVw;
width: 18 * @toVw;
background-position: 0 -174 * @toVw;
float: right;
}
.zIcon {
height: 18 * @toVw;
width: 18 * @toVw;
background-position: 0 -192 * @toVw;
float: right;
}
.play {
height: 40 * @toVw;
width: 40 * @toVw;
background-position: 0 -210 * @toVw;
}
.stop {
height: 40 * @toVw;
width: 40 * @toVw;
background-position: 0 -250 * @toVw;
}
.iconfont {
color: #cccccc;
}
.icon-icon_stop {
font-size: 50 * @toVw;
color: #69c0ff;
}
.icon-icon_begin {
font-size: 50 * @toVw;
color: #69c0ff;
}
.icon-icon_left {
height: 37 * @toVw;
width: 37 * @toVw;
font-size: 32 * @toVw;
color: #69c0ff;
}
.icon-icon_right {
height: 37 * @toVw;
width: 37 * @toVw;
font-size: 32 * @toVw;
color: #69c0ff;
}
.icon-icon_list {
font-size: 20 * @toVw;
}
.icon-icon_change1 {
font-size: 21 * @toVw;
width: 20 * @toVw;
}
.icon-icon_change {
font-size: 20 * @toVw;
width: 20 * @toVw;
}
.icon-icon_changge {
font-size: 19 * @toVw;
width: 20 * @toVw;
}
.hp-left {
position: relative;
.collect {
position: absolute;
right: 38 * @toVw;
bottom: 48 * @toVw;
}
}
.icon-icon_like1 {
color: #ff7d77;
}
.collect-block {
padding: 10 * @toVw;
border-radius: 4 * @toVw;
background: white;
}
@-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.swin {
-webkit-animation: spin 8s linear 1s 5 alternate;
animation: spin 8s linear infinite;
}
.pause {
animation-play-state: paused;
-webkit-animation-play-state: paused;
}
.noanimation {
-webkit-animation: none !important;
animation: none !important;
}
.content {
background: white;
width: 315 * @toVw;
position: absolute;
top: 70 * @toVw;
left: 20 * @toVw;
right: 20 * @toVw;
bottom: 0;
overflow: auto;
margin: auto;
display: block;
border-radius: 8 * @toVw;
text-align: center;
padding: 10 * @toVw;
.image-block {
width: 188 * @toVw;
height: 188 * @toVw;
margin-top: 5 * @toVw;
box-shadow: 0 0 30 * @toVw 5 * @toVw #ddd;
overflow: hidden;
border-radius: 999 * @toVw;
box-shadow: 0px 0px 4px 0px rgba(96, 173, 240, 1);
border: 4px solid rgba(255, 255, 255, 1);
img {
width: 188 * @toVw;
height: 188 * @toVw;
border-radius: 999 * @toVw;
}
}
.title-block {
margin-top: 20 * @toVw;
margin-bottom: 20 * @toVw;
&.hp {
display: none;
}
.title {
font-size: 16 * @toVw;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: rgba(102, 102, 102, 1);
}
.tips {
font-size: 14 * @toVw;
margin-top: 6 * @toVw;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: rgba(153, 153, 153, 1);
}
}
.range-block {
width: 250 * @toVw;
margin-top: 10 * @toVw;
.time-block {
font-size: 12 * @toVw;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: rgba(102, 102, 102, 1);
text-align: left;
&:after {
content: "";
display: block;
clear: both;
}
.left-time {
float: left;
}
.right-time {
float: right;
}
}
input[type="range"] {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-appearance: none;
border: none;
outline: none;
background: -webkit-linear-gradient(#69c0ff, #69c0ff) no-repeat, #d8d8d8;
background-size: 75% 100%; /*设置左右宽度比例*/
width: 100%;
border-radius: 10 * @toVw; /*这个属性设置使填充进度条时的图形为圆角*/
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type="range"]::-webkit-slider-runnable-track {
-webkit-appearance: none;
height: 4 * @toVw;
border-radius: 2 * @toVw;
}
input[type="range"]:focus {
-webkit-appearance: none;
outline: none;
}
input[type="range"]::-webkit-slider-thumb {
border: none;
outline: none;
-webkit-appearance: none;
border-radius: 50%; /*外观设置为圆形*/
height: 16 * @toVw;
width: 16 * @toVw;
margin-top: -6 * @toVw; /*使滑块超出轨道部分的偏移量相等*/
background: #69c0ff;
}
}
.btn-group {
margin-top: 15 * @toVw;
width: 280 * @toVw;
display: -webkit-flex;
&.hp {
display: none;
}
}
}
.list-popup {
width: 375 * @toVw;
max-height: 345 * @toVw;
overflow: auto;
border-radius: 8 * @toVw 8 * @toVw 0 0;
background: white;
padding-top: 20 * @toVw;
.list-block {
display: block;
width: auto;
margin: 0 20 * @toVw;
padding: 12 * @toVw 36 * @toVw;
border-bottom: 1 * @toVw solid #dddddd;
&.active {
color: #49e2a5;
}
}
.close-btn {
text-align: center;
padding: 20 * @toVw;
}
}
.mint-popup {
}
.imgPop-block {
// max-height: 500 * @toVw;
// height: 100vh;
// width: 100vw;
overflow: auto;
img {
// width: 100vw;
width: 300 * @toVw;
}
}
.btn-block {
position: relative;
// margin-top: 15*@toVw;
text-align: center;
.age-block {
height: 28 * @toVw;
line-height: 28 * @toVw;
border: 1 * @toVw solid #666;
position: absolute;
padding: 0 13 * @toVw;
border-radius: 100 * @toVw;
font-size: 12 * @toVw;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: rgba(102, 102, 102, 1);
}
.age-change-block {
position: absolute;
top: 37 * @toVw;
left: 0;
width: 66 * @toVw;
border-radius: 8 * @toVw;
border: 1 * @toVw solid #666666;
font-size: 12 * @toVw;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: rgba(102, 102, 102, 1);
& > div {
padding: 6 * @toVw 11 * @toVw;
text-align: left;
&:first-child {
border-bottom: 1 * @toVw solid #eee;
}
}
}
.change-block {
border-radius: 1000 * @toVw;
width: 144 * @toVw;
border: 1 * @toVw solid #40a9ff;
&:after {
content: "";
display: block;
clear: both;
}
div {
float: left;
width: 50%;
border-radius: 100 * @toVw;
font-size: 12 * @toVw;
height: 28 * @toVw;
line-height: 28 * @toVw;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: rgba(204, 204, 204, 1);
&.active {
background: #40a9ff;
color: white;
}
}
@import "../../util/public";
.playImage {
background-size: 40 * @toVw 290 * @toVw;
display: inline-block;
}
}
.change-block-HP {
display: none;
}
.parent-finish {
// position: absolute;
// bottom: 0 * @toVw;
width: 100%;
left: 0;
top: 430 * @toVw;
.finish-block {
// position: absolute;
.imgBox {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
padding: 0;
margin: 20 * @toVw 0 0;
text-align: center;
bottom: 0;
img {
width: 202 * @toVw;
.box {
width: 100%;
height: 100vh;
transform: translateX(0px);
img {
position: absolute;
width: 80vw;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}
}
}
@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;
._282918034425091245 {
height: 8 * @toVw;
width: 9 * @toVw;
background-position: 0 0;
}
._282918034425091245 {
height: 8 * @toVw;
._154722344142123489 {
height: 5 * @toVw;
width: 9 * @toVw;
background-position: 0 -4 * @toVw;
background-position: 0 -8 * @toVw;
vertical-align: bottom;
}
.last {
.next {
height: 16 * @toVw;
width: 16 * @toVw;
background-position: 0 -13 * @toVw;
......@@ -1312,7 +908,7 @@ export default {
width: 16 * @toVw;
background-position: 0 -45 * @toVw;
}
.next {
.toBig {
height: 16 * @toVw;
width: 16 * @toVw;
background-position: 0 -61 * @toVw;
......@@ -1322,43 +918,62 @@ export default {
width: 16 * @toVw;
background-position: 0 -77 * @toVw;
}
.list {
.collectDefault {
height: 16 * @toVw;
width: 16 * @toVw;
background-position: 0 -93 * @toVw;
}
.collect {
height: 16 * @toVw;
width: 16 * @toVw;
background-position: 0 -109 * @toVw;
}
.last {
height: 16 * @toVw;
width: 16 * @toVw;
background-position: 0 -125 * @toVw;
}
.list {
height: 16 * @toVw;
width: 16 * @toVw;
background-position: 0 -141 * @toVw;
}
.close {
height: 17 * @toVw;
width: 17 * @toVw;
background-position: 0 -157 * @toVw;
}
.zDefaultIcon {
height: 18 * @toVw;
width: 18 * @toVw;
background-position: 0 -109 * @toVw;
background-position: 0 -174 * @toVw;
float: right;
}
.zIcon {
height: 18 * @toVw;
width: 18 * @toVw;
background-position: 0 -127 * @toVw;
background-position: 0 -192 * @toVw;
float: right;
}
.play {
height: 40 * @toVw;
width: 40 * @toVw;
background-position: 0 -145 * @toVw;
background-position: 0 -210 * @toVw;
}
.stop {
height: 40 * @toVw;
width: 40 * @toVw;
background-position: 0 -185 * @toVw;
background-position: 0 -250 * @toVw;
}
.iconfont {
color: #cccccc;
}
.icon-icon_stop {
height: 50 * @toVw;
width: 50 * @toVw;
font-size: 48 * @toVw;
font-size: 50 * @toVw;
color: #69c0ff;
}
.icon-icon_begin {
height: 50 * @toVw;
width: 50 * @toVw;
font-size: 48 * @toVw;
font-size: 50 * @toVw;
color: #69c0ff;
}
.icon-icon_left {
......@@ -1377,538 +992,926 @@ export default {
font-size: 20 * @toVw;
}
.icon-icon_change1 {
font-size: 20 * @toVw;
font-size: 21 * @toVw;
width: 20 * @toVw;
}
.icon-icon_change {
font-size: 20 * @toVw;
width: 20 * @toVw;
}
.icon-icon_changge {
font-size: 20 * @toVw;
font-size: 19 * @toVw;
width: 20 * @toVw;
}
.hp-left {
position: relative;
margin-top: 8vh;
// margin-bottom: 1vh;
// margin-left: 0;
.collect {
display: none;
position: absolute;
right: 38 * @toVw;
bottom: 48 * @toVw;
}
}
.icon-icon_like1 {
color: #ff7d77;
}
.collect-block {
padding: 10 * @toVw;
border-radius: 4 * @toVw;
background: white;
}
@-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.audio-page {
.swin {
-webkit-animation: spin 8s linear 1s 5 alternate;
animation: spin 8s linear infinite;
}
.pause {
animation-play-state: paused;
-webkit-animation-play-state: paused;
}
.noanimation {
-webkit-animation: none !important;
animation: none !important;
}
.content {
background: white;
width: 315 * @toVw;
position: absolute;
top: 5 * @toVw;
bottom: 5 * @toVw;
left: 5 * @toVw;
right: 5 * @toVw;
top: 70 * @toVw;
left: 20 * @toVw;
right: 20 * @toVw;
bottom: 0;
overflow: auto;
margin: auto;
display: block;
border-radius: 8 * @toVw;
.content {
position: static;
height: 100%;
width: 100%;
display: -webkit-flex;
border-radius: 8 * @toVw;
padding: 0;
.hp-left {
flex: 1;
margin-right: 80 * @toVw;
.hp-top {
display: -webkit-flex;
display: flex;
width: 100%;
}
text-align: center;
padding: 10 * @toVw;
.image-block {
width: 188 * @toVw;
height: 188 * @toVw;
margin-top: 5 * @toVw;
box-shadow: 0 0 30 * @toVw 5 * @toVw #ddd;
overflow: hidden;
border-radius: 999 * @toVw;
box-shadow: 0px 0px 4px 0px rgba(96, 173, 240, 1);
border: 4px solid rgba(255, 255, 255, 1);
img {
width: 188 * @toVw;
height: 188 * @toVw;
border-radius: 999 * @toVw;
}
.image-block {
flex: 1;
width: 150 * @toVw;
height: 150 * @toVw;
box-shadow: 0 0 30 * @toVw 5 * @toVw #ddd;
overflow: hidden;
display: block;
margin: auto;
border-radius: 99 * @toVw;
box-shadow: 0px 0px 4px 0px rgba(96, 173, 240, 1);
border: 4px solid rgba(255, 255, 255, 1);
img {
width: 100%;
border-radius: 999 * @toVw;
}
}
.title-block {
margin-top: 20 * @toVw;
margin-bottom: 20 * @toVw;
&.hp {
display: none;
}
.title {
font-size: 16 * @toVw;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: rgba(102, 102, 102, 1);
}
.btnBox {
flex: 1;
.tips {
font-size: 14 * @toVw;
margin-top: 6 * @toVw;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: rgba(153, 153, 153, 1);
}
.title-block {
margin-top: 24 * @toVw;
display: none;
&.hp {
display: -webkit-flex;
// display: block;
width: 300 * @toVw;
}
.range-block {
width: 250 * @toVw;
margin-top: 10 * @toVw;
.time-block {
font-size: 12 * @toVw;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: rgba(102, 102, 102, 1);
text-align: left;
&:after {
content: "";
display: block;
clear: both;
}
.title {
font-size: 16 * @toVw;
font-family: PingFang-SC-Medium;
font-weight: 500;
// width: 100*@toVw;
color: rgba(102, 102, 102, 1);
.left-time {
float: left;
}
.tips {
font-size: 14 * @toVw;
margin-top: 6 * @toVw;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: rgba(153, 153, 153, 1);
.right-time {
float: right;
}
}
.range-block {
width: 422 * @toVw;
margin-top: 16 * @toVw;
// margin-left: 1vw;
.time-block {
font-size: 12 * @toVw;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: rgba(102, 102, 102, 1);
text-align: left;
&:after {
content: "";
display: block;
clear: both;
}
.left-time {
float: left;
}
.right-time {
float: right;
}
}
input[type="range"] {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-appearance: none;
background: -webkit-linear-gradient(#69c0ff, #69c0ff) no-repeat,
#d8d8d8;
background-size: 75% 100%; /*设置左右宽度比例*/
width: 100%;
border-radius: 10 * @toVw; /*这个属性设置使填充进度条时的图形为圆角*/
}
input[type="range"]::-webkit-slider-runnable-track {
height: 4 * @toVw;
border-radius: 2 * @toVw;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type="range"]:focus {
outline: none;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
border-radius: 50%; /*外观设置为圆形*/
height: 16 * @toVw;
width: 16 * @toVw;
margin-top: -6 * @toVw; /*使滑块超出轨道部分的偏移量相等*/
background: #69c0ff;
}
input[type="range"] {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-appearance: none;
border: none;
outline: none;
background: -webkit-linear-gradient(#69c0ff, #69c0ff) no-repeat, #d8d8d8;
background-size: 75% 100%; /*设置左右宽度比例*/
width: 100%;
border-radius: 10 * @toVw; /*这个属性设置使填充进度条时的图形为圆角*/
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
}
.btn-group {
margin-top: 15vh;
input[type="range"]::-webkit-slider-runnable-track {
-webkit-appearance: none;
height: 4 * @toVw;
border-radius: 2 * @toVw;
}
input[type="range"]:focus {
-webkit-appearance: none;
outline: none;
}
input[type="range"]::-webkit-slider-thumb {
border: none;
outline: none;
-webkit-appearance: none;
border-radius: 50%; /*外观设置为圆形*/
height: 16 * @toVw;
width: 16 * @toVw;
margin-top: -6 * @toVw; /*使滑块超出轨道部分的偏移量相等*/
background: #69c0ff;
}
}
.btn-group {
margin-top: 15 * @toVw;
width: 280 * @toVw;
display: -webkit-flex;
&.hp {
display: none;
width: 200 * @toVw;
&.hp {
display: -webkit-flex;
}
}
}
.list-popup {
width: 375 * @toVw;
max-height: 345 * @toVw;
overflow: auto;
border-radius: 8 * @toVw 8 * @toVw 0 0;
background: white;
padding-top: 20 * @toVw;
.list-block {
display: block;
width: auto;
margin: 0 20 * @toVw;
padding: 12 * @toVw 36 * @toVw;
border-bottom: 1 * @toVw solid #dddddd;
&.active {
color: #49e2a5;
}
}
.close-btn {
text-align: center;
padding: 20 * @toVw;
}
}
.mint-popup {
}
.imgPop-block {
// max-height: 500 * @toVw;
// height: 100vh;
// width: 100vw;
overflow: auto;
img {
// width: 100vw;
width: 300 * @toVw;
}
}
.btn-block {
position: relative;
// margin-top: 15*@toVw;
text-align: center;
.age-block {
height: 28 * @toVw;
line-height: 28 * @toVw;
border: 1 * @toVw solid #666;
position: absolute;
padding: 0 13 * @toVw;
border-radius: 100 * @toVw;
font-size: 12 * @toVw;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: rgba(102, 102, 102, 1);
}
.age-change-block {
position: absolute;
top: 37 * @toVw;
left: 0;
width: 66 * @toVw;
border-radius: 8 * @toVw;
border: 1 * @toVw solid #666666;
font-size: 12 * @toVw;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: rgba(102, 102, 102, 1);
& > div {
padding: 6 * @toVw 11 * @toVw;
text-align: left;
&:first-child {
border-bottom: 1 * @toVw solid #eee;
}
}
}
.list-popup {
width: 375 * @toVw;
max-height: 345 * @toVw;
overflow: auto;
border-radius: 8 * @toVw 8 * @toVw 0 0;
background: white;
padding-top: 20 * @toVw;
.list-block {
.change-block {
border-radius: 1000 * @toVw;
width: 144 * @toVw;
border: 1 * @toVw solid #40a9ff;
&:after {
content: "";
display: block;
width: auto;
margin: 0 20 * @toVw;
padding: 12 * @toVw 36 * @toVw;
border-bottom: 1 * @toVw solid #dddddd;
clear: both;
}
div {
float: left;
width: 50%;
border-radius: 100 * @toVw;
font-size: 12 * @toVw;
height: 28 * @toVw;
line-height: 28 * @toVw;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: rgba(204, 204, 204, 1);
&.active {
color: #49e2a5;
background: #40a9ff;
color: white;
}
}
.close-btn {
text-align: center;
padding: 20 * @toVw;
}
}
.imgPop-block {
max-height: 500 * @toVw;
overflow: auto;
}
.change-block-HP {
display: none;
}
.parent-finish {
// position: absolute;
// bottom: 0 * @toVw;
width: 100%;
left: 0;
top: 430 * @toVw;
.finish-block {
// position: absolute;
width: 100%;
left: 0;
padding: 0;
margin: 20 * @toVw 0 0;
text-align: center;
bottom: 0;
img {
max-width: 300 * @toVw;
width: 202 * @toVw;
}
}
.btn-block {
}
@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;
}
.last {
height: 16 * @toVw;
width: 16 * @toVw;
background-position: 0 -13 * @toVw;
}
.listPlay {
height: 16 * @toVw;
width: 16 * @toVw;
background-position: 0 -29 * @toVw;
}
.replay {
height: 16 * @toVw;
width: 16 * @toVw;
background-position: 0 -45 * @toVw;
}
.next {
height: 16 * @toVw;
width: 16 * @toVw;
background-position: 0 -61 * @toVw;
}
.replayAll {
height: 16 * @toVw;
width: 16 * @toVw;
background-position: 0 -77 * @toVw;
}
.list {
height: 16 * @toVw;
width: 16 * @toVw;
background-position: 0 -93 * @toVw;
}
.zDefaultIcon {
height: 18 * @toVw;
width: 18 * @toVw;
background-position: 0 -109 * @toVw;
float: right;
}
.zIcon {
height: 18 * @toVw;
width: 18 * @toVw;
background-position: 0 -127 * @toVw;
float: right;
}
.play {
height: 40 * @toVw;
width: 40 * @toVw;
background-position: 0 -145 * @toVw;
}
.stop {
height: 40 * @toVw;
width: 40 * @toVw;
background-position: 0 -185 * @toVw;
}
.icon-icon_stop {
height: 50 * @toVw;
width: 50 * @toVw;
font-size: 48 * @toVw;
color: #69c0ff;
}
.icon-icon_begin {
height: 50 * @toVw;
width: 50 * @toVw;
font-size: 48 * @toVw;
color: #69c0ff;
}
.icon-icon_left {
height: 37 * @toVw;
width: 37 * @toVw;
font-size: 32 * @toVw;
color: #69c0ff;
}
.icon-icon_right {
height: 37 * @toVw;
width: 37 * @toVw;
font-size: 32 * @toVw;
color: #69c0ff;
}
.icon-icon_list {
font-size: 20 * @toVw;
}
.icon-icon_change1 {
font-size: 20 * @toVw;
}
.icon-icon_change {
font-size: 20 * @toVw;
}
.icon-icon_changge {
font-size: 20 * @toVw;
}
.hp-left {
position: relative;
min-width: 90 * @toVw;
margin-top: 0;
display: block;
height: 100%;
.age-block {
display: block;
position: static;
padding: 0;
height: 28 * @toVw;
width: 88 * @toVw;
line-height: 28 * @toVw;
border: 1 * @toVw solid #666;
border-radius: 100 * @toVw;
font-size: 12 * @toVw;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: rgba(102, 102, 102, 1);
margin-top: 8vh;
// margin-bottom: 1vh;
// margin-left: 0;
.collect {
display: none;
}
.age-change-block {
}
.audio-page {
position: absolute;
top: 5 * @toVw;
bottom: 5 * @toVw;
left: 5 * @toVw;
right: 5 * @toVw;
overflow: auto;
border-radius: 8 * @toVw;
.content {
position: static;
width: 80 * @toVw;
margin-top: 10 * @toVw;
height: 100%;
width: 100%;
display: -webkit-flex;
border-radius: 8 * @toVw;
border: 1 * @toVw solid #666666;
font-size: 12 * @toVw;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: rgba(102, 102, 102, 1);
& > div {
padding: 6 * @toVw 11 * @toVw;
text-align: left;
&:first-child {
border-bottom: 1 * @toVw solid #eee;
padding: 0;
.hp-left {
flex: 1;
margin-right: 80 * @toVw;
.hp-top {
display: -webkit-flex;
display: flex;
width: 100%;
}
}
}
.change-block-HP {
position: fixed;
top: ~"calc(82vh)";
right: 40 * @toVw;
display: block;
width: 78 * @toVw;
img {
width: 100%;
.image-block {
flex: 1;
width: 150 * @toVw;
height: 150 * @toVw;
box-shadow: 0 0 30 * @toVw 5 * @toVw #ddd;
overflow: hidden;
display: block;
margin: auto;
border-radius: 99 * @toVw;
box-shadow: 0px 0px 4px 0px rgba(96, 173, 240, 1);
border: 4px solid rgba(255, 255, 255, 1);
img {
width: 100%;
border-radius: 999 * @toVw;
}
}
.btnBox {
flex: 1;
}
.title-block {
margin-top: 24 * @toVw;
display: none;
&.hp {
display: -webkit-flex;
// display: block;
width: 300 * @toVw;
}
.title {
font-size: 16 * @toVw;
font-family: PingFang-SC-Medium;
font-weight: 500;
// width: 100*@toVw;
color: rgba(102, 102, 102, 1);
}
.tips {
font-size: 14 * @toVw;
margin-top: 6 * @toVw;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: rgba(153, 153, 153, 1);
}
}
.range-block {
width: 422 * @toVw;
margin-top: 16 * @toVw;
// margin-left: 1vw;
.time-block {
font-size: 12 * @toVw;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: rgba(102, 102, 102, 1);
text-align: left;
&:after {
content: "";
display: block;
clear: both;
}
.left-time {
float: left;
}
.right-time {
float: right;
}
}
input[type="range"] {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-appearance: none;
background: -webkit-linear-gradient(#69c0ff, #69c0ff) no-repeat,
#d8d8d8;
background-size: 75% 100%; /*设置左右宽度比例*/
width: 100%;
border-radius: 10 * @toVw; /*这个属性设置使填充进度条时的图形为圆角*/
}
input[type="range"]::-webkit-slider-runnable-track {
height: 4 * @toVw;
border-radius: 2 * @toVw;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type="range"]:focus {
outline: none;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
border-radius: 50%; /*外观设置为圆形*/
height: 16 * @toVw;
width: 16 * @toVw;
margin-top: -6 * @toVw; /*使滑块超出轨道部分的偏移量相等*/
background: #69c0ff;
}
}
.btn-group {
margin-top: 15vh;
display: none;
width: 200 * @toVw;
&.hp {
display: -webkit-flex;
}
}
}
.change-block {
display: none;
}
}
}
}
@media screen and (min-aspect-ratio: ~"20/8") {
@toVw: 100/900vw;
.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;
}
.last {
height: 16 * @toVw;
width: 16 * @toVw;
background-position: 0 -13 * @toVw;
}
.listPlay {
height: 16 * @toVw;
width: 16 * @toVw;
background-position: 0 -29 * @toVw;
}
.replay {
height: 16 * @toVw;
width: 16 * @toVw;
background-position: 0 -45 * @toVw;
}
.next {
height: 16 * @toVw;
width: 16 * @toVw;
background-position: 0 -61 * @toVw;
}
.replayAll {
height: 16 * @toVw;
width: 16 * @toVw;
background-position: 0 -77 * @toVw;
}
.list {
height: 16 * @toVw;
width: 16 * @toVw;
background-position: 0 -93 * @toVw;
}
.zDefaultIcon {
height: 18 * @toVw;
width: 18 * @toVw;
background-position: 0 -109 * @toVw;
float: right;
}
.zIcon {
height: 18 * @toVw;
width: 18 * @toVw;
background-position: 0 -127 * @toVw;
float: right;
}
.play {
height: 40 * @toVw;
width: 40 * @toVw;
background-position: 0 -145 * @toVw;
}
.stop {
height: 40 * @toVw;
width: 40 * @toVw;
background-position: 0 -185 * @toVw;
}
.icon-icon_stop {
height: 50 * @toVw;
width: 50 * @toVw;
font-size: 48 * @toVw;
color: #69c0ff;
}
.icon-icon_begin {
height: 50 * @toVw;
width: 50 * @toVw;
font-size: 48 * @toVw;
color: #69c0ff;
}
.icon-icon_left {
height: 37 * @toVw;
width: 37 * @toVw;
font-size: 32 * @toVw;
color: #69c0ff;
}
.icon-icon_right {
height: 37 * @toVw;
width: 37 * @toVw;
font-size: 32 * @toVw;
color: #69c0ff;
}
.icon-icon_list {
font-size: 20 * @toVw;
}
.icon-icon_change1 {
font-size: 20 * @toVw;
}
.icon-icon_change {
font-size: 20 * @toVw;
}
.icon-icon_changge {
font-size: 20 * @toVw;
}
.audio-page {
position: absolute;
top: 5 * @toVw;
bottom: 5 * @toVw;
left: 5 * @toVw;
right: 5 * @toVw;
overflow: auto;
border-radius: 8 * @toVw;
.content {
position: static;
height: 100%;
width: 100%;
display: -webkit-flex;
border-radius: 8 * @toVw;
padding: 0;
.hp-left {
flex: 1;
margin-right: 20 * @toVw;
.hp-top {
display: -webkit-flex;
width: 100%;
.list-popup {
width: 375 * @toVw;
max-height: 345 * @toVw;
overflow: auto;
border-radius: 8 * @toVw 8 * @toVw 0 0;
background: white;
padding-top: 20 * @toVw;
.list-block {
display: block;
width: auto;
margin: 0 20 * @toVw;
padding: 12 * @toVw 36 * @toVw;
border-bottom: 1 * @toVw solid #dddddd;
&.active {
color: #49e2a5;
}
}
.close-btn {
text-align: center;
padding: 20 * @toVw;
}
}
.image-block {
width: 150 * @toVw;
height: 150 * @toVw;
box-shadow: 0 0 30 * @toVw 5 * @toVw #ddd;
overflow: hidden;
display: block;
margin: auto;
border-radius: 75 * @toVw;
box-shadow: 0px 0px 4px 0px rgba(96, 173, 240, 1);
border: 4px solid rgba(255, 255, 255, 1);
.imgPop-block {
max-height: 500 * @toVw;
overflow: auto;
img {
width: 100%;
max-width: 300 * @toVw;
}
}
.title-block {
margin-top: 24 * @toVw;
.title {
font-size: 16 * @toVw;
.btn-block {
position: relative;
min-width: 90 * @toVw;
margin-top: 0;
display: block;
height: 100%;
.age-block {
display: block;
position: static;
padding: 0;
height: 28 * @toVw;
width: 88 * @toVw;
line-height: 28 * @toVw;
border: 1 * @toVw solid #666;
border-radius: 100 * @toVw;
font-size: 12 * @toVw;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: rgba(102, 102, 102, 1);
}
.tips {
font-size: 14 * @toVw;
margin-top: 6 * @toVw;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: rgba(153, 153, 153, 1);
}
}
.range-block {
width: auto;
margin-top: 16 * @toVw;
.time-block {
.age-change-block {
position: static;
width: 80 * @toVw;
margin-top: 10 * @toVw;
border-radius: 8 * @toVw;
border: 1 * @toVw solid #666666;
font-size: 12 * @toVw;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: rgba(102, 102, 102, 1);
text-align: left;
&:after {
content: "";
display: block;
clear: both;
}
.left-time {
float: left;
}
.right-time {
float: right;
& > div {
padding: 6 * @toVw 11 * @toVw;
text-align: left;
&:first-child {
border-bottom: 1 * @toVw solid #eee;
}
}
}
input[type="range"] {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-appearance: none;
background: -webkit-linear-gradient(#69c0ff, #69c0ff) no-repeat,
#d8d8d8;
background-size: 75% 100%; /*设置左右宽度比例*/
width: 100%;
border-radius: 10 * @toVw; /*这个属性设置使填充进度条时的图形为圆角*/
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type="range"]::-webkit-slider-runnable-track {
height: 4 * @toVw;
border-radius: 2 * @toVw;
}
input[type="range"]:focus {
outline: none;
.change-block-HP {
position: fixed;
top: ~"calc(82vh)";
right: 40 * @toVw;
display: block;
width: 78 * @toVw;
img {
width: 100%;
}
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
border-radius: 50%; /*外观设置为圆形*/
height: 16 * @toVw;
width: 16 * @toVw;
margin-top: -6 * @toVw; /*使滑块超出轨道部分的偏移量相等*/
background: #69c0ff;
}
}
.btn-group {
margin-top: 15vh;
display: none;
width: 200 * @toVw;
&.hp {
display: -webkit-flex;
.change-block {
display: none;
}
}
}
.list-popup {
width: 375 * @toVw;
max-height: 345 * @toVw;
overflow: auto;
border-radius: 8 * @toVw 8 * @toVw 0 0;
background: white;
padding-top: 20 * @toVw;
.list-block {
display: block;
width: auto;
margin: 0 20 * @toVw;
padding: 12 * @toVw 36 * @toVw;
border-bottom: 1 * @toVw solid #dddddd;
&.active {
color: #49e2a5;
}
}
.close-btn {
text-align: center;
padding: 20 * @toVw;
}
}
@media screen and (min-aspect-ratio: ~"20/8") {
@toVw: 100/900vw;
.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;
}
.imgPop-block {
max-height: 500 * @toVw;
overflow: auto;
img {
max-width: 300 * @toVw;
}
._154722344142123489 {
height: 5 * @toVw;
width: 9 * @toVw;
background-position: 0 0;
}
.btn-block {
position: relative;
min-width: 90 * @toVw;
margin-top: 0;
display: block;
height: 100%;
.age-block {
display: block;
._282918034425091245 {
height: 8 * @toVw;
width: 9 * @toVw;
background-position: 0 -4 * @toVw;
vertical-align: bottom;
}
.last {
height: 16 * @toVw;
width: 16 * @toVw;
background-position: 0 -13 * @toVw;
}
.listPlay {
height: 16 * @toVw;
width: 16 * @toVw;
background-position: 0 -29 * @toVw;
}
.replay {
height: 16 * @toVw;
width: 16 * @toVw;
background-position: 0 -45 * @toVw;
}
.next {
height: 16 * @toVw;
width: 16 * @toVw;
background-position: 0 -61 * @toVw;
}
.replayAll {
height: 16 * @toVw;
width: 16 * @toVw;
background-position: 0 -77 * @toVw;
}
.list {
height: 16 * @toVw;
width: 16 * @toVw;
background-position: 0 -93 * @toVw;
}
.zDefaultIcon {
height: 18 * @toVw;
width: 18 * @toVw;
background-position: 0 -109 * @toVw;
float: right;
}
.zIcon {
height: 18 * @toVw;
width: 18 * @toVw;
background-position: 0 -127 * @toVw;
float: right;
}
.play {
height: 40 * @toVw;
width: 40 * @toVw;
background-position: 0 -145 * @toVw;
}
.stop {
height: 40 * @toVw;
width: 40 * @toVw;
background-position: 0 -185 * @toVw;
}
.icon-icon_stop {
height: 50 * @toVw;
width: 50 * @toVw;
font-size: 48 * @toVw;
color: #69c0ff;
}
.icon-icon_begin {
height: 50 * @toVw;
width: 50 * @toVw;
font-size: 48 * @toVw;
color: #69c0ff;
}
.icon-icon_left {
height: 37 * @toVw;
width: 37 * @toVw;
font-size: 32 * @toVw;
color: #69c0ff;
}
.icon-icon_right {
height: 37 * @toVw;
width: 37 * @toVw;
font-size: 32 * @toVw;
color: #69c0ff;
}
.icon-icon_list {
font-size: 20 * @toVw;
}
.icon-icon_change1 {
font-size: 20 * @toVw;
}
.icon-icon_change {
font-size: 20 * @toVw;
}
.icon-icon_changge {
font-size: 20 * @toVw;
}
.audio-page {
position: absolute;
top: 5 * @toVw;
bottom: 5 * @toVw;
left: 5 * @toVw;
right: 5 * @toVw;
overflow: auto;
border-radius: 8 * @toVw;
.content {
position: static;
height: 100%;
width: 100%;
display: -webkit-flex;
border-radius: 8 * @toVw;
padding: 0;
height: 28 * @toVw;
width: 88 * @toVw;
line-height: 28 * @toVw;
border: 1 * @toVw solid #666;
border-radius: 100 * @toVw;
font-size: 12 * @toVw;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: rgba(102, 102, 102, 1);
.hp-left {
flex: 1;
margin-right: 20 * @toVw;
.hp-top {
display: -webkit-flex;
width: 100%;
}
}
.image-block {
width: 150 * @toVw;
height: 150 * @toVw;
box-shadow: 0 0 30 * @toVw 5 * @toVw #ddd;
overflow: hidden;
display: block;
margin: auto;
border-radius: 75 * @toVw;
box-shadow: 0px 0px 4px 0px rgba(96, 173, 240, 1);
border: 4px solid rgba(255, 255, 255, 1);
img {
width: 100%;
}
}
.title-block {
margin-top: 24 * @toVw;
.title {
font-size: 16 * @toVw;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: rgba(102, 102, 102, 1);
}
.tips {
font-size: 14 * @toVw;
margin-top: 6 * @toVw;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: rgba(153, 153, 153, 1);
}
}
.range-block {
width: auto;
margin-top: 16 * @toVw;
.time-block {
font-size: 12 * @toVw;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: rgba(102, 102, 102, 1);
text-align: left;
&:after {
content: "";
display: block;
clear: both;
}
.left-time {
float: left;
}
.right-time {
float: right;
}
}
input[type="range"] {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-appearance: none;
background: -webkit-linear-gradient(#69c0ff, #69c0ff) no-repeat,
#d8d8d8;
background-size: 75% 100%; /*设置左右宽度比例*/
width: 100%;
border-radius: 10 * @toVw; /*这个属性设置使填充进度条时的图形为圆角*/
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type="range"]::-webkit-slider-runnable-track {
height: 4 * @toVw;
border-radius: 2 * @toVw;
}
input[type="range"]:focus {
outline: none;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
border-radius: 50%; /*外观设置为圆形*/
height: 16 * @toVw;
width: 16 * @toVw;
margin-top: -6 * @toVw; /*使滑块超出轨道部分的偏移量相等*/
background: #69c0ff;
}
}
.btn-group {
margin-top: 15vh;
display: none;
width: 200 * @toVw;
&.hp {
display: -webkit-flex;
}
}
}
.age-change-block {
position: static;
width: 80 * @toVw;
margin-top: 10 * @toVw;
border-radius: 8 * @toVw;
border: 1 * @toVw solid #666666;
font-size: 12 * @toVw;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: rgba(102, 102, 102, 1);
& > div {
padding: 6 * @toVw 11 * @toVw;
text-align: left;
&:first-child {
border-bottom: 1 * @toVw solid #eee;
.list-popup {
width: 375 * @toVw;
max-height: 345 * @toVw;
overflow: auto;
border-radius: 8 * @toVw 8 * @toVw 0 0;
background: white;
padding-top: 20 * @toVw;
.list-block {
display: block;
width: auto;
margin: 0 20 * @toVw;
padding: 12 * @toVw 36 * @toVw;
border-bottom: 1 * @toVw solid #dddddd;
&.active {
color: #49e2a5;
}
}
.close-btn {
text-align: center;
padding: 20 * @toVw;
}
}
.change-block-HP {
position: absolute;
top: ~"calc(100vh - 12.5vw)";
display: block;
width: 78 * @toVw;
.imgPop-block {
max-height: 500 * @toVw;
overflow: auto;
img {
width: 100%;
max-width: 300 * @toVw;
}
}
.change-block {
display: none;
.btn-block {
position: relative;
min-width: 90 * @toVw;
margin-top: 0;
display: block;
height: 100%;
.age-block {
display: block;
position: static;
padding: 0;
height: 28 * @toVw;
width: 88 * @toVw;
line-height: 28 * @toVw;
border: 1 * @toVw solid #666;
border-radius: 100 * @toVw;
font-size: 12 * @toVw;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: rgba(102, 102, 102, 1);
}
.age-change-block {
position: static;
width: 80 * @toVw;
margin-top: 10 * @toVw;
border-radius: 8 * @toVw;
border: 1 * @toVw solid #666666;
font-size: 12 * @toVw;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: rgba(102, 102, 102, 1);
& > div {
padding: 6 * @toVw 11 * @toVw;
text-align: left;
&:first-child {
border-bottom: 1 * @toVw solid #eee;
}
}
}
.change-block-HP {
position: absolute;
top: ~"calc(100vh - 12.5vw)";
display: block;
width: 78 * @toVw;
img {
width: 100%;
}
}
.change-block {
display: none;
}
}
}
}
}
</style>
<style>
.van-image-preview__image {
/* max-height: 150%; */
/* bottom: none; */
}
.van-image-preview__image {
/* max-height: 150%; */
/* bottom: none; */
}
</style>
src/components/newLesson/evaluate.vue 0 → 100644
View file @ 15e79249
<template>
<div class="evaluate-page">
<div class="evaluate-content">
<!-- title -->
<div class="evaluate-content-title">
记录下宝贝的精彩表现吧！
</div>
<!-- 打分 -->
<ul class="evaluate-content-scoring">
<li>
<div class="scoring-category-titlle">兴趣度：</div>
<div class="scoring-category-icons">
<img v-for="(item, index) in 5" @click="scoringCategoryClick(index, 1)" :src="imageNum <= index ? scoringCategoryImage.scoringCategory1 : scoringCategoryImage.scoringCategory1Active" alt="">
</div>
</li>
<li>
<div class="scoring-category-titlle">专注度：</div>
<div class="scoring-category-icons">
<img v-for="(item, index) in 5" @click="scoringCategoryClick(index, 2)" :src="imageNum2 <= index ? scoringCategoryImage.scoringCategory2 : scoringCategoryImage.scoringCategory2Active" alt="">
</div>
</li>
<li>
<div class="scoring-category-titlle">互动度：</div>
<div class="scoring-category-icons">
<img v-for="(item, index) in 5" @click="scoringCategoryClick(index, 3)" :src="imageNum3 <= index ? scoringCategoryImage.scoringCategory3 : scoringCategoryImage.scoringCategory3Active" alt="">
</div>
</li>
</ul>
<!-- 输入框 -->
<div class="checkbox-put">
<div contenteditable="true" class="checkbox-put-contenteditable" v-text="myHtmlCode" @input="handleInput" placeholder="点击输入宝贝今天的学习表现、收获…"></div>
<div class="checkbox-text">*可输入15-100字</div>
</div>
<!-- btn -->
<div class="growth-btn" @click="userCategoryClick">
<img :src="growthRecord" alt="">
</div>
<!-- 提示 -->
<div class="growth-text">
保存后可随时至“我的”-“成长记录”里查看
</div>
<div class="skip-text" @click="skipTextClick">跳过</div>
</div>
</div>
</template>
<script type="text/ecmascript-6">
import { postUserGrowthAddApi, subUserLessonApi, getUserGrowthRecordApi } from "../../service/api";
import { scoringCategory } from "../../util/imgUrl";
import growthRecord from "../../assets/growth_record.png";
export default {
name: 'evaluate',
data() {
return {
cache: {},
imageNum : 0, // 兴趣度
imageNum2 : 0, // 专注度
imageNum3 : 0, // 互动度
myHtmlCode: '',
growthRecord: growthRecord,
scoringCategoryImage: scoringCategory,
}
},
methods: {
/**
* 点击
*/
scoringCategoryClick(num, state) {
if(state === 1)
this.imageNum = num + 1;
else if(state === 2)
this.imageNum2 = num + 1;
else
this.imageNum3 = num + 1;
this.cache = { imageNum: this.imageNum, imageNum2: this.imageNum2, imageNum3: this.imageNum3 }
localStorage.setItem('cache', JSON.stringify(this.cache))
},
handleInput(e){
let checkboxPutContenteditable = document.querySelector('.checkbox-put-contenteditable');
this.cache = Object.assign({}, this.cache, { inner: checkboxPutContenteditable.innerHTML })
localStorage.setItem('cache', JSON.stringify(this.cache))
},
/**
* 提交成长记录
* @returns {Promise.<void>}
*/
async userCategoryClick() {
let checkboxPutContenteditable = document.querySelector('.checkbox-put-contenteditable');
let classQuery = JSON.parse(sessionStorage.getItem("classQuery")), // 获取elementId，category_id，periods_id
nowTime = Date.parse(new Date()), // 时间
lessonDetail = JSON.parse(localStorage.getItem("lessonDetail")),// 获取延长时间
lookTime = (nowTime - lessonDetail.nowTime) / 1000,
watchLog = { page_type: 0, page_id: 7, stay_time: lookTime };
let data = { interest: this.imageNum, concert: this.imageNum2, parent_child: this.imageNum3, growth_record: checkboxPutContenteditable.innerHTML }
if(this.imageNum !== 0 || this.imageNum !== 0 || this.imageNum !== 0) {
// 提交评价页面
const postUserGrowthAddData = await postUserGrowthAddApi(classQuery.elementId, classQuery.category_id, classQuery.periods_id, data)
// 提交看课数据
const subUserLessonDatac = subUserLessonApi(classQuery.elementId, classQuery.category_id, classQuery.periods_id, watchLog)
localStorage.removeItem("cache");
this.$router.push({name: 'newLesson', params: { evaluate: 1, type: 3}, query: { periods_id: classQuery.periods_id, category_id: classQuery.category_id, elementId: classQuery.elementId }})
}
},
skipTextClick() {
let classQuery = JSON.parse(sessionStorage.getItem("classQuery"))
this.$router.push({name: 'newLesson', params: { evaluate: 3, type: 3 }, query: { periods_id: classQuery.periods_id, category_id: classQuery.category_id, elementId: classQuery.elementId }})
},
/**
* 初始化
*/
async userCategoryInit() {
let cacheObj = JSON.parse(localStorage.getItem('cache'))
console.log(cacheObj)
if( cacheObj ) {
// 从缓存里获取
this.imageNum = cacheObj.imageNum || 0;
this.imageNum2 = cacheObj.imageNum2 || 0;
this.imageNum3 = cacheObj.imageNum3 || 0;
this.myHtmlCode = cacheObj.inner || '';
}else {
// 从接口获取
let classQuery = JSON.parse(sessionStorage.getItem("classQuery"))
const getUserGrowthRecordData = await getUserGrowthRecordApi(classQuery.elementId, classQuery.category_id, classQuery.periods_id);
this.imageNum = getUserGrowthRecordData.interest;
this.imageNum2 = getUserGrowthRecordData.concent;
this.imageNum3 = getUserGrowthRecordData.parent_child;
this.myHtmlCode = getUserGrowthRecordData.growth_record;
}
}
},
mounted() {
this.userCategoryInit()
}
}
</script>
<style lang="less" type="text/less">
@import "../../util/public";
.evaluate-page {
width: 100%;
height: 100%;
background: #EEEEEE;
padding: 10 * @toVw 20 * @toVw 0;
box-sizing: border-box;
.evaluate-content {
width: 100%;
margin: auto;
padding: 0 26 * @toVw 10 * @toVw;
background: #fff;
border-radius: 8 * @toVw;
box-sizing: border-box;
/* title */
.evaluate-content-title {
padding: 20 * @toVw 0;
text-align: center;
letter-spacing: 1px;
font-size: 18 * @toVw;
font-weight: 500;
color: #40A9FF;
}
/* 打分 */
.evaluate-content-scoring {
width: 100%;
font-size: 0;
padding-bottom: 21 * @toVw;
li {
padding-top: 15 * @toVw;
.scoring-category-titlle {
width: 56 * @toVw;
display: inline-block;
vertical-align: middle;
font-size: 14 * @toVw;
color: #333333;
}
.scoring-category-icons {
width: calc(100% - 16vw);
display: inline-block;
vertical-align: middle;
img {
width: 28 * @toVw;
height: 28 * @toVw;
margin-left: 10 * @toVw;
}
}
}
}
/* 输入框 */
.checkbox-put {
width: 100%;
padding-bottom: 29 * @toVw;
.checkbox-put-contenteditable {
width: 100%;
height: 170 * @toVw;
padding: 10 * @toVw;
overflow: auto;
border: 1px solid #E2E2E2;
border-radius: 10 * @toVw;
box-sizing: border-box;
font-size: 14 * @toVw;
outline: none;
&:empty:before{
content: attr(placeholder);
color:#bbb;
}
}
.checkbox-text {
padding-top: 5 * @toVw;
font-size: 12 * @toVw;
color: #666666;
}
}
/* btn */
.growth-btn {
width: 200 * @toVw;
height: 47 * @toVw;
border-radius: 24 * @toVw;
img {
width: 100%;
height: 100%;
}
}
/* 提示 */
.growth-text {
padding-top: 10 * @toVw;
text-align: center;
letter-spacing: 1px;
font-size: 12 * @toVw;
color: #666666;
}
.skip-text {
padding-top: 10 * @toVw;
text-decoration: underline;
text-align: center;
font-size: 12 * @toVw;
color: #40A9FF;
}
}
}
</style>
src/components/newLesson/index.vue
View file @ 15e79249
......@@ -17,7 +17,7 @@
</i>
<i :class="{headerHP:true, defaultFun:nowShow !== 3,funHP:nowShow===3}" @click="type=3">
<img :src="HP.listen1" alt />
</i>
</i>ƒ
<i class="headerHP home" @click="backList">
<img :src="HP.back" alt />
</i>
......@@ -37,368 +37,377 @@
</div>
</template>
<script>
import {
subUserLessonApi,
getUserWatchApi,
getwechatParam,
getCountTimeApi
} from "../../service/api";
import { Toast } from "vant";
import lookBlock from "./look";
import videoBlock from "./video";
import backUrl from "../../assets/newLesson/back.png";
import { HP } from "../../util/imgUrl.js";
import audioBlock from "./audio";
import sharePage from "./share";
export default {
name: "index",
data() {
let query;
if (this.$store.state.classQuery.periods_id) {
query = this.$store.state.classQuery;
} else {
import {
subUserLessonApi,
getUserWatchApi,
getwechatParam,
getCountTimeApi
} from "../../service/api";
import { Toast } from "vant";
import lookBlock from "./look";
import videoBlock from "./video";
import backUrl from "../../assets/newLesson/back.png";
import { HP } from "../../util/imgUrl.js";
import audioBlock from "./audio";
import sharePage from "./share";
export default {
name: "index",
data() {
let query;
if (this.$store.state.classQuery.periods_id) {
query = this.$store.state.classQuery;
} else {
// debugger
query = JSON.parse(sessionStorage.getItem("classQuery"));
}
// debugger
query = JSON.parse(sessionStorage.getItem("classQuery"));
}
// debugger
return {
backUrl: backUrl,
periods_id: query.periods_id,
category_id: query.category_id,
elementId: query.elementId,
lesson: null,
nowShow: 0,
page_id: 1,
stillTime: 0,
watchDetail: null,
timeInterval: null,
nowLesson: {
type: "",
content: null,
age: 1
},
HP: HP,
type: 1,
saveTime:null,
minute:'',
percent:'',
title:'',
domTitle:''
};
},
watch: {
type() {
this.changeTitle(this.type);
}
},
components: {
lookBlock,
videoBlock,
audioBlock,
sharePage
},
mounted() {
// this.changeTitle(this.type);
this.initPage();
},
beforeDestroy(){
clearInterval(this.saveTime)
},
methods: {
enableShare: function(option) {
let that = this;
getwechatParam({
api_list: "onMenuShareAppMessage,onMenuShareTimeline",
url: window.location.href.split("#")[0]
}).then(wechatRes => {
wx.config({
debug: false,
appId: wechatRes.appId,
timestamp: parseInt(wechatRes.timestamp),
nonceStr: wechatRes.nonceStr,
signature: wechatRes.signature,
jsApiList: wechatRes.jsApiList
});
wx.ready(function() {
wx.onMenuShareTimeline({
title: option.product_title, // 分享标题
desc: option.desc, // 分享描述
link: option.shareUrl, // 分享链接
imgUrl:
option.shareIcon ||
"https://cdn.singsingenglish.com/singsing/recommend/logo-refer.png", // 分享图标
success: function() {
// debugger
let lessonDetail = JSON.parse(
localStorage.getItem("lessonDetail")
);
let nowTime = Date.parse(new Date());
let json = {
page_type: 0,
page_id: 6,
stay_time: 0
};
subUserLessonApi(
that.elementId,
that.category_id,
that.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)
);
});
},
cancel: function() {}
return {
backUrl: backUrl,
periods_id: query.periods_id,
category_id: query.category_id,
elementId: query.elementId,
lesson: JSON.parse(localStorage.getItem("lessonDetail")),
nowShow: 0,
page_id: 1,
stillTime: 0,
watchDetail: null,
timeInterval: null,
nowLesson: {
type: "",
content: null,
age: 1
},
HP: HP,
type: 1,
saveTime:null,
minute:'',
percent:'',
title:'',
domTitle:''
};
},
watch: {
type() {
this.changeTitle(this.type);
}
},
components: {
lookBlock,
videoBlock,
audioBlock,
sharePage
},
mounted() {
// 直接跳转和提交跳转
if(this.$route.params.evaluate === 1 || this.$route.params.evaluate === 3) {
this.nowShow = parseInt(this.$route.params.type)
this.type = parseInt(this.$route.params.type)
this.changeTitle(parseInt(this.$route.params.type))
}else {
this.initPage();
}
},
/**
* 离开页面前关闭--这个记录看课时长
*/
beforeDestroy(){
clearInterval(this.saveTime)
},
methods: {
enableShare: function(option) {
let that = this;
getwechatParam({
api_list: "onMenuShareAppMessage,onMenuShareTimeline",
url: window.location.href.split("#")[0]
}).then(wechatRes => {
wx.config({
debug: false,
appId: wechatRes.appId,
timestamp: parseInt(wechatRes.timestamp),
nonceStr: wechatRes.nonceStr,
signature: wechatRes.signature,
jsApiList: wechatRes.jsApiList
});
wx.onMenuShareAppMessage({
title: option.product_title, // 分享标题
desc: option.desc, // 分享描述
link: option.shareUrl, // 分享链接
imgUrl:
option.shareIcon ||
"https://cdn.singsingenglish.com/singsing/recommend/logo-refer.png", // 分享图标
success: function() {
let lessonDetail = JSON.parse(
localStorage.getItem("lessonDetail")
);
let nowTime = Date.parse(new Date());
let json = {
page_type: 0,
page_id: 6,
stay_time: 0
};
subUserLessonApi(
that.elementId,
that.category_id,
that.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)
wx.ready(function() {
wx.onMenuShareTimeline({
title: option.product_title, // 分享标题
desc: option.desc, // 分享描述
link: option.shareUrl, // 分享链接
imgUrl:
option.shareIcon ||
"https://cdn.singsingenglish.com/singsing/recommend/logo-refer.png", // 分享图标
success: function() {
// debugger
let lessonDetail = JSON.parse(
localStorage.getItem("lessonDetail")
);
let nowTime = Date.parse(new Date());
let json = {
page_type: 0,
page_id: 6,
stay_time: 0
};
subUserLessonApi(
that.elementId,
that.category_id,
that.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)
);
});
},
cancel: function() {}
});
wx.onMenuShareAppMessage({
title: option.product_title, // 分享标题
desc: option.desc, // 分享描述
link: option.shareUrl, // 分享链接
imgUrl:
option.shareIcon ||
"https://cdn.singsingenglish.com/singsing/recommend/logo-refer.png", // 分享图标
success: function() {
let lessonDetail = JSON.parse(
localStorage.getItem("lessonDetail")
);
});
},
cancel: function() {}
let nowTime = Date.parse(new Date());
let json = {
page_type: 0,
page_id: 6,
stay_time: 0
};
subUserLessonApi(
that.elementId,
that.category_id,
that.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)
);
});
},
cancel: function() {}
});
});
});
});
},
onShare(URL) {
this.enableShare({
product_title: `我家宝宝正在【唱唱启蒙英语】挑战童谣，已坚持${this.watchDetail.total_day}天`, // 分享标题
desc:
JSON.parse(localStorage.getItem("userDesc")).nickname +
`赠您【领取超值课程】特权，来唱唱和百万家庭一起快乐启蒙英语吧！`, //
shareIcon: "https://cdn.singsingenglish.com/logo/logo.jpg",
shareUrl: URL
});
},
backList() {
let lessonDetail = JSON.parse(localStorage.getItem("lessonDetail"));
let nowTime = Date.parse(new Date());
let lookTime = (nowTime - lessonDetail.nowTime) / 1000;
this.$sa.track("watchClick", {
buttonName: "返回课程列表",
partName:
this.nowShow == 1
? "爸妈看一看"
: this.nowShow == 2
? "宝贝玩一玩"
: this.nowShow == 3
? "磨磨小耳朵"
: "",
elementID: this.lesson.id.toString(),
dayModule: this.lesson.domTitle.slice(0, 9),
weekName: this.lesson.domTitle.slice(10, this.lesson.domTitle.length),
elementName:
this.lesson.domTitle.slice(0, 9) +
"-" +
this.lesson.domTitle.slice(10, this.lesson.domTitle.length),
themeID: this.lesson.themeID,
themeName: this.lesson.themeName,
goodsID: this.lesson.goodsID,
classID: this.lesson.classID
});
let json = {
page_type: 0,
page_id: this.page_id,
stay_time: lookTime
};
subUserLessonApi(
this.elementId,
this.category_id,
this.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));
let query = {
periods_id: this.periods_id,
course_type: this.course_type,
parent_category_id: this.parent_category_id,
back_id: this.category_id
};
// console.log(query);
// debugger
this.$router.push({ name: "map", query: query });
});
},
changeTitle(type) {
// if(type==type)
Toast.loading({
mask: true,
message: ""
});
this.nowShow = type;
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: this.page_id,
stay_time: lookTime
};
subUserLessonApi(
this.elementId,
this.category_id,
this.periods_id,
json
).then(res => {
Toast.clear();
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) {
case 1:
// 神策埋点 板块切换
this.$sa.track("learnPart", {
partName: "爸妈看一看",
elementID: this.lesson.id.toString(),
dayModule: this.lesson.domTitle.slice(0, 9),
weekName: this.lesson.domTitle.slice(
10,
this.lesson.domTitle.length
),
elementName:
},
onShare(URL) {
this.enableShare({
product_title: `我家宝宝正在【唱唱启蒙英语】挑战童谣，已坚持${this.watchDetail.total_day}天`, // 分享标题
desc:
JSON.parse(localStorage.getItem("userDesc")).nickname +
`赠您【领取超值课程】特权，来唱唱和百万家庭一起快乐启蒙英语吧！`, //
shareIcon: "https://cdn.singsingenglish.com/logo/logo.jpg",
shareUrl: URL
});
},
backList() {
let lessonDetail = JSON.parse(localStorage.getItem("lessonDetail"));
let nowTime = Date.parse(new Date());
let lookTime = (nowTime - lessonDetail.nowTime) / 1000;
this.$sa.track("watchClick", {
buttonName: "返回课程列表",
partName:
this.nowShow == 1
? "爸妈看一看"
: this.nowShow == 2
? "宝贝玩一玩"
: this.nowShow == 3
? "磨磨小耳朵"
: "",
elementID: this.lesson.id.toString(),
dayModule: this.lesson.domTitle.slice(0, 9),
weekName: this.lesson.domTitle.slice(10, this.lesson.domTitle.length),
elementName:
this.lesson.domTitle.slice(0, 9) +
"-" +
this.lesson.domTitle.slice(10, this.lesson.domTitle.length),
themeID: this.lesson.themeID,
themeName: this.lesson.themeName,
goodsID: this.lesson.goodsID,
classID: this.lesson.classID,
is_view_today:
!!new Date().setHours(0, 0, 0, 0) ===
new Date(this.lesson.push_time).setHours(0, 0, 0, 0)
});
this.page_id = 1;
this.nowLesson = {
type: "text",
title: 1,
partName: "爸妈看一看",
content: this.lesson.content.look,
age: this.nowLesson.age
themeID: this.lesson.themeID,
themeName: this.lesson.themeName,
goodsID: this.lesson.goodsID,
classID: this.lesson.classID
});
let json = {
page_type: 0,
page_id: this.page_id,
stay_time: lookTime
};
subUserLessonApi(
this.elementId,
this.category_id,
this.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));
let query = {
periods_id: this.periods_id,
course_type: this.course_type,
parent_category_id: this.parent_category_id,
back_id: this.category_id
};
// debugger
break;
case 2:
// 神策埋点 板块切换
this.$sa.track("learnPart", {
partName: "宝贝玩一玩",
elementID: this.lesson.id.toString(),
dayModule: this.lesson.domTitle.slice(0, 9),
weekName: this.lesson.domTitle.slice(
10,
this.lesson.domTitle.length
),
elementName:
this.lesson.domTitle.slice(0, 9) +
"-" +
this.lesson.domTitle.slice(10, this.lesson.domTitle.length),
themeID: this.lesson.themeID,
themeName: this.lesson.themeName,
goodsID: this.lesson.goodsID,
classID: this.lesson.classID,
is_view_today:
!!new Date().setHours(0, 0, 0, 0) ===
new Date(this.lesson.push_time).setHours(0, 0, 0, 0)
});
this.page_id = 2;
if (this.lesson.content.play.type) {
// console.log(query);
// debugger
this.$router.push({ name: "map", query: query });
});
},
changeTitle(type) {
// if(type==type)
Toast.loading({
mask: true,
message: ""
});
this.nowShow = type;
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: this.page_id,
stay_time: lookTime
};
subUserLessonApi(
this.elementId,
this.category_id,
this.periods_id,
json
).then(res => {
Toast.clear();
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) {
case 1:
// 神策埋点 板块切换
this.$sa.track("learnPart", {
partName: "爸妈看一看",
elementID: this.lesson.id.toString(),
dayModule: this.lesson.domTitle.slice(0, 9),
weekName: this.lesson.domTitle.slice(
10,
this.lesson.domTitle.length
),
elementName:
this.lesson.domTitle.slice(0, 9) +
"-" +
this.lesson.domTitle.slice(10, this.lesson.domTitle.length),
themeID: this.lesson.themeID,
themeName: this.lesson.themeName,
goodsID: this.lesson.goodsID,
classID: this.lesson.classID,
is_view_today:
!!new Date().setHours(0, 0, 0, 0) ===
new Date(this.lesson.push_time).setHours(0, 0, 0, 0)
});
this.page_id = 1;
this.nowLesson = {
type: "audio",
title: 2,
partName: "宝贝玩一玩",
content: this.lesson.content.play,
type: "text",
title: 1,
partName: "爸妈看一看",
content: this.lesson.content.look,
age: this.nowLesson.age
};
} else {
this.nowLesson = {
type: "video",
title: 2,
// debugger
break;
case 2:
// 神策埋点 板块切换
this.$sa.track("learnPart", {
partName: "宝贝玩一玩",
content: this.lesson.content.play,
age: this.nowLesson.age
};
}
break;
case 3:
this.$sa.track("learnPart", {
partName: "磨磨小耳朵",
elementID: this.lesson.id.toString(),
dayModule: this.lesson.domTitle.slice(0, 9),
weekName: this.lesson.domTitle.slice(
10,
this.lesson.domTitle.length
),
elementName:
this.lesson.domTitle.slice(0, 9) +
"-" +
this.lesson.domTitle.slice(10, this.lesson.domTitle.length),
themeID: this.lesson.themeID,
themeName: this.lesson.themeName,
goodsID: this.lesson.goodsID,
classID: this.lesson.classID,
is_view_today:
!!new Date().setHours(0, 0, 0, 0) ===
new Date(this.lesson.push_time).setHours(0, 0, 0, 0)
});
this.page_id = 5;
if (this.lesson.content.fun.type) {
this.nowLesson = {
type: "audio",
title: 3,
partName: "磨磨小耳朵",
content: this.lesson.content.fun,
age: this.nowLesson.age
};
} else {
this.nowLesson = {
type: "video",
elementID: this.lesson.id.toString(),
dayModule: this.lesson.domTitle.slice(0, 9),
weekName: this.lesson.domTitle.slice(
10,
this.lesson.domTitle.length
),
elementName:
this.lesson.domTitle.slice(0, 9) +
"-" +
this.lesson.domTitle.slice(10, this.lesson.domTitle.length),
themeID: this.lesson.themeID,
themeName: this.lesson.themeName,
goodsID: this.lesson.goodsID,
classID: this.lesson.classID,
is_view_today:
!!new Date().setHours(0, 0, 0, 0) ===
new Date(this.lesson.push_time).setHours(0, 0, 0, 0)
});
this.page_id = 2;
if (this.lesson.content.play.type) {
this.nowLesson = {
type: "audio",
title: 2,
partName: "宝贝玩一玩",
content: this.lesson.content.play,
age: this.nowLesson.age
};
} else {
this.nowLesson = {
type: "video",
title: 2,
partName: "宝贝玩一玩",
content: this.lesson.content.play,
age: this.nowLesson.age
};
}
break;
case 3:
this.$sa.track("learnPart", {
partName: "磨磨小耳朵",
title: 3,
content: this.lesson.content.fun,
age: this.nowLesson.age
};
}
break;
}
},
countTimeFn(){
this.saveTime = setInterval(()=>{
elementID: this.lesson.id.toString(),
dayModule: this.lesson.domTitle.slice(0, 9),
weekName: this.lesson.domTitle.slice(
10,
this.lesson.domTitle.length
),
elementName:
this.lesson.domTitle.slice(0, 9) +
"-" +
this.lesson.domTitle.slice(10, this.lesson.domTitle.length),
themeID: this.lesson.themeID,
themeName: this.lesson.themeName,
goodsID: this.lesson.goodsID,
classID: this.lesson.classID,
is_view_today:
!!new Date().setHours(0, 0, 0, 0) ===
new Date(this.lesson.push_time).setHours(0, 0, 0, 0)
});
this.page_id = 5;
if (this.lesson.content.fun.type) {
this.nowLesson = {
type: "audio",
title: 3,
partName: "磨磨小耳朵",
content: this.lesson.content.fun,
age: this.nowLesson.age
};
} else {
this.nowLesson = {
type: "video",
partName: "磨磨小耳朵",
title: 3,
content: this.lesson.content.fun,
age: this.nowLesson.age
};
}
break;
}
},
countTimeFn(){
this.saveTime = setInterval(()=>{
let lessonDetail = JSON.parse(localStorage.getItem("lessonDetail"));
let nowTime = Date.parse(new Date());
let lookTime = (nowTime - lessonDetail.nowTime) / 1000;
......@@ -408,290 +417,185 @@ export default {
stay_time: lookTime
};
subUserLessonApi(
this.elementId,
this.category_id,
this.periods_id,
json
).then(res => {
Toast.clear();
lessonDetail.total_watch_time = res.total_watch_time;
lessonDetail.nowTime = nowTime;
lessonDetail.star_num = res.total_star_num;
localStorage.setItem("lessonDetail", JSON.stringify(lessonDetail));
this.elementId,
this.category_id,
this.periods_id,
json
).then(res => {
Toast.clear();
lessonDetail.total_watch_time = res.total_watch_time;
lessonDetail.nowTime = nowTime;
lessonDetail.star_num = res.total_star_num;
localStorage.setItem("lessonDetail", JSON.stringify(lessonDetail));
});
},120000)
// debugger
this.$store.dispatch('setTimeout',this.saveTime)
},
initPage() {
Toast.loading({
mask: true,
message: ""
});
},120000)
// debugger
this.$store.dispatch('setTimeout',this.saveTime)
},
initPage() {
Toast.loading({
mask: true,
message: ""
});
this.parent_category_id = this.$route.query.parent_category_id;
this.course_type = this.$route.query.course_type;
this.countTimeFn()
this.lesson = JSON.parse(localStorage.getItem("lessonDetail"));
// debugger
getUserWatchApi({category_id:this.category_id}).then(res => {
this.watchDetail = res;
this.$store.dispatch("setWatchDetail", this.watchDetail);
this.userDetail = JSON.parse(localStorage.getItem("userDesc"));
this.minute = (res.stay_time / 60).toFixed();
// this.minute = (360/60).toFixed()
if (this.minute < 1) {
this.minute = 1;
}
// this.minute<1?1:1
if (this.minute < 8) {
if (this.minute < 5) {
this.percent = 75 + Math.floor(49 * Math.random()) / 10;
} else {
this.percent = 81 + Math.floor(89 * Math.random()) / 10;
}
} else if (this.minute <= 12) {
this.percent = 91 + Math.floor(39 * Math.random()) / 10;
this.parent_category_id = this.$route.query.parent_category_id;
this.course_type = this.$route.query.course_type;
this.countTimeFn()
// this.lesson = JSON.parse(localStorage.getItem("lessonDetail"));
// debugger
getUserWatchApi({category_id:this.category_id}).then(res => {
this.watchDetail = res;
this.$store.dispatch("setWatchDetail", this.watchDetail);
this.userDetail = JSON.parse(localStorage.getItem("userDesc"));
this.minute = (res.stay_time / 60).toFixed();
// this.minute = (360/60).toFixed()
if (this.minute < 1) {
this.minute = 1;
}
// this.minute<1?1:1
if (this.minute < 8) {
if (this.minute < 5) {
this.percent = 75 + Math.floor(49 * Math.random()) / 10;
} else {
this.percent = 96 + Math.floor(39 * Math.random()) / 10;
this.percent = 81 + Math.floor(89 * Math.random()) / 10;
}
Toast.clear();
let obj = {
user_id: this.userDetail.user_id,
minute: this.minute,
percent: this.percent,
title: this.lesson.title,
domTitle: this.lesson.domTitle
};
let URL =
} else if (this.minute <= 12) {
this.percent = 91 + Math.floor(39 * Math.random()) / 10;
} else {
this.percent = 96 + Math.floor(39 * Math.random()) / 10;
}
Toast.clear();
let obj = {
user_id: this.userDetail.user_id,
minute: this.minute,
percent: this.percent,
title: this.lesson.title,
domTitle: this.lesson.domTitle
};
let URL =
process.env.API_URL +
"#/shareGoods?info=" +
encodeURIComponent(JSON.stringify(obj));
this.onShare(URL);
// this.onShare(URL);
this.nowShow = 1;
document.title = `${this.lesson.domTitle}`;
this.nowLesson = {
type: "text",
partName: "爸妈看一看",
title: 1,
content: this.lesson.content.look,
age: this.nowLesson.age
};
let json = {
page_type: 0,
page_id: 1,
stay_time: 1
};
let lessonDetail = JSON.parse(localStorage.getItem("lessonDetail"));
let nowTime = Date.parse(new Date());
subUserLessonApi(
this.elementId,
this.category_id,
this.periods_id,
json
).then(res => {
// console.log(493,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));
Toast.clear();
});
this.$sa.track("learnPart", {
partName: "爸妈看一看",
elementID: this.lesson.id.toString(),
dayModule: this.lesson.domTitle.slice(0, 9),
weekName: this.lesson.domTitle.slice(10, this.lesson.domTitle.length),
elementName:
this.lesson.domTitle.slice(0, 9) +
"-" +
this.lesson.domTitle.slice(10, this.lesson.domTitle.length),
themeID: this.lesson.themeID,
themeName: this.lesson.themeName,
goodsID: this.lesson.goodsID,
classID: this.lesson.classID,
is_view_today:
!!new Date().setHours(0, 0, 0, 0) ===
new Date(this.lesson.push_time).setHours(0, 0, 0, 0)
this.onShare(URL);
// this.onShare(URL);
this.nowShow = 1;
document.title = `${this.lesson.domTitle}`;
this.nowLesson = {
type: "text",
partName: "爸妈看一看",
title: 1,
content: this.lesson.content.look,
age: this.nowLesson.age
};
let json = {
page_type: 0,
page_id: 1,
stay_time: 1
};
let lessonDetail = JSON.parse(localStorage.getItem("lessonDetail"));
let nowTime = Date.parse(new Date());
subUserLessonApi(
this.elementId,
this.category_id,
this.periods_id,
json
).then(res => {
// console.log(493,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));
Toast.clear();
});
this.$sa.track("learnPart", {
partName: "爸妈看一看",
elementID: this.lesson.id.toString(),
dayModule: this.lesson.domTitle.slice(0, 9),
weekName: this.lesson.domTitle.slice(10, this.lesson.domTitle.length),
elementName:
this.lesson.domTitle.slice(0, 9) +
"-" +
this.lesson.domTitle.slice(10, this.lesson.domTitle.length),
themeID: this.lesson.themeID,
themeName: this.lesson.themeName,
goodsID: this.lesson.goodsID,
classID: this.lesson.classID,
is_view_today:
!!new Date().setHours(0, 0, 0, 0) ===
new Date(this.lesson.push_time).setHours(0, 0, 0, 0)
});
if (
this.lesson.content.play.video.length < 1 &&
this.lesson.content.play.audio.length < 1
) {
this.nowLesson.old = true;
}
});
if (
this.lesson.content.play.video.length < 1 &&
this.lesson.content.play.audio.length < 1
) {
this.nowLesson.old = true;
}
});
}
}
}
};
};
</script>
<style scoped lang="less">
@import "../../util/public";
.lessonHeader {
background: url("https://static-cdn.changchangenglish.com/new-sing/static/images/lessonHeader3.png?v=2")
no-repeat;
background-size: 102 * @toVw 334 * @toVw;
display: inline-block;
}
.header-h {
display: none;
}
.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;
display: -webkit-flex;
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 5 * @toVw 0;
z-index: 2;
background: rgba(255, 255, 255, 1);
box-shadow: 0 * @toVw 2 * @toVw 3 * @toVw 0 * @toVw rgba(0, 0, 0, 0.1);
}
.newLesson {
background: #f8f8f8;
}
.backImg {
position: fixed;
bottom: 40 * @toVw;
right: 20 * @toVw;
z-index: 99999999;
width: 60 * @toVw;
}
@media screen and (orientation: landscape) {
@toVw: 100/667vw;
.backImg {
position: fixed;
bottom: 40 * @toVw;
right: 20 * @toVw;
z-index: 99999999;
width: 60 * @toVw;
}
@import "../../util/public";
.lessonHeader {
display: none;
background: url("https://static-cdn.changchangenglish.com/new-sing/static/images/lessonHeader3.png?v=2")
no-repeat;
background-size: 102 * @toVw 334 * @toVw;
display: inline-block;
}
.header {
.header-h {
display: none;
}
.actBanKuai {
background-color: white;
border: 1 * @toVw solid transparent;
border-left-color: black;
border-top-color: black;
border-bottom-color: black;
border-radius: 8 * @toVw 0 0 8 * @toVw;
}
.headerHP {
background-size: 62 * @toVw 434 * @toVw;
display: inline-block;
}
.home {
height: 62 * @toVw;
width: 62 * @toVw;
height: 46 * @toVw;
width: 46 * @toVw;
background-position: 0 0;
}
.lookHP {
height: 62 * @toVw;
width: 62 * @toVw;
background-position: 0 -62 * @toVw;
.actBanKuai;
.play {
height: 48 * @toVw;
width: 102 * @toVw;
background-position: 0 -46 * @toVw;
}
.playHP {
height: 62 * @toVw;
width: 62 * @toVw;
background-position: 0 -124 * @toVw;
.actBanKuai;
.look {
height: 48 * @toVw;
width: 102 * @toVw;
background-position: 0 -94 * @toVw;
}
.funHP {
height: 62 * @toVw;
width: 62 * @toVw;
background-position: 0 -186 * @toVw;
.actBanKuai;
.fun {
height: 48 * @toVw;
width: 102 * @toVw;
background-position: 0 -142 * @toVw;
}
.defaultFun {
height: 62 * @toVw;
width: 62 * @toVw;
background-position: 0 -248 * @toVw;
height: 48 * @toVw;
width: 102 * @toVw;
background-position: 0 -190 * @toVw;
}
.defaultLook {
height: 62 * @toVw;
width: 62 * @toVw;
background-position: 0 -310 * @toVw;
height: 48 * @toVw;
width: 102 * @toVw;
background-position: 0 -238 * @toVw;
}
.defaultPlay {
height: 62 * @toVw;
width: 62 * @toVw;
background-position: 0 -372 * @toVw;
height: 48 * @toVw;
width: 102 * @toVw;
background-position: 0 -286 * @toVw;
}
.header-h {
display: block;
width: 62 * @toVw;
.header {
display: flex;
display: -webkit-flex;
position: absolute;
left: 17.5 * @toVw;
top: 20 * @toVw;
top: 0;
left: 0;
width: 100%;
padding: 5 * @toVw 0;
z-index: 2;
.headerHP {
display: block;
img {
width: 42 * @toVw;
margin-left: 10 * @toVw;
margin-top: 5 * @toVw;
}
}
background: rgba(255, 255, 255, 1);
box-shadow: 0 * @toVw 2 * @toVw 3 * @toVw 0 * @toVw rgba(0, 0, 0, 0.1);
}
.index-content-block {
position: absolute;
top: 20 * @toVw;
left: 80 * @toVw;
right: 20 * @toVw;
bottom: 20 * @toVw;
background: white;
border: 1 * @toVw solid #000;
border-radius: 0 8 * @toVw 8 * @toVw 8 * @toVw;
&.radius {
border-radius: 8 * @toVw;
}
.newLesson {
background: #f8f8f8;
}
}
@media screen and (min-aspect-ratio: ~"20/8") {
@toVw: 100/900vw;
.backImg {
position: fixed;
bottom: 40 * @toVw;
......@@ -699,93 +603,197 @@ export default {
z-index: 99999999;
width: 60 * @toVw;
}
.lessonHeader {
display: none;
}
.header {
display: none;
}
.actBanKuai {
background-color: white;
border: 1 * @toVw solid transparent;
border-left-color: black;
border-top-color: black;
border-bottom-color: black;
border-radius: 8 * @toVw 0 0 8 * @toVw;
}
.headerHP {
// background:url('https://static-cdn.changchangenglish.com/new-sing/static/images/index-h.png?v=2') no-repeat;
background-size: 62 * @toVw 434 * @toVw;
display: inline-block;
&.lookHP {
@media screen and (orientation: landscape) {
@toVw: 100/667vw;
.backImg {
position: fixed;
bottom: 40 * @toVw;
right: 20 * @toVw;
z-index: 99999999;
width: 60 * @toVw;
}
.lessonHeader {
display: none;
}
.header {
display: none;
}
.actBanKuai {
background-color: white;
border: 1 * @toVw solid transparent;
border-left-color: black;
border-top-color: black;
border-bottom-color: black;
border-radius: 8 * @toVw 0 0 8 * @toVw;
}
.headerHP {
background-size: 62 * @toVw 434 * @toVw;
display: inline-block;
}
.home {
height: 62 * @toVw;
width: 62 * @toVw;
background-position: 0 0;
.actBanKuai;
}
&.defaultPlay {
.lookHP {
height: 62 * @toVw;
width: 62 * @toVw;
background-position: 0 -62 * @toVw;
.actBanKuai;
}
&.playHP {
.playHP {
height: 62 * @toVw;
width: 62 * @toVw;
background-position: 0 -124 * @toVw;
.actBanKuai;
}
&.defaultLook {
.funHP {
height: 62 * @toVw;
width: 62 * @toVw;
background-position: 0 -186 * @toVw;
.actBanKuai;
}
&.home {
.defaultFun {
height: 62 * @toVw;
width: 62 * @toVw;
background-position: 0 -248 * @toVw;
}
&.defaultFun {
.defaultLook {
height: 62 * @toVw;
width: 62 * @toVw;
background-position: 0 -310 * @toVw;
}
&.funHP {
.defaultPlay {
height: 62 * @toVw;
width: 62 * @toVw;
background-position: 0 -372 * @toVw;
.actBanKuai;
}
.header-h {
display: block;
width: 62 * @toVw;
position: absolute;
left: 17.5 * @toVw;
top: 20 * @toVw;
z-index: 2;
.headerHP {
display: block;
img {
width: 42 * @toVw;
margin-left: 10 * @toVw;
margin-top: 5 * @toVw;
}
}
}
.index-content-block {
position: absolute;
top: 20 * @toVw;
left: 80 * @toVw;
right: 20 * @toVw;
bottom: 20 * @toVw;
background: white;
border: 1 * @toVw solid #000;
border-radius: 0 8 * @toVw 8 * @toVw 8 * @toVw;
&.radius {
border-radius: 8 * @toVw;
}
}
}
.header-h {
display: block;
width: 62 * @toVw;
position: absolute;
left: 17.5 * @toVw;
top: 20 * @toVw;
z-index: 2;
@media screen and (min-aspect-ratio: ~"20/8") {
@toVw: 100/900vw;
.backImg {
position: fixed;
bottom: 40 * @toVw;
right: 20 * @toVw;
z-index: 99999999;
width: 60 * @toVw;
}
.lessonHeader {
display: none;
}
.header {
display: none;
}
.actBanKuai {
background-color: white;
border: 1 * @toVw solid transparent;
border-left-color: black;
border-top-color: black;
border-bottom-color: black;
border-radius: 8 * @toVw 0 0 8 * @toVw;
}
.headerHP {
// background:url('https://static-cdn.changchangenglish.com/new-sing/static/images/index-h.png?v=2') no-repeat;
background-size: 62 * @toVw 434 * @toVw;
display: inline-block;
&.lookHP {
height: 62 * @toVw;
width: 62 * @toVw;
background-position: 0 0;
.actBanKuai;
}
&.defaultPlay {
height: 62 * @toVw;
width: 62 * @toVw;
background-position: 0 -62 * @toVw;
}
&.playHP {
height: 62 * @toVw;
width: 62 * @toVw;
background-position: 0 -124 * @toVw;
.actBanKuai;
}
&.defaultLook {
height: 62 * @toVw;
width: 62 * @toVw;
background-position: 0 -186 * @toVw;
}
&.home {
height: 62 * @toVw;
width: 62 * @toVw;
background-position: 0 -248 * @toVw;
}
&.defaultFun {
height: 62 * @toVw;
width: 62 * @toVw;
background-position: 0 -310 * @toVw;
}
&.funHP {
height: 62 * @toVw;
width: 62 * @toVw;
background-position: 0 -372 * @toVw;
.actBanKuai;
}
}
.header-h {
display: block;
img {
width: 42 * @toVw;
margin-left: 10 * @toVw;
margin-top: 5 * @toVw;
width: 62 * @toVw;
position: absolute;
left: 17.5 * @toVw;
top: 20 * @toVw;
z-index: 2;
.headerHP {
display: block;
img {
width: 42 * @toVw;
margin-left: 10 * @toVw;
margin-top: 5 * @toVw;
}
}
}
}
.index-content-block {
position: absolute;
top: 20 * @toVw;
left: 80 * @toVw;
right: 20 * @toVw;
bottom: 20 * @toVw;
background: white;
border: 1 * @toVw solid #000;
border-radius: 0 8 * @toVw 8 * @toVw 8 * @toVw;
&.radius {
border-radius: 8 * @toVw;
.index-content-block {
position: absolute;
top: 20 * @toVw;
left: 80 * @toVw;
right: 20 * @toVw;
bottom: 20 * @toVw;
background: white;
border: 1 * @toVw solid #000;
border-radius: 0 8 * @toVw 8 * @toVw 8 * @toVw;
&.radius {
border-radius: 8 * @toVw;
}
}
}
}
</style>
src/components/newLesson/share.vue
View file @ 15e79249
......@@ -2,10 +2,21 @@
<div class='box'>
<div class="share-page" id="capture">
<div class="share-block">
<div class="content" v-if="userDetail" ref="imageWrapper">
<div class="content" v-if="userDetail" ref="imageWrapper"> <!-- v-if="userDetail" -->
<img :src="img_logo" class="imgLogo" />
<div class="main-content">
<div class="topBox">
<div v-if="starNum == 3">
<div class="diyikexing animated">
<img :src="diyikexing" alt="">
</div>
<div class="dierkexing animated1">
<img :src="dierkexing" alt="">
</div>
<div class="dierkexing1 animated2">
<img :src="diyikexing" alt="">
</div>
</div>
<img class="shareTitle" :src="shareTitle" />
<div class="head-block">
<img :src="userDetail.avatar" />
......@@ -107,603 +118,609 @@
</template>
<script>
import { Toast } from "vant";
import shareBg from "../../assets/newLesson/shareBg.png";
import shareTitle from "../../assets/newLesson/img_title.png";
import share_close from "../../assets/newLesson/share_close.png";
import icon_baby from "../../assets/newLesson/icon_baby.png";
import icon_day from "../../assets/newLesson/icon_day.png";
import icon_min from "../../assets/newLesson/icon_min.png";
import img_link from "../../assets/newLesson/img_link.png";
import good from "../../assets/newLesson/good.png";
import great from "../../assets/newLesson/great.png";
import perfect from "../../assets/newLesson/perfect.png";
import icon_change from "../../assets/newLesson/icon_change@2x.png";
import icon_right from "../../assets/newLesson/icon_right@2x.png";
import img_monkey from "../../assets/newLesson/img_monkey@2x.png";
import img_tip from "../../assets/newLesson/img_tip@2x.png";
import QRCode from "qrcodejs2";
import html2canvas from "html2canvas";
import {
getwechatParam,
getUserWatchApi,
getShortApi,
subUserLessonApi,
postErrorLogApi
} from "../../service/api";
import share_code_bg from "../../assets/newLesson/share-code-bg.png";
import img_logo from "../../assets/newLesson/logo@2x.png";
import share_tips from "../../assets/Bitmap@2x.png";
import { Toast } from "vant";
import shareBg from "../../assets/newLesson/shareBg.png";
import shareTitle from "../../assets/newLesson/img_title.png";
import share_close from "../../assets/newLesson/share_close.png";
import icon_baby from "../../assets/newLesson/icon_baby.png";
import icon_day from "../../assets/newLesson/icon_day.png";
import icon_min from "../../assets/newLesson/icon_min.png";
import img_link from "../../assets/newLesson/img_link.png";
import good from "../../assets/newLesson/good.png";
import great from "../../assets/newLesson/great.png";
import perfect from "../../assets/newLesson/perfect.png";
import icon_change from "../../assets/newLesson/icon_change@2x.png";
import icon_right from "../../assets/newLesson/icon_right@2x.png";
import img_monkey from "../../assets/newLesson/img_monkey@2x.png";
import img_tip from "../../assets/newLesson/img_tip@2x.png";
import dierkexing from "../../assets/evaluate/dierkexing.png";
import diyikexing from "../../assets/evaluate/diyikexing.png";
import QRCode from "qrcodejs2";
import html2canvas from "html2canvas";
import {
getwechatParam,
getUserWatchApi,
getShortApi,
subUserLessonApi,
postErrorLogApi
} from "../../service/api";
import share_code_bg from "../../assets/newLesson/share-code-bg.png";
import img_logo from "../../assets/newLesson/logo@2x.png";
import share_tips from "../../assets/Bitmap@2x.png";
export default {
name: "share",
data() {
return {
img_monkey: img_monkey,
img_tip: img_tip,
oimgPoint: false,
canvasData: "",
QRCodeB: "",
img_link: img_link,
shareVisible: false,
shareBg: shareBg,
share_close: share_close,
share_tips: share_tips,
shareTitle: shareTitle,
icon_baby: icon_baby,
icon_day: icon_day,
icon_min: icon_min,
userDetail: null,
dataURL: null,
watchDetail: null,
share_code_bg: share_code_bg,
lesson: {},
domTitle: "",
imgPoint: good,
minute: "",
percent: 0,
saveTime: "",
lastTime: "",
icon_change: icon_change,
textIndex: 1,
textContent: "",
htmlContent: "",
icon_right: icon_right,
timeout: "",
nickname: "",
img_logo: img_logo,
animationBg:false
};
},
props: ["contentData"],
mounted() {
// console.log(this.contentData)
Toast.loading({
mask: true,
message: "",
duration: 300
});
this.initPage();
},
beforeDestroy() {
console.log(Date.parse(new Date()) - this.lastTime);
this.lesson.nowTime += Date.parse(new Date()) - this.lastTime;
localStorage.setItem("lessonDetail", JSON.stringify(this.lesson));
console.log(this.lesson.nowTime);
},
methods: {
touchStart() {
let query = JSON.parse(sessionStorage.getItem("classQuery"));
this.timeout = setTimeout(() => {
// postErrorLogApi({'routes_url':new Date().toString(),'result_text':this.userDetail.user_id}).then((res)=>{
// console.log(res)
// })
export default {
name: "share",
data() {
return {
img_monkey: img_monkey,
img_tip: img_tip,
oimgPoint: false,
canvasData: "",
QRCodeB: "",
img_link: img_link,
shareVisible: false,
shareBg: shareBg,
share_close: share_close,
share_tips: share_tips,
shareTitle: shareTitle,
icon_baby: icon_baby,
icon_day: icon_day,
icon_min: icon_min,
userDetail: null,
dataURL: null,
watchDetail: null,
share_code_bg: share_code_bg,
lesson: {},
domTitle: "",
imgPoint: good,
minute: "",
percent: 0,
saveTime: "",
lastTime: "",
icon_change: icon_change,
textIndex: 1,
textContent: "",
htmlContent: "",
icon_right: icon_right,
timeout: "",
nickname: "",
img_logo: img_logo,
animationBg:false,
dierkexing: dierkexing, // 三颗星第一第三颗
diyikexing: diyikexing, // 第二课星
starNum: 0
};
},
props: ["contentData"],
mounted() {
this.starNum = JSON.parse(localStorage.getItem('lessonDetail')).star_num
Toast.loading({
mask: true,
message: "",
duration: 300
});
this.initPage();
},
beforeDestroy() {
console.log(Date.parse(new Date()) - this.lastTime);
this.lesson.nowTime += Date.parse(new Date()) - this.lastTime;
localStorage.setItem("lessonDetail", JSON.stringify(this.lesson));
console.log(this.lesson.nowTime);
},
methods: {
touchStart() {
let query = JSON.parse(sessionStorage.getItem("classQuery"));
this.timeout = setTimeout(() => {
// minute
postErrorLogApi({'routes_url':new Date().toString(),'result_text':this.userDetail.user_id}).then((res)=>{
console.log(res)
})
this.$sa.track("watchClick", {
dayModule: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(0, 9),
weekName: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
elementName:
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
0,
9
) +
"-" +
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
themeID: JSON.parse(localStorage.getItem("lessonDetail")).themeID,
themeName: JSON.parse(localStorage.getItem("lessonDetail")).themeName,
goodsID: JSON.parse(localStorage.getItem("lessonDetail")).goodsID,
classID: JSON.parse(localStorage.getItem("lessonDetail")).classID,
buttonName: "完成分享",
partName: this.contentData.partName,
elementID: query.elementId.toString()
});
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(
query.elementId,
query.category_id,
query.periods_id,
json
).then(res => {
lessonDetail.total_watch_time = res;
lessonDetail.nowTime = nowTime;
localStorage.setItem("lessonDetail", JSON.stringify(lessonDetail));
});
}, 800);
},
touchEnd() {
clearInterval(this.timeout);
},
copyText() {
this.$sa.track("buttonClick", {
tabTitle: "打卡商品页",
moduleTitle: "功能按钮",
buttonType: "按钮点击",
buttonName: "复制心得"
});
this.$copyText(this.textContent).then(e => {
Toast("复制成功");
});
},
changeText() {
if (this.textIndex == 1) {
this.textContent = `我是${this.userDetail.nickname}，我家宝宝正在唱唱启蒙英语学习，已坚持${this.watchDetail.total_day}天啦，宝宝的英语一天比一天有进步了，成就感满满，继续坚持[拳头]~`;
this.textIndex = 2;
} else if (this.textIndex == 2) {
this.textContent = `陪宝宝在唱唱启蒙英语学习的第${this.watchDetail.total_day}天，宝宝又学会了一首新童谣《${this.lesson.title}》，每天都有新收获，坚持就是胜利，练就英语小神童[胜利]`;
this.textIndex = 3;
} else {
this.textContent = `我是${this.userDetail.nickname}，我正在参加唱唱启蒙英语👉【${this.lesson.course_title}】打卡活动，打卡第${this.watchDetail.total_day}天，我坚持，我最棒[强]！`;
this.textIndex = 1;
}
},
showShare() {
this.shareVisible = true;
// this.$refs.audioDom.play()
this.playAudio();
this.$sa.track("watchClick", {
dayModule: JSON.parse(
localStorage.getItem("lessonDetail")
localStorage.getItem("lessonDetail")
).domTitle.slice(0, 9),
weekName: JSON.parse(
localStorage.getItem("lessonDetail")
localStorage.getItem("lessonDetail")
).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
elementName:
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
0,
9
) +
"-" +
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
),
elementName:
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
0,
9
) +
"-" +
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
themeID: JSON.parse(localStorage.getItem("lessonDetail")).themeID,
themeName: JSON.parse(localStorage.getItem("lessonDetail")).themeName,
goodsID: JSON.parse(localStorage.getItem("lessonDetail")).goodsID,
classID: JSON.parse(localStorage.getItem("lessonDetail")).classID,
buttonName: "完成分享",
buttonName: "分享到微信",
partName: this.contentData.partName,
elementID: query.elementId.toString()
});
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(
query.elementId,
query.category_id,
query.periods_id,
json
).then(res => {
lessonDetail.total_watch_time = res;
lessonDetail.nowTime = nowTime;
localStorage.setItem("lessonDetail", JSON.stringify(lessonDetail));
elementID: this.$route.query.elementId.toString()
});
}, 800);
},
touchEnd() {
clearInterval(this.timeout);
},
copyText() {
this.$sa.track("buttonClick", {
tabTitle: "打卡商品页",
moduleTitle: "功能按钮",
buttonType: "按钮点击",
buttonName: "复制心得"
});
this.$copyText(this.textContent).then(e => {
Toast("复制成功");
});
},
changeText() {
if (this.textIndex == 1) {
this.textContent = `我是${this.userDetail.nickname}，我家宝宝正在唱唱启蒙英语学习，已坚持${this.watchDetail.total_day}天啦，宝宝的英语一天比一天有进步了，成就感满满，继续坚持[拳头]~`;
this.textIndex = 2;
} else if (this.textIndex == 2) {
this.textContent = `陪宝宝在唱唱启蒙英语学习的第${this.watchDetail.total_day}天，宝宝又学会了一首新童谣《${this.lesson.title}》，每天都有新收获，坚持就是胜利，练就英语小神童[胜利]`;
this.textIndex = 3;
} else {
this.textContent = `我是${this.userDetail.nickname}，我正在参加唱唱启蒙英语👉【${this.lesson.course_title}】打卡活动，打卡第${this.watchDetail.total_day}天，我坚持，我最棒[强]！`;
this.textIndex = 1;
}
},
showShare() {
this.shareVisible = true;
// this.$refs.audioDom.play()
this.playAudio();
this.$sa.track("watchClick", {
dayModule: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(0, 9),
weekName: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
elementName:
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
0,
9
) +
"-" +
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
themeID: JSON.parse(localStorage.getItem("lessonDetail")).themeID,
themeName: JSON.parse(localStorage.getItem("lessonDetail")).themeName,
goodsID: JSON.parse(localStorage.getItem("lessonDetail")).goodsID,
classID: JSON.parse(localStorage.getItem("lessonDetail")).classID,
buttonName: "分享到微信",
partName: this.contentData.partName,
elementID: this.$route.query.elementId.toString()
});
},
initPage() {
this.watchDetail = this.$store.state.watchDetail;
// debugger
this.lesson = JSON.parse(localStorage.getItem("lessonDetail"));
this.lesson.domTitle = this.lesson.domTitle.substring(0, 9);
console.log(this.watchDetail, 170);
console.log(this.lesson);
this.lastTime = Date.parse(new Date());
clearInterval(this.$store.state.timeout);
this.userDetail = JSON.parse(localStorage.getItem("userDesc"));
this.nickname = this.userDetail.nickname;
if (this.nickname.length >= 6) {
this.nickname = this.nickname.slice(0, 4) + "...";
}
this.minute = (this.watchDetail.stay_time / 60).toFixed();
// this.minute = (600/60).toFixed()
if (this.minute < 1) {
this.minute = 1;
}
// this.minute<1?1:1
if (this.minute < 8) {
this.imgPoint = good;
this.$store.dispatch("setLookStatus", 0);
if (this.minute < 5) {
this.percent = 75 + Math.floor(49 * Math.random()) / 10;
} else {
this.percent = 81 + Math.floor(89 * Math.random()) / 10;
},
initPage() {
this.watchDetail = this.$store.state.watchDetail;
// debugger
this.lesson = JSON.parse(localStorage.getItem("lessonDetail"));
this.lesson.domTitle = this.lesson.domTitle.substring(0, 9);
console.log(this.watchDetail, 170);
console.log(this.lesson);
this.lastTime = Date.parse(new Date());
clearInterval(this.$store.state.timeout);
this.userDetail = JSON.parse(localStorage.getItem("userDesc"));
this.nickname = this.userDetail.nickname;
if (this.nickname.length >= 6) {
this.nickname = this.nickname.slice(0, 4) + "...";
}
} else if (this.minute <= 12) {
this.$store.dispatch("setLookStatus", 1);
this.percent = 91 + Math.floor(39 * Math.random()) / 10;
this.imgPoint = great;
} else {
this.$store.dispatch("setLookStatus", 2);
console.log(Math.floor(39 * Math.random()));
this.percent = 96 + Math.floor(39 * Math.random()) / 10;
this.imgPoint = perfect;
}
// Toast.clear();
let query = JSON.parse(sessionStorage.getItem("classQuery"));
let obj = {
user_id: this.userDetail.user_id,
minute: this.minute,
percent: this.percent,
title: this.lesson.title,
domTitle: this.lesson.domTitle,
category_id: query.category_id
};
let URL = `${process.env.API_URL}#/navShare?invite_code=CC-UDK-${this.userDetail.user_id}`;
// let URL =
// 'https://wechat.changchangenglish.com/' +
// "#/shareGoods?info=" +
// encodeURIComponent(JSON.stringify(obj));
console.log(URL);
this.onShare(URL);
this.toDataURLBase64(
this.userDetail.avatar.replace("http://", "https://"),
avatar => {
this.toDataURLBase64(this.shareConBg, cal => {
this.shareConBg = cal;
this.userDetail.avatar = avatar;
this.$nextTick(() => {
// this.$refs.share_image.initPage();
});
});
this.minute = (this.watchDetail.stay_time / 60).toFixed();
// this.minute = (600/60).toFixed()
if (this.minute < 1) {
this.minute = 1;
}
);
this.textContent = `我是${this.userDetail.nickname}，我正在参加唱唱启蒙英语【${this.lesson.course_title}】打卡活动，打卡第${this.watchDetail.total_day}天，我坚持，我最棒[强]！`;
this.qrcode(URL);
let that = this;
setTimeout(() => {
this.oimgPoint = true;
}, 900);
setTimeout(() => {
that.$nextTick(() => {
if (document.getElementById("capture")) {
html2canvas(document.getElementById("capture"), {
async: true,
scrollX: 0,
scale: 2,
letterRendering: true,
useCORS: true,
logging: true
})
.then(canvas => {
setTimeout(() => {
this.animationBg = true;
},500)
let dataURL = canvas.toDataURL("image/jpg", 1.0);
this.canvasData = dataURL;
})
.catch(res => {
alert(res);
console.log();
});
// this.minute<1?1:1
if (this.minute < 8) {
this.imgPoint = good;
this.$store.dispatch("setLookStatus", 0);
if (this.minute < 5) {
this.percent = 75 + Math.floor(49 * Math.random()) / 10;
} else {
this.percent = 81 + Math.floor(89 * Math.random()) / 10;
}
});
}, 1200);
},
enableShare: function(option) {
let query = JSON.parse(sessionStorage.getItem("classQuery"));
let that = this;
getwechatParam({
api_list: "onMenuShareAppMessage,onMenuShareTimeline",
url: window.location.href.split("#")[0]
}).then(wechatRes => {
wx.config({
debug: false,
appId: wechatRes.appId,
timestamp: parseInt(wechatRes.timestamp),
nonceStr: wechatRes.nonceStr,
signature: wechatRes.signature,
jsApiList: wechatRes.jsApiList
});
wx.ready(function() {
wx.onMenuShareTimeline({
title: option.product_title, // 分享标题
desc: option.desc, // 分享描述
link: option.shareUrl, // 分享链接
imgUrl:
option.shareIcon ||
"https://cdn.singsingenglish.com/singsing/recommend/logo-refer.png", // 分享图标
success: function() {
// setTimeout(() => {
// that.$sa.track("watchClick", {
// dayModule: JSON.parse(
// localStorage.getItem("lessonDetail")
// ).domTitle.slice(0, 9),
// weekName: JSON.parse(
// localStorage.getItem("lessonDetail")
// ).domTitle.slice(
// 10,
// JSON.parse(localStorage.getItem("lessonDetail")).domTitle
// .length
// ),
// elementName:
// JSON.parse(
// localStorage.getItem("lessonDetail")
// ).domTitle.slice(0, 9) +
// "-" +
// JSON.parse(
// localStorage.getItem("lessonDetail")
// ).domTitle.slice(
// 10,
// JSON.parse(localStorage.getItem("lessonDetail")).domTitle
// .length
// ),
// themeID: JSON.parse(localStorage.getItem("lessonDetail"))
// .themeID,
// themeName: JSON.parse(localStorage.getItem("lessonDetail"))
// .themeName,
// goodsID: JSON.parse(localStorage.getItem("lessonDetail"))
// .goodsID,
// classID: JSON.parse(localStorage.getItem("lessonDetail"))
// .classID,
// buttonName: "完成分享",
// partName: that.contentData.partName,
// elementID: query.elementId.toString()
// });
// 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(
// query.elementId,
// query.category_id,
// query.periods_id,
// json
// ).then(res => {
// lessonDetail.total_watch_time = res;
// lessonDetail.nowTime = nowTime;
// localStorage.setItem(
// "lessonDetail",
// JSON.stringify(lessonDetail)
// );
// });
// that.$emit("backList");
// }, 500);
},
cancel: function() {
that.$sa.track("watchClick", {
dayModule: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(0, 9),
weekName: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle
.length
),
elementName:
JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(0, 9) +
"-" +
JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle
.length
),
themeID: JSON.parse(localStorage.getItem("lessonDetail"))
.themeID,
themeName: JSON.parse(localStorage.getItem("lessonDetail"))
.themeName,
goodsID: JSON.parse(localStorage.getItem("lessonDetail"))
.goodsID,
classID: JSON.parse(localStorage.getItem("lessonDetail"))
.classID,
buttonName: "取消分享",
partName: that.contentData.partName,
elementID: query.elementId.toString()
} else if (this.minute <= 12) {
this.$store.dispatch("setLookStatus", 1);
this.percent = 91 + Math.floor(39 * Math.random()) / 10;
this.imgPoint = great;
} else {
this.$store.dispatch("setLookStatus", 2);
console.log(Math.floor(39 * Math.random()));
this.percent = 96 + Math.floor(39 * Math.random()) / 10;
this.imgPoint = perfect;
}
// Toast.clear();
let query = JSON.parse(sessionStorage.getItem("classQuery"));
let obj = {
user_id: this.userDetail.user_id,
minute: this.minute,
percent: this.percent,
title: this.lesson.title,
domTitle: this.lesson.domTitle,
category_id: query.category_id
};
let URL = `${process.env.API_URL}#/navShare?invite_code=CC-UDK-${this.userDetail.user_id}`;
// let URL =
// 'https://wechat.changchangenglish.com/' +
// "#/shareGoods?info=" +
// encodeURIComponent(JSON.stringify(obj));
console.log(URL);
this.onShare(URL);
this.toDataURLBase64(
this.userDetail.avatar.replace("http://", "https://"),
avatar => {
this.toDataURLBase64(this.shareConBg, cal => {
this.shareConBg = cal;
this.userDetail.avatar = avatar;
this.$nextTick(() => {
// this.$refs.share_image.initPage();
});
});
that.$emit("backList");
}
);
this.textContent = `我是${this.userDetail.nickname}，我正在参加唱唱启蒙英语【${this.lesson.course_title}】打卡活动，打卡第${this.watchDetail.total_day}天，我坚持，我最棒[强]！`;
this.qrcode(URL);
let that = this;
setTimeout(() => {
this.oimgPoint = true;
}, 900);
setTimeout(() => {
that.$nextTick(() => {
if (document.getElementById("capture")) {
html2canvas(document.getElementById("capture"), {
async: true,
scrollX: 0,
scale: 2,
letterRendering: true,
useCORS: true,
logging: true
})
.then(canvas => {
setTimeout(() => {
this.animationBg = true;
},500)
let dataURL = canvas.toDataURL("image/jpg", 1.0);
this.canvasData = dataURL;
})
.catch(res => {
alert(res);
console.log();
});
}
});
wx.onMenuShareAppMessage({
title: option.product_title, // 分享标题
desc: option.desc, // 分享描述
link: option.shareUrl, // 分享链接
imgUrl:
option.shareIcon ||
"https://cdn.singsingenglish.com/singsing/recommend/logo-refer.png", // 分享图标
success: function() {
// that.$sa.track("watchClick", {
// dayModule: JSON.parse(
// localStorage.getItem("lessonDetail")
// ).domTitle.slice(0, 9),
// weekName: JSON.parse(
// localStorage.getItem("lessonDetail")
// ).domTitle.slice(
// 10,
// JSON.parse(localStorage.getItem("lessonDetail")).domTitle
// .length
// ),
// elementName:
// JSON.parse(
// localStorage.getItem("lessonDetail")
// ).domTitle.slice(0, 9) +
// "-" +
// JSON.parse(
// localStorage.getItem("lessonDetail")
// ).domTitle.slice(
// 10,
// JSON.parse(localStorage.getItem("lessonDetail")).domTitle
// .length
// ),
// themeID: JSON.parse(localStorage.getItem("lessonDetail"))
// .themeID,
// themeName: JSON.parse(localStorage.getItem("lessonDetail"))
// .themeName,
// goodsID: JSON.parse(localStorage.getItem("lessonDetail"))
// .goodsID,
// classID: JSON.parse(localStorage.getItem("lessonDetail"))
// .classID,
// buttonName: "完成分享",
// partName: that.contentData.partName,
// elementID: query.elementId.toString()
// });
// 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(
// query.elementId,
// query.category_id,
// query.periods_id,
// json
// ).then(res => {
// lessonDetail.total_watch_time = res;
// lessonDetail.nowTime = nowTime;
// localStorage.setItem(
// "lessonDetail",
// JSON.stringify(lessonDetail)
// );
// });
// that.$emit("backList");
},
cancel: function() {
that.$sa.track("watchClick", {
dayModule: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(0, 9),
weekName: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle
.length
),
elementName:
JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(0, 9) +
"-" +
JSON.parse(
localStorage.getItem("lessonDetail")
}, 1200);
},
enableShare: function(option) {
let query = JSON.parse(sessionStorage.getItem("classQuery"));
let that = this;
getwechatParam({
api_list: "onMenuShareAppMessage,onMenuShareTimeline",
url: window.location.href.split("#")[0]
}).then(wechatRes => {
wx.config({
debug: false,
appId: wechatRes.appId,
timestamp: parseInt(wechatRes.timestamp),
nonceStr: wechatRes.nonceStr,
signature: wechatRes.signature,
jsApiList: wechatRes.jsApiList
});
wx.ready(function() {
wx.onMenuShareTimeline({
title: option.product_title, // 分享标题
desc: option.desc, // 分享描述
link: option.shareUrl, // 分享链接
imgUrl:
option.shareIcon ||
"https://cdn.singsingenglish.com/singsing/recommend/logo-refer.png", // 分享图标
success: function() {
// setTimeout(() => {
// that.$sa.track("watchClick", {
// dayModule: JSON.parse(
// localStorage.getItem("lessonDetail")
// ).domTitle.slice(0, 9),
// weekName: JSON.parse(
// localStorage.getItem("lessonDetail")
// ).domTitle.slice(
// 10,
// JSON.parse(localStorage.getItem("lessonDetail")).domTitle
// .length
// ),
// elementName:
// JSON.parse(
// localStorage.getItem("lessonDetail")
// ).domTitle.slice(0, 9) +
// "-" +
// JSON.parse(
// localStorage.getItem("lessonDetail")
// ).domTitle.slice(
// 10,
// JSON.parse(localStorage.getItem("lessonDetail")).domTitle
// .length
// ),
// themeID: JSON.parse(localStorage.getItem("lessonDetail"))
// .themeID,
// themeName: JSON.parse(localStorage.getItem("lessonDetail"))
// .themeName,
// goodsID: JSON.parse(localStorage.getItem("lessonDetail"))
// .goodsID,
// classID: JSON.parse(localStorage.getItem("lessonDetail"))
// .classID,
// buttonName: "完成分享",
// partName: that.contentData.partName,
// elementID: query.elementId.toString()
// });
// 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(
// query.elementId,
// query.category_id,
// query.periods_id,
// json
// ).then(res => {
// lessonDetail.total_watch_time = res;
// lessonDetail.nowTime = nowTime;
// localStorage.setItem(
// "lessonDetail",
// JSON.stringify(lessonDetail)
// );
// });
// that.$emit("backList");
// }, 500);
},
cancel: function() {
that.$sa.track("watchClick", {
dayModule: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(0, 9),
weekName: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle
.length
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle
.length
),
themeID: JSON.parse(localStorage.getItem("lessonDetail"))
.themeID,
themeName: JSON.parse(localStorage.getItem("lessonDetail"))
.themeName,
goodsID: JSON.parse(localStorage.getItem("lessonDetail"))
.goodsID,
classID: JSON.parse(localStorage.getItem("lessonDetail"))
.classID,
buttonName: "取消分享",
partName: that.contentData.partName,
elementID: query.elementId.toString()
});
}
elementName:
JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(0, 9) +
"-" +
JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle
.length
),
themeID: JSON.parse(localStorage.getItem("lessonDetail"))
.themeID,
themeName: JSON.parse(localStorage.getItem("lessonDetail"))
.themeName,
goodsID: JSON.parse(localStorage.getItem("lessonDetail"))
.goodsID,
classID: JSON.parse(localStorage.getItem("lessonDetail"))
.classID,
buttonName: "取消分享",
partName: that.contentData.partName,
elementID: query.elementId.toString()
});
that.$emit("backList");
}
});
wx.onMenuShareAppMessage({
title: option.product_title, // 分享标题
desc: option.desc, // 分享描述
link: option.shareUrl, // 分享链接
imgUrl:
option.shareIcon ||
"https://cdn.singsingenglish.com/singsing/recommend/logo-refer.png", // 分享图标
success: function() {
// that.$sa.track("watchClick", {
// dayModule: JSON.parse(
// localStorage.getItem("lessonDetail")
// ).domTitle.slice(0, 9),
// weekName: JSON.parse(
// localStorage.getItem("lessonDetail")
// ).domTitle.slice(
// 10,
// JSON.parse(localStorage.getItem("lessonDetail")).domTitle
// .length
// ),
// elementName:
// JSON.parse(
// localStorage.getItem("lessonDetail")
// ).domTitle.slice(0, 9) +
// "-" +
// JSON.parse(
// localStorage.getItem("lessonDetail")
// ).domTitle.slice(
// 10,
// JSON.parse(localStorage.getItem("lessonDetail")).domTitle
// .length
// ),
// themeID: JSON.parse(localStorage.getItem("lessonDetail"))
// .themeID,
// themeName: JSON.parse(localStorage.getItem("lessonDetail"))
// .themeName,
// goodsID: JSON.parse(localStorage.getItem("lessonDetail"))
// .goodsID,
// classID: JSON.parse(localStorage.getItem("lessonDetail"))
// .classID,
// buttonName: "完成分享",
// partName: that.contentData.partName,
// elementID: query.elementId.toString()
// });
// 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(
// query.elementId,
// query.category_id,
// query.periods_id,
// json
// ).then(res => {
// lessonDetail.total_watch_time = res;
// lessonDetail.nowTime = nowTime;
// localStorage.setItem(
// "lessonDetail",
// JSON.stringify(lessonDetail)
// );
// });
// that.$emit("backList");
},
cancel: function() {
that.$sa.track("watchClick", {
dayModule: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(0, 9),
weekName: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle
.length
),
elementName:
JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(0, 9) +
"-" +
JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle
.length
),
themeID: JSON.parse(localStorage.getItem("lessonDetail"))
.themeID,
themeName: JSON.parse(localStorage.getItem("lessonDetail"))
.themeName,
goodsID: JSON.parse(localStorage.getItem("lessonDetail"))
.goodsID,
classID: JSON.parse(localStorage.getItem("lessonDetail"))
.classID,
buttonName: "取消分享",
partName: that.contentData.partName,
elementID: query.elementId.toString()
});
}
});
});
});
});
},
onShare(URL) {
console.log(451);
if (this.watchDetail && this.watchDetail.total_day) {
this.enableShare({
product_title: `我家宝宝正在【唱唱启蒙英语】唱学英语，已坚持${this.watchDetail.total_day}天`, // 分享标题
desc:
JSON.parse(localStorage.getItem("userDesc")).nickname +
`赠您【领取超值课程】特权，来唱唱和百万家庭一起快乐启蒙英语吧！`, //
shareIcon:
process.env.IMAGE_URL_HEAD +
"new-sing/number_Day" +
this.watchDetail.total_day +
".jpg",
shareUrl: URL
});
}
},
toDataURLBase64(src, callback) {
let xhttp = new XMLHttpRequest();
xhttp.onload = function() {
let fileReader = new FileReader();
fileReader.onloadend = function() {
callback(fileReader.result);
},
onShare(URL) {
console.log(451);
if (this.watchDetail && this.watchDetail.total_day) {
this.enableShare({
product_title: `我家宝宝正在【唱唱启蒙英语】唱学英语，已坚持${this.watchDetail.total_day}天`, // 分享标题
desc:
JSON.parse(localStorage.getItem("userDesc")).nickname +
`赠您【领取超值课程】特权，来唱唱和百万家庭一起快乐启蒙英语吧！`, //
shareIcon:
process.env.IMAGE_URL_HEAD +
"new-sing/number_Day" +
this.watchDetail.total_day +
".jpg",
shareUrl: URL
});
}
},
toDataURLBase64(src, callback) {
let xhttp = new XMLHttpRequest();
xhttp.onload = function() {
let fileReader = new FileReader();
fileReader.onloadend = function() {
callback(fileReader.result);
};
fileReader.readAsDataURL(xhttp.response);
};
fileReader.readAsDataURL(xhttp.response);
};
xhttp.responseType = "blob";
xhttp.open("GET", src, true);
xhttp.send();
},
getOffsetRect(ele) {
var box = ele.getBoundingClientRect();
var body = document.body,
docElem = document.documentElement;
//获取页面的scrollTop,scrollLeft(兼容性写法)
var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop,
scrollLeft =
window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
var clientTop = docElem.clientTop || body.clientTop,
clientLeft = docElem.clientLeft || body.clientLeft;
var top = box.top + scrollTop - clientTop,
left = box.left + scrollLeft - clientLeft;
return {
//Math.round 兼容火狐浏览器bug
top: Math.round(top),
left: Math.round(left)
};
},
qrcode(data) {
// debugger
let spx = document.body.clientWidth / 375;
if (this.QRCodeB) {
this.QRCodeB.makeCode(data);
} else {
this.QRCodeB = new QRCode("qrcode", {
width: 100 * spx,
height: 100 * spx, // 高度
text: data, // 二维码内容
image: "",
errorCorrectionLevel: "L"
});
xhttp.responseType = "blob";
xhttp.open("GET", src, true);
xhttp.send();
},
getOffsetRect(ele) {
var box = ele.getBoundingClientRect();
var body = document.body,
docElem = document.documentElement;
//获取页面的scrollTop,scrollLeft(兼容性写法)
var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop,
scrollLeft =
window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
var clientTop = docElem.clientTop || body.clientTop,
clientLeft = docElem.clientLeft || body.clientLeft;
var top = box.top + scrollTop - clientTop,
left = box.left + scrollLeft - clientLeft;
return {
//Math.round 兼容火狐浏览器bug
top: Math.round(top),
left: Math.round(left)
};
},
qrcode(data) {
// debugger
let spx = document.body.clientWidth / 375;
if (this.QRCodeB) {
this.QRCodeB.makeCode(data);
} else {
this.QRCodeB = new QRCode("qrcode", {
width: 100 * spx,
height: 100 * spx, // 高度
text: data, // 二维码内容
image: "",
errorCorrectionLevel: "L"
});
}
},
playAudio() {
// this.$refs.audioDom.load()
// this.$refs.audioDom.play()
}
},
playAudio() {
// this.$refs.audioDom.load()
// this.$refs.audioDom.play()
}
}
};
};
</script>
<style lang="less">
......@@ -773,469 +790,550 @@ export default {
</style>
<style scoped lang="less">
@import "../../util/public";
@tocurrentvw : 1/2 * @toVw;
@tocurrentvh : 1/2 * @toVh;
.share_close {
position: fixed;
width: 20 * @toVw;
top: 26 * @toVw;
right: 14 * @toVw;
z-index: 1301;
color: white;
font-size: 16 * @toVw;
}
@import "../../util/public";
@tocurrentvw : 1/2 * @toVw;
@tocurrentvh : 1/2 * @toVh;
.share_close {
position: fixed;
width: 20 * @toVw;
top: 26 * @toVw;
right: 14 * @toVw;
z-index: 1301;
color: white;
font-size: 16 * @toVw;
}
.share-btn {
position: fixed;
top: 510 * @toVw;
left: 31 * @toVw;
z-index: 1301;
text-align: center;
width: 314 * @toVw;
height: 49 * @toVw;
display: flex;
justify-content: center;
background: linear-gradient(
0deg,
rgba(243, 180, 3, 1) 1%,
rgba(252, 231, 171, 1) 100%
);
text-shadow: 0px 1 * @toVw 1 * @toVw rgba(170, 127, 4, 0.7);
// box-shadow:0px 3*@toVw 16*@toVw 0px rgba(200,96,37,0.59);
border-radius: 22 * @toVw;
color: white;
line-height: 49 * @toVw;
font-size: 18 * @toVw;
box-shadow: 0px 3 * @toVw 16 * @toVw 0px rgba(250, 208, 88, 0.59);
background: linear-gradient(
0deg,
rgba(237, 151, 1, 1) 1%,
rgba(252, 217, 118, 1) 99%
);
box-shadow: 0px 3px 16px 0px rgba(250, 208, 88, 0.59);
.iconfont {
font-size: 22 * @toVw;
margin: 0;
.share-btn {
position: fixed;
top: 510 * @toVw;
left: 31 * @toVw;
z-index: 1301;
text-align: center;
width: 314 * @toVw;
height: 49 * @toVw;
display: flex;
justify-content: center;
background: linear-gradient(
0deg,
rgba(243, 180, 3, 1) 1%,
rgba(252, 231, 171, 1) 100%
);
text-shadow: 0px 1 * @toVw 1 * @toVw rgba(170, 127, 4, 0.7);
// box-shadow:0px 3*@toVw 16*@toVw 0px rgba(200,96,37,0.59);
border-radius: 22 * @toVw;
color: white;
line-height: 49 * @toVw;
font-size: 18 * @toVw;
box-shadow: 0px 3 * @toVw 16 * @toVw 0px rgba(250, 208, 88, 0.59);
background: linear-gradient(
0deg,
rgba(237, 151, 1, 1) 1%,
rgba(252, 217, 118, 1) 99%
);
box-shadow: 0px 3px 16px 0px rgba(250, 208, 88, 0.59);
.iconfont {
font-size: 22 * @toVw;
margin: 0;
}
img {
width: 270 * @toVw;
}
span {
font-weight: 580;
font-weight: bold;
margin: 0;
}
}
img {
width: 270 * @toVw;
.canvasImg {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 1300;
}
span {
font-weight: 580;
font-weight: bold;
margin: 0;
.white-pannel {
position: absolute;
z-index: 1301;
top: 0;
width: 100%;
height: 510 * @toVw;
background: transparent;
pointer-events: none;
border: 7 * @toVw solid white;
border-radius: 12 * @toVw;
box-shadow: 0 0 0 20px white;
box-sizing: border-box;
.trs {
position: absolute;
top: 500 * @toVw;
// width: 100%;
left:-7 * @toVw;
right:-7 * @toVw;
background: white;
height: 33vh;
}
}
}
.canvasImg {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 1300;
}
.white-pannel {
position: absolute;
z-index: 1301;
top: 0;
width: 100%;
height: 510 * @toVw;
background: transparent;
pointer-events: none;
border: 7 * @toVw solid white;
border-radius: 12 * @toVw;
box-shadow: 0 0 0 20px white;
box-sizing: border-box;
.trs {
.borderDiv {
position: absolute;
top: 500 * @toVw;
// width: 100%;
left:-7 * @toVw;
right:-7 * @toVw;
background: white;
height: 33vh;
z-index: 1301;
top: 0;
width: 100%;
pointer-events: none;
height: 510 * @toVw;
box-sizing: border-box;
border: 7 * @toVw solid white;
}
}
.borderDiv {
position: absolute;
z-index: 1301;
top: 0;
width: 100%;
pointer-events: none;
height: 510 * @toVw;
box-sizing: border-box;
border: 7 * @toVw solid white;
}
.box{
position: fixed;
top: 0;
left: 0;
width: 100%;
min-height:100vh;
z-index:1300;
overflow:hidden;
}
.share-page {
position: fixed;
background: url("https://cdn.singsingenglish.com/new-sing/6c6766b21eceef9ddf36597efe3cc152f46ac7f0.png");
background-size: 100%;
top: 0;
left: 0;
// bottom: 0;
right: 0;
min-height: 650 * @toVw;
z-index: 1300;
.imgLogo {
.box{
position: fixed;
top: 15 * @toVw;
left: 15 * @toVw;
width: 48 * @toVw;
top: 0;
left: 0;
width: 100%;
min-height:100vh;
z-index:1300;
overflow:hidden;
}
.share-block {
position: absolute;
border-radius: 8 * @toVw;
top: 20 * @toVw;
left: 20 * @toVw;
right: 20 * @toVw;
// background: white;
bottom: 0;
overflow: auto;
.bg-title {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 60 * @toVw;
background-size: 100% 100%;
z-index: -1;
.share-page {
position: fixed;
background: url("https://cdn.singsingenglish.com/new-sing/6fd01609c6fc980286734364d539bf50f6ea08cd.png");
background-size: 100%;
top: 0;
left: 0;
// bottom: 0;
right: 0;
min-height: 650 * @toVw;
z-index: 1300;
.imgLogo {
position: fixed;
top: 15 * @toVw;
left: 15 * @toVw;
width: 48 * @toVw;
}
.bg-desc {
.share-block {
position: absolute;
top: 58 * @toVw;
left: 0;
right: 0;
bottom: 0;
border-radius: 8 * @toVw;
top: 20 * @toVw;
left: 20 * @toVw;
right: 20 * @toVw;
// background: white;
z-index: -1;
border-radius: 0 0 8 * @toVw 8 * @toVw;
}
#cvs-img {
position: absolute;
width: 100%;
// top: -3*@toVw;
left: 0;
z-index: 1;
}
.content {
width: 100%;
height: (480-53) * @toVw;
padding-top: 104 * @toVw;
// margin-top: 20*@toVw;
background-size: 100% 100%;
position: relative;
.content-black {
bottom: 0;
/*overflow: auto;*/
.bg-title {
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
height: 60 * @toVw;
background-size: 100% 100%;
z-index: -1;
}
.bg-desc {
position: absolute;
top: 58 * @toVw;
left: 0;
right: 0;
bottom: 0;
// background: white;
z-index: -1;
border-radius: 0 0 8 * @toVw 8 * @toVw;
}
}
.audio {
position: fixed;
opacity: 0;
}
.main-content {
width: 322 * @toVw;
height: 200 * @toVw;
background: white;
border-radius: 8 * @toVw;
position: relative;
.img_link {
#cvs-img {
position: absolute;
width: 260 * @toVw;
bottom: -49 * @toVw;
left: 33 * @toVw;
width: 100%;
// top: -3*@toVw;
left: 0;
z-index: 1;
}
.imgPoint {
position: absolute;
width: 85 * @toVw;
top: 40 * @toVw;
left: 80 * @toVw;
opacity: 0;
@keyframes pointMove {
from {
top: 40 * @toVw;
left: 80 * @toVw;
transform: scale(2, 2);
opacity: 0;
}
to {
top: -60 * @toVw;
left: 229 * @toVw;
transform: scale(1, 1);
opacity: 1;
}
.content {
width: 100%;
height: (480-53) * @toVw;
padding-top: 110 * @toVw;
// margin-top: 20*@toVw;
background-size: 100% 100%;
position: relative;
.content-black {
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
animation: pointMove 0.375s 0.5s ease;
animation-fill-mode: forwards;
}
.oimgPoint {
position: absolute;
width: 85 * @toVw;
top: -60 * @toVw;
left: 229 * @toVw;
.audio {
position: fixed;
opacity: 0;
}
.topBox {
position: absolute;
top: -34 * @toVw;
left: 48 * @toVw;
.shareTitle {
width: 223 * @toVw;
.main-content {
width: 322 * @toVw;
height: 200 * @toVw;
background: white;
border-radius: 8 * @toVw;
position: relative;
.img_link {
position: absolute;
width: 260 * @toVw;
bottom: -49 * @toVw;
left: 33 * @toVw;
}
}
.main-text {
padding-top: 48 * @toVw;
text-align: center;
margin: auto;
margin-bottom: 0;
display: flex;
.item {
flex: 1;
margin: 0;
.text1 {
color: #5f696e;
font-size: 13 * @toVw;
margin: 8 * @toVw 0;
.imgPoint {
position: absolute;
width: 85 * @toVw;
top: 40 * @toVw;
left: 80 * @toVw;
opacity: 0;
@keyframes pointMove {
from {
top: 40 * @toVw;
left: 80 * @toVw;
transform: scale(2, 2);
opacity: 0;
}
to {
top: -60 * @toVw;
left: 229 * @toVw;
transform: scale(1, 1);
opacity: 1;
}
}
img {
width: 46 * @toVw;
animation: pointMove 0.375s 0.5s ease;
animation-fill-mode: forwards;
}
.oimgPoint {
position: absolute;
width: 85 * @toVw;
top: -60 * @toVw;
left: 229 * @toVw;
}
.topBox {
position: absolute;
top: -34 * @toVw;
left: 48 * @toVw;
.shareTitle {
width: 223 * @toVw;
}
.diyikexing {
width: 35 * @toVw;
height: 34 * @toVw;
position: absolute;
z-index: 1000;
top: -50 * @toVw;
left: 40 * @toVw;
img {
width: 100%;
height: 100%;
}
}
.text2 {
font-size: 11 * @toVw;
color: #5f696e;
span {
color: #ec7e1f;
font-size: 22 * @toVw;
font-weight: bold;
.dierkexing1 {
width: 35 * @toVw;
height: 34 * @toVw;
position: absolute;
z-index: 1000;
top: -50 * @toVw;
right: 40 * @toVw;
img {
width: 100%;
height: 100%;
}
}
.dierkexing {
width: 41 * @toVw;
height: 39 * @toVw;
position: absolute;
top: -86 * @toVw;
left: 92 * @toVw;
z-index: 1000;
img {
width: 100%;
height: 100%;
}
}
}
}
.head-block {
position: absolute;
text-align: center;
border-radius: 200 * @toVw;
// left: 50%;
width: 100%;
text-align: center;
top: -52 * @toVw;
img {
border: 8 * @toVw solid #72cefa;
.main-text {
padding-top: 48 * @toVw;
text-align: center;
margin: auto;
margin-bottom: 0;
display: flex;
.item {
flex: 1;
margin: 0;
.text1 {
color: #5f696e;
font-size: 13 * @toVw;
margin: 8 * @toVw 0;
}
img {
width: 46 * @toVw;
}
.text2 {
font-size: 11 * @toVw;
color: #5f696e;
span {
color: #ec7e1f;
font-size: 22 * @toVw;
font-weight: bold;
}
}
}
}
.head-block {
position: absolute;
text-align: center;
border-radius: 200 * @toVw;
width: 62 * @toVw;
margin-top: 7 * @toVw;
height: 62 * @toVw;
// left: 50%;
width: 100%;
text-align: center;
top: -52 * @toVw;
img {
border: 8 * @toVw solid #72cefa;
border-radius: 200 * @toVw;
width: 62 * @toVw;
margin-top: 7 * @toVw;
height: 62 * @toVw;
}
}
.content-title {
width: 226 * @toVw;
// height: 54 * @toVw;
line-height: 26 * @toVw;
margin-top: 40 * @toVw;
color: #55343a;
// background: white;
font-size: 14 * @toVw;
text-align: center;
background-size: 99.99% 99.99%;
position: absolute;
top: -14 * @toVw;
color: white;
vertical-align: top;
display: flex;
justify-content: center;
// left: 50%;
// margin-left: -112.5*@toVw;
span {
margin: 0;
}
.ellipsisCss {
max-width: 86 * @toVw;
}
}
}
.content-title {
width: 226 * @toVw;
// height: 54 * @toVw;
line-height: 26 * @toVw;
margin-top: 40 * @toVw;
color: #55343a;
// background: white;
font-size: 14 * @toVw;
.sing-content {
background: white;
border-radius: 10 * @toVw;
margin-top: 30 * @toVw;
padding: 20 * @toVw 0;
text-align: center;
background-size: 99.99% 99.99%;
position: absolute;
top: -14 * @toVw;
color: white;
vertical-align: top;
display: flex;
justify-content: center;
// left: 50%;
// margin-left: -112.5*@toVw;
span {
margin: 0;
.text1 {
margin: 0 0 20 * @toVw;
font-size: 13 * @toVw;
}
.ellipsisCss {
max-width: 86 * @toVw;
.text2 {
color: #1d6588;
font-size: 22 * @toVw;
font-weight: bold;
margin-bottom: 10 * @toVw;
width: 318 * @toVw;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.text3 {
color: #1d6588;
}
}
}
.sing-content {
background: white;
border-radius: 10 * @toVw;
margin-top: 30 * @toVw;
padding: 20 * @toVw 0;
text-align: center;
.text1 {
margin: 0 0 20 * @toVw;
font-size: 13 * @toVw;
}
.text2 {
color: #1d6588;
font-size: 22 * @toVw;
font-weight: bold;
.qrbox {
background: #1a9bda;
top: 514 * @toVw;
// top: 414* @toVw;
color: white;
position: absolute;
left: 0;
width: 100%;
display: flex;
padding: 18 * @toVw;
box-sizing: border-box;
font-weight: bold;
p {
font-size: 18 * @toVw;
margin-bottom: 10 * @toVw;
width: 318 * @toVw;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.text3 {
color: #1d6588;
}
}
}
.qrbox {
background: #1a9bda;
top: 514 * @toVw;
// top: 414* @toVw;
color: white;
position: absolute;
left: 0;
width: 100%;
display: flex;
padding: 18 * @toVw;
box-sizing: border-box;
font-weight: bold;
p {
font-size: 18 * @toVw;
margin-bottom: 10 * @toVw;
}
.left {
flex: 1;
.point {
border: 1px solid white;
height: 30 * @toVw;
width: 191 * @toVw;
text-align: center;
line-height: 30 * @toVw;
border-radius: 5 * @toVw;
margin-left: 0;
img {
width: 14 * @toVw;
position: relative;
top: 2 * @toVw;
.left {
flex: 1;
.point {
border: 1px solid white;
height: 30 * @toVw;
width: 191 * @toVw;
text-align: center;
line-height: 30 * @toVw;
border-radius: 5 * @toVw;
margin-left: 0;
img {
width: 14 * @toVw;
position: relative;
top: 2 * @toVw;
}
}
}
}
.right {
.qrcode {
display: inline-block;
border: 3px solid white;
// background:white;
font-size: 0;
img {
.right {
.qrcode {
display: inline-block;
border: 3px solid white;
// background:white;
font-size: 0;
img {
}
}
}
}
}
.tips {
background: rgba(0, 0, 0, 0.8);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding-right: 19 * @toVw;
z-index: 99999999;
text-align: right;
img {
width: 80%;
}
.closeBox {
position: absolute;
.tips {
background: rgba(0, 0, 0, 0.8);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding-right: 19 * @toVw;
z-index: 99999999;
text-align: right;
img {
width: 80%;
}
.closeBox {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}
}
.pannel {
width: 616 * @tocurrentvw;
height: 380 * @tocurrentvw;
border-radius: 16 * @tocurrentvw;
position: fixed;
z-index: 2;
top: 48vh;
left: 67 * @tocurrentvw;
border: 2 * @tocurrentvw dashed #fff;
color: white;
.pannel-container {
width: 558 * @tocurrentvw;
height: 324 * @tocurrentvw;
margin: 28 * @tocurrentvw;
// background-color: pink;
display: flex;
flex-direction: column;
justify-content: flex-start;
.pannel-header {
.pannel {
width: 616 * @tocurrentvw;
height: 380 * @tocurrentvw;
border-radius: 16 * @tocurrentvw;
position: fixed;
z-index: 2;
top: 48vh;
left: 67 * @tocurrentvw;
border: 2 * @tocurrentvw dashed #fff;
color: white;
.pannel-container {
width: 558 * @tocurrentvw;
height: 324 * @tocurrentvw;
margin: 28 * @tocurrentvw;
// background-color: pink;
display: flex;
margin: 0;
align-items: center;
height: 40 * @tocurrentvw;
font-size: 28 * @tocurrentvw;
color: #fff;
text-align: left;
img {
display: block;
width: 38 * @tocurrentvw;
flex-direction: column;
justify-content: flex-start;
.pannel-header {
display: flex;
margin: 0;
align-items: center;
height: 40 * @tocurrentvw;
font-size: 28 * @tocurrentvw;
color: #fff;
text-align: left;
img {
display: block;
width: 38 * @tocurrentvw;
height: 40 * @tocurrentvw;
}
}
}
.pannel-main {
text-align: left;
margin-top: 18 * @toVw;
img {
height: 18 * @toVw;
vertical-align: text-bottom;
.pannel-main {
text-align: left;
margin-top: 18 * @toVw;
img {
height: 18 * @toVw;
vertical-align: text-bottom;
}
}
}
.pannel-footer {
margin: 0;
img {
position: relative;
top: 2 * @toVw;
width: 16 * @toVw;
.pannel-footer {
margin: 0;
img {
position: relative;
top: 2 * @toVw;
width: 16 * @toVw;
}
}
}
.transparentBtn {
margin-top: 30 * @toVw;
}
}
}
@keyframes mymove
{
0%{
transform: scale(1); /*开始为原始大小*/
}
50%{
transform: scale(1.5);
}
.transparentBtn {
margin-top: 30 * @toVw;
100%{
transform: scale(1);
}
}
}
@media screen and (min-width: 600px) {
.box{
overflow:auto;
}
.white-pannel {
.trs {
height: 30vh;
@-webkit-keyframes mymove /*Safari and Chrome*/
{
0%{
transform: scale(1); /*开始为原始大小*/
}
50%{
transform: scale(1.5);
}
100%{
transform: scale(1);
}
}
.animated {
animation: mymove 1s .5s ease;
animation-fill-mode: forwards;
}
.animated1 {
animation: mymove 1s 1s ease;
animation-fill-mode: forwards;
}
.animated2 {
animation: mymove 1s 1.5s ease;
animation-fill-mode: forwards;
}
@media screen and (min-width: 600px) {
.box{
overflow:auto;
}
.white-pannel {
.trs {
height: 30vh;
}
}
}
}
}
</style>
<style lang="less">
@import "../../util/public";
.van-toast {
top: 35%;
}
.pannel-main {
img {
height: 18 * @toVw;
vertical-align: text-bottom;
@import "../../util/public";
.van-toast {
top: 35%;
}
.pannel-main {
img {
height: 18 * @toVw;
vertical-align: text-bottom;
}
}
}
</style>
<style lang="">
/* body{
pointer-events: none;
} */
/* body{
pointer-events: none;
} */
</style>
src/components/newLesson/star.vue
View file @ 15e79249
......@@ -4,16 +4,21 @@
<mt-popup
v-model="popupVisible" style="background: transparent">
<div class="pop-block">
<img :src="starNum == 0 ? star1 : starNum == 3 ? star3 : star2 " class="star-all"/>
<img :src="starNum == 1 ? star1 : starNum == 2 ? star2 : star3 " class="star-all"/>
<div class="list">
1.完成今日学习
1.开始课程学习
<div class="star-content">
<img :src="starNum == 0 ? star_default : star_active">
<img :src="starNum < 2 ? star_default : star_active">
<img :src="starNum >= 1 ? star_active : star_default">
</div>
</div>
<div class="list">
2.分享学习记录
2.完成今日学习
<div class="star-content">
<img :src="starNum >= 2 ? star_active : star_default">
</div>
</div>
<div class="list">
3.提交成长记录
<div class="star-content">
<img :src="starNum == 3 ? star_active : star_default">
</div>
......@@ -21,7 +26,7 @@
<div class="btn-block">
<div class="btn" @click="showShare">
<span v-if="starNum < 2">继续看课</span>
<span v-if="starNum == 2">分享赚星星</span>
<span v-if="starNum == 2">去记录</span>
<span v-if="starNum == 3">关闭</span>
</div>
</div>
......@@ -110,7 +115,7 @@
width: 230*@toVw;
padding:50*@toVw 10*@toVw 10*@toVw 10*@toVw;
position: relative;
height: 142*@toVw;
// height: 142*@toVw;
.star-all{
width: 154*@toVw;
position: absolute;
......
src/components/newLesson/video.vue
View file @ 15e79249
......@@ -46,18 +46,18 @@
v-if="showObj.video[videoIndex]"
v-show="!share_show && !popupVisible"
>
<!-- :src="showObj.video[videoIndex].url" -->
<!-- :src="showObj.video[videoIndex].url" -->
<video v-show="!star"
ref="videoDom"
style="object-fit:fill"
x5-video-player-type="h5" x5-video-player-fullscreen="true" x-webkit-airplay="true" playsinline
:src="showObj.video[videoIndex].url"
@ended="videoEnd"
@error="errorLog"
@play="videoPlay()"
controlslist="nodownload"
:controls="vcontrols"
:poster="showObj.video[videoIndex].url+'?vframe/jpg/offset/3'"
ref="videoDom"
style="object-fit:fill"
x5-video-player-type="h5" x5-video-player-fullscreen="true" x-webkit-airplay="true" playsinline
:src="showObj.video[videoIndex].url"
@ended="videoEnd"
@error="errorLog"
@play="videoPlay()"
controlslist="nodownload"
:controls="vcontrols"
:poster="showObj.video[videoIndex].url+'?vframe/jpg/offset/3'"
></video>
<div class="video-bj" v-show="star">
<img :src="showObj.video[videoIndex].url+'?vframe/jpg/offset/3'" alt="">
......@@ -134,730 +134,609 @@
</div>
</template>
<script>
import luolacoming from "../../assets/newLesson/luoLacoming.png";
import luolalaila from "../../assets/newLesson/luolalaila.png";
import { subUserLessonApi, getUserWatchApi,postErrorLogApi } 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";
import { Popup } from "mint-ui";
import audioGood from "../../assets/good.mp3";
import audioGreat from "../../assets/great.mp3";
import audioPerfect from "../../assets/perfect.mp3";
import leftIcon from "../../assets/shop/left.png";
import { Toast } from "vant";
// import videojs from "videojs";
export default {
name: "play",
components: {
noFinishDia,
sharePage,
starBlock,
[Popup.name]: Popup
},
data() {
return {
vcontrols: true,
clarityType: "1280",
secClarity: false,
leftIcon: leftIcon,
finishStuat: finishStuat,
popupVisible: false,
ageShow: false,
star: false,
share_show: false,
showObj: {
video: [],
change: false
},
videoShow: false,
videoIndex: 0,
imgURL: {
luolacoming: luolacoming,
luolalaila: luolalaila,
tapToAudio: tapToAudio
},
orientationchange: false,
testCount: 5,
videoStyle: "0",
videoWidth: 100,
audioPoint: audioGood,
currentTime: "",
QPlayerConfig :{
url:''
},
videoObj:null,
userDetail:{}
};
},
props: ["contentData", "nowShow"],
created() {
this.videoWidth = Number(document.documentElement.clientWidth) / 3.8;
},
mounted() {
this.changeAge(this.contentData.age);
let that = this;
// console.log(document.documentElement.clientWidth)
if (
document.documentElement.clientWidth >
document.documentElement.clientHeight
) {
this.orientationchange = true;
} else {
this.orientationchange = false;
}
window.addEventListener(
"orientationchange",
() => {
let width = document.documentElement.clientWidth;
let height = document.documentElement.clientHeight;
let t = setTimeout(function() {
if (width < height) {
that.orientationchange = true;
clearTimeout(t);
// return
} else {
that.orientationchange = false;
clearTimeout(t);
// return
}
}, 100);
// debugger
},
false
);
// console.log(videojs)
},
methods: {
errorLog(e){
this.userDetail = JSON.parse(localStorage.getItem("userDesc"));
// console.log(e.target.error,229)
let str='code:'+e.target.error.code+',msg:'+e.target.error.message+',url:'+
this.showObj.video[this.videoIndex].url+',UserAgent:'+navigator.userAgent+',currentTime:'+this.$refs.videoDom.currentTime
postErrorLogApi({
'routes_url':'videoerror,'+'userid:'+this.userDetail.user_id,
'result_text':str
}).then((res)=>{
// console.log(res)
})
import luolacoming from "../../assets/newLesson/luoLacoming.png";
import luolalaila from "../../assets/newLesson/luolalaila.png";
import { subUserLessonApi, getUserWatchApi,postErrorLogApi } from "../../service/api";
import tapToAudio from "../../assets/tapToAudio.png";
import finishStuat from "../../assets/newLesson/finishStudy1.png";
import noFinishDia from "./nofinishdia";
import sharePage from "./share";
import starBlock from "./star";
import { Popup } from "mint-ui";
import audioGood from "../../assets/good.mp3";
import audioGreat from "../../assets/great.mp3";
import audioPerfect from "../../assets/perfect.mp3";
import leftIcon from "../../assets/shop/left.png";
import { Toast } from "vant";
// import videojs from "videojs";
export default {
name: "play",
components: {
noFinishDia,
sharePage,
starBlock,
[Popup.name]: Popup
},
data() {
return {
vcontrols: true,
clarityType: "1280",
secClarity: false,
leftIcon: leftIcon,
finishStuat: finishStuat,
popupVisible: false,
ageShow: false,
star: false,
share_show: false,
showObj: {
video: [],
change: false
},
videoShow: false,
videoIndex: 0,
imgURL: {
luolacoming: luolacoming,
luolalaila: luolalaila,
tapToAudio: tapToAudio
},
orientationchange: false,
testCount: 5,
videoStyle: "0",
videoWidth: 100,
audioPoint: audioGood,
currentTime: "",
QPlayerConfig :{
url:''
},
videoObj:null,
userDetail:{}
};
},
sliceUrl() {
localStorage.setItem("clarityType", this.clarityType);
this.showObj.video.forEach(el => {
el.url =
el.url.slice(0, el.url.indexOf("_")) +
"_" +
this.clarityType +
el.url.slice(-4);
});
props: ["contentData", "nowShow"],
created() {
this.videoWidth = Number(document.documentElement.clientWidth) / 3.8;
},
changeClarity(a) {
// Toast.loading({
// mask: true,
// message: ''
// });
mounted() {
if(this.$route.params.evaluate === 1)
this.finishStudy()
this.changeAge(this.contentData.age);
let that = this;
this.currentTime = this.$refs.videoDom.currentTime;
if (a == "1280") {
this.clarityType = 1280;
this.sliceUrl();
} else if (a == "720") {
this.clarityType = 720;
this.sliceUrl();
// console.log(document.documentElement.clientWidth)
if (
document.documentElement.clientWidth >
document.documentElement.clientHeight
) {
this.orientationchange = true;
} else {
this.clarityType = 540;
this.sliceUrl();
this.orientationchange = false;
}
this.secClarity = false;
},
scrollFn(index) {
this.videoStyle = index;
this.videoIndex = index;
let parentwidth = Number(
getComputedStyle(document.querySelector(".scroll")).width.replace(
"px",
""
)
);
let itemBoxWidth = Number(
getComputedStyle(document.querySelector(".itemBox")).width.replace(
"px",
""
)
window.addEventListener(
"orientationchange",
() => {
let width = document.documentElement.clientWidth;
let height = document.documentElement.clientHeight;
let t = setTimeout(function() {
if (width < height) {
that.orientationchange = true;
clearTimeout(t);
// return
} else {
that.orientationchange = false;
clearTimeout(t);
// return
}
}, 100);
// debugger
},
false
);
let difWidth = parentwidth / 2 - 45;
if (this.showObj.video.length > 3) {
if (index * this.videoWidth > difWidth) {
let indexS = index - 1;
if (index * this.videoWidth - difWidth < itemBoxWidth - parentwidth) {
this.$refs.scrollDom.scrollTo(
-(index * this.videoWidth - difWidth),
0,
this.videoWidth
);
} else {
this.$refs.scrollDom.scrollTo(
-(itemBoxWidth - parentwidth),
0,
this.videoWidth
);
}
} else {
this.$refs.scrollDom.scrollTo(0, 0, this.videoWidth);
}
}
},
swiperback(index) {
this.videoIndex = index;
this.sendConsole("多视频选择视频");
},
test() {},
changeStar(data) {
this.star = data;
},
backList() {
this.$emit("backList");
},
closeShare() {
this.share_show = false;
// console.log(videojs)
},
finishStudy() {
if (this.$refs.videoDom) {
this.$refs.videoDom.pause();
}
let query = JSON.parse(sessionStorage.getItem("classQuery"));
this.sendConsole("完成今日学习");
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(
query.elementId,
query.category_id,
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.popupVisible = true;
methods: {
errorLog(e){
this.userDetail = JSON.parse(localStorage.getItem("userDesc"));
// console.log(e.target.error,229)
let str='code:'+e.target.error.code+',msg:'+e.target.error.message+',url:'+
this.showObj.video[this.videoIndex].url+',UserAgent:'+navigator.userAgent+',currentTime:'+this.$refs.videoDom.currentTime
postErrorLogApi({
'routes_url':'videoerror,'+'userid:'+this.userDetail.user_id,
'result_text':str
}).then((res)=>{
// console.log(res)
})
},
sliceUrl() {
localStorage.setItem("clarityType", this.clarityType);
this.showObj.video.forEach(el => {
el.url =
el.url.slice(0, el.url.indexOf("_")) +
"_" +
this.clarityType +
el.url.slice(-4);
});
},
changeClarity(a) {
// Toast.loading({
// mask: true,
// message: ''
// });
let that = this;
this.currentTime = this.$refs.videoDom.currentTime;
if (a == "1280") {
this.clarityType = 1280;
this.sliceUrl();
} else if (a == "720") {
this.clarityType = 720;
this.sliceUrl();
} else {
getUserWatchApi({ category_id: query.category_id }).then(res => {
this.$store.dispatch("setWatchDetail", res);
this.share_show = true;
// debugger
});
setTimeout(() => {
if (this.$store.state.lookStatus == 0) {
this.audioPoint = audioGood;
} else if (this.$store.state.lookStatus == 1) {
this.audioPoint = audioGreat;
this.clarityType = 540;
this.sliceUrl();
}
this.secClarity = false;
},
scrollFn(index) {
this.videoStyle = index;
this.videoIndex = index;
let parentwidth = Number(
getComputedStyle(document.querySelector(".scroll")).width.replace(
"px",
""
)
);
let itemBoxWidth = Number(
getComputedStyle(document.querySelector(".itemBox")).width.replace(
"px",
""
)
);
let difWidth = parentwidth / 2 - 45;
if (this.showObj.video.length > 3) {
if (index * this.videoWidth > difWidth) {
let indexS = index - 1;
if (index * this.videoWidth - difWidth < itemBoxWidth - parentwidth) {
this.$refs.scrollDom.scrollTo(
-(index * this.videoWidth - difWidth),
0,
this.videoWidth
);
} else {
this.audioPoint = audioPerfect;
this.$refs.scrollDom.scrollTo(
-(itemBoxWidth - parentwidth),
0,
this.videoWidth
);
}
this.$refs.audioDom.load();
setTimeout(() => {
this.$refs.audioDom.play();
}, 100);
}, 300);
} else {
this.$refs.scrollDom.scrollTo(0, 0, this.videoWidth);
}
}
});
},
videoEnd(event) {
event.srcElement.play();
},
sendConsole(data) {
this.$sa.track("watchClick", {
dayModule: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(0, 9),
weekName: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
elementName:
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
0,
9
) +
"-" +
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
themeID: JSON.parse(localStorage.getItem("lessonDetail")).themeID,
themeName: JSON.parse(localStorage.getItem("lessonDetail")).themeName,
goodsID: JSON.parse(localStorage.getItem("lessonDetail")).goodsID,
classID: JSON.parse(localStorage.getItem("lessonDetail")).classID,
buttonName: data,
partName: this.contentData.partName,
elementID: this.$route.query.elementId.toString()
});
},
changeAudio(flag) {
if (flag) {
},
swiperback(index) {
this.videoIndex = index;
this.sendConsole("多视频选择视频");
},
test() {},
changeStar(data) {
this.star = data;
},
backList() {
this.$emit("backList");
},
closeShare() {
// this.$route = {}
this.share_show = false;
console.log(this.$route)
},
finishStudy() {
if (this.$refs.videoDom) {
this.$refs.videoDom.pause();
}
let query = JSON.parse(sessionStorage.getItem("classQuery"));
this.sendConsole("完成今日学习");
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(
query.elementId,
query.category_id,
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.popupVisible = true;
} else {
// 用户看课统计
getUserWatchApi({ category_id: query.category_id }).then(res => {
this.$store.dispatch("setWatchDetail", res);
// 从评价页面返回过来
if(this.$route.params.evaluate === 1){
this.share_show = true;
this.$route.params.evaluate = 0
} else {
this.$router.push({path: '/evaluate'})
}
});
setTimeout(() => {
if (this.$store.state.lookStatus == 0) {
this.audioPoint = audioGood;
} else if (this.$store.state.lookStatus == 1) {
this.audioPoint = audioGreat;
} else {
this.audioPoint = audioPerfect;
}
this.$refs.audioDom.load();
setTimeout(() => {
this.$refs.audioDom.play();
}, 100);
}, 300);
}
});
},
videoEnd(event) {
event.srcElement.play();
},
sendConsole(data) {
this.$sa.track("watchClick", {
dayModule: JSON.parse(
localStorage.getItem("lessonDetail")
localStorage.getItem("lessonDetail")
).domTitle.slice(0, 9),
weekName: JSON.parse(
localStorage.getItem("lessonDetail")
localStorage.getItem("lessonDetail")
).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
elementName:
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
0,
9
) +
"-" +
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
0,
9
) +
"-" +
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
themeID: JSON.parse(localStorage.getItem("lessonDetail")).themeID,
themeName: JSON.parse(localStorage.getItem("lessonDetail")).themeName,
goodsID: JSON.parse(localStorage.getItem("lessonDetail")).goodsID,
classID: JSON.parse(localStorage.getItem("lessonDetail")).classID,
buttonName: data,
partName: this.contentData.partName,
elementID: this.$route.query.elementId.toString()
});
},
changeAudio(flag) {
if (flag) {
this.$sa.track("watchClick", {
dayModule: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(0, 9),
weekName: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
elementName:
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
0,
9
) +
"-" +
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
themeID: JSON.parse(localStorage.getItem("lessonDetail")).themeID,
themeName: JSON.parse(localStorage.getItem("lessonDetail")).themeName,
goodsID: JSON.parse(localStorage.getItem("lessonDetail")).goodsID,
classID: JSON.parse(localStorage.getItem("lessonDetail")).classID,
buttonName: "切换音频教学",
partName: this.contentData.partName,
elementID: this.$route.query.elementId.toString()
});
}
this.contentData.type = "audio";
},
videoPlay() {
// 神策埋点 点击操作
// this.$refs.videoDom.load()
console.log("canplay");
if (this.currentTime) {
setTimeout(() => {
this.$refs.videoDom.play();
this.$refs.videoDom.currentTime = this.currentTime;
this.currentTime = 0;
}, 300);
}
this.$sa.track("watchClick", {
dayModule: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(0, 9),
weekName: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
),
elementName:
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
0,
9
) +
"-" +
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
themeID: JSON.parse(localStorage.getItem("lessonDetail")).themeID,
themeName: JSON.parse(localStorage.getItem("lessonDetail")).themeName,
goodsID: JSON.parse(localStorage.getItem("lessonDetail")).goodsID,
classID: JSON.parse(localStorage.getItem("lessonDetail")).classID,
buttonName: "切换音频教学",
buttonName: "播放视频",
partName: this.contentData.partName,
elementID: this.$route.query.elementId.toString()
});
}
this.contentData.type = "audio";
},
videoPlay() {
// 神策埋点 点击操作
// this.$refs.videoDom.load()
console.log("canplay");
if (this.currentTime) {
setTimeout(() => {
this.$refs.videoDom.play();
this.$refs.videoDom.currentTime = this.currentTime;
this.currentTime = 0;
}, 300);
}
this.$sa.track("watchClick", {
dayModule: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(0, 9),
weekName: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
elementName:
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
0,
9
) +
"-" +
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
themeID: JSON.parse(localStorage.getItem("lessonDetail")).themeID,
themeName: JSON.parse(localStorage.getItem("lessonDetail")).themeName,
goodsID: JSON.parse(localStorage.getItem("lessonDetail")).goodsID,
classID: JSON.parse(localStorage.getItem("lessonDetail")).classID,
buttonName: "播放视频",
partName: this.contentData.partName,
elementID: this.$route.query.elementId.toString()
});
},
changeAge(value) {
this.clarityType = localStorage.getItem("clarityType")
? localStorage.getItem("clarityType")
: 1280;
if (this.contentData.content.age && value === 2) {
let video = [];
video = this.$common.deepCopy(this.contentData.content.video2);
video.forEach(el => {
let str = el.url;
if (this.contentData.title == 2) {
el.url = str.slice(0, -4) + "_" + this.clarityType + str.slice(-4);
}
});
this.showObj = {
video: video,
change: this.contentData.content.change2
};
} else {
let video = [];
video = this.$common.deepCopy(this.contentData.content.video);
video.forEach(el => {
let str = el.url;
if (this.contentData.title == 2) {
el.url = str.slice(0, -4) + "_" + this.clarityType + str.slice(-4);
}
});
this.showObj = {
video: video,
change: this.contentData.content.change
};
}
if (this.$refs.itembox && this.showObj.video.length) {
this.$refs.itembox.style.width =
this.showObj.video.length * this.videoWidth + "px";
}
},
},
changeAge(value) {
this.clarityType = localStorage.getItem("clarityType")
? localStorage.getItem("clarityType")
: 1280;
if (this.contentData.content.age && value === 2) {
let video = [];
video = this.$common.deepCopy(this.contentData.content.video2);
video.forEach(el => {
let str = el.url;
if (this.contentData.title == 2) {
el.url = str.slice(0, -4) + "_" + this.clarityType + str.slice(-4);
}
});
this.showObj = {
video: video,
change: this.contentData.content.change2
};
} else {
let video = [];
video = this.$common.deepCopy(this.contentData.content.video);
video.forEach(el => {
let str = el.url;
if (this.contentData.title == 2) {
el.url = str.slice(0, -4) + "_" + this.clarityType + str.slice(-4);
}
});
this.showObj = {
video: video,
change: this.contentData.content.change
};
watch: {
contentData: {
handler: function() {
this.videoIndex = 0;
this.changeAge(this.contentData.age);
this.secClarity = false;
},
deep: true
}
if (this.$refs.itembox && this.showObj.video.length) {
this.$refs.itembox.style.width =
this.showObj.video.length * this.videoWidth + "px";
}
},
},
watch: {
contentData: {
handler: function() {
this.videoIndex = 0;
this.changeAge(this.contentData.age);
this.secClarity = false;
},
deep: true
}
}
};
};
</script>
<style scoped lang="less">
@import "../../util/public";
.close-share-show {
position: fixed;
z-index: 99;
top: 18 * @toVw;
right: 12 * @toVw;
width: 20 * @toVw;
}
.playImage {
background: url("https://static-cdn.changchangenglish.com/new-sing/static/images/playImage.png")
@import "../../util/public";
.close-share-show {
position: fixed;
z-index: 99;
top: 18 * @toVw;
right: 12 * @toVw;
width: 20 * @toVw;
}
.playImage {
background: url("https://static-cdn.changchangenglish.com/new-sing/static/images/playImage.png")
no-repeat;
background-size: 40 * @toVw 189 * @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;
}
.orientationchangeBox {
p {
text-align: center;
margin-bottom: 10 * @toVw;
background-size: 40 * @toVw 189 * @toVw;
display: inline-block;
}
}
.videoTitle {
position: relative;
font-size: 14 * @toVw;
margin-bottom: 12 * @toVw;
text-indent: 6 * @toVw;
// top:70 * @toVw;
.fr {
// position:relative;
// top:-8 * @toVw;
line-height: 16 * @toVw;
img {
width: 8 * @toVw;
position: relative;
top: 1 * @toVw;
}
margin-right: 8 * @toVw;
.rotate {
transform: rotate(92deg);
}
._154722344142123489 {
height: 5 * @toVw;
width: 9 * @toVw;
background-position: 0 0;
}
.secClarityBox {
position: absolute;
right: 0;
top: 25 * @toVw;
padding: 15 * @toVw 15 * @toVw 0;
z-index: 10001;
background: white;
border-radius: 11 * @toVw;
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
div {
margin-bottom: 15 * @toVw;
// text-align: center;
text-indent: 0;
}
.select {
color: #40a9ff;
._282918034425091245 {
height: 8 * @toVw;
width: 9 * @toVw;
background-position: 0 -4 * @toVw;
vertical-align: bottom;
}
.orientationchangeBox {
p {
text-align: center;
margin-bottom: 10 * @toVw;
}
}
}
.scroll {
width: 310 * @toVw;
overflow: hidden;
// position: fixed;
display: none;
.itemBox {
// width: 600*@toVw;
display: flex;
.item {
// display: inline-block;
flex: 1;
width: 100 * @toVw;
height: 100 * @toVw;
// border: 1px solid black;
.videoTitle {
position: relative;
font-size: 14 * @toVw;
margin-bottom: 12 * @toVw;
text-indent: 6 * @toVw;
// top:70 * @toVw;
.fr {
// position:relative;
// top:-8 * @toVw;
line-height: 16 * @toVw;
img {
width: 90 * @toVw;
height: 60 * @toVw;
border-radius: 18px;
border: 3px solid #e2e2e2;
width: 8 * @toVw;
position: relative;
top: 1 * @toVw;
}
.activity {
border: 3px solid #40a9ff;
margin-right: 8 * @toVw;
.rotate {
transform: rotate(92deg);
}
}
p {
font-size: 13 * @toVw;
color: #666666;
}
}
}
.disShow {
display: block;
}
.video-page {
.content {
background: white;
width: 315 * @toVw;
position: absolute;
top: 70 * @toVw;
left: 20 * @toVw;
right: 20 * @toVw;
bottom: 0;
overflow: auto;
margin: auto;
display: block;
border-radius: 8 * @toVw;
padding: 10 * @toVw;
.header {
// text-align: center;
padding-top: 8 * @toVw;
height: auto;
// display: flex;
.text {
width: 96%;
margin-bottom: 0;
display: block;
// border: none;
.secClarityBox {
position: absolute;
right: 0;
top: 25 * @toVw;
padding: 15 * @toVw 15 * @toVw 0;
z-index: 10001;
background: white;
border-radius: 11 * @toVw;
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
div {
margin-bottom: 15 * @toVw;
// text-align: center;
text-indent: 0;
}
}
.video-block {
margin-bottom: 16 * @toVw;
// border: 1*@toVw solid #666;
border-radius: 12 * @toVw;
// padding: 8*@toVw;
background: #69c0ff;
border: 6px solid #69c0ff;
overflow: hidden;
video {
width: 307 * @toVw;
// height: 171*@toVw;
margin: 0;
display: block;
padding: 0;
background: rgba(0, 0, 0, 0.4);
border-radius: 10 * @toVw;
.select {
color: #40a9ff;
}
.video-bj {
width: 307 * @toVw;
background: rgba(0, 0, 0, 0.4);
border-radius: 10 * @toVw;
padding: 0;
margin: 0;
display: block;
}
}
.scroll {
width: 310 * @toVw;
overflow: hidden;
// position: fixed;
display: none;
.itemBox {
// width: 600*@toVw;
display: flex;
.item {
// display: inline-block;
flex: 1;
width: 100 * @toVw;
height: 100 * @toVw;
// border: 1px solid black;
img {
width: 100%;
width: 90 * @toVw;
height: 60 * @toVw;
border-radius: 18px;
border: 3px solid #e2e2e2;
}
.activity {
border: 3px solid #40a9ff;
}
}
}
.age-block {
width: 66 * @toVw;
height: 28 * @toVw;
line-height: 28 * @toVw;
border: 1 * @toVw solid #666;
padding: 0 13 * @toVw;
border-radius: 100 * @toVw;
font-size: 12 * @toVw;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: rgba(102, 102, 102, 1);
&.video {
right: 0;
margin-right: 0;
text-align: center;
p {
font-size: 13 * @toVw;
color: #666666;
}
}
.age-change-block {
&.video {
right: 10 * @toVw;
left: auto;
z-index: 1231;
background: white;
width: 80 * @toVw;
width: 96 * @toVw;
border: 1 * @toVw solid #666;
border-radius: 10 * @toVw;
& > div {
margin: 0;
width: 96 * @toVw;
padding: 6 * @toVw 11 * @toVw;
text-align: left;
display: inline-block;
border-radius: 8 * @toVw;
text-align: center;
border: none;
box-sizing: border-box;
&:first-child {
border-bottom: 1 * @toVw solid #eee;
}
}
}
display: inline-block;
// position: absolute;
// top: 282 * @toVw;
// left: 20 * @toVw;
width: 196 * @toVw;
// border-radius: 8*@toVw;
// border: 1*@toVw solid #666666;
font-size: 12px;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: rgba(102, 102, 102, 1);
& > div {
margin: 10 * @toVw 0;
width: 86 * @toVw;
padding: 6 * @toVw 11 * @toVw;
text-align: left;
display: inline-block;
border-radius: 8 * @toVw;
text-align: center;
border: 1px solid rgba(200, 205, 220, 1);
box-sizing: border-box;
&:first-child {
border-bottom: 1 * @toVw solid #eee;
}
.disShow {
display: block;
}
.video-page {
.content {
background: white;
width: 315 * @toVw;
position: absolute;
top: 70 * @toVw;
left: 20 * @toVw;
right: 20 * @toVw;
bottom: 0;
overflow: auto;
margin: auto;
display: block;
border-radius: 8 * @toVw;
padding: 10 * @toVw;
.header {
// text-align: center;
padding-top: 8 * @toVw;
height: auto;
// display: flex;
.text {
width: 96%;
margin-bottom: 0;
display: block;
// border: none;
}
}
.activity {
border: 3px solid rgba(64, 169, 255, 1);
}
}
.btn-block {
position: relative;
text-align: center;
z-index: 100;
.change-block {
border-radius: 1000 * @toVw;
width: 144 * @toVw;
border: 1 * @toVw solid #40a9ff;
&:after {
content: "";
.video-block {
margin-bottom: 16 * @toVw;
// border: 1*@toVw solid #666;
border-radius: 12 * @toVw;
// padding: 8*@toVw;
background: #69c0ff;
border: 6px solid #69c0ff;
overflow: hidden;
video {
width: 307 * @toVw;
// height: 171*@toVw;
margin: 0;
display: block;
clear: both;
padding: 0;
background: rgba(0, 0, 0, 0.4);
border-radius: 10 * @toVw;
}
div {
float: left;
width: 50%;
border-radius: 100 * @toVw;
font-size: 12 * @toVw;
height: 28 * @toVw;
line-height: 28 * @toVw;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: rgba(204, 204, 204, 1);
&.active {
background: #40a9ff;
color: white;
.video-bj {
width: 307 * @toVw;
background: rgba(0, 0, 0, 0.4);
border-radius: 10 * @toVw;
padding: 0;
margin: 0;
display: block;
img {
width: 100%;
}
}
}
}
.parent-finish {
position: fixed;
bottom: 2 * @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;
.age-block {
width: 66 * @toVw;
height: 28 * @toVw;
line-height: 28 * @toVw;
border: 1 * @toVw solid #666;
padding: 0 13 * @toVw;
border-radius: 100 * @toVw;
font-size: 12 * @toVw;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: rgba(102, 102, 102, 1);
&.video {
right: 0;
margin-right: 0;
text-align: center;
}
}
}
}
}
.change-block-HP {
display: none;
}
@media screen and (orientation: landscape) {
@toVw: 100/667vw;
.videoTitle {
.fr {
display: none;
}
}
.video-page {
position: absolute;
top: 5 * @toVw;
bottom: 5 * @toVw;
left: 5 * @toVw;
right: 5 * @toVw;
background: rgba(255, 255, 255, 1);
overflow: auto;
border-radius: 8 * @toVw;
.content {
position: static;
height: 100%;
width: 100%;
display: flex;
border-radius: 8px;
padding: 0;
.header {
display: none;
}
.age-change-block {
&.video {
top: 33 * @toVw;
right: 0;
right: 10 * @toVw;
left: auto;
z-index: 1231;
background: white;
width: 80 * @toVw;
position: absolute;
width: 96 * @toVw;
border: 1 * @toVw solid #666;
border-radius: 10 * @toVw;
& > div {
margin: 0;
width: 100%;
width: 96 * @toVw;
padding: 6 * @toVw 11 * @toVw;
text-align: left;
display: inline-block;
border-radius: 8 * @toVw;
text-align: center;
border: none;
box-sizing: border-box;
&:first-child {
border-bottom: 1 * @toVw solid #eee;
}
......@@ -865,9 +744,8 @@ export default {
}
display: inline-block;
// position: absolute;
// top: 37*@toVw;
top: 367 * @toVw;
left: 0;
// top: 282 * @toVw;
// left: 20 * @toVw;
width: 196 * @toVw;
// border-radius: 8*@toVw;
// border: 1*@toVw solid #666666;
......@@ -877,13 +755,14 @@ export default {
color: rgba(102, 102, 102, 1);
& > div {
margin: 10 * @toVw 0;
width: 54 * @toVw;
width: 86 * @toVw;
padding: 6 * @toVw 11 * @toVw;
text-align: left;
display: inline-block;
border-radius: 8 * @toVw;
text-align: center;
border: 1px solid rgba(200, 205, 220, 1);
box-sizing: border-box;
&:first-child {
border-bottom: 1 * @toVw solid #eee;
}
......@@ -892,154 +771,286 @@ export default {
border: 3px solid rgba(64, 169, 255, 1);
}
}
.age-block {
&.video {
display: block;
.btn-block {
position: relative;
text-align: center;
z-index: 100;
.change-block {
border-radius: 1000 * @toVw;
width: 144 * @toVw;
border: 1 * @toVw solid #40a9ff;
&:after {
content: "";
display: block;
clear: both;
}
div {
float: left;
width: 50%;
border-radius: 100 * @toVw;
font-size: 12 * @toVw;
height: 28 * @toVw;
line-height: 28 * @toVw;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: rgba(204, 204, 204, 1);
&.active {
background: #40a9ff;
color: white;
}
}
}
}
.ageclass {
.parent-finish {
position: fixed;
top: 30 * @toVw;
left: 100 * @toVw;
z-index: 100;
& > div {
display: block;
bottom: 2 * @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;
}
}
}
.video-block {
}
}
.change-block-HP {
display: none;
}
@media screen and (orientation: landscape) {
@toVw: 100/667vw;
.videoTitle {
.fr {
display: none;
&.hp-video {
display: inline-block;
margin: 0 10 * @toVw 0 0;
border: none;
height: 100%;
border-radius: 12 * @toVw;
padding: 0;
}
video {
height: 100%;
margin: auto;
width: auto;
display: block;
background: rgba(0, 0, 0, 0.4);
border-radius: 8 * @toVw;
}
}
.btn-block {
position: relative;
width: 140 * @toVw;
// display: block;
}
.video-page {
position: absolute;
top: 5 * @toVw;
bottom: 5 * @toVw;
left: 5 * @toVw;
right: 5 * @toVw;
background: rgba(255, 255, 255, 1);
overflow: auto;
border-radius: 8 * @toVw;
.content {
position: static;
height: 100%;
.age-block {
display: block;
position: static;
padding: 0;
height: 28 * @toVw;
width: 88 * @toVw;
line-height: 28 * @toVw;
border: 1 * @toVw solid #666;
border-radius: 100 * @toVw;
font-size: 12 * @toVw;
width: 100%;
display: flex;
border-radius: 8px;
padding: 0;
.header {
display: none;
}
.age-change-block {
&.video {
top: 33 * @toVw;
right: 0;
left: auto;
z-index: 1231;
background: white;
width: 80 * @toVw;
position: absolute;
& > div {
margin: 0;
width: 100%;
padding: 6 * @toVw 11 * @toVw;
text-align: left;
display: inline-block;
border-radius: 8 * @toVw;
text-align: center;
border: none;
&:first-child {
border-bottom: 1 * @toVw solid #eee;
}
}
}
display: inline-block;
// position: absolute;
// top: 37*@toVw;
top: 367 * @toVw;
left: 0;
width: 196 * @toVw;
// border-radius: 8*@toVw;
// border: 1*@toVw solid #666666;
font-size: 12px;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: rgba(102, 102, 102, 1);
& > div {
margin: 10 * @toVw 0;
width: 54 * @toVw;
padding: 6 * @toVw 11 * @toVw;
text-align: left;
display: inline-block;
border-radius: 8 * @toVw;
text-align: center;
border: 1px solid rgba(200, 205, 220, 1);
&:first-child {
border-bottom: 1 * @toVw solid #eee;
}
}
.activity {
border: 3px solid rgba(64, 169, 255, 1);
}
}
.age-block {
&.video {
display: block;
}
}
.change-block-HP {
position: absolute;
top: ~"calc(100vh - 12.5vw)";
display: block;
width: 78 * @toVw;
img {
width: 100%;
.ageclass {
position: fixed;
top: 30 * @toVw;
left: 100 * @toVw;
z-index: 100;
& > div {
display: block;
}
}
.change-block {
.video-block {
display: none;
&.hp-video {
display: inline-block;
margin: 0 10 * @toVw 0 0;
border: none;
height: 100%;
border-radius: 12 * @toVw;
padding: 0;
}
video {
height: 100%;
margin: auto;
width: auto;
display: block;
background: rgba(0, 0, 0, 0.4);
border-radius: 8 * @toVw;
}
}
.btn-block {
position: relative;
width: 140 * @toVw;
// display: block;
height: 100%;
.age-block {
display: block;
position: static;
padding: 0;
height: 28 * @toVw;
width: 88 * @toVw;
line-height: 28 * @toVw;
border: 1 * @toVw solid #666;
border-radius: 100 * @toVw;
font-size: 12 * @toVw;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: rgba(102, 102, 102, 1);
&.video {
display: block;
}
}
.change-block-HP {
position: absolute;
top: ~"calc(100vh - 12.5vw)";
display: block;
width: 78 * @toVw;
img {
width: 100%;
}
}
.change-block {
display: none;
}
}
}
}
}
}
@media screen and (min-aspect-ratio: ~"20/8") {
@toVw: 100/900vw;
.video-page {
position: absolute;
top: 5 * @toVw;
bottom: 5 * @toVw;
left: 5 * @toVw;
right: 5 * @toVw;
background: rgba(255, 255, 255, 1);
overflow: auto;
border-radius: 8 * @toVw;
.content {
position: static;
height: 100%;
width: 100%;
display: flex;
border-radius: 8px;
padding: 0;
.header {
display: none;
}
.video-block {
display: none;
&.hp-video {
display: inline-block;
margin: 0 10 * @toVw 0 0;
border: none;
height: 100%;
border-radius: 12 * @toVw;
padding: 0;
}
video {
height: 100%;
margin: auto;
width: auto;
display: block;
background: rgba(0, 0, 0, 0.4);
border-radius: 8 * @toVw;
}
}
.btn-block {
position: relative;
min-width: 90 * @toVw;
display: block;
@media screen and (min-aspect-ratio: ~"20/8") {
@toVw: 100/900vw;
.video-page {
position: absolute;
top: 5 * @toVw;
bottom: 5 * @toVw;
left: 5 * @toVw;
right: 5 * @toVw;
background: rgba(255, 255, 255, 1);
overflow: auto;
border-radius: 8 * @toVw;
.content {
position: static;
height: 100%;
.age-block {
display: block;
position: static;
padding: 0;
height: 28 * @toVw;
width: 88 * @toVw;
line-height: 28 * @toVw;
border: 1 * @toVw solid #666;
border-radius: 100 * @toVw;
font-size: 12 * @toVw;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: rgba(102, 102, 102, 1);
&.video {
width: 100%;
display: flex;
border-radius: 8px;
padding: 0;
.header {
display: none;
}
.video-block {
display: none;
&.hp-video {
display: inline-block;
margin: 0 10 * @toVw 0 0;
border: none;
height: 100%;
border-radius: 12 * @toVw;
padding: 0;
}
video {
height: 100%;
margin: auto;
width: auto;
display: block;
background: rgba(0, 0, 0, 0.4);
border-radius: 8 * @toVw;
}
}
.change-block-HP {
position: absolute;
top: ~"calc(100vh - 12.5vw)";
.btn-block {
position: relative;
min-width: 90 * @toVw;
display: block;
width: 78 * @toVw;
img {
width: 100%;
height: 100%;
.age-block {
display: block;
position: static;
padding: 0;
height: 28 * @toVw;
width: 88 * @toVw;
line-height: 28 * @toVw;
border: 1 * @toVw solid #666;
border-radius: 100 * @toVw;
font-size: 12 * @toVw;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: rgba(102, 102, 102, 1);
&.video {
display: block;
}
}
.change-block-HP {
position: absolute;
top: ~"calc(100vh - 12.5vw)";
display: block;
width: 78 * @toVw;
img {
width: 100%;
}
}
.change-block {
display: none;
}
}
.change-block {
display: none;
}
}
}
}
}
</style>
src/main.js
View file @ 15e79249
......@@ -40,9 +40,9 @@ Vue.prototype.$throw = (error)=> errorHandler(error,this);
Vue.prototype.$common = common
//VConsole关闭屏蔽代码
if (process.env.NODE_ENV != 'production') {
new VConsole();
}
// if (process.env.NODE_ENV != 'production') {
// new VConsole();
// }
router.beforeEach((to, from, next) => {
next()
......
src/router/index.js
View file @ 15e79249
......@@ -39,7 +39,7 @@ const router = new Router({
deep: 0,
}
},
{
path: '/extensionV1Shop',
name: 'extensionV1Shop',
......@@ -539,6 +539,24 @@ const router = new Router({
noNew: true,
}
},
// 评价页面
{
path: '/evaluate',
name: 'evaluate',
component: e => require(['@/components/newLesson/evaluate'], e),
meta: {
noNew: true,
}
},
// 成长记录
{
path: '/growthRecord',
name: 'growthRecord',
component: e => require(['@/components/growthRecord'], e),
meta: {
noNew: true,
}
},
{
path: '*',
component: () => import('@/components/error'),
......@@ -640,7 +658,7 @@ router.beforeEach((to, from, next) => {
localStorage.setItem('retUrl', to.fullPath);
// console.log(process.env.AUTHOR_UEL)
// console.log(window.location.href)
if (to.meta.noNew) {
query.is_new_user_url = 1;
window.location.href = `${process.env.AUTHOR_UEL}`
......
src/service/api.js
View file @ 15e79249
......@@ -370,3 +370,19 @@ export const postErrorLogApi = function (json) {
return Vue.prototype.$post(`api/client/report/errors/log`, json)
};
// 用户成长记录添加
export const postUserGrowthAddApi = function (periods_id, category_id, element_id, json) {
return Vue.prototype.$post(`api/client/user/growth/record/${ periods_id }/${ category_id }/${ element_id }`, json)
};
// 用户成长记录列表
export const getUserGrowthListApi = function (json) {
return Vue.prototype.$fetch(`${_baseUrl}api/client/user/growth/record/list`)
};
//
const getUserGrowthRecordUrl = `${_baseUrl}api/client/growth/record/`
export const getUserGrowthRecordApi = function (periods_id, category_id, element_id) {
return Vue.prototype.$fetch(`${getUserGrowthRecordUrl}${periods_id}/${category_id}/${element_id}`)
};
src/util/imgUrl.js
View file @ 15e79249
......@@ -27,6 +27,7 @@ import mine_star_inner from '../assets/star_inner.png'
import mine_address from '../assets/icon_ad@2x.png'
import mine_son from '../assets/icon_son@3x.png'
import mine_mom from '../assets/icon_mom@3x.png'
import yizi from '../assets/yezi.png'
import shop_wechat from '../assets/shop/qr3.png'
import qr4 from '../assets/shop/qr4.png'
......@@ -83,6 +84,15 @@ import spcShop6 from '../assets/spcShop/img6@2x.png'
import spcShop7 from '../assets/spcShop/img_head@2x.png'
import spcShop8 from '../assets/spcShop/btn@2x.png'
// 评价图片
import scoringCategory1 from '../assets/evaluate/scoring-category1.png'
import scoringCategory2 from '../assets/evaluate/scoring-category2.png'
import scoringCategory3 from '../assets/evaluate/scoring-category3.png'
import scoringCategory1Active from '../assets/evaluate/scoring-category1-active.png'
import scoringCategory2Active from '../assets/evaluate/scoring-category2-active.png'
import scoringCategory3Active from '../assets/evaluate/scoring-category3-active.png'
import xiajiantou from '../assets/evaluate/xiajiantou.png'
// 直购页
export const spcShopImg = {
spcShop1:spcShop1,
......@@ -171,7 +181,8 @@ export const mineImage = {
mine_star_inner:mine_star_inner,
mine_address:mine_address,
mine_son:mine_son,
mine_mom:mine_mom
mine_mom:mine_mom,
yizi: yizi
};
// 商品成功
export const shopSuccess = {
......@@ -197,4 +208,14 @@ export const previewImg = {
previewpic9:previewpic9,
previewpic10:previewpic10,
previewBtn:previewBtn
};
\ No newline at end of file
};
export const scoringCategory = {
scoringCategory1: scoringCategory1,
scoringCategory2: scoringCategory2,
scoringCategory3: scoringCategory3,
scoringCategory1Active: scoringCategory1Active,
scoringCategory2Active: scoringCategory2Active,
scoringCategory3Active: scoringCategory3Active,
xiajiantou: xiajiantou
}
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