用于自定义新版登录页，支持配置登录方式、主题、多语言及协议展示。

组件/API

Attributes

参数	说明	类型	可选值	默认值
tabs	配置登录页签及展示顺序	LoginTab[]	contact | enterprise | qrCodeLogin	全部支持的页签
defaultTab	指定默认展示的登录页签	LoginTab	同 tabs	contact
contactType	配置联系人登录支持的方式及展示顺序	LoginContactType[]	password | code	['password', 'code']
lang	设置登录组件的展示语言	FxLoginv2Language	zh | zh-TW | en	不设置，沿用当前语言
themeColor	设置页面主题色，写入页面根节点的主题变量	String	CSS 颜色值，如 #189DFF、rgb()	不覆盖，使用默认主题色
showForgotPassword	是否展示“忘记密码”入口	Boolean	—	true
showAgreement	是否展示服务协议和隐私政策。设置为 false 时，跳过服务协议勾选校验	Boolean	—	true
agreementConfig	自定义服务协议和隐私政策的名称及链接	AgreementConfig	—	使用默认配置
filterEnterpriseList	对企业列表进行过滤，返回值为最终展示列表	Function	—	默认展示企业列表
filterMoreLoginTypes	对其他登录方式进行筛选和排序，返回值为最终展示列表	Function	—	默认展示全部可用的其他登录方式

配置规则

• tabs 可为空。为空时不展示登录表单区域，仅在存在其他登录方式时展示其他登录方式，并忽略 defaultTab。
• tabs 非空时，建议将 defaultTab 配置为其中一项；未包含时回退到 tabs 第一项。
• contactType 仅在包含 contact 时生效，应至少配置一项；仅配置一项时隐藏登录方式切换，配置空数组时按密码登录处理。
• H5 自动过滤 qrCodeLogin；默认页签不可用时使用剩余第一项，无剩余页签时不展示登录表单区域。
• 高代码 H5 页面不展示其他登录方式，因此 filterMoreLoginTypes 不生效。
• showAgreement 设置为 false 时，仅跳过服务协议勾选校验；手机号验证码登录的“同意接收验证码”仍需单独确认。

agreementConfig

agreementConfig: {
  serviceAgreement: {
    name: "客户服务协议",
    url: "https://example.com/zh/service",
  },
  privacyPolicy: {
    name: "客户隐私政策",
    url: "https://example.com/zh/privacy",
  },
}

属性	说明	类型	默认值
serviceAgreement	自定义服务协议。未配置时使用默认服务协议	AgreementItem	—
serviceAgreement.name	服务协议展示名称	String	—
serviceAgreement.url	服务协议跳转地址	String	—
privacyPolicy	自定义隐私政策。未配置时使用默认隐私政策	AgreementItem	—
privacyPolicy.name	隐私政策展示名称	String	—
privacyPolicy.url	隐私政策跳转地址	String	—

filterEnterpriseList

未配置时默认展示企业列表。配置后，回调在企业列表渲染前执行，返回结果用于渲染，并参与单企业自动选择。

filterEnterpriseList(
  enterprises: Enterprise[]
): Enterprise[]

属性	说明	类型	默认值
enterpriseAccount	企业账号	String	—
enterpriseName	企业名称	String	—
employeeStatus	企业成员状态	Number	—
isNeedScanQRCode	是否需要扫码登录	Boolean	—
type	企业类型	Number	—
downStreamEnterpriseId	下游企业标识	String（可选）	—
downloadEnterprise	下游企业列表	Enterprise[]（可选）	—
enterpriseId	企业标识	String（可选）	—

filterMoreLoginTypes

未配置时默认展示全部可用的其他登录方式。配置后，回调接收完整列表，返回结果决定展示内容与顺序。

filterMoreLoginTypes(
  items: OAuthLoginItem[]
): OAuthLoginItem[]

属性	说明	类型	默认值
name	登录方式展示名称	String	—
icon	登录方式图标地址	String	—
url	点击后跳转的授权地址	String	—
showName	是否在图标旁展示登录方式名称，可由高代码组件指定	Boolean	—

方法

方法名	说明	参数
getCurrentLanguage	获取当前实际使用的语言	—

getCurrentLanguage

返回值：zh | zh-TW | en

事件

待补充：当前能力定义未提供公开事件信息。

插槽

待补充：当前能力定义未提供对外可配置插槽信息。

示例

基础用法

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

<template>
    <div class="wrapper">
        <div class="login-wrapper">
            <fx-loginv2
                :tabs="tabs"
                default-tab="contact"
                :contact-type="['password', 'code']"
                lang="zh"
                theme-color="#189DFF"
                :show-forgot-password="true"
                :show-agreement="true"
                :agreement-config="agreementConfig"
            ></fx-loginv2>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            tabs: ['contact', 'enterprise', 'qrCodeLogin'],
            agreementConfig: {
                serviceAgreement: {
                    name: '客户服务协议',
                    url: 'https://example.com/zh/service',
                },
                privacyPolicy: {
                    name: '客户隐私政策',
                    url: 'https://example.com/zh/privacy',
                },
            },
        };
    },
};
</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>

配置回调

export default {
    methods: {
        filterEnterpriseList(enterprises) {
            return enterprises;
        },
        filterMoreLoginTypes(items) {
            return items;
        },
    },
};

注意事项

• defaultTab 未包含在 tabs 中时，按配置规则回退到 tabs 第一项。
• H5 会自动过滤 qrCodeLogin；高代码 H5 页面不展示其他登录方式。
• showAgreement 为 false 时，手机号验证码登录仍需单独确认“同意接收验证码”。
• filterEnterpriseList 和 filterMoreLoginTypes 必须返回对应的列表，返回结果会直接用于展示。