nuxtProject/components/common/applicationDialog.vue

<template>
  <div>
    <!--  申请方案弹窗 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="show"
      @close="dialogClose"
      @opened="dialogOpened"
      class="application-scheme-dialog"
      center>
      <i></i>
      <p>免费获得课程开发解决方案</p>
      <el-form :model="formData" status-icon :rules="rules" ref="ruleTelForm" class="application-scheme-form">
        <el-form-item prop="tel">
          <el-input v-model="formData.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="formData.verification" placeholder="请输入验证码" class="dialog-input-code"></el-input>
            <el-button @click="checkVerification" :disabled="btnTextDisabled" class="dialog-code-btn">{{ btnText }}
            </el-button>
          </div>
        </el-form-item>
      </el-form>
      <div class="application-scheme-btn" @click="applyFor">申请方案</div>
<!--      <span>免费热线：400-052-2130</span>-->
<!--      <a-->
<!--        href="https://p.qiao.baidu.com/cps/chat?siteId=17930048&userId=40179606&siteToken=e767a987c8404575246ab0084fb2c9bd"-->
<!--        target="_blank">在线客服</a>-->
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="apply_success_dl"
      @closed="dialogResultClose"
      class="application-scheme-result-dialog"
      center
    >
      <img :src="success_img" class="success_icon">
      <h3>恭喜您申请成功</h3>
      <p>请保持手机畅通，稍后客服会和您联系</p>
      <div class="my-btn confirm-btn" @click="confirmBtn">确定</div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "application",
  props: {
    visible: {
      type: Boolean,
      require: true
    }
  },
  data() {
    return {
      success_img: require(`~/static/productImage/p60.png`),
      show: false,
      formData: {
        tel: '',
        verification: '',
      },
      rules: {
        tel: [
          {trigger: 'blur', required: true, message: '请输入手机号'},
        ],
        verification: [
          {trigger: 'blur', required: true, message: '请输入验证码'},
        ],
      },
      btnTextDisabled: false,
      btnText: '获取验证码',
      countdown: 60, // 60秒倒计时
      sliderData: {},
      appKey: 'FFFF0N00000000007EC0',
      apply_success: false,
      apply_success_dl: false,
    }
  },
  watch: {
    visible: {
      handler(newVal) {
        this.show = newVal;
      },
      immediate: true
    }
  },
  methods: {
    /**
     * 串联加载指定的脚本
     * 串联加载[异步]逐个加载，每个加载完成后加载下一个
     * 全部加载完成后执行回调
     * @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);
    },
    dialogResultClose() {
      this.apply_success = false;
      this.apply_success_dl = false;
      this.$emit('apply_success', true);
    },
    dialogOpened() {
      // 初始化拖拽条
      this.initSlide();
    },
    dialogClose() {
      this.show = false;
      this.countdown = -1;
      this.$refs.ruleTelForm.resetFields();
      __nc.reset();

      if (this.apply_success === true) {
        this.apply_success_dl = true;
      }
      this.$emit('update:visible', 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);
      }
    },
    checkVerification() {
      if (this.sliderData.appkey === undefined) {
        this.$message.error('请先通过滑块校验');
        return;
      }
      const {tel: phone} = this.formData;
      this.$axios.$post(`/develop/exists`, {phone}).then(res => {
        if (res.code === 0 && res.data) {
          const {appkey, scene, csessionid: sessionid, sig, token} = this.sliderData;
          let req = {appkey, scene, sig, token, sessionid, phone, type: 1}
          this.$axios.$post('/sendCode', req).then(res => {
            if (res.code === 0 && res.data) {
              this.setTime();
            } else {
              this.$message.error(res.msg || '手机号已存在');
            }
          })
        } else {
          this.$message.error(res.msg || '手机号已存在');
        }

      })
    },
    applyFor() {
      this.$refs.ruleTelForm.validate((valid) => {
        if (valid) {
          const {tel: phone, verification: code} = this.formData;
          // 请求后台
          const options = {phone, code};
          this.$axios.$post('/develop/add', options).then(res => {
            if (res.code === 0 && res.data) {
              this.show = false;
              this.apply_success = true;
            } else {
              this.$message.error('申请失败');
            }
          });
        }
      });
    },
    confirmBtn() {
      this.$emit('success_confirm', true);
      this.apply_success_dl = false;
    },
    initSlide() {
      const nc_token = [this.appKey, (new Date()).getTime(), Math.random()].join(':');
      const NC_Opt = {
        //声明滑动验证需要渲染的目标元素ID。
        renderTo: '#your-dom-id',
        //应用类型标识。它和使用场景标识（scene字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的appkey字段值，请务必正确填写。
        appkey: this.appKey,
        //使用场景标识。它和应用类型标识（appkey字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的scene值，请务必正确填写。
        scene: 'nc_message',
        //滑动验证码的主键，请勿将该字段定义为固定值。确保每个用户每次打开页面时，其token值都是不同的。系统默认的格式为：”您的appkey”+”时间戳”+”随机数”。
        token: nc_token,
        //滑动条的宽度。
        customWidth: 300,
        //业务键字段，可为空。为便于线上问题的排查，建议您按照线上问题定位文档中推荐的方法配置该字段值。
        trans: {'key1': 'code0'},
        //通过Dom的ID属性自动填写trans业务键，可为空。建议您按照线上问题定位文档中推荐的方法配置该字段值。
        elementID: ['usernameID'],
        //是否自定义配置底层采集组件。如无特殊场景，请使用默认值（0），即不自定义配置底层采集组件。
        is_Opt: 0,
        //语言。PC端Web页面场景默认支持18国语言，详细配置方法请参见自定义文案与多语言文档。
        language: 'cn',
        //是否启用。一般情况，保持默认值（true）即可。
        isEnabled: true,
        //内部网络请求的超时时间。一般情况建议保持默认值（3000ms）。
        timeout: 3000,
        //允许服务器超时重复次数，默认5次。超过重复次数后将触发报错。
        times: 5,
        //用于自定义滑动验证各项请求的接口地址。一般情况，请勿配置该参数。
        apimap: {
          // 'analyze': '//a.com/nocaptcha/analyze.jsonp',
          // 'get_captcha': '//b.com/get_captcha/ver3',
          // 'get_captcha': '//pin3.aliyun.com/get_captcha/ver3'
          // 'get_img': '//c.com/get_img',
          // 'checkcode': '//d.com/captcha/checkcode.jsonp',
          // 'umid_Url': '//e.com/security/umscript/3.2.1/um.js',
          // 'uab_Url': '//aeu.alicdn.com/js/uac/909.js',
          // 'umid_serUrl': 'https://g.com/service/um.json'
        },
        //前端滑动验证通过时会触发该回调参数。您可以在该回调参数中将请求标识（token）、会话ID（sessionid）、签名串（sig）字段记录下来，随业务请求一同发送至您的服务端调用验签。
        callback: (data) => {
          this.sliderData = Object.assign({}, data, {
            appkey: NC_Opt.appkey,
            scene: NC_Opt.scene,
          });
          console.log(this.sliderData);
        },
      };
      let date11 = () => {

        let _date = new Date();
        let year = _date.getFullYear().toString();
        let month = _date.getMonth().toString();
        let day = _date.getDate().toString();
        let a = _date.getHours().toString();
        let b = _date.getMinutes().toString();
        let c = _date.getSeconds().toString();

        return year + month + day + a + b + c;
      };
      let c = date11();
      const scripts = [
        `https://g.alicdn.com/sd/ncpc/nc.js?t=${c}`,
      ];
      this.seriesLoadScripts(scripts, function () {
        var nc = new noCaptcha(NC_Opt);
        nc.upLang('cn', {
          _startTEXT: '请按住滑块，拖动到最右边',
          _yesTEXT: '验证通过',
          _error300: '哎呀，出错了，点击<a href="javascript:__nc.reset()">刷新</a>再来一次',
          _errorNetwork: '网络不给力，请<a href="javascript:__nc.reset()">点击刷新</a>',
        });
      });
    },

  }
}
</script>

<style lang="scss" scoped>
.verification {
  display: flex;
  justify-content: space-between;

  .dialog-code-btn {
    background: #00b96b;
    span {
      color : #fff !important;
    }
  }
}
.application-scheme-dialog .el-dialog__body {
  .dialog-code-btn {
    background: #00b96b;
    span {
      color : #fff !important;
    }
  }
}

.application-scheme-dialog .el-dialog__body .application-scheme-btn {
  background: #00b96b;
  color: #fff;
}
</style>