feat(passport): 重构短信登录页并提供手机号授权降级入口

- 修复购物车数据库缺失 spec_info 字段问题,新增迁移脚本
- 登录页处理手机号授权失败,按错误类型弹窗引导用户改用短信登录
- 登录页新增长期显示的「使用短信验证码登录」入口,提升用户降级体验
- 注册页同步改造,去除微信小程序环境下短信按钮隐藏问题
- 短信登录页整体 UI 重构,弃用 NutUI 组件,采用原生组件实现
- 短信登录页新增渐变背景、浮动光圈、圆形 logo、卡片输入区设计
- 实现手机号输入、验证码发送、倒计时及登录校验逻辑全覆盖
- 短信登录页新增返回微信快捷登录链接,避免用户被困登录流程
- 新增配套样式文件,实现多重动效及分阶段入场动画
- 保证类型检查和编译无误,增加设计稿 HTML 预览文件
This commit is contained in:
2026-07-15 18:55:12 +08:00
parent fad7c5f58e
commit b47ea6bd90
8 changed files with 891 additions and 57 deletions

View File

@@ -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'>