nuxtProject/components/registerDialog.vue

<template>
  <el-dialog
    :close-on-click-modal="false"
    :visible.sync="telDl"
    @close="delDlClose"
    class="register-free-dialog"
    center>
    <i></i>
    <h4>为帮助您更好的使用产品，请先验证手机信息</h4>
    <p v-if="systemType==='ksAdmin'||systemType==='ksClient'||systemType==='ksDownload'">今日已有<span>{{kaoshiCnt}}</span>人  体验了考试系统</p>
    <p v-if="systemType==='pxAdmin'||systemType==='pxClient'||systemType==='pxDownload'">今日已有<span>{{peixunCnt}}</span>人  体验了培训系统</p>
    <el-form :model="telChangeDate" status-icon :rules="telRules" ref="ruleTelForm" class="application-scheme-form">
      <el-form-item  prop="tel">
        <el-input v-model="telChangeDate.tel" placeholder="请输入手机号" class="dialog-input-tel"></el-input>
      </el-form-item>
      <!--<div id="your-dom-id" class="nc-container"></div>-->
      <!--<el-form-item prop="verification">-->
        <!--<div class="verification">-->
          <!--<el-input v-model="telChangeDate.verification" placeholder="请输入验证码" class="dialog-input-code"></el-input>-->
          <!--<el-button  @click="checkVerification" :disabled="btnTextDisabled" type="primary" class="jcrk-primary-btn">{{btnText}}</el-button>-->
        <!--</div>-->
      <!--</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>
    <div class="application-scheme-btn" @click="dialogSave">进入使用</div>
  </el-dialog>
</template>

<script>

  export default {
    name:     'regDialog',
    props:    {
      //弹窗显隐 flag
      dialogVisible:     {
        type:    Boolean,
        require: true,
      },
      // ks为考试 px为培训
      systemType:    {
        type:    String,
        default: 'ksClient',
        require: true,
      },
    },
    data() {
      return {
        telDl:        false,
        telChangeDate:   {},// 弹窗信息
        btnTextDisabled: false,
        btnText:         '获取验证码',
        countdown:       60, // 60秒倒计时
        sliderData:      {},
        appKey:          'FFFF0N00000000007EC0',
        telRules:        {
          tel:          [
            { trigger: 'blur', required: true, message: '请输入手机号' },
          ],
          company: [
            { trigger: 'blur', required: true, message: '请输入公司名称' },
          ],
        },
        kaoshiCnt:0,// 考试人数
        peixunCnt:0,// 培训人数
      };
    },
    computed: {
      baseUrl() {
      },
    },
    watch:{
      // 监听 addOrUpdateVisible 改变
      dialogVisible(oldVal,newVal){
        this.telDl = this.dialogVisible;
      },
    },
    methods:  {
      // 关闭
      delDlClose(){
        this.countdown = -1;
        this.telChangeDate.appKey=undefined;
        this.$refs.ruleTelForm.resetFields();
        // 子组件调用父组件方法，并传递参数
        this.$emit('changeShow','false')
      },
      // 倒计时60秒
      setTime() {
        if (this.countdown === 0) {
          this.btnTextDisabled = false;
          this.btnText = '免费获取验证码';
          this.countdown = 60;
        } else if(this.countdown === -1){
          this.btnTextDisabled = false;
          this.btnText = '获取验证码';
          this.countdown = 60;
        } else {
          this.btnTextDisabled = true;
          this.btnText = '重新发送(' + this.countdown + 's)';
          this.countdown--;
          setTimeout(() => {
            this.setTime();
          }, 1000);
        }
      },
      /**
       * 串联加载指定的脚本
       * 串联加载[异步]逐个加载，每个加载完成后加载下一个
       * 全部加载完成后执行回调
       * @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);
      },

      // 用户注册接口（帮助后台计算）
      userRegister(){
        const options = {
          tel:  '下载记录',
          code: '123123',
          company:  "LLISOFT",
        };
        this.$axios.$post('/user/tiyan/add',options).then(res=>{});
      },
      // 进入使用
      dialogSave(){
        this.$refs.ruleTelForm.validate((valid) => {
          if (valid) {
            // 请求后台
            const options = {
              tel:  this.telChangeDate.tel,
            //  code: this.telChangeDate.verification,
              company:  this.telChangeDate.company,
            };

            if (!/^1[3-9]\d{9}$/.test(this.telChangeDate.tel)) {
              this.$message.error('手机号格式错误');
              return false;
            }
            this.$axios.$post('/user/tiyan/add',options).then(res=>{
              if (res.code === 0 && res.data) {
                this.telDl = false;

                switch (this.systemType) {
                  case 'ksAdmin':
                    window.open('http://8.144.165.203:8087/kaoshi/admin/loginForTiyan.html');
                    break;
                  case 'ksClient':
                    window.open('http://8.144.165.203:8087/kaoshi/mta/loginForTiyan.html');
                    break;
                  case 'pxAdmin':
                    window.open('http://8.144.165.203:8087/peixun/admin/loginForTiyan.html');
                    break;
                  case 'pxClient':
                    window.open('http://8.144.165.203:8087/peixun/mta/loginForTiyan.html');
                    break;
                  case 'ksDownload':
                    window.location.href='https://mta3.oss-cn-qingdao.aliyuncs.com/kaoshi%20v3.8.3_190618.zip';
                    this.userRegister();
                    break;
                  case 'pxDownload':
                    window.location.href='https://mta3.oss-cn-qingdao.aliyuncs.com/peixun%20v3.8.3_190618.zip';
                    this.userRegister();
                    break;

                  default:
                    window.open('http://8.144.165.203:8087/kaoshi/admin/loginForTiyan.html');
                }

                this.$message.success('申请成功');
              } else {
                this.$message.error(res.msg);
              }
            });
          }
        });

      },
    },
    created() {
      // 页面初始化
      this.$axios.$post('/user/tiyan/info').then(res=>{
        this.kaoshiCnt = res.data.kaoshiCnt;
        this.peixunCnt = res.data.kaoshiCnt;
      });
    },
  };
</script>