captain-ui/es/captcha/src/main.js

有赞vue wap业务组件库

import "vant/es/toast/style";
import _Toast from "vant/es/toast";
import "vant/es/button/style";
import _Button from "vant/es/button";
import InputMixin from '../../common/mixins/input-mixin';
import ImageCaptcha from './components/image-captcha';
import ajax from './utils/ajax';
import Token from './utils/token';
export default {
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

    var _c = _vm._self._c || _h;

    return _c('div', {
      staticClass: "cap-captcha"
    }, [_c('input', {
      staticClass: "cap-captcha__input",
      attrs: {
        "type": "tel",
        "placeholder": _vm.placeholder,
        "maxlength": "6"
      },
      domProps: {
        "value": _vm.currentValue
      },
      on: {
        "input": _vm.handleInput
      }
    }), _c('van-button', {
      staticClass: "captcha-button",
      style: _vm.buttonStyle,
      attrs: {
        "size": "small",
        "disabled": _vm.captchaStatus === 'disabled'
      },
      on: {
        "click": _vm.sendSmsCaptcha
      }
    }, [_vm._v("\n    " + _vm._s(_vm.captchaBtnText) + "\n  ")]), _c('vm-image-captcha', {
      attrs: {
        "phone": _vm.phone,
        "country": _vm.country,
        "check-image-captcha-url": _vm.checkImageCaptchaUrl,
        "image-captcha-url": _vm.imageCaptchaUrl
      },
      on: {
        "success": _vm.sendSmsCaptcha,
        "logger": _vm.handleImgCaptchaLogger
      },
      model: {
        value: _vm.imageCaptchaShow,
        callback: function callback($$v) {
          _vm.imageCaptchaShow = $$v;
        },
        expression: "imageCaptchaShow"
      }
    })], 1);
  },
  name: 'cap-captcha',
  components: {
    'van-button': _Button,
    'vm-image-captcha': ImageCaptcha
  },
  mixins: [InputMixin],
  props: {
    value: String,
    placeholder: String,
    captchaUrl: String,
    imageCaptchaUrl: String,
    checkImageCaptchaUrl: String,
    tokenUrl: String,
    phone: [String, Number],
    country: {
      type: Object,
      default: function _default() {
        return {
          code: '+86'
        };
      }
    },
    biz: String,
    buttonColor: {
      type: String,
      default: '#e33'
    },
    sendMsgAfterConfirm: {
      type: Boolean,
      default: false
    },
    sendMsgConfirmCallback: {
      type: Function
    }
  },
  data: function data() {
    return {
      currentValue: this.value,
      captchaStatus: '',
      time: 60,
      verifyTimes: 1,
      imageCaptchaShow: false
    };
  },
  computed: {
    captchaBtnText: function captchaBtnText() {
      var captchaStatus = this.captchaStatus;
      return captchaStatus === '' ? '获取验证码' : captchaStatus === 'resend' ? '重新发送' : '已发送(' + this.time + ')';
    },
    buttonStyle: function buttonStyle() {
      if (this.captchaStatus === 'disabled') return {};
      var buttonColor = this.buttonColor;
      return {
        'border-color': buttonColor,
        color: buttonColor
      };
    }
  },
  watch: {
    value: function value(val) {
      this.currentValue = val;
    },
    currentValue: function currentValue(val) {
      this.$emit('input', val);
    },
    captchaStatus: function captchaStatus(val) {
      this.$emit('statusChange', val);
    }
  },
  mounted: function mounted() {
    this.token = new Token(this.tokenUrl);
    this.token.fetch();
  },
  methods: {
    handleInput: function handleInput(event) {
      this.currentValue = event.target.value;
    },
    sendSmsCaptcha: function sendSmsCaptcha() {
      var _this = this;

      this.$emit('logger', {
        type: 'get-captcha'
      });
      var captchaStatus = this.captchaStatus;
      var code = this.country && this.country.code;
      var sendMsgAfterConfirm = this.sendMsgAfterConfirm;

      if (!this.phone) {
        _Toast('请输入手机号');

        return;
      }

      if (!code) {
        _Toast('请选择国家区号');

        return;
      }

      if (captchaStatus === 'disabled') return;
      var phone = code + '-' + this.phone;

      if (sendMsgAfterConfirm) {
        // 先confirm 再决定是否执行
        this.sendMsgConfirmCallback().then(function () {
          _this.sendMsg(phone);
        });
      } else {
        this.sendMsg(phone);
      }
    },
    sendMsg: function sendMsg(phone) {
      var _this2 = this;

      ajax({
        url: this.captchaUrl,
        method: 'GET',
        dataType: 'jsonp',
        data: {
          mobile: phone,
          verifyTimes: this.verifyTimes,
          biz: this.biz || 'kdt_account_captcha',
          token: this.token.get()
        }
      }).then(function (res) {
        _this2.verifyTimes++;
        _this2.captchaStatus = 'disabled';
        _this2.timer = setInterval(function () {
          if (_this2.time >= 1) {
            _this2.time--;
            return;
          }

          clearInterval(_this2.timer);
          _this2.captchaStatus = 'resend';
          _this2.time = 60;
        }, 1000);
      }, function (res) {
        if (+res.code === 10111) {
          _this2.imageCaptchaShow = true;
        } else {
          _Toast(res.msg || '请求错误');
        }
      });
    },
    handleImgCaptchaLogger: function handleImgCaptchaLogger(detail) {
      this.$emit('logger', detail);
    }
  }
};