nuxtProject/pages/registerPhone.vue

<template>
  <!-- 课程申请方案弹窗 仅手机使用-->
  <div class="course-develop-page register-phone-page">
    <div>
      <p class="course-develop-title">填写信息，免费为您开通使用账户</p>
      <el-form :model="telChangeDate" status-icon ref="ruleTelForm" class="course-develop-form">
        <el-form-item  prop="tel">
          <el-input v-model="telChangeDate.tel" placeholder="请输入手机号" class="dialog-input-tel"></el-input>
        </el-form-item>
        <el-form-item  prop="company">
          <el-input v-model="telChangeDate.company" placeholder="请输入公司名称" class="dialog-input-tel"></el-input>
        </el-form-item>
        <el-form-item  prop="company" class="dialog-input-company">
          <el-radio-group v-model="telChangeDate.modules" >
            <el-radio label="1">考试系统</el-radio>
            <el-radio label="2">培训系统</el-radio>
          </el-radio-group>
        </el-form-item>
        <div class="form-blue-btn" @click="dialogSave">申请方案</div>
      </el-form>

      <a href="tel:400-052-2130" class="course-develop-tel">咨询电话：400-052-2130</a>
    </div>

  </div>
</template>

<script>
  export default {
    name:     'CourseDevelopPhone',
    layout:   'templateB',
    data() {
      return {
        telChangeDate:   {
          tel:'',
          verification:'',
          company:'',
          modules:'1',
        },
        pageName:'',// 跳进来的页面名称
        btnTextDisabled: false,
        btnText:         '获取验证码',
        countdown:       60, // 60秒倒计时
        sliderData:      {},
        appKey:          'FFFF0N00000000007EC0',
      };
    },
    head(){
    },
    computed: {},
    methods:  {
      // 申请方案按钮
      dialogSave(){
        this.$refs.ruleTelForm.validate((valid) => {
          if (valid) {
            // 请求后台
            const options = {
              phone:  this.telChangeDate.tel,
            };
            if (!/^1[3-9]\d{9}$/.test(this.telChangeDate.tel)) {
              this.$message.error('手机号格式错误');
              return false;
            }
            this.$axios.$post('/develop/add',options).then(res=>{
              if (res.code === 0 && res.data) {
                this.$message({customClass:'phone-message-box',type: 'success',message: '申请成功'});
                // 根据跳进来的页面跳出去
                switch (this.pageName) {
                  case 'shouye':
                    this.$router.push({ name: 'index' });
                    break;
                  case 'course':
                    this.$router.push({ name: 'courseware' });
                    break;
                  case 'resources':
                    this.$router.push({ name: 'resources' });
                    break;
                  default:
                    this.$router.push({ name: 'index' });
                }
              }else{
                this.$message({customClass:'phone-message-box',type: 'error',message: res.msg});
              }
            });
          }
        });

      },

      // 验证码
      checkVerification() {
        if(this.telChangeDate.tel===''||this.telChangeDate.tel===undefined){
          this.$message({customClass:'phone-message-box',type: 'error',message: '请填写手机号'});
          return;
        }else if(this.sliderData.appkey === undefined){
          this.$message({customClass:'phone-message-box',type: 'error',message: '请先通过滑块校验'});
          return;
        }
        this.$axios.$post(`/develop/exists`,{  phone: this.telChangeDate.tel}).then(res=>{

          if (res.code === 0 && res.data) {

            let req = {
              'appkey':    this.sliderData.appkey,
              'phone':     this.telChangeDate.tel,
              'scene':     this.sliderData.scene,
              'sessionid': this.sliderData.csessionid,
              'sig':       this.sliderData.sig,
              'token':     this.sliderData.token,
              'type':      0,
            }
            this.$axios.$post('/sendCode',req).then(res=>{
              if (res.code === 0 && res.data) {
                this.setTime();
              }else{
                this.$message({customClass:'phone-message-box',type: 'error',message: res.msg});
              }
            })
          } else {
            this.$message.error('手机号已存在');
            return false;
          }

        })
      },

      /**
       * 串联加载指定的脚本
       * 串联加载[异步]逐个加载，每个加载完成后加载下一个
       * 全部加载完成后执行回调
       * @param array|string 指定的脚本们
       * @param function 成功后回调的函数
       * @return array 所有生成的脚本元素对象数组
       * 异步加载js后运行回调函数callback / scripts 为数组或字符串
       */
      seriesLoadScripts(scripts, callback) {
        if (typeof (scripts) != 'object') {
          var scripts = [scripts];
        }
        var HEAD = document.getElementsByTagName('head').item(0) || document.documentElement;
        var s = new Array(), last = scripts.length - 1, recursiveLoad = function (i) { //递归
          s[i] = document.createElement('script');
          s[i].setAttribute('type', 'text/javascript');
          s[i].onload = s[i].onreadystatechange = function () { //Attach handlers for all browsers
            if (!/*@cc_on!@*/0 || this.readyState == 'loaded' || this.readyState == 'complete') {
              this.onload = this.onreadystatechange = null;
              this.parentNode.removeChild(this);
              if (i != last) {
                recursiveLoad(i + 1);
              } else if (typeof (callback) == 'function') {
                callback();
              }
            }
          };
          s[i].setAttribute('src', scripts[i]);
          HEAD.appendChild(s[i]);
        };
        recursiveLoad(0);
      },

      // 倒计时60秒
      setTime() {
        if (this.countdown === 0) {
          this.btnTextDisabled = false;
          this.btnText = '免费获取验证码';
          this.countdown = 60;
        } else {
          this.btnTextDisabled = true;
          this.btnText = '重新发送(' + this.countdown + 's)';
          this.countdown--;
          setTimeout(() => {
            this.setTime();
          }, 1000);
        }
      },
    },
    created() {
      this.pageName = this.$route.query.pageName;
    },
    mounted() {

    },
    beforeDestroy() {
    },
  };
</script>