index.vue

<template>
  <div>
    <div class="banner-block">
      <img :src="logoUrl">
    </div>
    <img v-if="sizeChange" class="bottomimg" :src="bottomUrl" alt="">
    <div class="form-block" >
      <img class="topimg" :src="topUrl" alt="">
      <div class="bgblock">
          <div class="title">课程激活</div>
          <div class="input-block">
            <input  placeholder="请输入订单号" @blur="fun" @focus="focus" autofocus="autofocus"  v-model="order_id"/>
          </div>
          <p class="tip">* 订单号请至您购买课程的平台进行查询</p>
          <div class="input-block">
            <input placeholder="请输入手机号" @blur="fun" @focus="focus" autofocus="autofocus" type="number" pattern="[0-9]*" v-model="mobile"/>
          </div>
          <div class="input-block">
            <input placeholder="请输入短信验证码" @blur="fun" @focus="focus" oninput="if(value.length>4)value=value.slice(0,4)" type="number" maxlength="4" pattern="[0-9]*" 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="btn-block">
          <div class="origin btn" ref="btn" @click="bindMobile">
            确定
          </div>
          <div class="border btn" ref="btn" >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {sendMobileCodeApi,getUserDetailApi,orderTransApi,getCourseInfoApi} from "../../service/api";
  import logoUrl from '../../assets/yujiBg2.png'
  import topUrl from '../../assets/img_cc@2x.png'
  import bottomUrl from '../../assets/img_lola@3x.png'
  import { Toast } from 'vant';
  import common from '../../util/common'
  export default {
    name: "inspectorActivit",
    mounted(){
      // getUserDetailApi().then(res=>{
      //   localStorage.setItem('userDesc',JSON.stringify(res));
      //   this.userDesc = res
      //   this.getPhone = 0
      // })
      let originClientHeight = document.documentElement.clientHeight
      console.log(document.documentElement.clientHeight)
      console.log(document.documentElement.clientWidth)
      window.onresize=()=>{
        // console.log(document.body.clientHeight,'body')
        if(originClientHeight>document.documentElement.clientHeight){
          this.sizeChange = false
        }else{
          this.sizeChange = true
        }
      }  
      var oEvent = window.event;
    },
    data(){
      return {
        logoUrl:logoUrl,
        topUrl:topUrl,
        bottomUrl:bottomUrl,
        mobile:'',
        order_id:'',
        time:0,
        flag:true,
        imgCode:'',
        msgCode:'',
        timeSet:null,
        userDesc:{},
        sizeChange:true,
        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)
      },
      goList(){
        this.$router.replace({name:'inspectorList'});
      },
      // changeMoblie(){
      //   this.getPhone = 0;
      // },
      refImgCode(){
        this.$refs.imgCode.src='/api/public/img/verify?flag='+Math.random()
      },
      sendMobileCode(){
        let json={
        };
        let mobileCheck = /^1\d{10,11}$/;
        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.quick('trackHeatMap',this.$refs.btn)
        if(this.flag){
          // this.flag = false;
          let json = {}
          console.log(this.order_id)
          if(this.order_id===''||!this.order_id) {
            Toast('请输入订单号');
            return false;
          }
          let mobileCheck = /^1\d{10,11}$/;
          if(this.mobile.match(mobileCheck)){
            json.mobile = this.mobile
          }else{
            Toast('请正确填写手机号');
            return false
          }
          if(this.msgCode===''||!this.msgCode) {
            Toast('请填写手机验证码');
            return false;
          }
          json.verify_code = this.msgCode
          json.order_id = this.order_id
          if(window.location.href.indexOf('teacher_id') > -1){
            json.teacher_id = common.getParamhref().teacher_id || this.$route.query.teacher_id
          }
          Toast.loading({
            mask: true,
            message: ""
          });
          orderTransApi(json,this.order_id).then(data=>{
            console.log(data)
            Toast(data)
            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'})
               } else {
                 this.$router.push({name:'index'})
               }
             })
          }).catch(res=>{
            console.log(res)
            setTimeout(()=>{
              this.msgCode=''
            },3000)
            Toast(res.msg)
          })
        }
      }
    }
  }
</script>

