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

有赞vue wap业务组件库

import CountrySelect from './components/country-select';
import Login from './components/login';
import ForgetPassword from './components/forget-password';
import RegisterPhone from './components/register-phone';
import Register from './components/register';
import RegisterAlter from './components/register-alter';
export default {
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('div', [_vm.currType === 'login' ? _c('vm-login', {
      attrs: {
        "show-country-select": _vm.showCountrySelect,
        "phone": _vm.phone,
        "country": _vm.country,
        "login-url": _vm.loginUrl,
        "login-redirect-url": _vm.loginRedirectUrl,
        "login-error-callback": _vm.loginErrorCallback,
        "source": _vm.source
      },
      on: {
        "phoneChange": _vm.handlePhoneChange,
        "typeChange": _vm.changeLoginType,
        "showCountry": _vm.doShowCountrySelect,
        "logger": _vm.handleLogger
      }
    }) : _vm.currType === 'forget-password' ? _c('vm-forget-password', {
      attrs: {
        "request-forget-password": _vm.requestForgetPassword,
        "show-country-select": _vm.showCountrySelect,
        "phone": _vm.phone,
        "country": _vm.country,
        "captcha-url": _vm.captchaUrl,
        "image-captcha-url": _vm.imageCaptchaUrl,
        "check-image-captcha-url": _vm.checkImageCaptchaUrl,
        "token-url": _vm.tokenUrl,
        "change-password-url": _vm.changePasswordUrl
      },
      on: {
        "phoneChange": _vm.handlePhoneChange,
        "typeChange": _vm.changeLoginType,
        "showCountry": _vm.doShowCountrySelect,
        "logger": _vm.handleLogger
      }
    }) : _vm.mode === 'alter' && _vm.currType === 'register-phone' ? _c('vm-register-alter', {
      attrs: {
        "register-url": _vm.registerUrl,
        "auto-confirm-url": _vm.autoConfirmUrl,
        "show-country-select": _vm.showCountrySelect,
        "phone": _vm.phone,
        "country": _vm.country,
        "captcha-url": _vm.captchaUrl,
        "image-captcha-url": _vm.imageCaptchaUrl,
        "check-image-captcha-url": _vm.checkImageCaptchaUrl,
        "token-url": _vm.tokenUrl,
        "source": _vm.source
      },
      on: {
        "phoneChange": _vm.handlePhoneChange,
        "typeChange": _vm.changeLoginType,
        "showCountry": _vm.doShowCountrySelect,
        "logger": _vm.handleLogger
      }
    }) : _vm.mode === 'default' && _vm.currType === 'register-phone' ? _c('vm-register-phone', {
      attrs: {
        "show-country-select": _vm.showCountrySelect,
        "phone": _vm.phone,
        "country": _vm.country,
        "auto-confirm-url": _vm.autoConfirmUrl,
        "source": _vm.source
      },
      on: {
        "phoneChange": _vm.handlePhoneChange,
        "showCountry": _vm.doShowCountrySelect,
        "typeChange": _vm.changeLoginType
      }
    }) : _vm.mode === 'default' && _vm.currType === 'register' ? _c('vm-register', {
      attrs: {
        "phone": _vm.phone,
        "country": _vm.country,
        "captcha-url": _vm.captchaUrl,
        "image-captcha-url": _vm.imageCaptchaUrl,
        "check-image-captcha-url": _vm.checkImageCaptchaUrl,
        "token-url": _vm.tokenUrl,
        "register-url": _vm.registerUrl,
        "source": _vm.source
      },
      on: {
        "typeChange": _vm.changeLoginType
      }
    }) : _vm._e(), _c('vm-country-select', {
      attrs: {
        "country-list-url": _vm.countryListUrl,
        "country": _vm.country && _vm.country.code
      },
      on: {
        "change": _vm.doChangeCountry
      },
      model: {
        value: _vm.showCountry,
        callback: function callback($$v) {
          _vm.showCountry = $$v;
        },
        expression: "showCountry"
      }
    })], 1);
  },
  name: 'cap-login',
  components: {
    'vm-country-select': CountrySelect,
    'vm-login': Login,
    'vm-forget-password': ForgetPassword,
    'vm-register-phone': RegisterPhone,
    'vm-register': Register,
    'vm-register-alter': RegisterAlter
  },
  props: {
    mode: {
      type: String,
      default: 'default'
    },
    type: {
      type: String,
      default: 'login'
    },
    loginUrl: {
      type: String,
      required: true
    },
    countryListUrl: {
      type: String,
      required: true
    },
    captchaUrl: {
      type: String,
      required: true
    },
    imageCaptchaUrl: {
      type: String,
      required: true
    },
    checkImageCaptchaUrl: {
      type: String,
      required: true
    },
    tokenUrl: {
      type: String,
      required: true
    },
    changePasswordUrl: {
      type: String,
      required: true
    },
    autoConfirmUrl: {
      type: String,
      required: true
    },
    registerUrl: {
      type: String,
      required: true
    },
    loginRedirectUrl: {
      type: String,
      required: true
    },
    showCountrySelect: {
      type: Boolean,
      default: true
    },
    requestForgetPassword: Function,
    source: {
      type: String,
      default: '14'
    },
    loginErrorCallback: Function
  },
  data: function data() {
    return {
      currType: this.type,
      initialType: this.type,
      showCountry: false,
      phone: '',
      code: '',
      country: {
        code: '+86',
        name: '中国'
      }
    };
  },
  watch: {
    type: function type(val) {
      this.currType = val || 'login';
    },
    currType: function currType(type) {
      this.$emit('typeChange', type);

      if (type === 'show-country') {
        return;
      }

      var title;

      if (!type || type === 'login') {
        title = '登录';
      } else if (type.indexOf('register') !== -1) {
        title = '注册';
      } else if (type.indexOf('forget-password') !== -1) {
        title = '设置新密码';
      }

      document.title = title;
    },
    phone: function phone(_phone) {
      this.$emit('phoneChange', _phone);
    },
    country: function country(_country) {
      this.$emit('countryChange', _country);
    }
  },
  created: function created() {
    if (window.location.hash) {
      window.location.hash = '';
    }

    window.addEventListener('hashchange', this.handleHashChange);
  },
  destroyed: function destroyed() {
    window.removeEventListener('hashchange', this.handleHashChange);
  },
  methods: {
    /**
      * 显示国家选择
      */
    doShowCountrySelect: function doShowCountrySelect() {
      this.showCountry = true;
      window.location.hash = '#show-country';
    },

    /**
      * 国家选择变更时
      */
    doChangeCountry: function doChangeCountry(data) {
      if (data) {
        this.country = data;
      }
    },

    /**
      * 改变当前页面hash为对应type
      */
    changeLoginType: function changeLoginType(type) {
      window.location.hash = '#' + type;
      this.currType = type;
    },

    /**
      * phone字段change
      */
    handlePhoneChange: function handlePhoneChange(val) {
      this.phone = val;
    },

    /**
      * 处理hashchange事件，用于返回操作时显示正确的页面
      */
    handleHashChange: function handleHashChange(event) {
      var newURL = event.newURL;
      var newHash = newURL.indexOf('#') !== -1 ? newURL.slice(newURL.indexOf('#') + 1) : '';
      this.currType = newHash || this.initialType || 'login';
    },
    handleCaptchaChange: function handleCaptchaChange(code) {
      this.code = code;
    },
    handleLogger: function handleLogger(detail) {
      this.$emit('logger', detail);
    }
  }
};