Skip to content

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

星星测试提交

parent 8aae6476
Show whitespace changes
Inline Side-by-side
Showing with 4568 additions and 3925 deletions
package-lock.json
View file @ 15e79249
...@@ -4416,6 +4416,16 @@ ...@@ -4416,6 +4416,16 @@
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==" "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": { "get-caller-file": {
"version": "1.0.3", "version": "1.0.3",
"resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.3.tgz", "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 @@ ...@@ -23,6 +23,9 @@
<van-cell title="我的订单" ref="order" to="/order" @click="toOrder" is-link> <van-cell title="我的订单" ref="order" to="/order" @click="toOrder" is-link>
<img slot="icon" :src="image.order" /> <img slot="icon" :src="image.order" />
</van-cell> </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> <van-cell v-if="acitivityType==1" title="我的星星" ref="star" to="/starRank" @click="toStar" is-link>
<img slot="icon" :src="image.mine_icon_star" /> <img slot="icon" :src="image.mine_icon_star" />
<!-- <div class="starNum" v-if="starNum">{{starNum}}颗</div> --> <!-- <div class="starNum" v-if="starNum">{{starNum}}颗</div> -->
......
src/components/newLesson/audio.vue
View file @ 15e79249
...@@ -159,25 +159,25 @@ ...@@ -159,25 +159,25 @@
</template> </template>
<script> <script>
import { Toast } from "vant"; import { Toast } from "vant";
import { Popup } from "mint-ui"; import { Popup } from "mint-ui";
import tapToVideo from "../../assets/tapToVideo.png"; import tapToVideo from "../../assets/tapToVideo.png";
import { ImagePreview } from "vant"; import { ImagePreview } from "vant";
import { import {
getUserCollectApi, getUserCollectApi,
addUserCollectApi, addUserCollectApi,
delUserCollectApi, delUserCollectApi,
subUserLessonApi, subUserLessonApi,
getUserWatchApi getUserWatchApi
} from "../../service/api"; } from "../../service/api";
import finishStuat from "../../assets/newLesson/finishStudy.png"; import finishStuat from "../../assets/newLesson/finishStudy1.png";
import noFinishDia from "./nofinishdia"; import noFinishDia from "./nofinishdia";
import sharePage from "./share"; import sharePage from "./share";
import starBlock from "./star"; import starBlock from "./star";
import audioGood from "../../assets/good.mp3"; import audioGood from "../../assets/good.mp3";
import audioGreat from "../../assets/great.mp3"; import audioGreat from "../../assets/great.mp3";
import audioPerfect from "../../assets/perfect.mp3"; import audioPerfect from "../../assets/perfect.mp3";
export default { export default {
name: "fun", name: "fun",
props: ["contentData"], props: ["contentData"],
components: { components: {
...@@ -217,6 +217,8 @@ export default { ...@@ -217,6 +217,8 @@ export default {
}; };
}, },
mounted() { mounted() {
if(this.$route.params.evaluate === 1)
this.finishStudy()
this.changeAge(this.contentData.age); this.changeAge(this.contentData.age);
this.userCourse = JSON.parse(localStorage.getItem("userCourse")); this.userCourse = JSON.parse(localStorage.getItem("userCourse"));
if (this.userCourse.periods_list) { if (this.userCourse.periods_list) {
...@@ -398,14 +400,9 @@ export default { ...@@ -398,14 +400,9 @@ export default {
elementID: this.$route.query.elementId.toString() elementID: this.$route.query.elementId.toString()
}); });
} }
setTimeout(()=>{ this.$nextTick(()=>{
this.$refs.audio.play(); this.$refs.audio.play();
},100) })
// this.$refs.audio.play();
// this.$nextTick(()=>{
// // console.log(this.$refs.audio)
// this.$refs.audio.play();
// })
}, },
// 播放暂停 // 播放暂停
onStop(flag) { onStop(flag) {
...@@ -787,7 +784,13 @@ export default { ...@@ -787,7 +784,13 @@ export default {
} else { } else {
getUserWatchApi({ category_id: query.category_id }).then(res => { getUserWatchApi({ category_id: query.category_id }).then(res => {
this.$store.dispatch("setWatchDetail", res); this.$store.dispatch("setWatchDetail", res);
// 从评价页面返回过来
if(this.$route.params.evaluate === 1){
this.share_show = true; this.share_show = true;
this.$route.params.evaluate = 0
} else {
this.$router.push({path: '/evaluate'})
}
// debugger // debugger
}); });
setTimeout(() => { setTimeout(() => {
...@@ -849,16 +852,16 @@ export default { ...@@ -849,16 +852,16 @@ export default {
} }
} }
} }
}; };
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@import "../../util/public"; @import "../../util/public";
.playImage { .playImage {
background-size: 40 * @toVw 290 * @toVw; background-size: 40 * @toVw 290 * @toVw;
display: inline-block; display: inline-block;
} }
.imgBox { .imgBox {
position: fixed; position: fixed;
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -878,173 +881,173 @@ export default { ...@@ -878,173 +881,173 @@ export default {
bottom: 0; bottom: 0;
} }
} }
} }
._282918034425091245 { ._282918034425091245 {
height: 8 * @toVw; height: 8 * @toVw;
width: 9 * @toVw; width: 9 * @toVw;
background-position: 0 0; background-position: 0 0;
} }
._154722344142123489 { ._154722344142123489 {
height: 5 * @toVw; height: 5 * @toVw;
width: 9 * @toVw; width: 9 * @toVw;
background-position: 0 -8 * @toVw; background-position: 0 -8 * @toVw;
vertical-align: bottom; vertical-align: bottom;
} }
.next { .next {
height: 16 * @toVw; height: 16 * @toVw;
width: 16 * @toVw; width: 16 * @toVw;
background-position: 0 -13 * @toVw; background-position: 0 -13 * @toVw;
} }
.listPlay { .listPlay {
height: 16 * @toVw; height: 16 * @toVw;
width: 16 * @toVw; width: 16 * @toVw;
background-position: 0 -29 * @toVw; background-position: 0 -29 * @toVw;
} }
.replay { .replay {
height: 16 * @toVw; height: 16 * @toVw;
width: 16 * @toVw; width: 16 * @toVw;
background-position: 0 -45 * @toVw; background-position: 0 -45 * @toVw;
} }
.toBig { .toBig {
height: 16 * @toVw; height: 16 * @toVw;
width: 16 * @toVw; width: 16 * @toVw;
background-position: 0 -61 * @toVw; background-position: 0 -61 * @toVw;
} }
.replayAll { .replayAll {
height: 16 * @toVw; height: 16 * @toVw;
width: 16 * @toVw; width: 16 * @toVw;
background-position: 0 -77 * @toVw; background-position: 0 -77 * @toVw;
} }
.collectDefault { .collectDefault {
height: 16 * @toVw; height: 16 * @toVw;
width: 16 * @toVw; width: 16 * @toVw;
background-position: 0 -93 * @toVw; background-position: 0 -93 * @toVw;
} }
.collect { .collect {
height: 16 * @toVw; height: 16 * @toVw;
width: 16 * @toVw; width: 16 * @toVw;
background-position: 0 -109 * @toVw; background-position: 0 -109 * @toVw;
} }
.last { .last {
height: 16 * @toVw; height: 16 * @toVw;
width: 16 * @toVw; width: 16 * @toVw;
background-position: 0 -125 * @toVw; background-position: 0 -125 * @toVw;
} }
.list { .list {
height: 16 * @toVw; height: 16 * @toVw;
width: 16 * @toVw; width: 16 * @toVw;
background-position: 0 -141 * @toVw; background-position: 0 -141 * @toVw;
} }
.close { .close {
height: 17 * @toVw; height: 17 * @toVw;
width: 17 * @toVw; width: 17 * @toVw;
background-position: 0 -157 * @toVw; background-position: 0 -157 * @toVw;
} }
.zDefaultIcon { .zDefaultIcon {
height: 18 * @toVw; height: 18 * @toVw;
width: 18 * @toVw; width: 18 * @toVw;
background-position: 0 -174 * @toVw; background-position: 0 -174 * @toVw;
float: right; float: right;
} }
.zIcon { .zIcon {
height: 18 * @toVw; height: 18 * @toVw;
width: 18 * @toVw; width: 18 * @toVw;
background-position: 0 -192 * @toVw; background-position: 0 -192 * @toVw;
float: right; float: right;
} }
.play { .play {
height: 40 * @toVw; height: 40 * @toVw;
width: 40 * @toVw; width: 40 * @toVw;
background-position: 0 -210 * @toVw; background-position: 0 -210 * @toVw;
} }
.stop { .stop {
height: 40 * @toVw; height: 40 * @toVw;
width: 40 * @toVw; width: 40 * @toVw;
background-position: 0 -250 * @toVw; background-position: 0 -250 * @toVw;
} }
.iconfont { .iconfont {
color: #cccccc; color: #cccccc;
} }
.icon-icon_stop { .icon-icon_stop {
font-size: 50 * @toVw; font-size: 50 * @toVw;
color: #69c0ff; color: #69c0ff;
} }
.icon-icon_begin { .icon-icon_begin {
font-size: 50 * @toVw; font-size: 50 * @toVw;
color: #69c0ff; color: #69c0ff;
} }
.icon-icon_left { .icon-icon_left {
height: 37 * @toVw; height: 37 * @toVw;
width: 37 * @toVw; width: 37 * @toVw;
font-size: 32 * @toVw; font-size: 32 * @toVw;
color: #69c0ff; color: #69c0ff;
} }
.icon-icon_right { .icon-icon_right {
height: 37 * @toVw; height: 37 * @toVw;
width: 37 * @toVw; width: 37 * @toVw;
font-size: 32 * @toVw; font-size: 32 * @toVw;
color: #69c0ff; color: #69c0ff;
} }
.icon-icon_list { .icon-icon_list {
font-size: 20 * @toVw; font-size: 20 * @toVw;
} }
.icon-icon_change1 { .icon-icon_change1 {
font-size: 21 * @toVw; font-size: 21 * @toVw;
width: 20 * @toVw; width: 20 * @toVw;
} }
.icon-icon_change { .icon-icon_change {
font-size: 20 * @toVw; font-size: 20 * @toVw;
width: 20 * @toVw; width: 20 * @toVw;
} }
.icon-icon_changge { .icon-icon_changge {
font-size: 19 * @toVw; font-size: 19 * @toVw;
width: 20 * @toVw; width: 20 * @toVw;
} }
.hp-left { .hp-left {
position: relative; position: relative;
.collect { .collect {
position: absolute; position: absolute;
right: 38 * @toVw; right: 38 * @toVw;
bottom: 48 * @toVw; bottom: 48 * @toVw;
} }
} }
.icon-icon_like1 { .icon-icon_like1 {
color: #ff7d77; color: #ff7d77;
} }
.collect-block { .collect-block {
padding: 10 * @toVw; padding: 10 * @toVw;
border-radius: 4 * @toVw; border-radius: 4 * @toVw;
background: white; background: white;
} }
@-webkit-keyframes spin { @-webkit-keyframes spin {
from { from {
-webkit-transform: rotate(0deg); -webkit-transform: rotate(0deg);
} }
to { to {
-webkit-transform: rotate(360deg); -webkit-transform: rotate(360deg);
} }
} }
@keyframes spin { @keyframes spin {
from { from {
transform: rotate(0deg); transform: rotate(0deg);
} }
to { to {
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
.swin { .swin {
-webkit-animation: spin 8s linear 1s 5 alternate; -webkit-animation: spin 8s linear 1s 5 alternate;
animation: spin 8s linear infinite; animation: spin 8s linear infinite;
} }
.pause { .pause {
animation-play-state: paused; animation-play-state: paused;
-webkit-animation-play-state: paused; -webkit-animation-play-state: paused;
} }
.noanimation { .noanimation {
-webkit-animation: none !important; -webkit-animation: none !important;
animation: none !important; animation: none !important;
} }
.content { .content {
background: white; background: white;
width: 315 * @toVw; width: 315 * @toVw;
position: absolute; position: absolute;
...@@ -1157,8 +1160,8 @@ export default { ...@@ -1157,8 +1160,8 @@ export default {
display: none; display: none;
} }
} }
} }
.list-popup { .list-popup {
width: 375 * @toVw; width: 375 * @toVw;
max-height: 345 * @toVw; max-height: 345 * @toVw;
overflow: auto; overflow: auto;
...@@ -1179,10 +1182,10 @@ export default { ...@@ -1179,10 +1182,10 @@ export default {
text-align: center; text-align: center;
padding: 20 * @toVw; padding: 20 * @toVw;
} }
} }
.mint-popup { .mint-popup {
} }
.imgPop-block { .imgPop-block {
// max-height: 500 * @toVw; // max-height: 500 * @toVw;
// height: 100vh; // height: 100vh;
// width: 100vw; // width: 100vw;
...@@ -1191,8 +1194,8 @@ export default { ...@@ -1191,8 +1194,8 @@ export default {
// width: 100vw; // width: 100vw;
width: 300 * @toVw; width: 300 * @toVw;
} }
} }
.btn-block { .btn-block {
position: relative; position: relative;
// margin-top: 15*@toVw; // margin-top: 15*@toVw;
text-align: center; text-align: center;
...@@ -1252,11 +1255,11 @@ export default { ...@@ -1252,11 +1255,11 @@ export default {
} }
} }
} }
} }
.change-block-HP { .change-block-HP {
display: none; display: none;
} }
.parent-finish { .parent-finish {
// position: absolute; // position: absolute;
// bottom: 0 * @toVw; // bottom: 0 * @toVw;
width: 100%; width: 100%;
...@@ -1274,8 +1277,8 @@ export default { ...@@ -1274,8 +1277,8 @@ export default {
width: 202 * @toVw; width: 202 * @toVw;
} }
} }
} }
@media screen and (orientation: landscape) { @media screen and (orientation: landscape) {
@toVw: 100/667vw; @toVw: 100/667vw;
.finish-block { .finish-block {
display: none; display: none;
...@@ -1603,8 +1606,8 @@ export default { ...@@ -1603,8 +1606,8 @@ export default {
} }
} }
} }
} }
@media screen and (min-aspect-ratio: ~"20/8") { @media screen and (min-aspect-ratio: ~"20/8") {
@toVw: 100/900vw; @toVw: 100/900vw;
.playImage { .playImage {
background: url("https://static-cdn.changchangenglish.com/new-sing/static/images/playImage.png?v=2") background: url("https://static-cdn.changchangenglish.com/new-sing/static/images/playImage.png?v=2")
...@@ -1904,11 +1907,11 @@ export default { ...@@ -1904,11 +1907,11 @@ export default {
} }
} }
} }
} }
</style> </style>
<style> <style>
.van-image-preview__image { .van-image-preview__image {
/* max-height: 150%; */ /* max-height: 150%; */
/* bottom: none; */ /* bottom: none; */
} }
</style> </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 @@ ...@@ -17,7 +17,7 @@
</i> </i>
<i :class="{headerHP:true, defaultFun:nowShow !== 3,funHP:nowShow===3}" @click="type=3"> <i :class="{headerHP:true, defaultFun:nowShow !== 3,funHP:nowShow===3}" @click="type=3">
<img :src="HP.listen1" alt /> <img :src="HP.listen1" alt />
</i> </i>ƒ
<i class="headerHP home" @click="backList"> <i class="headerHP home" @click="backList">
<img :src="HP.back" alt /> <img :src="HP.back" alt />
</i> </i>
...@@ -37,20 +37,20 @@ ...@@ -37,20 +37,20 @@
</div> </div>
</template> </template>
<script> <script>
import { import {
subUserLessonApi, subUserLessonApi,
getUserWatchApi, getUserWatchApi,
getwechatParam, getwechatParam,
getCountTimeApi getCountTimeApi
} from "../../service/api"; } from "../../service/api";
import { Toast } from "vant"; import { Toast } from "vant";
import lookBlock from "./look"; import lookBlock from "./look";
import videoBlock from "./video"; import videoBlock from "./video";
import backUrl from "../../assets/newLesson/back.png"; import backUrl from "../../assets/newLesson/back.png";
import { HP } from "../../util/imgUrl.js"; import { HP } from "../../util/imgUrl.js";
import audioBlock from "./audio"; import audioBlock from "./audio";
import sharePage from "./share"; import sharePage from "./share";
export default { export default {
name: "index", name: "index",
data() { data() {
let query; let query;
...@@ -66,7 +66,7 @@ export default { ...@@ -66,7 +66,7 @@ export default {
periods_id: query.periods_id, periods_id: query.periods_id,
category_id: query.category_id, category_id: query.category_id,
elementId: query.elementId, elementId: query.elementId,
lesson: null, lesson: JSON.parse(localStorage.getItem("lessonDetail")),
nowShow: 0, nowShow: 0,
page_id: 1, page_id: 1,
stillTime: 0, stillTime: 0,
...@@ -98,9 +98,18 @@ export default { ...@@ -98,9 +98,18 @@ export default {
sharePage sharePage
}, },
mounted() { mounted() {
// this.changeTitle(this.type); // 直接跳转和提交跳转
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(); this.initPage();
}
}, },
/**
* 离开页面前关闭--这个记录看课时长
*/
beforeDestroy(){ beforeDestroy(){
clearInterval(this.saveTime) clearInterval(this.saveTime)
}, },
...@@ -431,7 +440,7 @@ export default { ...@@ -431,7 +440,7 @@ export default {
this.parent_category_id = this.$route.query.parent_category_id; this.parent_category_id = this.$route.query.parent_category_id;
this.course_type = this.$route.query.course_type; this.course_type = this.$route.query.course_type;
this.countTimeFn() this.countTimeFn()
this.lesson = JSON.parse(localStorage.getItem("lessonDetail")); // this.lesson = JSON.parse(localStorage.getItem("lessonDetail"));
// debugger // debugger
getUserWatchApi({category_id:this.category_id}).then(res => { getUserWatchApi({category_id:this.category_id}).then(res => {
this.watchDetail = res; this.watchDetail = res;
...@@ -523,56 +532,56 @@ export default { ...@@ -523,56 +532,56 @@ export default {
}); });
} }
} }
}; };
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@import "../../util/public"; @import "../../util/public";
.lessonHeader { .lessonHeader {
background: url("https://static-cdn.changchangenglish.com/new-sing/static/images/lessonHeader3.png?v=2") background: url("https://static-cdn.changchangenglish.com/new-sing/static/images/lessonHeader3.png?v=2")
no-repeat; no-repeat;
background-size: 102 * @toVw 334 * @toVw; background-size: 102 * @toVw 334 * @toVw;
display: inline-block; display: inline-block;
} }
.header-h { .header-h {
display: none; display: none;
} }
.home { .home {
height: 46 * @toVw; height: 46 * @toVw;
width: 46 * @toVw; width: 46 * @toVw;
background-position: 0 0; background-position: 0 0;
} }
.play { .play {
height: 48 * @toVw; height: 48 * @toVw;
width: 102 * @toVw; width: 102 * @toVw;
background-position: 0 -46 * @toVw; background-position: 0 -46 * @toVw;
} }
.look { .look {
height: 48 * @toVw; height: 48 * @toVw;
width: 102 * @toVw; width: 102 * @toVw;
background-position: 0 -94 * @toVw; background-position: 0 -94 * @toVw;
} }
.fun { .fun {
height: 48 * @toVw; height: 48 * @toVw;
width: 102 * @toVw; width: 102 * @toVw;
background-position: 0 -142 * @toVw; background-position: 0 -142 * @toVw;
} }
.defaultFun { .defaultFun {
height: 48 * @toVw; height: 48 * @toVw;
width: 102 * @toVw; width: 102 * @toVw;
background-position: 0 -190 * @toVw; background-position: 0 -190 * @toVw;
} }
.defaultLook { .defaultLook {
height: 48 * @toVw; height: 48 * @toVw;
width: 102 * @toVw; width: 102 * @toVw;
background-position: 0 -238 * @toVw; background-position: 0 -238 * @toVw;
} }
.defaultPlay { .defaultPlay {
height: 48 * @toVw; height: 48 * @toVw;
width: 102 * @toVw; width: 102 * @toVw;
background-position: 0 -286 * @toVw; background-position: 0 -286 * @toVw;
} }
.header { .header {
display: flex; display: flex;
display: -webkit-flex; display: -webkit-flex;
position: absolute; position: absolute;
...@@ -583,19 +592,19 @@ export default { ...@@ -583,19 +592,19 @@ export default {
z-index: 2; z-index: 2;
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
box-shadow: 0 * @toVw 2 * @toVw 3 * @toVw 0 * @toVw rgba(0, 0, 0, 0.1); box-shadow: 0 * @toVw 2 * @toVw 3 * @toVw 0 * @toVw rgba(0, 0, 0, 0.1);
} }
.newLesson { .newLesson {
background: #f8f8f8; background: #f8f8f8;
} }
.backImg { .backImg {
position: fixed; position: fixed;
bottom: 40 * @toVw; bottom: 40 * @toVw;
right: 20 * @toVw; right: 20 * @toVw;
z-index: 99999999; z-index: 99999999;
width: 60 * @toVw; width: 60 * @toVw;
} }
@media screen and (orientation: landscape) { @media screen and (orientation: landscape) {
@toVw: 100/667vw; @toVw: 100/667vw;
.backImg { .backImg {
position: fixed; position: fixed;
...@@ -689,8 +698,8 @@ export default { ...@@ -689,8 +698,8 @@ export default {
border-radius: 8 * @toVw; border-radius: 8 * @toVw;
} }
} }
} }
@media screen and (min-aspect-ratio: ~"20/8") { @media screen and (min-aspect-ratio: ~"20/8") {
@toVw: 100/900vw; @toVw: 100/900vw;
.backImg { .backImg {
position: fixed; position: fixed;
...@@ -786,6 +795,5 @@ export default { ...@@ -786,6 +795,5 @@ export default {
border-radius: 8 * @toVw; border-radius: 8 * @toVw;
} }
} }
} }
</style> </style>
src/components/newLesson/share.vue
View file @ 15e79249
...@@ -2,10 +2,21 @@ ...@@ -2,10 +2,21 @@
<div class='box'> <div class='box'>
<div class="share-page" id="capture"> <div class="share-page" id="capture">
<div class="share-block"> <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" /> <img :src="img_logo" class="imgLogo" />
<div class="main-content"> <div class="main-content">
<div class="topBox"> <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" /> <img class="shareTitle" :src="shareTitle" />
<div class="head-block"> <div class="head-block">
<img :src="userDetail.avatar" /> <img :src="userDetail.avatar" />
...@@ -107,35 +118,37 @@ ...@@ -107,35 +118,37 @@
</template> </template>
<script> <script>
import { Toast } from "vant"; import { Toast } from "vant";
import shareBg from "../../assets/newLesson/shareBg.png"; import shareBg from "../../assets/newLesson/shareBg.png";
import shareTitle from "../../assets/newLesson/img_title.png"; import shareTitle from "../../assets/newLesson/img_title.png";
import share_close from "../../assets/newLesson/share_close.png"; import share_close from "../../assets/newLesson/share_close.png";
import icon_baby from "../../assets/newLesson/icon_baby.png"; import icon_baby from "../../assets/newLesson/icon_baby.png";
import icon_day from "../../assets/newLesson/icon_day.png"; import icon_day from "../../assets/newLesson/icon_day.png";
import icon_min from "../../assets/newLesson/icon_min.png"; import icon_min from "../../assets/newLesson/icon_min.png";
import img_link from "../../assets/newLesson/img_link.png"; import img_link from "../../assets/newLesson/img_link.png";
import good from "../../assets/newLesson/good.png"; import good from "../../assets/newLesson/good.png";
import great from "../../assets/newLesson/great.png"; import great from "../../assets/newLesson/great.png";
import perfect from "../../assets/newLesson/perfect.png"; import perfect from "../../assets/newLesson/perfect.png";
import icon_change from "../../assets/newLesson/icon_change@2x.png"; import icon_change from "../../assets/newLesson/icon_change@2x.png";
import icon_right from "../../assets/newLesson/icon_right@2x.png"; import icon_right from "../../assets/newLesson/icon_right@2x.png";
import img_monkey from "../../assets/newLesson/img_monkey@2x.png"; import img_monkey from "../../assets/newLesson/img_monkey@2x.png";
import img_tip from "../../assets/newLesson/img_tip@2x.png"; import img_tip from "../../assets/newLesson/img_tip@2x.png";
import QRCode from "qrcodejs2"; import dierkexing from "../../assets/evaluate/dierkexing.png";
import html2canvas from "html2canvas"; import diyikexing from "../../assets/evaluate/diyikexing.png";
import { import QRCode from "qrcodejs2";
import html2canvas from "html2canvas";
import {
getwechatParam, getwechatParam,
getUserWatchApi, getUserWatchApi,
getShortApi, getShortApi,
subUserLessonApi, subUserLessonApi,
postErrorLogApi postErrorLogApi
} from "../../service/api"; } from "../../service/api";
import share_code_bg from "../../assets/newLesson/share-code-bg.png"; import share_code_bg from "../../assets/newLesson/share-code-bg.png";
import img_logo from "../../assets/newLesson/logo@2x.png"; import img_logo from "../../assets/newLesson/logo@2x.png";
import share_tips from "../../assets/Bitmap@2x.png"; import share_tips from "../../assets/Bitmap@2x.png";
export default { export default {
name: "share", name: "share",
data() { data() {
return { return {
...@@ -172,12 +185,15 @@ export default { ...@@ -172,12 +185,15 @@ export default {
timeout: "", timeout: "",
nickname: "", nickname: "",
img_logo: img_logo, img_logo: img_logo,
animationBg:false animationBg:false,
dierkexing: dierkexing, // 三颗星第一第三颗
diyikexing: diyikexing, // 第二课星
starNum: 0
}; };
}, },
props: ["contentData"], props: ["contentData"],
mounted() { mounted() {
// console.log(this.contentData) this.starNum = JSON.parse(localStorage.getItem('lessonDetail')).star_num
Toast.loading({ Toast.loading({
mask: true, mask: true,
message: "", message: "",
...@@ -195,9 +211,10 @@ export default { ...@@ -195,9 +211,10 @@ export default {
touchStart() { touchStart() {
let query = JSON.parse(sessionStorage.getItem("classQuery")); let query = JSON.parse(sessionStorage.getItem("classQuery"));
this.timeout = setTimeout(() => { this.timeout = setTimeout(() => {
// postErrorLogApi({'routes_url':new Date().toString(),'result_text':this.userDetail.user_id}).then((res)=>{ // minute
// console.log(res) postErrorLogApi({'routes_url':new Date().toString(),'result_text':this.userDetail.user_id}).then((res)=>{
// }) console.log(res)
})
this.$sa.track("watchClick", { this.$sa.track("watchClick", {
dayModule: JSON.parse( dayModule: JSON.parse(
localStorage.getItem("lessonDetail") localStorage.getItem("lessonDetail")
...@@ -703,7 +720,7 @@ export default { ...@@ -703,7 +720,7 @@ export default {
// this.$refs.audioDom.play() // this.$refs.audioDom.play()
} }
} }
}; };
</script> </script>
<style lang="less"> <style lang="less">
...@@ -773,10 +790,10 @@ export default { ...@@ -773,10 +790,10 @@ export default {
</style> </style>
<style scoped lang="less"> <style scoped lang="less">
@import "../../util/public"; @import "../../util/public";
@tocurrentvw : 1/2 * @toVw; @tocurrentvw : 1/2 * @toVw;
@tocurrentvh : 1/2 * @toVh; @tocurrentvh : 1/2 * @toVh;
.share_close { .share_close {
position: fixed; position: fixed;
width: 20 * @toVw; width: 20 * @toVw;
top: 26 * @toVw; top: 26 * @toVw;
...@@ -784,9 +801,9 @@ export default { ...@@ -784,9 +801,9 @@ export default {
z-index: 1301; z-index: 1301;
color: white; color: white;
font-size: 16 * @toVw; font-size: 16 * @toVw;
} }
.share-btn { .share-btn {
position: fixed; position: fixed;
top: 510 * @toVw; top: 510 * @toVw;
left: 31 * @toVw; left: 31 * @toVw;
...@@ -826,15 +843,15 @@ export default { ...@@ -826,15 +843,15 @@ export default {
font-weight: bold; font-weight: bold;
margin: 0; margin: 0;
} }
} }
.canvasImg { .canvasImg {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
z-index: 1300; z-index: 1300;
} }
.white-pannel { .white-pannel {
position: absolute; position: absolute;
z-index: 1301; z-index: 1301;
top: 0; top: 0;
...@@ -855,8 +872,8 @@ export default { ...@@ -855,8 +872,8 @@ export default {
background: white; background: white;
height: 33vh; height: 33vh;
} }
} }
.borderDiv { .borderDiv {
position: absolute; position: absolute;
z-index: 1301; z-index: 1301;
top: 0; top: 0;
...@@ -865,8 +882,8 @@ export default { ...@@ -865,8 +882,8 @@ export default {
height: 510 * @toVw; height: 510 * @toVw;
box-sizing: border-box; box-sizing: border-box;
border: 7 * @toVw solid white; border: 7 * @toVw solid white;
} }
.box{ .box{
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
...@@ -874,10 +891,10 @@ export default { ...@@ -874,10 +891,10 @@ export default {
min-height:100vh; min-height:100vh;
z-index:1300; z-index:1300;
overflow:hidden; overflow:hidden;
} }
.share-page { .share-page {
position: fixed; position: fixed;
background: url("https://cdn.singsingenglish.com/new-sing/6c6766b21eceef9ddf36597efe3cc152f46ac7f0.png"); background: url("https://cdn.singsingenglish.com/new-sing/6fd01609c6fc980286734364d539bf50f6ea08cd.png");
background-size: 100%; background-size: 100%;
top: 0; top: 0;
left: 0; left: 0;
...@@ -899,7 +916,7 @@ export default { ...@@ -899,7 +916,7 @@ export default {
right: 20 * @toVw; right: 20 * @toVw;
// background: white; // background: white;
bottom: 0; bottom: 0;
overflow: auto; /*overflow: auto;*/
.bg-title { .bg-title {
position: absolute; position: absolute;
top: 0; top: 0;
...@@ -929,7 +946,7 @@ export default { ...@@ -929,7 +946,7 @@ export default {
.content { .content {
width: 100%; width: 100%;
height: (480-53) * @toVw; height: (480-53) * @toVw;
padding-top: 104 * @toVw; padding-top: 110 * @toVw;
// margin-top: 20*@toVw; // margin-top: 20*@toVw;
background-size: 100% 100%; background-size: 100% 100%;
position: relative; position: relative;
...@@ -996,6 +1013,42 @@ export default { ...@@ -996,6 +1013,42 @@ export default {
.shareTitle { .shareTitle {
width: 223 * @toVw; 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%;
}
}
.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%;
}
}
} }
.main-text { .main-text {
padding-top: 48 * @toVw; padding-top: 48 * @toVw;
...@@ -1210,32 +1263,77 @@ export default { ...@@ -1210,32 +1263,77 @@ export default {
margin-top: 30 * @toVw; margin-top: 30 * @toVw;
} }
} }
} }
@media screen and (min-width: 600px) {
.box{ @keyframes mymove
{
0%{
transform: scale(1); /*开始为原始大小*/
}
50%{
transform: scale(1.5);
}
100%{
transform: scale(1);
}
}
@-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; overflow:auto;
} }
.white-pannel { .white-pannel {
.trs { .trs {
height: 30vh; height: 30vh;
} }
} }
} }
</style> </style>
<style lang="less"> <style lang="less">
@import "../../util/public"; @import "../../util/public";
.van-toast { .van-toast {
top: 35%; top: 35%;
} }
.pannel-main { .pannel-main {
img { img {
height: 18 * @toVw; height: 18 * @toVw;
vertical-align: text-bottom; vertical-align: text-bottom;
} }
} }
</style> </style>
<style lang=""> <style lang="">
/* body{ /* body{
pointer-events: none; pointer-events: none;
} */ } */
</style> </style>
src/components/newLesson/star.vue
View file @ 15e79249
...@@ -4,16 +4,21 @@ ...@@ -4,16 +4,21 @@
<mt-popup <mt-popup
v-model="popupVisible" style="background: transparent"> v-model="popupVisible" style="background: transparent">
<div class="pop-block"> <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"> <div class="list">
1.完成今日学习 1.开始课程学习
<div class="star-content"> <div class="star-content">
<img :src="starNum == 0 ? star_default : star_active"> <img :src="starNum >= 1 ? star_active : star_default">
<img :src="starNum < 2 ? star_default : star_active">
</div> </div>
</div> </div>
<div class="list"> <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"> <div class="star-content">
<img :src="starNum == 3 ? star_active : star_default"> <img :src="starNum == 3 ? star_active : star_default">
</div> </div>
...@@ -21,7 +26,7 @@ ...@@ -21,7 +26,7 @@
<div class="btn-block"> <div class="btn-block">
<div class="btn" @click="showShare"> <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 == 2">去记录</span>
<span v-if="starNum == 3">关闭</span> <span v-if="starNum == 3">关闭</span>
</div> </div>
</div> </div>
...@@ -110,7 +115,7 @@ ...@@ -110,7 +115,7 @@
width: 230*@toVw; width: 230*@toVw;
padding:50*@toVw 10*@toVw 10*@toVw 10*@toVw; padding:50*@toVw 10*@toVw 10*@toVw 10*@toVw;
position: relative; position: relative;
height: 142*@toVw; // height: 142*@toVw;
.star-all{ .star-all{
width: 154*@toVw; width: 154*@toVw;
position: absolute; position: absolute;
......
src/components/newLesson/video.vue
View file @ 15e79249
...@@ -134,22 +134,22 @@ ...@@ -134,22 +134,22 @@
</div> </div>
</template> </template>
<script> <script>
import luolacoming from "../../assets/newLesson/luoLacoming.png"; import luolacoming from "../../assets/newLesson/luoLacoming.png";
import luolalaila from "../../assets/newLesson/luolalaila.png"; import luolalaila from "../../assets/newLesson/luolalaila.png";
import { subUserLessonApi, getUserWatchApi,postErrorLogApi } from "../../service/api"; import { subUserLessonApi, getUserWatchApi,postErrorLogApi } from "../../service/api";
import tapToAudio from "../../assets/tapToAudio.png"; import tapToAudio from "../../assets/tapToAudio.png";
import finishStuat from "../../assets/newLesson/finishStudy.png"; import finishStuat from "../../assets/newLesson/finishStudy1.png";
import noFinishDia from "./nofinishdia"; import noFinishDia from "./nofinishdia";
import sharePage from "./share"; import sharePage from "./share";
import starBlock from "./star"; import starBlock from "./star";
import { Popup } from "mint-ui"; import { Popup } from "mint-ui";
import audioGood from "../../assets/good.mp3"; import audioGood from "../../assets/good.mp3";
import audioGreat from "../../assets/great.mp3"; import audioGreat from "../../assets/great.mp3";
import audioPerfect from "../../assets/perfect.mp3"; import audioPerfect from "../../assets/perfect.mp3";
import leftIcon from "../../assets/shop/left.png"; import leftIcon from "../../assets/shop/left.png";
import { Toast } from "vant"; import { Toast } from "vant";
// import videojs from "videojs"; // import videojs from "videojs";
export default { export default {
name: "play", name: "play",
components: { components: {
noFinishDia, noFinishDia,
...@@ -197,6 +197,8 @@ export default { ...@@ -197,6 +197,8 @@ export default {
this.videoWidth = Number(document.documentElement.clientWidth) / 3.8; this.videoWidth = Number(document.documentElement.clientWidth) / 3.8;
}, },
mounted() { mounted() {
if(this.$route.params.evaluate === 1)
this.finishStudy()
this.changeAge(this.contentData.age); this.changeAge(this.contentData.age);
let that = this; let that = this;
// console.log(document.documentElement.clientWidth) // console.log(document.documentElement.clientWidth)
...@@ -321,7 +323,9 @@ export default { ...@@ -321,7 +323,9 @@ export default {
this.$emit("backList"); this.$emit("backList");
}, },
closeShare() { closeShare() {
// this.$route = {}
this.share_show = false; this.share_show = false;
console.log(this.$route)
}, },
finishStudy() { finishStudy() {
if (this.$refs.videoDom) { if (this.$refs.videoDom) {
...@@ -337,6 +341,7 @@ export default { ...@@ -337,6 +341,7 @@ export default {
page_id: 5, page_id: 5,
stay_time: lookTime stay_time: lookTime
}; };
// 提交看课数据 记录看课时长
subUserLessonApi( subUserLessonApi(
query.elementId, query.elementId,
query.category_id, query.category_id,
...@@ -353,10 +358,16 @@ export default { ...@@ -353,10 +358,16 @@ export default {
) { ) {
this.popupVisible = true; this.popupVisible = true;
} else { } else {
// 用户看课统计
getUserWatchApi({ category_id: query.category_id }).then(res => { getUserWatchApi({ category_id: query.category_id }).then(res => {
this.$store.dispatch("setWatchDetail", res); this.$store.dispatch("setWatchDetail", res);
// 从评价页面返回过来
if(this.$route.params.evaluate === 1){
this.share_show = true; this.share_show = true;
// debugger this.$route.params.evaluate = 0
} else {
this.$router.push({path: '/evaluate'})
}
}); });
setTimeout(() => { setTimeout(() => {
if (this.$store.state.lookStatus == 0) { if (this.$store.state.lookStatus == 0) {
...@@ -527,42 +538,42 @@ export default { ...@@ -527,42 +538,42 @@ export default {
deep: true deep: true
} }
} }
}; };
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@import "../../util/public"; @import "../../util/public";
.close-share-show { .close-share-show {
position: fixed; position: fixed;
z-index: 99; z-index: 99;
top: 18 * @toVw; top: 18 * @toVw;
right: 12 * @toVw; right: 12 * @toVw;
width: 20 * @toVw; width: 20 * @toVw;
} }
.playImage { .playImage {
background: url("https://static-cdn.changchangenglish.com/new-sing/static/images/playImage.png") background: url("https://static-cdn.changchangenglish.com/new-sing/static/images/playImage.png")
no-repeat; no-repeat;
background-size: 40 * @toVw 189 * @toVw; background-size: 40 * @toVw 189 * @toVw;
display: inline-block; display: inline-block;
} }
._154722344142123489 { ._154722344142123489 {
height: 5 * @toVw; height: 5 * @toVw;
width: 9 * @toVw; width: 9 * @toVw;
background-position: 0 0; background-position: 0 0;
} }
._282918034425091245 { ._282918034425091245 {
height: 8 * @toVw; height: 8 * @toVw;
width: 9 * @toVw; width: 9 * @toVw;
background-position: 0 -4 * @toVw; background-position: 0 -4 * @toVw;
vertical-align: bottom; vertical-align: bottom;
} }
.orientationchangeBox { .orientationchangeBox {
p { p {
text-align: center; text-align: center;
margin-bottom: 10 * @toVw; margin-bottom: 10 * @toVw;
} }
} }
.videoTitle { .videoTitle {
position: relative; position: relative;
font-size: 14 * @toVw; font-size: 14 * @toVw;
margin-bottom: 12 * @toVw; margin-bottom: 12 * @toVw;
...@@ -600,8 +611,8 @@ export default { ...@@ -600,8 +611,8 @@ export default {
color: #40a9ff; color: #40a9ff;
} }
} }
} }
.scroll { .scroll {
width: 310 * @toVw; width: 310 * @toVw;
overflow: hidden; overflow: hidden;
// position: fixed; // position: fixed;
...@@ -630,11 +641,11 @@ export default { ...@@ -630,11 +641,11 @@ export default {
color: #666666; color: #666666;
} }
} }
} }
.disShow { .disShow {
display: block; display: block;
} }
.video-page { .video-page {
.content { .content {
background: white; background: white;
width: 315 * @toVw; width: 315 * @toVw;
...@@ -810,11 +821,11 @@ export default { ...@@ -810,11 +821,11 @@ export default {
} }
} }
} }
} }
.change-block-HP { .change-block-HP {
display: none; display: none;
} }
@media screen and (orientation: landscape) { @media screen and (orientation: landscape) {
@toVw: 100/667vw; @toVw: 100/667vw;
.videoTitle { .videoTitle {
.fr { .fr {
...@@ -962,9 +973,9 @@ export default { ...@@ -962,9 +973,9 @@ export default {
} }
} }
} }
} }
@media screen and (min-aspect-ratio: ~"20/8") { @media screen and (min-aspect-ratio: ~"20/8") {
@toVw: 100/900vw; @toVw: 100/900vw;
.video-page { .video-page {
position: absolute; position: absolute;
...@@ -1041,5 +1052,5 @@ export default { ...@@ -1041,5 +1052,5 @@ export default {
} }
} }
} }
} }
</style> </style>
src/main.js
View file @ 15e79249
...@@ -40,9 +40,9 @@ Vue.prototype.$throw = (error)=> errorHandler(error,this); ...@@ -40,9 +40,9 @@ Vue.prototype.$throw = (error)=> errorHandler(error,this);
Vue.prototype.$common = common Vue.prototype.$common = common
//VConsole关闭屏蔽代码 //VConsole关闭屏蔽代码
if (process.env.NODE_ENV != 'production') { // if (process.env.NODE_ENV != 'production') {
new VConsole(); // new VConsole();
} // }
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
next() next()
......
src/router/index.js
View file @ 15e79249
...@@ -539,6 +539,24 @@ const router = new Router({ ...@@ -539,6 +539,24 @@ const router = new Router({
noNew: true, 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: '*', path: '*',
component: () => import('@/components/error'), component: () => import('@/components/error'),
......
src/service/api.js
View file @ 15e79249
...@@ -370,3 +370,19 @@ export const postErrorLogApi = function (json) { ...@@ -370,3 +370,19 @@ export const postErrorLogApi = function (json) {
return Vue.prototype.$post(`api/client/report/errors/log`, 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' ...@@ -27,6 +27,7 @@ import mine_star_inner from '../assets/star_inner.png'
import mine_address from '../assets/icon_ad@2x.png' import mine_address from '../assets/icon_ad@2x.png'
import mine_son from '../assets/icon_son@3x.png' import mine_son from '../assets/icon_son@3x.png'
import mine_mom from '../assets/icon_mom@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 shop_wechat from '../assets/shop/qr3.png'
import qr4 from '../assets/shop/qr4.png' import qr4 from '../assets/shop/qr4.png'
...@@ -83,6 +84,15 @@ import spcShop6 from '../assets/spcShop/img6@2x.png' ...@@ -83,6 +84,15 @@ import spcShop6 from '../assets/spcShop/img6@2x.png'
import spcShop7 from '../assets/spcShop/img_head@2x.png' import spcShop7 from '../assets/spcShop/img_head@2x.png'
import spcShop8 from '../assets/spcShop/btn@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 = { export const spcShopImg = {
spcShop1:spcShop1, spcShop1:spcShop1,
...@@ -171,7 +181,8 @@ export const mineImage = { ...@@ -171,7 +181,8 @@ export const mineImage = {
mine_star_inner:mine_star_inner, mine_star_inner:mine_star_inner,
mine_address:mine_address, mine_address:mine_address,
mine_son:mine_son, mine_son:mine_son,
mine_mom:mine_mom mine_mom:mine_mom,
yizi: yizi
}; };
// 商品成功 // 商品成功
export const shopSuccess = { export const shopSuccess = {
...@@ -198,3 +209,13 @@ export const previewImg = { ...@@ -198,3 +209,13 @@ export const previewImg = {
previewpic10:previewpic10, previewpic10:previewpic10,
previewBtn:previewBtn previewBtn:previewBtn
}; };
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