<style scoped lang="less">
  @import "../../util/public";
  .banner-block{
    text-align: center;
    position: relative;
    height: 100vh;
    img{
      width: 100%;
    }
  }
  .bottomimg{position: fixed;bottom: 0;width: 110*@toVw;left: 0;z-index: 11;}
  .child-view{background: #FFCAC7;}
  .form-block{
    position: absolute;
    z-index: 10;
    top: 50vh;
    transform: translateY(-50%);
    left: 29*@toVw;
    .topimg{position: absolute;top: -70*@toVw;right: -30*@toVw;width: 105*@toVw;z-index: 11;}
    .bgblock{
      background: white;
      border-radius:20*@toVw; 
      padding: 20 * @toVw 34 * @toVw 30 * @toVw;
    }
    .tip{font-size: 11*@toVw;color: #FF7875;position: relative;top: -21* @toVw;font-weight: bold;}
    .title{text-align: center;font-size: 21*@toVw;margin: 16* @toVw 0  20* @toVw;}
    .input-block{
      width: 249*@toVw;height: 45*@toVw;
      line-height:45*@toVw;
      border-bottom: 1*@toVw solid #FFCFCD;
      margin-bottom: 28 * @toVw;
      position: relative;
      .yzm{
        border: 1px solid #FFCA68;
        position: absolute;
        right:4*@toVw;
        width: 72*@toVw;
        height: 28*@toVw;
        top: 10*@toVw;
        font-size: 12*@toVw;
      }
      .right-btn{
        position: absolute;
        right:4*@toVw;
        padding: 0;
        width: 78*@toVw;
        top: 10*@toVw;
        height: 25*@toVw;
        line-height: 27*@toVw;
        font-size: 12*@toVw;
      }
      input{
        padding: 9 * @toVw 0;
        font-size:16*@toVw;
        background: transparent;
        // font-family:PingFangSC-Semibold;
        // font-weight:500;
        text-indent: 5*@toVw;
        color: #333333;
        line-height:20*@toVw;
        outline: none;
        border: none;
        &::-webkit-input-placeholder{
          font-size:16*@toVw;
          // font-family:PingFangSC-Semibold;
          color:rgba(204,204,204,1);
          line-height:20*@toVw;
        }    /* 使用webkit内核的浏览器 */
        &:-moz-placeholder{
          font-size:16*@toVw;
          // font-family:PingFangSC-Semibold;
          color:rgba(204,204,204,1);
          line-height:20*@toVw;
        }                  /* Firefox版本4-18 */
      }
    }
    .btn-block{
      text-align: center;margin-top: 20*@toVw;
      .btn{
        width: 195*@toVw;height: 41*@toVw;background:#FF7D77;color: white;line-height:41*@toVw; border-radius: 99*@toVw; 
        position: relative;
        font-weight: bold;
      }
      .origin{border:2px solid white;z-index:1;font-size: 15*@toVw}
      .border{position: relative;top: -37*@toVw;z-index:0;}
    }
  }
  
  .codeMsg{
    border-radius:99*@toVw;
    border:none;
    background: #FF7D77;
    color: white;
    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;
  }
  @media screen and (min-width: 600px) {
    @toVw:100/520vw;
    .child-view{
      height: 100vh;
      overflow: hidden;
    }
    .form-block{
    position: absolute;
    z-index: 10;
    top: 50vh;
    transform: translateY(-50%);
    left: 103*@toVw;
    .topimg{position: absolute;top: -100*@toVw;right: -100*@toVw;width: 109*@toVw;z-index: 11;}
    .bgblock{
      background: white;
      border-radius:20*@toVw; 
      padding: 20 * @toVw 34 * @toVw 30 * @toVw;
    }
    .tip{font-size: 11*@toVw;color: #FF7875;position: relative;top: -5* @toVw;font-weight: bold;}
    .title{text-align: center;font-size: 21*@toVw;margin: 16* @toVw 0  20* @toVw;}
    .input-block{
      width: 249*@toVw;height: 45*@toVw;
      line-height:45*@toVw;
      border-bottom: 1*@toVw solid #FFCFCD;
      margin-bottom: 8 * @toVw;
      position: relative;
      .yzm{
        border: 1px solid #FFCA68;
        position: absolute;
        right:4*@toVw;
        width: 72*@toVw;
        height: 28*@toVw;
        top: 10*@toVw;
        font-size: 12*@toVw;
      }
      .right-btn{
        position: absolute;
        right:4*@toVw;
        padding: 0;
        width: 78*@toVw;
        top: 10*@toVw;
        height: 25*@toVw;
        line-height: 27*@toVw;
        font-size: 12*@toVw;
      }
      input{
        padding: 9 * @toVw 0;
        font-size:16*@toVw;
        background: transparent;
        // font-family:PingFangSC-Semibold;
        // font-weight:500;
        text-indent: 5*@toVw;
        color: #333333;
        line-height:20*@toVw;
        outline: none;
        border: none;
        &::-webkit-input-placeholder{
          font-size:16*@toVw;
          // font-family:PingFangSC-Semibold;
          color:rgba(204,204,204,1);
          line-height:20*@toVw;
        }    /* 使用webkit内核的浏览器 */
        &:-moz-placeholder{
          font-size:16*@toVw;
          // font-family:PingFangSC-Semibold;
          color:rgba(204,204,204,1);
          line-height:20*@toVw;
        }                  /* Firefox版本4-18 */
      }
    }
    .btn-block{
      text-align: center;margin-top: 20*@toVw;
      .btn{
        width: 195*@toVw;height: 41*@toVw;background:#FF7D77;color: white;line-height:41*@toVw; border-radius: 99*@toVw; 
        position: relative;
        font-weight: bold;
      }
      .origin{border:2px solid white;z-index:1;font-size: 15*@toVw}
      .border{position: relative;top: -37*@toVw;z-index:0;}
    }
  }
  }
</style>