<template>
<div>
<canvas id="myCanvas" width="750" height="1334"></canvas>
<div class="banner-block">
<img :src="logoUrl">
</div>
<div class="form-block">
<div class="input-block">
<div class="tips">Mobile Phone</div>
<input @blur="fun" @focus="focus" placeholder="请输入手机号" v-model="mobile"/>
</div>
<div class="input-block">
<div class="tips">Verification Code</div>
<input @blur="fun" @focus="focus" oninput="if(value.length>4)value=value.slice(0,4)" type="number" maxlength="4" pattern="[0-9]*" placeholder="请输入短信验证码" v-model="msgCode"/>
<button class="codeMsg right-btn" @click="sendMobileCode" v-if="time===0">发送验证码</button>
<button class="codeMsg disabled right-btn" v-if="time>0">{{time}}s后重新发送</button>
</div>
<div class="input-block">
<div class="tips">Redeem Code</div>
<input @blur="fun" @focus="focus" placeholder="请输入兑换码" v-model="exchange_code"/>
</div>
</div>
<div class="btn-block">
<div class="btn" @click="bindMobile">
兑换
</div>
</div>
</div>
</template>
<script>
import {sendMobileCodeApi,getUserDetailApi,ExChangeApi,getCourseInfoApi} from "../service/api";
import logoUrl from '../assets/logo.png'
import { Toast } from 'vant';
import common from '../util/common'
export default {
name: "bindMobile",
mounted(){
if(!localStorage.getItem('cc_token')){
let token = common.getUrlParam().token || this.$route.query.token
console.log(token)
if(token){
localStorage.setItem('cc_token',token);
this.$store.dispatch('setToken',token);
}else{
this.$router.push({name:'author',query:{retUrl:this.$route.fullPath,is_new_user_url:1}})
}
}
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var particles = [];
for(var i = 0; i < 10; i++){
particles.push({ //雪花在x y 上的位置和速度，以及雪花的大小和颜色
x: Math.random()*750,
y: Math.random()*1334,
vx: (Math.random()*5),
vy: (Math.random()*5),
size: 1+Math.random()*20,
// color: "#FFF"
color:'#'+('0000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6)
});
}
function timeUpdata(e){
/*清楚画布区域*/
context.clearRect(0,0,750,1334);
/*逐一绘制500片雪花*/
var len = particles.length;
var particle;
for(var i = 0; i < 10; i++){
particle = particles[i];
particle.x += particle.vx;
particle.y += particle.vy;
if(particle.x<=0 || particle.x>=750){
particle.vx *= -1;
}
if(particle.y<=0 || particle.y>=1334){
particle.vy *= -1;
}
context.fillStyle = particle.color; //设置雪花的颜色
context.beginPath();
context.arc(particle.x,particle.y,particle.size,0,Math.PI*2,true);
context.closePath();
context.fill();// 填充颜色
}
}
setInterval(timeUpdata, 40);//每40ms执行一次timeUpdate函数
},
data(){
return {
logoUrl:logoUrl,
mobile:'',
time:0,
flag:true,
imgCode:'',
msgCode:'',
exchange_code:'',
timeSet:null,
keyUp:false
}
},
watch:{
keyUp(){
setTimeout(()=>{
console.log(this.keyUp)
if(!this.keyUp){
document.documentElement.scrollTop = 0
document.body.scrollTop = 0
}
},100)
}
},
methods:{
focus(){
this.keyUp = true
},
fun(){
this.keyUp = false
// console.log(1)
},
refImgCode(){
this.$refs.imgCode.src='/api/public/img/verify?flag='+Math.random()
},
sendMobileCode(){
let json={
};
let mobileCheck = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/;
if(this.mobile.match(mobileCheck)){
json.mobile = this.mobile
}else{
Toast('请正确填写手机号');
return false
}
this.time=30;
this.timeO();
this.$sa.track('clickSendcode',{});
sendMobileCodeApi(json).then(res=>{
if(res === '操作成功'){
Toast('验证码已发送');
}else{
this.time = 0;
Toast(res);
}
}).catch(res=>{
})
},
timeO(){
if(this.time>0){
this.time--;
setTimeout(()=>{
this.timeO()
},1000)
}
},
bindMobile(){
this.$sa.track('clickSignUp',{});
if(this.msgCode===''||!this.msgCode) {
Toast('请填写手机验证码');
return false;
}
if(this.exchange_code === ''|| !this.exchange_code) {
Toast('请填写兑换码');
return false;
}
let json={
verify_code:this.msgCode,
exchange_code:this.exchange_code
};
let mobileCheck = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/;
if(this.mobile.match(mobileCheck)){
json.mobile = this.mobile
}else{
Toast('请正确填写手机号');
return false
}
if(this.flag){
this.flag = false;
if(window.location.href.indexOf('teacher_id') > -1){
json.teacher_id = common.getParamhref().teacher_id || this.$route.query.teacher_id
}
ExChangeApi(json).then(data=>{
Toast('兑换成功');
this.flag = true
getUserDetailApi().then(res=>{
localStorage.setItem('userDesc',JSON.stringify(res));
getCourseInfoApi().then(res => {
Toast.clear()
//是否分配老师
this.userCourse = res;
localStorage.setItem("userCourse", JSON.stringify(this.userCourse));
if (res.teacher_alias&&res.teacher_alias.substr(0, 1) == 1) {
this.$router.push({name:'guideActivity',query:{'exChange':1}})
} else {
this.$router.push({name:'index'})
}
})
})
}).catch(res=>{
setTimeout(()=>{
this.msgCode=''
},3000)
this.flag = true
})
}
}
}
}
</script>
<style scoped lang="less">
@import "../util/public";
.banner-block{
text-align: center;
margin: 40 * @toVw auto;
img{
width: 142 * @toVw;
}
}
.form-block{
padding: 20 * @toVw;
.input-block{
height: 60 * @toVw;
border-bottom: 1*@toVw solid #cccccc;
margin-bottom: 20 * @toVw;
position: relative;
.right-btn{
position: absolute;
right: 0;
top: 17*@toVw;
}
input{
padding: 10 * @toVw 0;
font-size:14*@toVw;
background: transparent;
font-family:PingFangSC-Semibold;
font-weight:600;
color:rgba(0,0,0,1);
line-height:20*@toVw;
outline: none;
border: none;
&::-webkit-input-placeholder{
font-size:14*@toVw;
font-family:PingFangSC-Semibold;
font-weight:600;
color:rgba(204,204,204,1);
line-height:20*@toVw;
} /* 使用webkit内核的浏览器 */
&:-moz-placeholder{
font-size:14*@toVw;
font-family:PingFangSC-Semibold;
font-weight:600;
color:rgba(204,204,204,1);
line-height:20*@toVw;
} /* Firefox版本4-18 */
&::-moz-placeholder{
font-size:14*@toVw;
font-family:PingFangSC-Semibold;
font-weight:600;
color:rgba(204,204,204,1);
line-height:20*@toVw;
} /* Firefox版本19+ */
&:-ms-input-placeholder{
font-size:14*@toVw;
font-family:PingFangSC-Semibold;
font-weight:600;
color:rgba(204,204,204,1);
line-height:20*@toVw;
}
}
.tips{
height:17*@toVw;
font-size:12*@toVw;
font-family:PingFangSC-Semibold;
font-weight:600;
color:rgba(200,206,211,1);
line-height:17*@toVw;
}
}
}
.btn-block{
text-align: center;
.btn{
width: 236 * @toVw;
height: 37 * @toVw;
line-height: 37 * @toVw;
background:rgba(96,173,240,1);
border-radius:4*@toVw;font-size:14*@toVw;
font-family:PingFangSC-Semibold;
font-weight:600;
color:rgba(255,255,255,1);
}
}
.codeMsg{
border-radius:4*@toVw;
border:1*@toVw solid rgba(96,173,240,1);
background: white;
color: rgb(96,173,240);
outline: none;
float: right;
padding: 8*@toVw 16*@toVw;
&.disabled{
opacity: 0.5;
}
}
#myCanvas{
position: absolute;
z-index: -1;
opacity: 0.2;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 375 * @toVw;
}
</style>