<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 placeholder="请输入手机号" type="number" v-model="mobile"/> </div> <div class="input-block"> <div class="tips">Picture Verification</div> <input placeholder="请输入图片验证码" v-model="imgCode"/> <img src="/api/public/img/verify" class="right-btn" ref="imgCode" @click="refImgCode"/> </div> <div class="input-block"> <div class="tips">Verification Code</div> <input placeholder="请输入短信验证码" type="number" 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> <div class="btn-block"> <div class="btn" @click="bindMobile"> 注册并绑定微信 </div> </div> </div> </template> <script> import {sendMobileCodeApi,getUserDetailApi,bindMobileApi} from "../service/api"; import logoUrl from '../assets/logo.png' import { Toast } from 'vant'; import common from '../util/common' export default { name: "bindMobile", mounted(){ this.$sa.track('ViewRegisterpage',{}); 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:'', timeSet:null, } }, methods:{ refImgCode(){ this.$refs.imgCode.src='/api/public/img/verify?flag='+Math.random() }, sendMobileCode(){ if(this.imgCode===''||!this.imgCode){ Toast('请填写图形验证码'); return false; } let json={ img_code:this.imgCode }; 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; this.refImgCode(); Toast(res); } }).catch(res=>{ this.refImgCode(); }) }, timeO(){ if(this.time>0){ this.time--; setTimeout(()=>{ this.timeO() },1000) } }, bindMobile(){ this.$sa.track('clickSignUp',{}); if(this.flag){ this.flag = false; if(this.msgCode===''||!this.msgCode) { Toast('请填写手机验证码'); return false; } let json={ verify_code:this.msgCode }; let mobileCheck = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[0-9])\d{8}$/; if(this.mobile.match(mobileCheck)){ json.mobile = this.mobile }else{ Toast('请正确填写手机号'); return false } if(window.location.href.indexOf('teacher_id') > -1){ json.teacher_id = common.getUrlParam().teacher_id || this.$route.query.teacher_id } if(window.location.href.indexOf('source') > -1){ json.source = common.getUrlParam().source || this.$route.query.source } bindMobileApi(json).then(data=>{ getUserDetailApi().then(res=>{ localStorage.setItem('userDesc',JSON.stringify(res)); if(this.$route.query.retUrl){ this.$router.push(this.$route.query.retUrl) }else{ this.$router.push({name:'index'}); } this.flag = true }) }).catch(res=>{ this.refImgCode(); 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>