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

有赞vue wap业务组件库

import "vant/es/toast/style";
import _Toast from "vant/es/toast";
import _extends from "@babel/runtime/helpers/esm/extends";
import "vant/es/cell-group/style";
import _CellGroup from "vant/es/cell-group";
import "vant/es/button/style";
import _Button from "vant/es/button";
import Actions from './components/actions';
import FormItem from './components/form-item';
import Input from './components/input';
import Captcha from '../../captcha/index';
import ajax from './utils/ajax';
export default {
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('div', {
      staticClass: "cap-captcha-login"
    }, [_c('van-cell-group', [_c('vm-form-item', {
      attrs: {
        "title": "手机号"
      }
    }, [_c('vm-input', {
      attrs: {
        "type": "tel",
        "placeholder": "首次登录将为你创建帐号"
      },
      model: {
        value: _vm.loginData.phone,
        callback: function callback($$v) {
          _vm.$set(_vm.loginData, "phone", $$v);
        },
        expression: "loginData.phone"
      }
    })], 1), _c('vm-form-item', {
      staticClass: "cap-login__captcha-item",
      attrs: {
        "title": "验证码"
      }
    }, [_c('vm-captcha', {
      attrs: {
        "placeholder": "输入6位验证码",
        "button-color": "#07c160",
        "captcha-url": _vm.captchaUrl,
        "image-captcha-url": _vm.imageCaptchaUrl,
        "check-image-captcha-url": _vm.checkImageCaptchaUrl,
        "token-url": _vm.tokenUrl,
        "phone": _vm.loginData.phone,
        "biz": _vm.biz
      },
      on: {
        "statusChange": _vm.handleCaptchaStatusChange
      },
      model: {
        value: _vm.loginData.code,
        callback: function callback($$v) {
          _vm.$set(_vm.loginData, "code", $$v);
        },
        expression: "loginData.code"
      }
    })], 1)], 1), _c('p', {
      directives: [{
        name: "show",
        rawName: "v-show",
        value: _vm.captchaStatus === 'disabled',
        expression: "captchaStatus === 'disabled'"
      }],
      staticClass: "cap-captcha-login__tip"
    }, [_vm._v("\n    验证码已发送至手机号 +86 " + _vm._s(_vm.loginData.phone) + "\n  ")]), _c('vm-actions', [_c('template', {
      slot: "button"
    }, [_c('van-button', {
      attrs: {
        "type": "primary",
        "block": ""
      },
      on: {
        "click": _vm.handleSubmit
      }
    }, [_vm._v("\n        登录\n      ")])], 1)], 2)], 1);
  },
  components: {
    'van-button': _Button,
    'van-cell-group': _CellGroup,
    'vm-actions': Actions,
    'vm-form-item': FormItem,
    'vm-input': Input,
    'vm-captcha': Captcha
  },
  props: {
    loginUrl: String,
    loginRedirectUrl: String,
    captchaUrl: String,
    imageCaptchaUrl: String,
    checkImageCaptchaUrl: String,
    tokenUrl: String,
    biz: String,
    requestLogin: Function
  },
  data: function data() {
    return {
      captchaStatus: '',
      loginData: {
        phone: '',
        code: ''
      }
    };
  },
  methods: {
    handleSubmit: function handleSubmit() {
      var _this = this;

      var phoneReg = /^\d{1,20}$/;

      var loginData = _extends({}, this.loginData);

      var phone = loginData.phone;

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

        return;
      }

      if (!phoneReg.test(phone)) {
        _Toast('手机号格式不正确');

        return;
      }

      if (!loginData.code) {
        _Toast('请输入验证码');

        return;
      }

      if (typeof this.requestLogin === 'function') {
        this.requestLogin(loginData);
        return;
      }

      _Toast.loading();

      ajax({
        url: this.loginUrl,
        method: 'POST',
        data: _extends({}, loginData)
      }).then(function (res) {
        _Toast.clear();

        _Toast.success({
          message: '登录成功',
          duration: 1000
        });

        setTimeout(function () {
          location.href = _this.loginRedirectUrl;
        }, 1500);
      }, function (res) {
        _Toast(res.msg || '网络错误');
      });
    },
    handleCaptchaStatusChange: function handleCaptchaStatusChange(status) {
      this.captchaStatus = status;
    }
  }
};