Skip to content

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

打卡1.1

parent 845c12a6
Hide whitespace changes
Inline Side-by-side
Showing with 121 additions and 98 deletions
src/components/punchTheClock/index.vue
View file @ eb3b94a9
...@@ -11,18 +11,7 @@ ...@@ -11,18 +11,7 @@
<div class="punch-the-clock-name-bg"> <div class="punch-the-clock-name-bg">
<div class="punch-the-clock-name-content"> <div class="punch-the-clock-name-content">
<!-- 倒计时 hasEnded 指是否在规定时间内完成学习 --> <!-- 倒计时 hasEnded 指是否在规定时间内完成学习 -->
<div class="punch-the-clock-name-contentText" v-if="!hasEnded && forthRate != 100">很遗憾，您未在指定时间内完成任务哦</div> <div class="punch-the-clock-name-contentText" v-if="!hasEnded && forthRate !== 100">很遗憾，您未在指定时间内完成任务哦</div>
<div class="punch-the-clock-name-content-timer" v-if="hasEnded">
<span>剩余完成时间</span>
<span class="timer">{{ countDownDay }}</span>
<span>天</span>
<span class="timer">{{ countDownhour }}</span>
<span>时</span>
<span class="timer">{{ countDownminu }}</span>
<span>分</span>
<span class="timer">{{ countDownsec }}</span>
<span>秒</span>
</div>
<!-- 完成率 --> <!-- 完成率 -->
<div class="punch-the-clock-name-content-completion"> <div class="punch-the-clock-name-content-completion">
<div class="daka-fu"> <div class="daka-fu">
...@@ -58,18 +47,14 @@ ...@@ -58,18 +47,14 @@
<!-- 恭喜您已获得奖励 快联系班主任领取吧! --> <!-- 恭喜您已获得奖励 快联系班主任领取吧! -->
<div class="punch-the-clock-reward" v-if="forthRate === 100"> <div class="punch-the-clock-reward" v-if="forthRate === 100">
<div class="punch-the-clock-reward-title">恭喜您已获得奖励</div> <div class="punch-the-clock-reward-title">恭喜您已获得奖励</div>
<div class="punch-the-clock-reward-title">快联系班主任领取吧!</div> <div class="punch-the-clock-reward-content">系统将在7个工作日内将奖励发放至您的微信钱包，还请注意查收！</div>
<div class="punch-the-clock-reward-erweima">
<div class="punch-the-clock-reward-erweima-ma">
<img :src="qrErWeiMa" alt="">
</div>
</div>
</div> </div>
<!-- 今日卡 --> <!-- 今日卡 -->
<div class="today-list" v-if="todayData.length !== 0 && forthRate !== 100"> <div class="today-list today-list-padding" v-if="todayData.length !== 0 && forthRate !== 100">
<div class="punch-list-today" v-for="(item, index) in todayData"> <div class="punch-list-today" v-for="(item, index) in todayData">
<div class="punch-card-today"> <div class="punch-card-today">
<div class="day">今日</div> <div class="day">今日打卡任务</div>
<div class="day-small">请在今日完成</div>
<div class="small-title">{{ item.sub_title }}</div> <div class="small-title">{{ item.sub_title }}</div>
<div class="title">{{ item.name.split(' ')[0] + ' ' +item.name.split(' ')[1] }}</div> <div class="title">{{ item.name.split(' ')[0] + ' ' +item.name.split(' ')[1] }}</div>
</div> </div>
...@@ -108,31 +93,51 @@ ...@@ -108,31 +93,51 @@
{{ item.title }} <div class="xian" v-show="index === recordListIndex"></div> {{ item.title }} <div class="xian" v-show="index === recordListIndex"></div>
</li> </li>
</ul> </ul>
<!-- 倒计时 -->
<div class="count-down" v-if="hasEnded && recordListIndex === 2">
<!-- 倒计时 -->
<div class="punch-the-clock-name-content-timer">
<span>剩余补卡时间</span>
<span class="timer">{{ countDownDay }}</span>
<span>天</span>
<span class="timer">{{ countDownhour }}</span>
<span>时</span>
<span class="timer">{{ countDownminu }}</span>
<span>分</span>
<span class="timer">{{ countDownsec }}</span>
<span>秒</span>
</div>
</div>
<!-- 我的打卡记录展示 --> <!-- 我的打卡记录展示 -->
<div class="today-list"> <div class="today-list today-list-padding">
<div class="today-list-xian" v-for="(item, index) in punchCardData" v-if="punchCardData.length !== 0" :key="index"> <div class="today-list-xian" v-for="(item, index) in punchCardData" v-if="punchCardData.length !== 0" :key="index">
<!-- 日期 --> <!-- 日期 -->
<div class="punch-card-today"> <div class="punch-card-today">
<div class="sou" v-if="recordListIndex === 0"> <div class="sou" v-if="recordListIndex === 0">
<img :src="punchTheClock.sou" alt=""> <img :src="punchTheClock.sou" alt="">
</div> </div>
<div class="day" v-if="recordListIndex !== 0">{{ item.push_time.split('-')[1] }}月{{ item.push_time.split('-')[2] }}日</div> <div class="day" v-if="recordListIndex !== 0">{{ item.push_time.split('-')[1] }}月{{ item.push_time.split('-')[2] }}日打卡任务</div>
<div class="day-small">{{ recordListIndex === 0 ? '请耐心等待课程开始' : recordListIndex === 1 ? '请在当日完成' : recordListIndex === 2 ? '需消耗星星补卡' : '很棒哦！继续加油' }}</div>
<div class="small-title">{{ item.sub_title }}</div> <div class="small-title">{{ item.sub_title }}</div>
<div class="title">{{ item.name.split(' ')[0] + ' ' +item.name.split(' ')[1] }}</div> <div class="title">{{ item.name.split(' ')[0] + ' ' +item.name.split(' ')[1] }}</div>
</div> </div>
<!-- 去学习 --> <!-- 去学习 -->
<div class="punch-card-today" @click="punchCardClick(index, item.status, item.type)" v-if="item.type == 1"> <div class="punch-card-today punch-card-today-list">
<div class="punch-card-today-learning"> <div class="" @click="punchCardClick(index, item.status, item.type)" v-if="item.type == 1">
<img :src="item.status === 1 ? punchTheClock.kaike_xuexi : item.status === 2 ? punchTheClock.daiwanc : item.status === 3 ? punchTheClock.buka_xuexi : punchTheClock.dakawancheng" alt=""> <div class="punch-card-today-learning">
<img :src="item.status === 1 ? punchTheClock.kaike_xuexi : item.status === 2 ? punchTheClock.daiwanc : item.status === 3 ? punchTheClock.buka_xuexi : punchTheClock.dakawancheng" alt="">
</div>
<div class="punch-card-today-xuexila">学习卡</div>
</div> </div>
<div class="punch-card-today-xuexila">学习卡</div>
</div> </div>
<!-- 成长卡 --> <!-- 成长卡 -->
<div class="punch-card-today" @click="punchCardClick(index, item.status1, item.type1)" v-if="item.type1 == 2"> <div class="punch-card-today punch-card-today-list">
<div class="punch-card-today-learning"> <div class="" @click="punchCardClick(index, item.status1, item.type1)" v-if="item.type1 == 2">
<img :src="item.status1 === 1 ? punchTheClock.kaike_chengz : item.status1 === 2 ? punchTheClock.daiwanChangz : item.status1 === 3 ? punchTheClock.buka_changz : punchTheClock.wanchengChengz" alt=""> <div class="punch-card-today-learning">
<img :src="item.status1 === 1 ? punchTheClock.kaike_chengz : item.status1 === 2 ? punchTheClock.daiwanChangz : item.status1 === 3 ? punchTheClock.buka_changz : punchTheClock.wanchengChengz" alt="">
</div>
<div class="punch-card-today-xuexila">成长卡</div>
</div> </div>
<div class="punch-card-today-xuexila">成长卡</div>
</div> </div>
</div> </div>
<!-- 数据为空 --> <!-- 数据为空 -->
...@@ -183,7 +188,7 @@ ...@@ -183,7 +188,7 @@
</div> </div>
</div> </div>
<!-- 按钮点击 --> <!-- 按钮点击 -->
<div :class="['get-stars-btn', {'get-stars-btn-clo' : status === 3 && lastValue <= 10}]" v-if="status !== 4" @click.stop="modelDataClick(modelData, typeStatus)"> <div :class="['get-stars-btn', {'get-stars-btn-clo' : status === 3 && lastValue <= 10}]" v-if="status !== 4 && statusShow" @click.stop="modelDataClick(modelData, typeStatus)">
{{ status === 2 ? ( goWhere == 1 ? '去学习' : '去提交' ) : status === 3 ? '去补卡' : '' }} {{ status === 2 ? ( goWhere == 1 ? '去学习' : '去提交' ) : status === 3 ? '去补卡' : '' }}
</div> </div>
</div> </div>
...@@ -248,6 +253,7 @@ ...@@ -248,6 +253,7 @@
firstRate: 0, // 待开课率 firstRate: 0, // 待开课率
ruleShow: 0, // 规则展示 ruleShow: 0, // 规则展示
status: 0, // 状态 status: 0, // 状态
statusShow: false, // 状态呈现
secondRate: 0, // 待完成率 secondRate: 0, // 待完成率
tishi: false, // 提示信息展示 tishi: false, // 提示信息展示
thirdRate: 0, // 待补卡率 thirdRate: 0, // 待补卡率
...@@ -260,8 +266,8 @@ ...@@ -260,8 +266,8 @@
recordListIndex: 1, // 我的打卡记录切换 recordListIndex: 1, // 我的打卡记录切换
returnCashData: {}, // 总数据 returnCashData: {}, // 总数据
todayData: [], // 当天卡 todayData: [], // 当天卡
currentTime: '', currentTime: '', // 当前时间
dangqianTimer: '', dangqianTimer: '', // 后台返回时间
recordList: [{ title: '待开课' }, { title: '待完成' }, { title: '待补卡' }, { title: '打卡完成' }] recordList: [{ title: '待开课' }, { title: '待完成' }, { title: '待补卡' }, { title: '打卡完成' }]
} }
}, },
...@@ -328,6 +334,7 @@ ...@@ -328,6 +334,7 @@
this.status = status; this.status = status;
this.typeStatus = type; this.typeStatus = type;
this.ruleShow = 0; this.ruleShow = 0;
this.statusShow = false;
if(status !== 1) { if(status !== 1) {
if(this.hasEnded && this.forthRate !== 100) { if(this.hasEnded && this.forthRate !== 100) {
// 今日和其他课程切换 // 今日和其他课程切换
...@@ -344,8 +351,9 @@ ...@@ -344,8 +351,9 @@
// 判断去学习还是去提交 // 判断去学习还是去提交
getCardGoApi(this.modelData.ele_id, this.modelData.id, this.modelData.periods_id, getCardGoData).then(res => { getCardGoApi(this.modelData.ele_id, this.modelData.id, this.modelData.periods_id, getCardGoData).then(res => {
this.goWhere = res.go_where; this.goWhere = res.go_where;
this.statusShow = true;
let currentTime = this.timerAddLing(new Date().getFullYear()) + '-' + this.timerAddLing(new Date().getMonth() + 1) + '-' + this.timerAddLing(new Date().getDate()) let currentTime = this.timerAddLing(new Date().getFullYear()) + '-' + this.timerAddLing(new Date().getMonth() + 1) + '-' + this.timerAddLing(new Date().getDate())
let da = new Date(currentTime).getTime() let da = new Date(currentTime).getTime();
let dangqianTimer = new Date(this.modelData.push_time).getTime(); let dangqianTimer = new Date(this.modelData.push_time).getTime();
if(da == dangqianTimer) { if(da == dangqianTimer) {
this.modelData.state = res.go_where === 1 ? '待学习' : '未提交' this.modelData.state = res.go_where === 1 ? '待学习' : '未提交'
...@@ -355,7 +363,8 @@ ...@@ -355,7 +363,8 @@
document.querySelectorAll('.uiyiyi')[0].innerText = this.modelData.state document.querySelectorAll('.uiyiyi')[0].innerText = this.modelData.state
}) })
}else { }else {
this.modelData.state = status === 3 ? '待补卡' : '打卡完成' this.modelData.state = status === 3 ? '待补卡' : '打卡完成';
this.statusShow = true;
document.querySelectorAll('.uiyiyi')[0].innerText = this.modelData.state document.querySelectorAll('.uiyiyi')[0].innerText = this.modelData.state
} }
if(document.querySelectorAll('.get-stars-btn')[0]) if(document.querySelectorAll('.get-stars-btn')[0])
...@@ -376,14 +385,9 @@ ...@@ -376,14 +385,9 @@
* @param dataObj * @param dataObj
*/ */
modelDataClick(dataObj, type) { modelDataClick(dataObj, type) {
console.log(this.status)
let getCardGoData = { start_at: this.$route.query.start_at, over_at: this.$route.query.over_at, push_time: dataObj.push_time, type: type }; let getCardGoData = { start_at: this.$route.query.start_at, over_at: this.$route.query.over_at, push_time: dataObj.push_time, type: type };
if(this.status === 2) { if(this.status === 2) {
// 点击去学习和去提交 // 点击去学习和去提交
/*if(this.goWhere === 1) {
// 进入课程
this.getLessonDetailFn(dataObj)
}else*/
if(this.goWhere !== 1){ if(this.goWhere !== 1){
// 用户看课统计 // 用户看课统计
getUserWatchApi({ category_id: dataObj.id }).then(res => { getUserWatchApi({ category_id: dataObj.id }).then(res => {
...@@ -399,7 +403,7 @@ ...@@ -399,7 +403,7 @@
this.tishi = true this.tishi = true
setTimeout(() => { this.tishi = false, this.punchClockModel = false }, 1500) setTimeout(() => { this.tishi = false, this.punchClockModel = false }, 1500)
document.querySelectorAll('.get-stars-btn')[0].style.display = 'none'; document.querySelectorAll('.get-stars-btn')[0].style.display = 'none';
this.lastValue = this.lastValue - 10 this.lastValue = this.lastValue - 10;
this.modelData.tishi = `补卡：消耗10星星补卡1次，当前共有${ this.lastValue }颗星星` this.modelData.tishi = `补卡：消耗10星星补卡1次，当前共有${ this.lastValue }颗星星`
this.returnCash(2) this.returnCash(2)
}) })
...@@ -521,7 +525,7 @@ ...@@ -521,7 +525,7 @@
.rule { .rule {
width: 54 * @toVw; width: 54 * @toVw;
height: 30 * @toVw; height: 30 * @toVw;
line-height: 30 * @toVw; line-height: 7.666667vw;
background: rgba(0, 0, 0, .5); background: rgba(0, 0, 0, .5);
border-radius: 50px 0 0 50px; border-radius: 50px 0 0 50px;
position: fixed; position: fixed;
...@@ -548,26 +552,7 @@ ...@@ -548,26 +552,7 @@
color: #FFFFFF; color: #FFFFFF;
text-align: center; text-align: center;
} }
/* 倒计时 */
.punch-the-clock-name-content-timer {
padding: 8 * @toVw 0 0;
box-sizing: border-box;
font-size: 12 * @toVw;
color: #75290D;
span {
vertical-align: middle;
}
.timer {
width: 20 * @toVw;
height: 20 * @toVw;
line-height: 20 * @toVw;
margin: 0 3 * @toVw;
display: inline-block;
background: #FFEEED;
border-radius: 4 * @toVw;
text-align: center;
}
}
/* 完成率 */ /* 完成率 */
.punch-the-clock-name-content-completion { .punch-the-clock-name-content-completion {
width: 288 * @toVw; width: 288 * @toVw;
...@@ -702,10 +687,11 @@ ...@@ -702,10 +687,11 @@
/* 恭喜您已获得奖励 快联系班主任领取吧! */ /* 恭喜您已获得奖励 快联系班主任领取吧! */
.punch-the-clock-reward { .punch-the-clock-reward {
width: 335 * @toVw; width: 335 * @toVw;
height: 275 * @toVw; height: 167 * @toVw;
margin-top: 10 * @toVw; margin-top: -18 * @toVw;
padding-top: 15 * @toVw; padding: 70 * @toVw 24 * @toVw 0;
background: #FFFFFF; background: url("../../assets/punchTheClock/gaozhi.png") no-repeat;
background-size: 100% 100%;
border-radius: 10 * @toVw; border-radius: 10 * @toVw;
box-sizing: border-box; box-sizing: border-box;
text-align: center; text-align: center;
...@@ -714,28 +700,12 @@ ...@@ -714,28 +700,12 @@
font-weight: 500; font-weight: 500;
color: #BB3E00; color: #BB3E00;
} }
.punch-the-clock-reward-erweima { .punch-the-clock-reward-content {
width: 170 * @toVw; line-height: 21 * @toVw;
height: 170 * @toVw; font-size: 14 * @toVw;punch-card-today
margin-top: 5 * @toVw; font-weight: 500;
background: #FFE1AE; text-align: left;
border-right: 7 * @toVw; color: #505050;
position: relative;
.punch-the-clock-reward-erweima-ma {
width: 150 * @toVw;
height: 150 * @toVw;
background: #BDBDBD;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
img {
width: 100%;
height: 100%;
}
}
} }
} }
/* 今日卡 */ /* 今日卡 */
...@@ -755,8 +725,7 @@ ...@@ -755,8 +725,7 @@
.today-list { .today-list {
width: 335 * @toVw; width: 335 * @toVw;
margin-top: 10 * @toVw; padding: 0 15 * @toVw 14 * @toVw;
padding: 19 * @toVw 20 * @toVw 14 * @toVw;
background: #FFFFFF; background: #FFFFFF;
border-radius: 10 * @toVw; border-radius: 10 * @toVw;
box-sizing: border-box; box-sizing: border-box;
...@@ -790,31 +759,40 @@ ...@@ -790,31 +759,40 @@
} }
} }
.day { .day {
font-size: 15 * @toVw; width: 116 * @toVw;
font-size: 14 * @toVw;
font-weight: 500; font-weight: 500;
color: #6B5617; color: #6B5617;
} }
.day-small {
padding-top: 3 * @toVw;
font-size: 10 * @toVw;
color: #AF5D21;
}
.small-title { .small-title {
width: 97 * @toVw; width: 97 * @toVw;
margin: 0;
padding-top: 3 * @toVw;
overflow: hidden; overflow: hidden;
text-overflow:ellipsis; text-overflow:ellipsis;
white-space: nowrap; white-space: nowrap;
font-size: 12 * @toVw; font-size: 12 * @toVw;
padding-top: 13 * @toVw; text-align: left;
color: #A6A59F; color: #A6A59F;
} }
.title { .title {
width: 97 * @toVw; width: 97 * @toVw;
margin: 0;
padding-top: 3 * @toVw;
overflow: hidden; overflow: hidden;
text-overflow:ellipsis; text-overflow:ellipsis;
white-space: nowrap; white-space: nowrap;
font-size: 12 * @toVw; font-size: 12 * @toVw;
padding-top: 9 * @toVw;
color: #A6A59F; color: #A6A59F;
} }
.punch-card-today-learning { .punch-card-today-learning {
width: 87 * @toVw; width: 23.2vw;
height: 57 * @toVw; height: 15.2vw;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -828,13 +806,18 @@ ...@@ -828,13 +806,18 @@
text-align: center; text-align: center;
} }
&:first-child { &:first-child {
padding-right: 14 * @toVw; padding-right: 2.733333vw;
} }
&:last-child { &:last-child {
padding-left: 8 * @toVw; padding-left: 1.133333vw;
} }
} }
.punch-card-today-list {
width: 87 * @toVw;
padding-top: 1 * @toVw;
}
.today-list-null { .today-list-null {
padding: 80 * @toVw 0 110 * @toVw; padding: 80 * @toVw 0 110 * @toVw;
.null-tu { .null-tu {
...@@ -853,6 +836,12 @@ ...@@ -853,6 +836,12 @@
} }
} }
} }
.today-list-padding {
margin-top: 10 * @toVw;
padding: 19 * @toVw 15 * @toVw 14 * @toVw;
}
/* 已完成人数 */ /* 已完成人数 */
.punch-the-clock-completed-persons { .punch-the-clock-completed-persons {
width: 100%; width: 100%;
...@@ -936,6 +925,38 @@ ...@@ -936,6 +925,38 @@
} }
} }
} }
/* 倒计时 */
.count-down {
width: 305 * @toVw;
height: 34 * @toVw;
margin-top:15 * @toVw;
background: #F76D39;
border-radius: 8 * @toVw;
display: table;
.punch-the-clock-name-content-timer {
display: table-cell;
vertical-align: middle;
box-sizing: border-box;
font-size: 12 * @toVw;
color: #FFFFFF;
span {
vertical-align: middle;
}
.timer {
width: 20 * @toVw;
height: 20 * @toVw;
line-height: 20 * @toVw;
margin: 0 3 * @toVw;
display: inline-block;
background: #FFEEED;
border-radius: 4 * @toVw;
text-align: center;
color: #75290D;
}
}
}
} }
/* 弹框 */ /* 弹框 */
.punch-the-clock-model { .punch-the-clock-model {
...@@ -989,6 +1010,7 @@ ...@@ -989,6 +1010,7 @@
font-size: 14 * @toVw; font-size: 14 * @toVw;
color: #333333; color: #333333;
.small-title { .small-title {
margin: 0;
color: #ff7d7a; color: #ff7d7a;
font-weight: 500; font-weight: 500;
} }
...@@ -1052,13 +1074,14 @@ ...@@ -1052,13 +1074,14 @@
.rule-content { .rule-content {
margin-top: 16 * @toVw; margin-top: 16 * @toVw;
height: 295 * @toVw; height: 295 * @toVw;
line-height: 7.666667vw; line-height: 25 * @toVw;
overflow: auto; overflow: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
.rule-content-list { .rule-content-list {
width: 100%; width: 100%;
font-size: 13 * @toVw; font-size: 13 * @toVw;
.title { .title {
margin: 0;
font-weight: 500; font-weight: 500;
color: #333333; color: #333333;
} }
......
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