<template> <div> <div class="paddingBox"> <div class="title">请选择全勤打卡活动开始日期</div> <div class="tip">全勤打卡活动:全勤打卡返66云币奖学金</div> <div class="list_box"> <div v-for="(item,index) in can_select" :class="istrue==index?'item sec':'item'" ref="item" @click="secItem(item,index)" > <div class="text"> <div class="title1"> {{item.active_start_at_name}} 开始全勤打卡活动 </div> <div class="title2"> 课程观看时间:{{item.course_start_at_name}}-永久 </div> </div> <div class="imgbox"> <img :src="item.icon" alt=""> </div> </div> <div class="item full" v-for="(item,index) in can_not_select"> <div class="text"> <div class="title1"> {{item.active_start_at_name}} 开始全勤打卡活动 </div> <div class="title2"> 课程观看时间:{{item.course_start_at_name}}-永久 </div> </div> <div class="imgbox"> <img :src="fullUrl" alt=""> </div> </div> </div> </div> <div class="fix"> <div class="btn" ref="btn" @click="postYujiList()" >确定</div> <div class="tip" ref="tip" @click="showTipF"> <i class="iconfont icon-dagou"></i> 全勤打卡活动须知 </div> </div> <mt-popup v-model="showShare" :closeOnClickModal="closeOnClickModal" class="refer-share" position="top"> <div class="box"> <h3>提示</h3> {{msg}} <div class="goIndex" @click="goIndex"> 查看课程 </div> </div> </mt-popup> <mt-popup v-model="showTip" class="refer-share" position="top"> <div class="tipWord"> <div class="colse-btn"><img :src="closeUrl" @click="showTip=false"></div> <div> <h2>全勤打卡活动须知</h2> <p>钻石会员参与66云币奖学金活动规则</p> <p>在4月23日下单的钻石会员可参与奖学金活动。</p> <p>参与奖学金活动需完成两个任务:</p> <p>任务一:20天内集齐60课程星星</p> <p>自您选择的打卡开始日期起20天内,完成每节课3个模块的学习,点亮本节课3颗星星,20天内完成20节课学习,集齐60颗星星则视为任务一完成。</p> <p>任务二:云集发现社区打卡</p> <p>自您选择的打卡开始日期起20天内,在云集发现社区#我家英语小牛娃#话题下分享宝贝学习视频(1个即可),关联商品<复旦妈妈推荐的哈佛英语启蒙课>,则视为任务二完成。</p> <p>活动审核:</p> <p>完成以上两个任务后3日内,请将参与打卡的店铺id和订单号发送给客服,申请审核,自申请日起7个工作日内工作人员会完成审核和奖励发放。</p> </div> </div> </mt-popup> </div> </template> <script> import {getYujiListUrlApi,postYujiListApi,getCourseStatusApi} from "../../service/api"; import closeUrl from '../../assets/newLesson/audio-close.png' import fullUrl from '../../assets/full.png' import { Toast } from 'vant'; import common from '../../util/common' export default { name: "inspectorList", mounted(){ this.$sa.track('ViewSelectdatepage',{ }); getCourseStatusApi().then(res => { if(res.status==1||res.status==2){ this.$router.replace({ name: "index" }); // debugger }else if(res.status==3){ this.msg = res.msg Toast(this.msg) }else if(res.status==4){ this.$router.replace({ name: "inspectorActivit" }); } console.log(res) }) this.getYuji() }, data(){ return { istrue:0, can_select:[], can_not_select:[], secItems:{}, showShare:false, showTip:true, closeOnClickModal:false, msg:"", closeUrl:closeUrl, fullUrl:fullUrl } }, methods:{ showTipF(){ this.$sa.quick('trackHeatMap',this.$refs.tip) this.showTip=true }, goIndex(){ this.$router.push({ name: "index" }); }, getYuji(){ getYujiListUrlApi().then(res=>{ this.can_select = res.can_select if(res.can_select){ this.secItems = this.can_select[0] } this.can_not_select = res.can_not_select console.log(res) }) }, secItem(item,index){ this.istrue = index this.secItems = item this.$sa.quick('trackHeatMap',this.$refs.item) }, postYujiList(){ this.$sa.quick('trackHeatMap',this.$refs.btn) postYujiListApi(this.secItems.periods_id).then(res=>{ this.$masseges // Toast("提交成功") this.$router.push({ name: "index" }); console.log(res) }) } } } </script> <style scoped lang="less"> @import "../../util/public"; .paddingBox{ padding: 24*@toVw 20*@toVw 110*@toVw; .title{font-size: 24*@toVw;font-weight: 600;line-height: 33*@toVw;} .tip{font-size: 12*@toVw;line-height: 17*@toVw;color:rgba(153,153,153,1);margin: 8px 10px 14px 0;} .item{display: flex;border:1px dashed black;padding: 20*@toVw 18*@toVw;margin-bottom:5px; .text{ margin-left: 0; .title2{color: #666666;line-height: 25*@toVw;} } .imgbox{ margin-right: 10*@toVw; img{width:44*@toVw ; height: 55*@toVw;} } } .sec{border:2px solid #FF7875;} .full{ .text{ .title1{color: #999999;line-height: 25*@toVw;} .title2{color: #999999;line-height: 25*@toVw;} } .imgbox{ margin-right: 10*@toVw; img{width:50*@toVw ; height: 50*@toVw;} } } } .fix{ position: fixed;text-align: center;width: 100%;bottom: 0;padding:10px 0;background: white; .btn{width: 273*@toVw;height: 47*@toVw;background:#FF7875;color: white;line-height:47*@toVw; border-radius: 4px; } .tip{ color:rgba(153,153,153,1);font-size: 12px;line-height: 30px; .iconfont{font-size: 12px;} } } .refer-share{ .box{ position: fixed;top: 50%;height: 200px;width: 200px;background: white;left: 50%;padding: 20px;transform: translate(-120px,120px);border-radius: 20px; h3{text-align: center;margin-bottom: 30px;} .goIndex{width: 180px;height: 30px;border-radius: 15px;border:1px solid #999999;line-height: 30px;text-align: center;margin-top: 30px; } } .tipWord{ height: 80vh; overflow-y:scroll; .colse-btn{ background: white; position: fixed; top: 50*@toVw; right: -119*@toVw; img{width: 20px;} } background: white;top: 6vh;position: absolute;width: 80vw;left: -40vw;padding: 20px;box-sizing: border-box;line-height: 26px; p{margin-bottom: 6px;color: #666666;font-size: 12px;} h2{font-size: 18px;margin-bottom: 6px;text-align: center;} } } </style>