一句话
会员信息页 = 用户个人资料查看与编辑(头像/昵称/会员ID/手机号/生日/性别),并提供退出登录与注销账号两个账号操作。
页面说明
用户从「我的」页顶部点击会员箭头进入本页。资料项即改即存:头像/昵称/生日/性别点击后弹对应浮窗,修改确认后立即保存(localStorage wms_member),返回再进数据保持。会员ID 为注册时系统自动生成的 8 位随机数(只读可复制),手机号为注册小程序时获取(完整展示、不可修改)。生日默认不填,设置后仅可修改一次。退出登录二次确认;注销账号受未完结订单限制,有积分/赏袋时提示清零/作废但不拦截。
| 模块 | 内容 | 数据来源 |
|---|---|---|
| 顶部导航 | 粉色头部:状态栏 + 返回按钮 + 标题「会员信息」(绝对居中)+ 微信胶囊 | 固定 |
| 资料列表 | 白卡 6 行:头像(圆形缩略图 + 箭头)/ 昵称(值 + 箭头)/ 会员ID(8 位数字 + 复制按钮,只读)/ 手机号(完整展示,只读)/ 生日(未设置或日期 + 箭头,已设置置灰 + 锁)/ 性别(值 + 箭头) | localStorage wms_member + 注册信息 mock |
| 账号操作区 | 「退出登录」「注销账号」两个红字按钮(白底红描边全宽)+ 底部灰色提示文案 | 固定 |
| 修改头像浮窗 | 底部浮窗:拍照 / 从相册选择 / 使用微信头像 + 取消 | 固定 + 本地头像图 |
| 修改昵称浮窗 | 底部浮窗:输入框(20 字上限)+ 绿色「获取微信昵称」按钮 + 取消/保存 | 表单输入 |
| 生日选择浮窗 | 底部浮窗:年/月/日三列选择器(1960-2026)+ 取消/确定 | 内置日期数据 |
| 性别选择浮窗 | 底部浮窗:保密/男/女 单选 + 取消/确定 | 固定 |
| 退出登录确认 | 底部浮窗二次确认 | 固定 |
| 注销账号确认 | 底部浮窗:影响说明 + 积分/赏袋红色警示(有则显示)+《用户注销须知》勾选 + 取消/确认注销(未勾选置灰) | 固定 + 账户数据 mock |
| 居中弹窗 | 注销拦截提示(未完结订单)/ 注销成功反馈 | 按场景 |
① 入口:「我的」页顶部点击会员箭头进入会员信息页(我的页 v2.7 起);② 头像:可自定义,支持拍照(调起相机)、从相册选择、使用微信头像三种方式,选择后立即生效;③ 昵称:可自定义,支持一键获取微信昵称(微信头像昵称填写能力),20 字以内;④ 会员ID:注册后系统自动生成的 8 位随机数,只读、可复制;⑤ 手机号:注册小程序时获取的手机号,完整展示(不脱敏),只读不可修改;⑥ 生日:默认不填(「未设置」),用户自行设置,仅可设置一次(设置后不可再修改);⑦ 性别:保密/男/女 三选一,默认保密,可随时修改;⑧ 退出登录:二次确认后退出,跳转「我的」页游客模式(未登录态);⑨ 注销账号:存在未完结订单时禁止注销(拦截提示);无未完结订单但账户有积分/卡牌/赏袋时,注销确认中提示积分清零、卡牌销毁、赏袋作废(不拦截,用户确认后仍可注销);**注销后 3 个月内无法使用该手机号再次注册(冻结期)**;注销前需勾选同意《用户注销须知》;注销成功后跳转「我的」页游客模式;⑩ 资料修改即改即存(无保存按钮),修改后 toast 反馈,数据本地持久化。
| 操作 | 页面行为 |
|---|---|
| 点头像行 | 弹底部浮窗「修改头像」:拍照 → toast「原型示意:调起相机拍照」;从相册选择 → 头像切换为本地备选图 + toast「已更新头像」;使用微信头像 → 头像切回微信头像图 + toast「已使用微信头像」;即改即存 |
| 点昵称行 | 弹底部浮窗:输入框预填当前昵称;点「获取微信昵称」→ 模拟微信授权填入微信昵称 + toast「已获取微信昵称」;保存 → 校验非空 + 20 字内 → 即存 + toast「昵称已更新」 |
| 点会员ID「复制」 | 复制 8 位会员ID 到剪贴板 + toast「会员ID已复制」 |
| 点生日行 | 未设置:弹年月日三列选择器,确定后即存 + toast「生日已设置」;已设置:行置灰 + 锁图标,点击 toast「生日仅可设置一次」 |
| 点性别行 | 弹底部浮窗单选(保密/男/女),当前值高亮;确定后即存 + toast「性别已更新」 |
| 点退出登录 | 弹底部浮窗二次确认;确认 → toast「已退出登录」→ 跳转「我的」页游客模式(?guest=1) |
| 点注销账号 | 首次点击:演示拦截 → 居中弹窗「存在未完结订单,无法注销」+ 1 单未完结说明,「知道了」关闭;再点一次:正常注销流程 → 底部浮窗注销确认,列出积分/卡牌/赏袋资产,勾选《用户注销须知》后「确认注销」可点 → 确认 → 居中弹窗「注销成功」→ 返回「我的」页 |
| 返回 | 回「我的」页(history 回退) |
会员ID:注册时系统自动生成的 8 位随机数字(数字可含前导 0,如 38472910),全站唯一、终身不变、只读;手机号:注册小程序时微信授权获取的手机号,完整展示不脱敏,不可修改;生日:格式「YYYY-MM-DD」,默认空(未设置),设置后锁定不可改(生日字段 + 设置标记 birthdaySet);性别:枚举「保密/男/女」,默认保密;头像:图片文件(默认微信头像,可切换相册图),本地持久化;昵称:1-20 字。存储:localStorage key = wms_member(JSON:nickname/avatar/birthday/gender)。注销冻结期:注销后该手机号 3 个月内无法再次注册(注销时记录手机号 + 注销时间,注册接口校验 90 天冻结期)。注销演示 mock:首次点击拦截(cancelClickCount 计数,首次展示 1 单未完结,第二次起正常注销流程)、积分余额(MOCK_POINTS=15769)、卡牌张数(MOCK_CARDS=127)、赏袋件数(MOCK_POUCH=3)。
| 页面 | 按钮/操作 | 场景 | 提示 |
|---|---|---|---|
| 会员信息 | 保存昵称 | 昵称为空 | toast「请输入昵称」 |
| 会员信息 | 保存昵称 | 昵称超过 20 字 | toast「昵称最多 20 个字」 |
| 会员信息 | 生日行 | 生日已设置过 | toast「生日仅可设置一次」 |
| 会员信息 | 注销账号 | 首次点击(演示拦截:有 1 单未完结) | 居中弹窗「存在未完结订单,无法注销」+ 订单数说明,仅「知道了」 |
| 会员信息 | 确认注销 | 未勾选《用户注销须知》 | 「确认注销」按钮置灰不可点 |
| 状态 | 说明 | 完成情况 |
|---|---|---|
| 默认 | 生日未设置(显示「未设置」灰字)、性别保密、微信头像、昵称王小贱 | ✅ 已实现(预置 mock) |
| 生日已设置 | 显示日期,行置灰 + 锁图标,点击提示仅可设置一次 | ✅ 已实现(设置一次后演示) |
| 头像自定义 | 相册选择切换备选图、微信头像切回,圆形缩略图同步 | ✅ 已实现(本地两张图 mock) |
| 注销拦截 | 首次点击:居中弹窗拦截(1 单未完结)→ 关闭后再点走正常流程 | ✅ 已实现(cancelClickCount 计数演示) |
| 注销通过 | 无未完结订单:注销确认浮窗 + 勾选须知 + 成功反馈 | ✅ 已实现(默认演示链路) |
| 退出登录 | 二次确认 → toast → 返回我的页 | ✅ 已实现(未登录态原型示意) |