captain-ui/es/captcha/src/components/image-captcha.js

有赞vue wap业务组件库

import "vant/es/toast/style";
import _Toast from "vant/es/toast";
import "vant/es/dialog/style";
import _Dialog from "vant/es/dialog";

/* eslint-disable camelcase */
import Vue from 'vue';
import ajax from '../utils/ajax';
Vue.use(_Dialog);
export default {
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('van-dialog', {
      staticClass: "cap-image-captcha",
      attrs: {
        "title": "请填写图形验证码",
        "show-cancel-button": "",
        "confirm-button-text": "确定"
      },
      on: {
        "confirm": _vm.handleConfirmClick,
        "cancel": _vm.handleDialogCancel
      },
      model: {
        value: _vm.currVal,
        callback: function callback($$v) {
          _vm.currVal = $$v;
        },
        expression: "currVal"
      }
    }, [_c('div', {
      staticClass: "captcha-input"
    }, [_c('input', {
      directives: [{
        name: "model",
        rawName: "v-model",
        value: _vm.captcha_code,
        expression: "captcha_code"
      }],
      attrs: {
        "type": "text",
        "placeholder": "请输入验证码"
      },
      domProps: {
        "value": _vm.captcha_code
      },
      on: {
        "input": function input($event) {
          if ($event.target.composing) {
            return;
          }

          _vm.captcha_code = $event.target.value;
        }
      }
    }), _c('img', {
      ref: "imageCaptcha",
      attrs: {
        "src": _vm.imageCaptchaUrl,
        "alt": "验证码"
      },
      on: {
        "click": _vm.refreshImageCaptcha
      }
    })])]);
  },
  props: {
    value: Boolean,
    imageCaptchaUrl: String,
    checkImageCaptchaUrl: String,
    phone: [String, Number],
    country: {
      type: Object,
      default: function _default() {
        return {};
      }
    }
  },
  data: function data() {
    return {
      currVal: this.value,
      captcha_code: ''
    };
  },
  watch: {
    value: function value(val) {
      this.currVal = val;
    },
    currVal: function currVal(val) {
      this.$emit('input', val);
    }
  },
  methods: {
    handleConfirmClick: function handleConfirmClick() {
      var _this = this;

      this.$emit('logger', {
        type: 'img-captcha-confirm'
      });

      if (!this.captcha_code) {
        _Toast('请输入验证码');

        return;
      }

      var code = this.country && this.country.code;
      var phone = code + '-' + this.phone;
      ajax({
        url: this.checkImageCaptchaUrl,
        method: 'GET',
        dataType: 'jsonp',
        data: {
          mobile: phone,
          captcha_code: this.captcha_code
        }
      }).then(function () {
        _this.currVal = false;

        _this.$emit('success');
      }, function (res) {
        _Toast(res.msg || '请求错误');
      });
    },
    handleDialogCancel: function handleDialogCancel() {
      this.currVal = false;
      this.$emit('logger', {
        type: 'img-captcha-cancel'
      });
    },
    refreshImageCaptcha: function refreshImageCaptcha() {
      var now = new Date().getTime();
      this.$refs.imageCaptcha.src = this.imageCaptchaUrl + '?t=' + now;
    }
  }
};