/ PROTOTYPE v4.0 · 2026.06

水润天地 · 全端原型
面向高净值人群

微信小程序 · PC官网 · PC招商平台 · 后台管理
手机端官网 · 手机端招商平台
设计语言：深森林绿 #0B3D2C + 古铜金 #D4A843 + 暖象牙白

/ 02

微信小程序端

面向 C 端高净值用户 · 储值会员体系 + 产品购买 + AI 顾问 + 代理入驻

核心购物流程
会员中心
代理功能
内容与帮助
系统页
管理后端
◉
首页
全屏 Hero + 衬线标题 + 品牌叙事 + 储值 CTA + 产品横向滑动
1_MiniProgram/index.html
查看页面 →
◌
新手引导 / 启动页
首次启动引导页，展示品牌价值与核心功能
1_MiniProgram/onboarding.html
查看页面 →
⊕
登录页
微信授权登录 + 手机号登录双标签切换
1_MiniProgram/login.html
查看页面 →
▤
商城 / 商品列表
双产品分类 + 商品卡片列表 + 筛选排序
1_MiniProgram/shop.html
查看页面 →
◆
商品详情页
沉浸式产品展示 + 用户评价区 + 阶梯价 + 认证墙 + 10箱起售标签
1_MiniProgram/product-detail.html
查看页面 →
▦
储值购买
4档储值方案，清晰展示权益与优惠，深绿余额头
1_MiniProgram/store-buy.html
查看页面 →
✎
订单确认
地址卡 + 商品行 + 费用明细 + 储值抵扣开关 + 提交订单
1_MiniProgram/order-confirm.html
查看页面 →
◉
确认支付
订单摘要 + 订单明细 + 支付方式选择 + 倒计时 + 底部支付栏
1_MiniProgram/payment.html
查看页面 →
✔
支付结果页
支付成功/失败状态展示 + 订单详情入口 + 返回首页
1_MiniProgram/payment-result.html
查看页面 →
☰
订单中心
储值记录/订货记录双Tab + 筛选功能 + 空状态优化
1_MiniProgram/order-center.html
查看页面 →
☊
订单详情
状态头图 + 倒计时支付 + 超时自动切换已关闭状态
1_MiniProgram/order-detail.html
查看页面 →
⇆
兑换区
储值余额兑换商品，Tab切换产品，起兑量优雅提示，数量选择器
1_MiniProgram/exchange.html
查看页面 →
⌕
搜索页
搜索框 + 历史记录 + 热门推荐 + 空状态优化（SVG插画+引导按钮）
1_MiniProgram/search.html
查看页面 →
— 会员中心
☺
会员中心
VIP身份铭牌（4种身份独立配色）+ 余额/积分/余量 + 订单入口 + 等级说明
1_MiniProgram/mypage.html
查看页面 →
◈
会员等级说明
储值会员/普通会员/市级代理/省级代理 四档权益对比
1_MiniProgram/member-level.html
查看页面 →
◉
电子名片
深绿名片卡（金色边框头像 + 二维码）+ 4种身份配色 + 推广数据
1_MiniProgram/card.html
查看页面 →
▤
消费记录
储值消费明细列表 + 时间筛选 + 金额汇总
1_MiniProgram/consumption.html
查看页面 →
✔
储值详情 - 成功
储值成功状态页 + 到账金额 + 当前余额 + 完成按钮
1_MiniProgram/deposit-detail-success.html
查看页面 →
✕
储值详情 - 失败
储值失败状态页 + 失败原因 + 重试按钮
1_MiniProgram/deposit-detail-fail.html
查看页面 →
☎
地址管理
收货地址列表 + 新增/编辑/删除 + 默认地址设置
1_MiniProgram/address.html
查看页面 →
↩
退款 / 售后
退款申请流程 + 售后进度追踪 + 退款金额明细
1_MiniProgram/refund.html
查看页面 →
✉
消息中心
粘性Tab + 深绿AI推送Banner + 未读红点 + 消息列表 + 操作按钮
1_MiniProgram/messages.html
查看页面 →
☊
消息详情
消息完整内容展示 + 相关操作按钮
1_MiniProgram/message-detail.html
查看页面 →
⚙
设置页
账户安全 + 微信订阅管理入口 + 关于我们 + 退出登录
1_MiniProgram/settings.html
查看页面 →
🔔
微信订阅管理
6个订阅项开关（审核通知/付款提醒/发货通知/促销活动/健康知识/账户变动）
1_MiniProgram/subscribe-settings.html
查看页面 →
— 代理功能
▤
代理购买（小程序端）
暗色头部统计数据 + 市代/省代套餐卡 + 目标进度条 + 区域保护提示
1_MiniProgram/agent-buy.html
查看页面 →
◈
代理申请进度
4步进度条 + 当前状态卡片 + 撤回申请按钮 + 联系顾问入口
1_MiniProgram/agent-apply-progress.html
查看页面 →
▦
代理后台（小程序端）
代理数据概览 + 团队管理入口 + 佣金明细 + 订单管理
1_MiniProgram/agent-dashboard.html
查看页面 →
↑
代理晋升申请
当前等级 + 晋升进度条 + 条件核对（已达成/未完成）+ 补充信息表单
1_MiniProgram/agent-promotion.html
查看页面 →
◉
银行转账（线下支付）
对公账户信息展示 + 上传转账凭证 + 等待审核状态
1_MiniProgram/bank-transfer.html
查看页面 →
— 内容与帮助
◇
AI 健康顾问
AI欢迎语 + 智能选货推荐 + 对话气泡 + 快捷芯片 + 底部输入栏
1_MiniProgram/ai-chat.html
查看页面 →
◌
健康知识列表
今日推荐大卡片 + 分类横向滑动标签 + 文章卡片列表（缩略图+标签+时间）
1_MiniProgram/health-knowledge.html
查看页面 →
☊
健康文章详情
头图+标题+元信息 + 正文排版（引用块/小标题）+ 底部产品推荐 + 分享收藏
1_MiniProgram/health-article.html
查看页面 →
?
帮助中心
常见问题分类 + 搜索功能 + 在线客服入口 + 搜索无结果空状态
1_MiniProgram/help.html
查看页面 →
✎
意见反馈
问题类型选择 + 文字描述 + 图片上传 + 联系方式
1_MiniProgram/feedback.html
查看页面 →
✉
微信订阅消息模板设计
4种模板（审核通过/拒绝/付款提醒/佣金到账）+ 微信消息气泡真实预览 + 字段明细
1_MiniProgram/subscribe-msg-templates.html
查看页面 →
— 系统页
⚠
网络错误页
断网状态插画 + 重试按钮 + 返回首页入口
1_MiniProgram/network-error.html
查看页面 →
◎
关于我们（小程序端）
品牌简介 + 联系方式 + 用户协议 + 隐私政策入口
1_MiniProgram/about.html
查看页面 →
— 管理后端
⚙️
管理后端首页
数据概览 + 功能入口9宫格 + 快捷操作 + 最近操作记录
1_MiniProgram/admin.html
查看页面 →
💰
分润管理
分润总览3数字卡片 + 分润明细列表 + 提现管理（微信自动分账）
1_MiniProgram/profit-share.html
查看页面 →
📢
推广管理
推广链接生成 + UTM追踪数据 + 转化漏斗图 + 渠道效果对比
1_MiniProgram/promotion.html
查看页面 →
📊
数据分析
GMV总览 + 销售趋势 + 用户增长 + 代理业绩排名 + 报表导出
1_MiniProgram/analytics.html
查看页面 →
🚚
发货管理
待发货订单列表 + 发货表单（快递信息+备注+拍照）+ 发货记录
1_MiniProgram/shipping.html
查看页面 →