FxLogin 组件

用于平台自定义登录页。

功能描述

此组件配合自定义域名可以实现企业灵活修改登录页的样式和登录方式。

参数

参数	说明	类型	可选值	默认值
qrcode	是否显示二维码登录的页签	Boolean	—	true
account	是否显示账号登录的页签	Boolean	—	true
more	是否显示更多登录的页签	Boolean	—	true
activeTabIndex	默认激活的页签，值为页签的下标	Number	—	0
accountLoginTypes	账号登录页签下的存在的登录方式	Array	phone	['phone', 'email', 'account']
activeLoginType	账号登录页签默认展示的登录方式	String	—	'phone'
moreLoginTypes	在‘更多登录’里面添加登录方式	Array		[]
changePasswordTypes	手机、邮箱登录是否展示“忘记密码”按钮	Array	'phone' | 'email'	['phone', 'email']
lang	登录页的多语	String	'zh-CN' | 'zh-TW' | 'en'	‘zh-CN’
locationOrigin	自定义发送网络的域名。例如：获取验证码，登录等接口的域名。	String	—	自定义域名xxx.my.fxiaoke.com 时默认值为：www.fxiaoke.com 个性化域名xxx.xx.xx 时默认值为：location.hostname
twoFactor	是否开启双因素登录	Boolean	—	false
themeColor	登录组件的主题色	String	—	'#ff8000'
showAgreement	是否展示登录协议	Boolean	—	true
filterEnterpriseList	在渲染企业列表前调用，对企业列的数据进行过滤	Function（data: array）	—	null

moreLoginType参数说明

属性	说明	类型	可选值	默认值
name	自定义登录项的名称	String	—	—
logo	自定义登录项左侧的 logo	String	—	—
href	点击自定义登录项后跳转的 URL	String	—	—
style	自定义更多登录项的样式	String	—	—

filterEnterpriseList回调函数说明

输入正确的账号和密码点击确定后，渲染企业列表前调用，对企业列的数据进行过滤。

钩子接受一个参数：

• data: Array - 企业列表数据

函数执行完成之后，确保 return 一个 data 出来。

属性	说明	类型	可选值	默认值
enterpriseName	企业的名称	String	—	—
employeeStatus	当前账号在改企业的状态：1：激活中、2：停用、3：禁止登录、4：审核中	Number	—	—
isNeedScanQRCode	是否需要扫码登录	Boolean	—	—
type	企业的类型：1：上游企业，2：下游企业	Number	1 | 2	—
downloadEnterprise	上游企业的下游企业	Array		—

代码示例

组件通过 Vue.component全局注册，可以直接在代码中使用。

<template>
    <div class="wrapper">
        <div class="login-wrapper">
            <fx-login></fx-login>
        </div>
    </div>
</template>
<script>
export default {};
</script>
<style lang="less" scoped>
.wrapper {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    .login-wrapper {
        padding: 16px;
        border-radius: 4px;
        background-color: #fff;
  }
}
</style>

效果展示：

FAQ

为什么不能使用FxUI组件？

在登录页不可以使用其他 UI 组件。登录组件没有站内内部的各种依赖，并且在登录前是获取不到用户身份，所以在登录组件中是不能使用FxUI组件的。

为什么fx-login不能再主站内部使用？

在fx-login 组件中做了自动登录的操作，在主站内可以获取到用户身份，所以登录组件就会自动登录进去。

为什么静态资源加载失败？

由于登录组件需要配置自定义域名使用，在自定义域名下加载静态资源是加载不到的。

自定义域名解决方案：使用https://www.fxiaoke.com

data() {
    return {
       logoImage: `https.www.fxiaoke.com${$publicPath$}logo.png`,
    }
},

私有域名解决方案：使用location.origin

data() {
    return {
       logoImage: location.origin + `${$publicPath$}logo.png`,
    }
},