feat(passport): 重构短信登录页并提供手机号授权降级入口
- 修复购物车数据库缺失 spec_info 字段问题,新增迁移脚本 - 登录页处理手机号授权失败,按错误类型弹窗引导用户改用短信登录 - 登录页新增长期显示的「使用短信验证码登录」入口,提升用户降级体验 - 注册页同步改造,去除微信小程序环境下短信按钮隐藏问题 - 短信登录页整体 UI 重构,弃用 NutUI 组件,采用原生组件实现 - 短信登录页新增渐变背景、浮动光圈、圆形 logo、卡片输入区设计 - 实现手机号输入、验证码发送、倒计时及登录校验逻辑全覆盖 - 短信登录页新增返回微信快捷登录链接,避免用户被困登录流程 - 新增配套样式文件,实现多重动效及分阶段入场动画 - 保证类型检查和编译无误,增加设计稿 HTML 预览文件
This commit is contained in:
@@ -158,6 +158,44 @@ const Login = () => {
|
||||
await Taro.redirectTo({ url: redirectUrl })
|
||||
}
|
||||
|
||||
/** 跳转到短信验证码登录(降级方案) */
|
||||
const goSmsLogin = () => {
|
||||
const params: Record<string, string> = {}
|
||||
if (redirectUrl) params.redirect = redirectUrl
|
||||
// 透传邀请参数,避免从登录页切到短信登录时丢失 inviter
|
||||
const inviteParams = parseInviteParams({ query: router?.params })
|
||||
if (inviteParams?.inviter) params.inviter = inviteParams.inviter
|
||||
if (inviteParams?.source) params.source = inviteParams.source
|
||||
if (inviteParams?.t) params.t = inviteParams.t
|
||||
|
||||
const qs = Object.entries(params)
|
||||
.map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(String(v))}`)
|
||||
.join('&')
|
||||
Taro.navigateTo({ url: `/passport/sms-login${qs ? `?${qs}` : ''}` })
|
||||
}
|
||||
|
||||
/** 手机号授权失败时弹窗引导走短信登录(区分原因) */
|
||||
const showPhoneAuthFailedModal = (errMsg?: string) => {
|
||||
let content = '请尝试使用短信验证码登录'
|
||||
if (errMsg?.includes('user deny')) {
|
||||
content = '您已取消微信手机号授权,可改用短信验证码登录'
|
||||
} else if (errMsg?.includes('privacy')) {
|
||||
content = '微信未授权获取手机号,可改用短信验证码登录'
|
||||
} else if (errMsg?.includes('no permission')) {
|
||||
content = '小程序暂未获得手机号授权,可改用短信验证码登录'
|
||||
}
|
||||
Taro.showModal({
|
||||
title: '未获取到手机号',
|
||||
content,
|
||||
confirmText: '短信登录',
|
||||
cancelText: '我知道了',
|
||||
confirmColor: '#07c160',
|
||||
success: (res) => {
|
||||
if (res.confirm) goSmsLogin()
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
/** 手机号快捷登录 */
|
||||
const handleGetPhoneNumber = async ({ detail }: GetPhoneNumberEvent) => {
|
||||
if (!isAgree) {
|
||||
@@ -168,7 +206,7 @@ const Login = () => {
|
||||
|
||||
const { code: phoneCode, errMsg } = detail || {}
|
||||
if (!phoneCode || (errMsg && errMsg.includes('fail'))) {
|
||||
Taro.showToast({ title: '未授权手机号', icon: 'none' })
|
||||
showPhoneAuthFailedModal(errMsg)
|
||||
return
|
||||
}
|
||||
|
||||
@@ -282,8 +320,17 @@ const Login = () => {
|
||||
手机号快捷登录
|
||||
</Button>
|
||||
|
||||
<View className='login-methods__tip text-gray-200'>
|
||||
<Text>点击上方按钮,快速登录</Text>
|
||||
{/*<View className='login-methods__tip text-gray-200'>*/}
|
||||
{/* <Text>点击上方按钮,快速登录</Text>*/}
|
||||
{/*</View>*/}
|
||||
|
||||
<View className='login-methods__alt'>
|
||||
<Text
|
||||
className='login-methods__alt-link'
|
||||
onClick={() => goSmsLogin()}
|
||||
>
|
||||
使用短信验证码登录
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<View className='login-methods__divider'>
|
||||
|
||||
Reference in New Issue
Block a user