做会员中心页
要给网站做会员中心页面,告诉 AI 想要哪些模块、什么风格,它帮你把等级体系、登录方式这些细节定好,不用自己写代码也能搭出来。
✨ 先看成品红线处是容易错、也是你可能要改的地方
项目名称：＿＿＿
站点类型：电商零售
提交方（公司/团队）：＿＿＿
对接人：＿＿＿ 联系电话：＿＿＿
交付形态：以 React/Next.js 实现，适配 都要(响应式)
视觉基调：简约卡片式
一、页面定位
会员中心为登录态下的个人主页，是全站唯一的「我的一切」入口。信息优先级自上而下为：我是谁 → 我的等级和权益 → 我的待办（待付款、待收货、待评价）→ 我的资产 → 我的设置。未登录进入本页时展示引导登录态，不得白屏。
二、顶部会员卡区（吸顶，不随内容滚动消失）
1. 头像：2MB 以内，jpg/png/webp，前端裁剪为 1:1 后上传；未上传时使用默认占位图，不用姓名首字母以外的随机图案。
2. 昵称与账号：账号手机号展示规则为 手机号中间四位以 * 替换，点击「查看」需二次验证。
3. 等级标识：采用 普通/VIP两级；等级图标与当前进度条同排展示，进度条需给出「距下一级还差 X」的明确文案。
4. 右上角固定两个入口：设置、消息（消息带未读红点，数字上限显示 99+）。
三、模块清单与交互要点
— 个人资料：昵称、头像、性别、生日可改；生日一年内只允许修改一次。
— 我的订单：顶部状态页签为 全部/待付款/待发货/待收货/待评价；列表分页 每页 10 条，下拉加载更多；每条订单只展示首个商品缩略图加「等 N 件」，主按钮不超过两个。
— 我的收藏/关注：支持批量取消；商品失效需保留占位并标注「已下架」，不得静默消失。
— 积分与成长值：区分「可用积分」与「成长值」两个数字，前者可花、后者只涨；提供明细流水（收入/支出分页）。有效期规则：当年获得的积分于次年 12 月 31 日统一清零，到期前 30 天站内提醒。
— 优惠券钱包：分 未使用/已使用/已过期 三个页签；7 天内到期的券置顶并标黄；每张券必须同屏显示门槛、适用范围、有效期三项。
— 会员等级与权益：以权益对照表展示各等级差异，当前等级列高亮；未达成的权益置灰但可见，用于激励升级。等级降级规则：等级有效期内不降级，跨年度按上一年度成长值重算。
— 消息通知：按 交易物流/优惠活动/系统公告 三类分组，支持一键全部已读。
— 地址管理：最多保存 20 条；支持设为默认、省市区三级联动、粘贴整段地址自动拆分；删除需二次确认。
四、登录与身份
1. 主登录方式：手机号验证码；备用登录方式：＿＿＿。
2. 登录态策略：30 天免登录，敏感操作前二次校验。
3. 修改手机号、修改支付相关信息、兑换积分、提现类操作，一律走二次身份校验。
4. 退出登录后清空本地缓存的用户态数据，返回首页而非停留在本页。
五、接口与数据约定
1. 接口约定：RESTful + JSON，统一返回 code/message/data 三段结构。
2. 会员卡区、待办数字、资产数字三部分建议合并为一个聚合接口返回，避免首屏多次请求造成数字跳动。
3. 所有列表接口需支持空态返回，前端为每个模块提供独立空态图文与一个引导按钮。
4. 登录态失效统一由拦截器处理，弹出登录后回到原页面原位置。
六、验收标准
1. 首屏在 4G 网络下 2 秒内出现会员卡区骨架屏，无内容跳动。
2. 全部模块具备加载中、空态、失败重试三种状态。
3. 关键操作（删除地址、取消订单、兑换积分）均有二次确认。
4. 在 都要(响应式) 环境下逐页走查，不出现横向滚动条与文字截断。
七、补充说明
无
提交方（签章）：＿＿＿ 承接方（签章）：＿＿＿
关键项先核对，正文立刻跟着变
另外 13 项已按最常见的情况写进去了，要改点这里
主登录方式
技术栈
要积分/成长值
要优惠券钱包
要地址管理
视觉基调会员中心是高频回访页，卡片式信息密度最稳；深色只在有明确付费等级差时才有说服力
手机号展示规则个人资料页明文展示手机号是最常见的合规扣分点，脱敏成本几乎为零
头像上传限制不限制尺寸会让用户上传原图，列表页首屏直接被拖慢；裁剪必须放在前端
订单列表分页订单是会员中心最重的接口，一次性拉全量在老账号上会直接超时
积分有效期不写有效期的积分是无限期负债；不写到期提醒的清零一定会引来投诉
等级降级规则只升不降的体系三年后全站都是最高级，权益成本收不回来
登录态有效期改地址、改手机号、兑换积分必须走二次校验，否则一次会话泄露就是全账号失守
接口约定先约定错误码结构，前端才能统一处理登录过期跳转，否则每个模块各写一套
按完整表单另外生成一份上面改不动、或者情况完全不同，在这儿把该说的都说清楚
❓ 常见问题
关于这件事怎么办做会员中心页需要准备什么？
不用先准备什么——打开就是一份写好的做会员中心页，可以直接用。里面这几项是你可能要改的：你的身份、所在行业（选填）、什么网站的会员中心、会员中心要有哪些模块、有会员等级体系吗、登录方式、视觉风格、技术栈等 13 项，点一下就换一个说法，正文立刻跟着变，不花钱也不用注册。改完直接导出 Word、PDF 或 Markdown。点选改不了的（比如想加一句话、语气再正式点），直接用大白话说出来，会按你的要求重做一份。
能拿到什么成果？
交付形式是代码/应用，平台直接做好给你。在GPT中文网（www.gpt.com.cn）打开这一页就能看到写好的成品，改完可以导出 Word、PDF 或 Markdown 文件。文字类成果免费，免注册即可用。
什么情况下需要做会员中心页？
要给网站做会员中心页面,等级体系、登录方式、模块怎么摆一堆细节要定,没写过代码的自己搭不出来。遇到这种情况，打开这一页就有一份现成的，照着改两处就能用，不用自己从头写、也不用会用 AI。
适合谁用？
有这个需要的普通人。不需要 AI 使用经验，也不用学怎么提问——成品已经写好了，看哪儿不合适就改哪儿。