<template> <div> <div class="banner-block"> <img :src="logoUrl"> </div> <div class="form-block" v-if="getPhone==0"> <div class="input-block"> <input placeholder="请输入手机号" autofocus="autofocus" type="number" pattern="[0-9]*" v-model="mobile"/> </div> <p class="tip">* 如已购买课程,手机号必须填下单时填写的收件人手机号</p> <div class="input-block"> <input placeholder="请输入图片验证码" oninput="if(value.length>4)value=value.slice(0,4)" type="number" maxlength="4" pattern="[0-9]*" v-model="imgCode"/> <img src="/api/public/img/verify" class="img" ref="imgCode" @click="refImgCode"/> </div> <div class="input-block"> <input placeholder="请输入短信验证码" 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="btn" ref="btn" @click="bindMobile"> 确定 </div> </div> </div> <div class="form-block" v-if="getPhone==1"> <div class="input-block"> <input v-model="userDesc.mobile"/> <button class="codeMsg right-btn" @click="changeMoblie" >更换手机号</button> </div> <p class="tip">* 如果您的订单手机号为上述手机号直接点下方确定按钮即可</p> <div class="btn-block"> <div class="btn" ref="btn" style="margin-top:100px;" @click="goList"> 确定 </div> </div> </div> </div> </template> <script> import {sendMobileCodeApi,getUserDetailApi,bindMobileApi} from "../../service/api"; import logoUrl from '../../assets/yujiBg.png' import { Toast } from 'vant'; import common from '../../util/common' export default { name: "inspectorActivit", mounted(){ this.$sa.track('ViewActivationpage',{ }); 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}}) } } getUserDetailApi().then(res=>{ localStorage.setItem('userDesc',JSON.stringify(res)); this.userDesc = res // if(this.userDesc.mobile){ // this.getPhone = 1 // }else{ // } this.getPhone = 0 }) window.onresize=()=>{ // console.log(document.body.clientHeight,'body') if(originClientHeight>document.documentElement.clientHeight){ }else{ document.documentElement.scrollTop = 0 document.body.scrollTop = 0 } } }, data(){ return { logoUrl:logoUrl, mobile:'', time:0, flag:true, imgCode:'', msgCode:'', timeSet:null, getPhone:'-1', userDesc:{} } }, methods:{ goList(){ this.$router.replace({name:'inspectorList'}); }, changeMoblie(){ this.getPhone = 0; }, 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 = /^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; this.refImgCode(); Toast(res); } }).catch(res=>{ this.refImgCode(); }) }, 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; if(this.msgCode===''||!this.msgCode) { Toast('请填写手机验证码'); return false; } let json={ verify_code:this.msgCode }; let mobileCheck = /^1\d{10,11}$/; 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 // } json.source = "login" bindMobileApi(json).then(data=>{ getUserDetailApi().then(res=>{ localStorage.setItem('userDesc',JSON.stringify(res)); this.$router.replace({name:'inspectorList'}); this.flag = true }) }).catch(res=>{ this.refImgCode(); this.flag = true }) } } } } </script> <style scoped lang="less"> @import "../../util/public"; .child-view{ background: white; } .banner-block{ text-align: center; position: relative; top: -20 * @toVw; img{ width: 100%; } } .form-block{ position: relative; z-index: 10; background: white; top: -42*@toVw; padding: 20 * @toVw; border-radius:20*@toVw; .tip{font-size: 12*@toVw;color: #FF7875;position: absolute;top: 74 * @toVw;left: 47 * @toVw;} .input-block{ width: 273*@toVw;height: 47*@toVw; line-height:47*@toVw; text-indent: 10*@toVw; border: 1*@toVw solid #cccccc; margin-bottom: 26 * @toVw; position: relative; .img{ position: absolute; right: 10*@toVw; width: 100*@toVw; top: 10*@toVw; font-size: 12*@toVw; } .right-btn{ position: absolute; right:10*@toVw; padding: 0; width: 100*@toVw; top: 10*@toVw; height: 25*@toVw; line-height: 25*@toVw; font-size: 12*@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; } } } .btn-block{ text-align: center;margin-top: 27*@toVw; .btn{ width: 273*@toVw;height: 47*@toVw;background:#FF7D77;color: white;line-height:47*@toVw; border-radius: 4*@toVw; } } } .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>