captain-ui/es/image-captcha/src/main.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 '../../common/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: "captain-image-captcha",
      attrs: {
        "title": _vm.title,
        "show-cancel-button": _vm.showCancelButton,
        "confirm-button-text": _vm.confirmText,
        "cancel-button-text": _vm.cancelText,
        "before-close": _vm.beforeClose
      },
      model: {
        value: _vm.showImageCaptcha,
        callback: function callback($$v) {
          _vm.showImageCaptcha = $$v;
        },
        expression: "showImageCaptcha"
      }
    }, [_c('div', {
      staticClass: "captcha-input"
    }, [_c('input', {
      directives: [{
        name: "model",
        rawName: "v-model",
        value: _vm.captchaCode,
        expression: "captchaCode"
      }],
      attrs: {
        "type": "text",
        "placeholder": _vm.placeholder
      },
      domProps: {
        "value": _vm.captchaCode
      },
      on: {
        "input": function input($event) {
          if ($event.target.composing) {
            return;
          }

          _vm.captchaCode = $event.target.value;
        }
      }
    }), _c('img', {
      ref: "imageCaptcha",
      attrs: {
        "src": _vm.imageCaptchaUrl,
        "alt": "验证码"
      },
      on: {
        "click": _vm.refreshImageCaptcha
      }
    })])]);
  },
  name: 'cap-image-captcha',
  props: {
    value: Boolean,
    title: {
      type: String,
      default: '请填写图形验证码'
    },
    placeholder: {
      type: String,
      default: '请输入图片验证码'
    },
    imageCaptchaUrl: {
      type: String,
      default: 'https://passport.youzan.com/api/captcha/image.png'
    },
    checkImageCaptchaUrl: {
      type: String,
      default: 'https://passport.youzan.com/api/captcha/validImageText.json'
    },
    showCancelButton: {
      type: Boolean,
      default: true
    },
    confirmText: {
      type: String,
      default: '确定'
    },
    cancelText: {
      type: String,
      default: '取消'
    },
    success: Function,
    cancel: Function
  },
  data: function data() {
    return {
      showImageCaptcha: this.value,
      captchaCode: ''
    };
  },
  watch: {
    value: function value(val) {
      this.showImageCaptcha = val;
    },
    showImageCaptcha: function showImageCaptcha(val) {
      this.$emit('input', val);
    }
  },
  methods: {
    handleConfirmClick: function handleConfirmClick(done) {
      var _this = this;

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

        done(false);
        return;
      }

      ajax({
        url: this.checkImageCaptchaUrl,
        method: 'POST',
        withCredentials: true,
        data: {
          code: this.captchaCode
        }
      }).then(function (resp) {
        if (resp.code === 0) {
          _this.captchaCode = '';
          done();

          _this.$emit('success');
        } else {
          _Toast(resp.msg || '请求错误');

          done(false);
        }
      }).catch(function (msg) {
        _Toast(msg || '请求错误');

        done(false);
      });
    },
    refreshImageCaptcha: function refreshImageCaptcha() {
      var now = new Date().getTime();
      this.$refs.imageCaptcha.src = this.imageCaptchaUrl + '?t=' + now;
    },
    beforeClose: function beforeClose(action, done) {
      if (action === 'confirm') {
        this.handleConfirmClick(done);
      } else {
        this.captchaCode = '';
        done();
        this.$emit('cancel');
      }
    }
  }
};