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

@@ -199,3 +199,47 @@
- 历史数据清理:提供 `sql/shop_cart_merge_duplicates.sql`,按 (user_id,goods_id,sku_id) 分组合并 cart_num 并删除重复行sku_id 可能为 NULL`<=>` null-safe 匹配);执行前先备份
- 编译验证Maven compile 成功
- 后端需重启服务才生效
## 购物车加购报 spec_info 字段缺失
- 现象:添加购物车时报 `Unknown column 'spec_info' in 'field list'`
- 原因:后端实体 `ShopCart.java` 定义了 `specInfo` 字段(存储"颜色:红色|尺寸:L"这类规格信息),但数据库表 `shop_cart` 未建 `spec_info` 列;`ShopCartParam``OrderBusinessService` 均在用该字段,属设计需保留
- 修复:新建迁移脚本 `/Users/gxwebsoft/JAVA/guilixu-java/sql/shop_cart_add_spec_info.sql``ALTER TABLE shop_cart ADD COLUMN spec_info VARCHAR(500) NULL ... AFTER spec`,需在数据库执行
## 修复登录页「未授权手机号」无降级入口
- 现象:用户反复反馈"又又又登录不了了",截图显示点击「手机号快捷登录」按钮后 toast 弹「未授权手机号」,用户被困在登录页
- 根因:`src/passport/login.tsx` 第 162-173 行 `onGetPhoneNumber` 回调里 `detail.code` 为 undefined用户拒绝授权errMsg 含 `user deny`/`fail`)时只 toast 了一句生硬文案,没有任何引导。但项目里其实有 `/passport/sms-login` 短信登录页(且在 `app.config.ts` 路由表里),`login.tsx` 却完全没暴露这个入口。`register.tsx` 同样有此问题,且其 weapp 环境下隐藏了短信按钮(原 `{!isWeapp && ...}` 判断)
- 修复2 个文件 + 1 个 scss
1. `src/passport/login.tsx`
- 新增 `goSmsLogin()` 函数:透传 `redirect` + 邀请参数(`inviter`/`source`/`t`)跳 `/passport/sms-login`
- 新增 `showPhoneAuthFailedModal(errMsg)`:按 errMsg 区分场景弹窗引导
- `user deny` → "您已取消微信手机号授权,可改用短信验证码登录"
- `privacy` → "微信未授权获取手机号,可改用短信验证码登录"
- `no permission` → "小程序暂未获得手机号授权,可改用短信验证码登录"
- 其他 → 通用"请尝试使用短信验证码登录"
- 弹窗带"短信登录"按钮自动跳 sms-login"我知道了"关闭
- 失败分支从 `Taro.showToast` 改为 `showPhoneAuthFailedModal(errMsg)`
- 主登录按钮下方新增长期可见的「使用短信验证码登录」链接(仿 register.tsx 的 goSmsLogin
2. `src/passport/login.scss`
- 新增 `.login-methods__alt` / `.login-methods__alt-link` 样式(白色下划线小字,居中)
3. `src/passport/register.tsx`
- 同步加 `showPhoneAuthFailedModal(errMsg)` 弹窗引导
- 去掉 `{!isWeapp && <Button>短信验证码注册/登录</Button>}` 包裹,让 weapp 下也始终显示短信按钮作为降级入口
- 类型检查:`npx tsc --noEmit` 无报错
- 业务规则:项目当前仅信任微信一键登录作为主路径,短信登录一直是兜底通道。后续如发现用户量大,可考虑直接在登录页主流程就两个按钮并排(不再让微信登录独占)
## sms-login 页面 UI 重构
- 原状:截图显示基本是裸的——只看到两个孤零零的 placeholder 文字发送验证码按钮和登录按钮都看不见。NutUI 的 `Input` + `Button` 在 Taro 小程序上经常渲染不出边框/背景,外层 `flex justify-between` 也没把验证码按钮挤出来
- 改造2 个文件):
1. `src/passport/sms-login.tsx` — 弃用 NutUI 改用 Taro 原生 `View/Text/Input`,重做整页布局
- 渐变背景 + 浮动光圈(和 login.tsx 同一套色系 `#667eea → #764ba2`
- 顶部圆形 logo140rpx 白底圆角 + 阴影)+ 标题 + 副标题
- 白色卡片输入区(圆角 28rpx + 阴影):手机号(📞)+ 灰线分隔 + 验证码(🔐 + 绿色胶囊「获取验证码」按钮)
- 绿色渐变登录大按钮(圆角 50rpx + 阴影 + 字间距 4rpx
- 「← 返回微信快捷登录」白色下划线链接(一键 navigateBack 回到 login.tsx避免用户被困
- 底部协议 + 服务协议/隐私政策超链接
- 业务逻辑state、60s 倒计时、handleSendCode/handleLogin 校验、redirect 跳转、邀请参数透传)全部保留
2. `src/passport/sms-login.scss`(新文件)— 配套样式渐变背景、浮动光圈动画gradientMove + float、卡片毛玻璃、按钮 hover 效果scale 0.98、分阶段入场动画slideDown / slideUp / fadeIn
- 类型检查:`npx tsc --noEmit` 无报错(项目原本的 `@tarojs/taro` 类型错误与本次无关)
- 编译验证:`npx taro build --type weapp` 14.89s 成功
- 设计稿预览:`.workbuddy/sms-login-preview.html`(按 375×812 真机尺寸渲染的 mockup可直接浏览器打开看
- 业务规则login/register/sms-login 三个页面已统一视觉风格(同一套渐变 + 圆形 logo + 大字标题 + 白色卡片),后续新增 passport 类页面照搬这一套即可