nuxtProject/pages/CourseDevelopPhone.vue

<template>
  <!-- 课程申请方案弹窗 仅手机使用-->
  <div class="course-develop-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>
        <div class="form-blue-btn" @click="dialogSave">申请方案</div>
        <a class="form-border-btn" href="http://p.qiao.baidu.com/cps/chat?siteId=11735491&amp;userId=10530011"
           target="_blank">在线客服</a>
      </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: {},
        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;
                  case 'education':
                    this.$router.push({name: 'indexEducation'});
                    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>
<style>

</style>