README
digitalzz/login
介绍
基于 react^16.8.6 的 页面级组件-登录页组件,集成手机验证码登录、短信验证码登录和郑好办扫码登录功能
安装
## npm安装
npm install --save @digitalzz/login
或者
npm i @digitalzz/login -S
## yarn 安装
yarn add @digitalzz/login
使用方法
- 账号密码登录
import DzrLogin from '@digitalzz/login'
import headerLogo from '@/assets/image/main-logo.jpg'
import bgImage from '@/assets/image/login-bg.jpg'
/**
* 账号密码登录接口
* 默认集成用户中心
*/
const pwdLogin = params => {
// 使用promise 把结果resolve,可以从success里获取该response
// 不使用promise 可直接在该函数里处理登录逻辑
return new Promise(resolve => {
// 处理输入框字段命名问题,默认用户名:loginName,密码:password
const data = {
appId: params.appId,
username: params.loginName,
password: params.password
}
// 后端api接口方法
pwdLoginApi(data).then(response => {
resolve(response)
})
})
}
export default () => {
return (
<DzrLogin
params={{ appId: 'xxx-xxx' }}
headerLogo={headerLogo}
bgImage={bgImage}
pwdLogin={pwdLogin}
loginType={['pwd']}
success={response => {
// 登录成功,取response登录接口获取的数据处理登录
}}
/>
)
}
- 短信验证码登录
import DzrLogin from '@digitalzz/login'
import headerLogo from '@/assets/image/main-logo.jpg'
import bgImage from '@/assets/image/login-bg.jpg'
/**
* 发送短信验证码
* 默认集成用户中心
*/
const sendCode = params => {
return new Promise(resolve => {
// 后端api接口方法
sendCodeApi(data).then(response => {
resolve(response)
})
})
}
/**
* 短信验证码登录
* 默认集成用户中心
*/
const sendCodeLogin = params => {
// 使用promise 把结果resolve,可以从success里获取该response
// 不使用promise 可直接在该函数里处理登录逻辑
return new Promise(resolve => {
// 后端api接口方法
sendCodeLoginApi(data).then(response => {
resolve(response)
})
})
}
export default () => {
return (
<DzrLogin
params={{ appId: 'xxx-xxx' }}
headerLogo={headerLogo}
bgImage={bgImage}
sendCode={sendCode}
sendCodeLogin={sendCodeLogin}
loginType={['sms']}
success={response => {
// 登录成功,取response登录接口获取的数据处理登录
}}
/>
)
}
- 郑好办扫码登录
import DzrLogin from '@digitalzz/login'
import headerLogo from '@/assets/image/main-logo.jpg'
import bgImage from '@/assets/image/login-bg.jpg'
/**
* 获取郑好办二维码
* 默认集成用户中心
*/
const getZhbQrcode = params => {
return new Promise(resolve => {
getZhbQrcodeApi(params).then(res => {
const { code, message, data } = res
const dataObj = {
url: data,
uuid: qs.parse(data).uuid
}
const response = { code, message, data: dataObj }
resolve(response)
})
})
}
/**
* 获取郑好办扫码登录用户信息
* 默认集成用户中心
*/
const getZhbUserInfo = params => {
// 使用promise 把结果resolve,可以从success里获取该response
// 不使用promise 可直接在该函数里处理登录逻辑
return new Promise(resolve => {
// 后端api接口方法
getZhbUserInfoApi(data).then(response => {
resolve(response)
})
})
}
export default () => {
return (
<DzrLogin
params={{ appId: 'xxx-xxx' }}
headerLogo={headerLogo}
bgImage={bgImage}
getZhbQrcode={getZhbQrcode}
getZhbUserInfo={getZhbUserInfo}
loginType={['zhb']}
success={response => {
// 登录成功,取response登录接口获取的数据处理登录
}}
/>
)
}
Api
参数 | 描述 | 类型 | 可选值 | 必须 | 默认值 | 版本 |
---|---|---|---|---|---|---|
showHeader | 是否显示头部 | Boolean | 否 | true | ||
headerLogo | 头部 logo | String | 否 | |||
headerStyle | 头部区域样式 | Object | 否 | {} | ||
showFooter | 是否显示底部 | Boolean | 否 | true | ||
footer | 底部模板 | ReactNode | 否 | Copyright©2021 数字郑州科技有限公司 |
||
footerStyle | 底部区域样式 | Object | 否 | {} | ||
style | 页面整体样式 | Object | 否 | {} | ||
bodyStyle | 内容区域样式 | Object | 否 | {} | ||
mainTitle | 主标题 | String | 否 | 欢迎登陆 | ||
bgImage | 页面背景图 | String | 否 | v1.0.3 | ||
bgColor | 页面背景色 | String | 否 | #002766 | v1.0.3 | |
loginType | 登录方式 | Array[string] | pwd 账号密码 | sms 短信验证码 | zhb 郑好办扫码 | 是 | ['zhb', 'sms', 'pwd'] | |
params | 预置参数 | 否 | {} | |||
sendSmsCode | 发送短信验证码方法 | Function | 否 | 默认集成用户中心 | ||
smsLogin | 短信验证码登录方法 | Function | 否 | 默认集成用户中心 | ||
pwdLogin | 账号密码登录方法 | Function | 否 | 默认集成用户中心 | ||
getZhbQrcode | 获取郑好办二维码方法 | Function | loginType 为 zhb 时必要 | |||
getZhbUserInfo | 获取郑好办用户信息方法 | Function | loginType 为 zhb 时必要 | |||
success | 登录成功回调 | Function | 否 |