bindMobile.vue

<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>