9:41
头像
头像
昵称
王小贱
会员ID
38472910复制
手机号
13812345678
生日
未设置
性别
保密
注销账号后,账户数据将不可恢复
修改头像
拍照
从相册选择
使用微信头像
修改昵称
0/20
选择生日
选择性别
保密
退出登录
退出后需重新登录,才能查看会员信息与积分、赏袋等数据。
注销账号
注销后,您的账户数据将不可恢复,且 3 个月内无法使用该手机号再次注册。请确认以下影响:
我已阅读并同意 《用户注销须知》
资料列表
1
头像
点击 → 底部浮窗「修改头像」:拍照(原型示意)/ 从相册选择(切换为本地备选图)/ 使用微信头像(切回微信头像图)。选择后即存 + toast,头像圆形缩略图同步更新
2
昵称
点击 → 底部浮窗输入框 + 「获取微信昵称」按钮(模拟微信授权,一键填入微信昵称)。保存校验非空、20 字内,即存 + toast
3
会员ID
只读,注册时系统自动生成的 8 位随机数;右侧「复制」按钮一键复制 + toast
4
手机号
只读,注册小程序时获取的手机号,完整展示(不脱敏),不可修改
5
生日
默认「未设置」(不填)。点击 → 底部浮窗年/月/日三列选择器 → 确定即存。生日仅可设置一次:设置后行置灰 + 锁图标,点击 toast「生日仅可设置一次」
6
性别
默认「保密」。点击 → 底部浮窗单选(保密/男/女)→ 确定即存。修改次数不限
账号操作
7
退出登录
点击 → 底部浮窗二次确认 → 确认后 toast「已退出登录」→ 跳转我的页游客模式(未登录态,?guest=1)
8
注销账号
点击 → 首次演示拦截:有 1 单未完结 → 居中弹窗「存在未完结订单,无法注销」(仅「知道了」);关闭后再点第二次 → 正常注销流程:底部浮窗列出积分/卡牌/赏袋资产(积分 15769 清零、卡牌 127 张销毁、赏袋 3 件作废)+ 提示「3 个月内无法再次注册」,勾选《用户注销须知》后「确认注销」才可点 → 确认后居中弹窗「注销成功」→ 点「确认」→ 我的页游客模式(未登录态演示)
📋 说明面板 / 开发交付文档 — 会员信息 v1.2
📌 功能概述

一句话

会员信息页 = 用户个人资料查看与编辑(头像/昵称/会员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 → 返回我的页✅ 已实现(未登录态原型示意)
🔄 版本更新日志