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 @@
<div class="punch-the-clock-name-bg">
<div class="punch-the-clock-name-content">
<!-- 倒计时 hasEnded 指是否在规定时间内完成学习 -->
<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-contentText" v-if="!hasEnded && forthRate !== 100">很遗憾，您未在指定时间内完成任务哦</div>
<!-- 完成率 -->
<div class="punch-the-clock-name-content-completion">
<div class="daka-fu">
......@@ -58,18 +47,14 @@
<!-- 恭喜您已获得奖励 快联系班主任领取吧! -->
<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-erweima">
<div class="punch-the-clock-reward-erweima-ma">
<img :src="qrErWeiMa" alt="">
</div>
</div>
<div class="punch-the-clock-reward-content">系统将在7个工作日内将奖励发放至您的微信钱包，还请注意查收！</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-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="title">{{ item.name.split(' ')[0] + ' ' +item.name.split(' ')[1] }}</div>
</div>
......@@ -108,31 +93,51 @@
{{ item.title }} <div class="xian" v-show="index === recordListIndex"></div>
</li>
</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="punch-card-today">
<div class="sou" v-if="recordListIndex === 0">
<img :src="punchTheClock.sou" alt="">
</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="title">{{ item.name.split(' ')[0] + ' ' +item.name.split(' ')[1] }}</div>
</div>
<!-- 去学习 -->
<div class="punch-card-today" @click="punchCardClick(index, item.status, item.type)" v-if="item.type == 1">
<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 class="punch-card-today punch-card-today-list">
<div class="" @click="punchCardClick(index, item.status, item.type)" v-if="item.type == 1">
<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 class="punch-card-today-xuexila">学习卡</div>
</div>
<!-- 成长卡 -->
<div class="punch-card-today" @click="punchCardClick(index, item.status1, item.type1)" v-if="item.type1 == 2">
<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 class="punch-card-today punch-card-today-list">
<div class="" @click="punchCardClick(index, item.status1, item.type1)" v-if="item.type1 == 2">
<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 class="punch-card-today-xuexila">成长卡</div>
</div>
</div>
<!-- 数据为空 -->
......@@ -183,7 +188,7 @@
</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 ? '去补卡' : '' }}
</div>
</div>
......@@ -248,6 +253,7 @@
firstRate: 0, // 待开课率
ruleShow: 0, // 规则展示
status: 0, // 状态
statusShow: false, // 状态呈现
secondRate: 0, // 待完成率
tishi: false, // 提示信息展示
thirdRate: 0, // 待补卡率
......@@ -260,8 +266,8 @@
recordListIndex: 1, // 我的打卡记录切换
returnCashData: {}, // 总数据
todayData: [], // 当天卡
currentTime: '',
dangqianTimer: '',
currentTime: '', // 当前时间
dangqianTimer: '', // 后台返回时间
recordList: [{ title: '待开课' }, { title: '待完成' }, { title: '待补卡' }, { title: '打卡完成' }]
}
},
......@@ -328,6 +334,7 @@
this.status = status;
this.typeStatus = type;
this.ruleShow = 0;
this.statusShow = false;
if(status !== 1) {
if(this.hasEnded && this.forthRate !== 100) {
// 今日和其他课程切换
......@@ -344,8 +351,9 @@
// 判断去学习还是去提交
getCardGoApi(this.modelData.ele_id, this.modelData.id, this.modelData.periods_id, getCardGoData).then(res => {
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 da = new Date(currentTime).getTime()
let da = new Date(currentTime).getTime();
let dangqianTimer = new Date(this.modelData.push_time).getTime();
if(da == dangqianTimer) {
this.modelData.state = res.go_where === 1 ? '待学习' : '未提交'
......@@ -355,7 +363,8 @@
document.querySelectorAll('.uiyiyi')[0].innerText = this.modelData.state
})
}else {
this.modelData.state = status === 3 ? '待补卡' : '打卡完成'
this.modelData.state = status === 3 ? '待补卡' : '打卡完成';
this.statusShow = true;
document.querySelectorAll('.uiyiyi')[0].innerText = this.modelData.state
}
if(document.querySelectorAll('.get-stars-btn')[0])
......@@ -376,14 +385,9 @@
* @param dataObj
*/
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 };
if(this.status === 2) {
// 点击去学习和去提交
/*if(this.goWhere === 1) {
// 进入课程
this.getLessonDetailFn(dataObj)
}else*/
if(this.goWhere !== 1){
// 用户看课统计
getUserWatchApi({ category_id: dataObj.id }).then(res => {
......@@ -399,7 +403,7 @@
this.tishi = true
setTimeout(() => { this.tishi = false, this.punchClockModel = false }, 1500)
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.returnCash(2)
})
......@@ -521,7 +525,7 @@
.rule {
width: 54 * @toVw;
height: 30 * @toVw;
line-height: 30 * @toVw;
line-height: 7.666667vw;
background: rgba(0, 0, 0, .5);
border-radius: 50px 0 0 50px;
position: fixed;
......@@ -548,26 +552,7 @@
color: #FFFFFF;
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 {
width: 288 * @toVw;
......@@ -702,10 +687,11 @@
/* 恭喜您已获得奖励 快联系班主任领取吧! */
.punch-the-clock-reward {
width: 335 * @toVw;
height: 275 * @toVw;
margin-top: 10 * @toVw;
padding-top: 15 * @toVw;
background: #FFFFFF;
height: 167 * @toVw;
margin-top: -18 * @toVw;
padding: 70 * @toVw 24 * @toVw 0;
background: url("../../assets/punchTheClock/gaozhi.png") no-repeat;
background-size: 100% 100%;
border-radius: 10 * @toVw;
box-sizing: border-box;
text-align: center;
......@@ -714,28 +700,12 @@
font-weight: 500;
color: #BB3E00;
}
.punch-the-clock-reward-erweima {
width: 170 * @toVw;
height: 170 * @toVw;
margin-top: 5 * @toVw;
background: #FFE1AE;
border-right: 7 * @toVw;
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%;
}
}
.punch-the-clock-reward-content {
line-height: 21 * @toVw;
font-size: 14 * @toVw;punch-card-today
font-weight: 500;
text-align: left;
color: #505050;
}
}
/* 今日卡 */
......@@ -755,8 +725,7 @@
.today-list {
width: 335 * @toVw;
margin-top: 10 * @toVw;
padding: 19 * @toVw 20 * @toVw 14 * @toVw;
padding: 0 15 * @toVw 14 * @toVw;
background: #FFFFFF;
border-radius: 10 * @toVw;
box-sizing: border-box;
......@@ -790,31 +759,40 @@
}
}
.day {
font-size: 15 * @toVw;
width: 116 * @toVw;
font-size: 14 * @toVw;
font-weight: 500;
color: #6B5617;
}
.day-small {
padding-top: 3 * @toVw;
font-size: 10 * @toVw;
color: #AF5D21;
}
.small-title {
width: 97 * @toVw;
margin: 0;
padding-top: 3 * @toVw;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
font-size: 12 * @toVw;
padding-top: 13 * @toVw;
text-align: left;
color: #A6A59F;
}
.title {
width: 97 * @toVw;
margin: 0;
padding-top: 3 * @toVw;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
font-size: 12 * @toVw;
padding-top: 9 * @toVw;
color: #A6A59F;
}
.punch-card-today-learning {
width: 87 * @toVw;
height: 57 * @toVw;
width: 23.2vw;
height: 15.2vw;
img {
width: 100%;
height: 100%;
......@@ -828,13 +806,18 @@
text-align: center;
}
&:first-child {
padding-right: 14 * @toVw;
padding-right: 2.733333vw;
}
&:last-child {
padding-left: 8 * @toVw;
padding-left: 1.133333vw;
}
}
.punch-card-today-list {
width: 87 * @toVw;
padding-top: 1 * @toVw;
}
.today-list-null {
padding: 80 * @toVw 0 110 * @toVw;
.null-tu {
......@@ -853,6 +836,12 @@
}
}
}
.today-list-padding {
margin-top: 10 * @toVw;
padding: 19 * @toVw 15 * @toVw 14 * @toVw;
}
/* 已完成人数 */
.punch-the-clock-completed-persons {
width: 100%;
......@@ -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 {
......@@ -989,6 +1010,7 @@
font-size: 14 * @toVw;
color: #333333;
.small-title {
margin: 0;
color: #ff7d7a;
font-weight: 500;
}
......@@ -1052,13 +1074,14 @@
.rule-content {
margin-top: 16 * @toVw;
height: 295 * @toVw;
line-height: 7.666667vw;
line-height: 25 * @toVw;
overflow: auto;
-webkit-overflow-scrolling: touch;
.rule-content-list {
width: 100%;
font-size: 13 * @toVw;
.title {
margin: 0;
font-weight: 500;
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