Skip to content

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

星星测试提交

parent 8aae6476
Expand all 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
This diff is collapsed.
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
This diff is collapsed.
src/components/newLesson/share.vue
View file @ 15e79249
This diff is collapsed.
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
This diff is collapsed.
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