front/docs/H5客户中心设计方案.md

H5 客户中心设计方案

文档状态：产品设计（先评审，再开发）
编写日期：2026-07-25
关联页面：/assistant、/order/priceCheck、/order/myOrders、/user/profile
关联能力：微信注册/绑定（/wechat/*）、公开轨迹查询（/track/query）、营销体系（docs/客户裂变与营销体系设计方案.md）
关联规范：docs/前端页面设计规范.md（桌面中后台）；本文为 手机 H5 客户视角 专项，不照搬 PC 表格规范
目标读者：产品、前端、后端、运营

---

1　背景与目标

1.1 为什么要做

现有四个客户能力页均按 PC 中后台 设计：

路由	现状形态	手机端痛点
/assistant	AI 顾问对话壳	相对适合手机，但缺统一入口与底部导航
/order/priceCheck	多条件表单 + 宽表格报价	字段多、表格列多，一屏看不全
/order/myOrders	Handsontable + 十余个状态 Tab + 批量操作	操作台过重，客户只想「看状态 / 去支付 / 看轨迹」
/user/profile	多卡片网格	信息全但优先级不突出

客户在微信里打开系统时，屏幕窄、时间碎、注意力短。需要一个 底部四 Tab 的 H5 客户中心，把「查价 → 下单/支付 → 盯状态 → 找人问」串成一条手机可完成的闭环。

1.2 建设目标

1. 一入口四 Tab：AI顾问 / 查价格 / 查订单 / 我的
2. 客户语言优先：少运营术语，多「多少钱、到哪了、要不要付钱、出没出问题」
3. 一屏一件事：每页首屏只解决一个主问题，次要能力折叠或下钻
4. 复用业务能力：接口与权限尽量不变；信息架构与交互必须重做，禁止简单缩放 PC 页
5. 可渐进上线：先打通「查价 + 看单 + 问顾问」，再补充值/营销/完整下单

1.3 非目标（首版不做）

• 不做管理端 H5
• 不在手机上复刻全部仓库批量操作（预报、批量打印、列配置等）
• 不新建独立小程序（可先微信内 H5；后续再抽组件）
• 不改变订单状态机与计费公式

---

2　客户视角：他们真正关心什么

2.1 客户一天里的高频问题

按紧迫度排序：

1. 我这票货大概多少钱？有没有更划算/更稳的渠道？
2. 我的单现在什么状态？卡在哪？要不要付钱？
3. 货到哪了？（轨迹）
4. 出问题了找谁？能不能一句话说清楚？
5. 余额够不够？券能不能用？账号信息在哪改？

对应到四 Tab：

客户问题	落点 Tab	成功标准（客户感受）
多少钱 / 选哪条	查价格	30 秒内看到「推荐价 + 时效」，可一键去问 AI 或去下单
到哪了 / 要付钱吗	查订单	打开即看到「待我处理」与在途单，两步进轨迹
搞不懂 / 异常	AI顾问	带着运单上下文开口问，不用自己拼单号
钱 / 人 / 设置	我的	余额、充值、资料、客服入口一眼找得到

2.2 客户心智 vs 系统状态（关键映射）

PC「我的订单」有 10+ 业务状态，手机不能原样铺 Tab。建议映射为 客户可理解的 5 组：

客户分组（H5）	包含系统状态（示意）	客户文案
待我处理	pendingPayment、部分可操作草稿、需补资料的问题件	「等你付钱 / 等你确认」
仓库处理中	predeclared、received、pendingAllocation、pendingShip、pendingOnline	「仓里在弄」
运输中	shipping	「在路上」
已完成	deliverySuccess	「已签收」
异常/理赔	deliveryFailed、problematic、claimed	「出问题了」

draft / deleted：默认收入「更多筛选」，不强占首屏 Tab。
分组用于 导航与角标；详情页仍展示真实系统状态名，避免和客服对不上号。

2.3 核心旅程（手机）

flowchart LR
  A[打开客户中心] --> B{今天想干嘛}
  B -->|算运费| C[查价格]
  C -->|选中渠道| D[去下单 / 问顾问]
  B -->|看货在哪| E[查订单]
  E -->|待支付| F[确认支付]
  E -->|运输中| G[看轨迹]
  E -->|异常| H[问 AI / 联系客服]
  B -->|有疑问| I[AI顾问]
  B -->|充值/资料| J[我的]

设计原则：查价格与查订单是主战场；AI 是随身顾问；我的是账户后勤。

---

3　整体信息架构

3.1 壳层结构

┌─────────────────────────────┐
│  顶栏（可选：标题 / 语言）    │
├─────────────────────────────┤
│                             │
│     Tab 内容区（可滚动）      │
│                             │
├─────────────────────────────┤
│ AI顾问 │ 查价格 │ 查订单 │ 我的 │  ← 固定底栏
└─────────────────────────────┘

项	约定
路由壳	建议 /h5 或 /m 布局路由，子路由映射四页；底栏常驻
与 PC 关系	同业务 API；独立 H5 视图（views/h5/customer-center/*），不直接嵌 PC 大表格页
默认落地	已登录优先 查订单（状态刚需）；未登录引导登录/微信授权后再进
底栏高度	约 56px + 安全区；内容区 padding-bottom 避让
角标	「查订单」展示「待我处理」数量；其余 Tab 默认可无角标
语言	默认中文，支持中/英切换（复用现有 i18n + arco-locale）

3.2 底栏四入口定义

Tab	文案	对应能力	首屏一句话
AI顾问	AI顾问	/assistant 能力	「有问题直接问」
查价格	查价格	/order/priceCheck 能力	「先算一笔运费」
查订单	查订单	/order/myOrders 能力	「看看货到哪了」
我的	我的	/user/profile 能力	「余额与账号」

Tab 顺序建议（从左到右）：
AI顾问 · 查价格 · 查订单 · 我的

说明：中间两个是高频业务；顾问放左侧方便「带着上下文回来问」；「我的」固定最右符合手机习惯。

若运营希望强化转化，可将默认选中设为 查价格；日常使用仍建议默认 查订单。

3.3 页面关系（不是四个孤岛）

flowchart TB
  subgraph tabs [底部四 Tab]
    AI[AI顾问]
    PC[查价格]
    OD[查订单]
    ME[我的]
  end

  PC -->|「问顾问：为什么推荐这条」| AI
  PC -->|「按此渠道去下单」| CREATE[下单页/引导]
  OD -->|「问顾问」带运单上下文| AI
  OD -->|余额不足| ME
  ME -->|去充值| RECHARGE[充值]
  OD -->|公开轨迹兜底| TRACK[/track/query]

已有能力可复用：

• useAskAdvisor / openAskAdvisor：订单行 → AI 带运单上下文
• /track/query：轻量轨迹 H5（未登录也可查，作补充入口）
• 查价草稿 oms_price_check_order_draft：查价结果带到下单

---

4　分页面规划

4.1 查价格（客户最在意的「钱」）

客户目标

「告诉我：到某国、某重量，大概多少钱、多久到、推荐哪条。」

首屏结构（自上而下）

1. 极简条件区（必填只留 2～3 项）
   • 目的国家（快捷芯片：美/加/英/德… + 搜索选全部）
   • 实重（kg）
   • 尺寸：默认折叠一行「长×宽×高（选填，填了更准）」
2. 主按钮：查价格（全宽、主色）
3. 结果区（查完后占主视觉）
   • 顶部排序：推荐 / 低价 / 快时效（三段 Segmented）
   • 推荐卡（1 张置顶）：渠道名、应付价、时效、一句话推荐理由
   • 报价列表（卡片，非表格）：每张只露
     • 渠道/产品名
     • 应付金额（大字）
     • 时效
     • 计费重（小字）
     • 次要：费用明细抽屉、渠道说明
4. 更多条件（折叠）：运输方式、货物类型、仓库、邮编、优惠券

手机上要砍/藏的 PC 能力

PC 能力	H5 策略
宽表格多列	→ 卡片列表
渠道指导侧栏常驻	→ 点「说明」开半屏抽屉
复杂分页表格	→ 先展示 Top N（如 20），「加载更多」
完整费用拆行	→ 默认只显示应付；点开看会员折扣/券

主行动作（每张报价卡）

1. 去下单（主按钮）— 写入 oms_price_check_order_draft 并跳转 /h5/place-order
2. 问顾问（次按钮）— 把国家/重量/渠道/价格塞进 AI 上下文

空态与提示

• 未查询：插画/短文案「输入国家与重量，马上比价」
• 估价提示：保留 queryHint（缺尺寸等）用顶部黄条，可关闭
• 无结果：引导改重量/国家，或「问问 AI」

---

4.2 查订单（客户最在意的「状态」）

客户目标

「哪些单要我处理？货在路上吗？出问题了吗？」

首屏结构

1. 待办摘要条（有数据才显示）
   • 例：待支付 2 · 异常 1（可点筛选）
2. 搜索框
   • 运单号 / 客户单号 / 跟踪号，单一输入即可
3. 客户分组 Tab（横向滑动，最多 5～6 个）
   • 全部 · 待我处理 · 仓库中 · 运输中 · 已完成 · 异常
4. 订单卡片列表（替代 Handsontable）

单张订单卡片信息层级

[状态标签]                    应付 ¥xx / 已付
运单号  XXXXXXX          （可复制）
线路/渠道  ·  目的国
最新轨迹摘要（一行，没有则隐藏）
时间：下单/发货/签收 中最有意义的一个

[支付] [轨迹] [更多]

元素	规则
状态标签	用客户文案色；详情内展示系统状态全名
金额	pendingPayment 突出「待付」；已付显示实付或隐藏干扰
最新轨迹	列表接口若无摘要，可懒加载或不显示，详情再拉全量
主按钮	待支付 → 去支付；运输中 → 看轨迹；异常 → 问顾问
更多	详情、复制单号、拦截/取消等（按权限与状态，收入 ActionSheet）

详情（全屏页或高度 90% 的 Sheet）

建议 Tab：概要 · 轨迹 · 费用（不要一次塞 PC 抽屉全部字段）

• 概要：收件人摘要、重量、渠道、系统状态、仓库
• 轨迹：时间轴（复用 /track/query 视觉语言）
• 费用：应收/优惠/应付/支付状态

手机上明确不做（或极弱化）

• 列配置、批量勾选导出、批量创建轨迹、批量下游转发
• 仓库操作台式工具条
• 超多 HandleStatus 二级 Tab（可放入「更多筛选」）

员工/仓库若必须用完整能力，继续走 PC；H5 只服务 客户自助。

角标规则

• 底栏「查订单」角标 = 待支付数 + 异常待关注数（产品可配置是否含问题件）
• Tab「待我处理」显示数量

---

4.3 AI顾问（随身客服）

客户目标

「别让我翻帮助文档，直接问。」

首屏结构

• 对话区铺满（扣除顶栏 + 底栏）
• 顶部可展示 当前运单上下文条（从查订单跳入时）：运单号 + 状态 + 「清除」
• 快捷问题芯片（未带上下文时）：
  • 怎么查运费？
  • 待支付订单怎么付？
  • 轨迹多久更新？
  • 问题件怎么办？

与其他 Tab 的联动

来源	带入上下文
查订单 · 问顾问	orderId / 运单号 / 状态（已有 openAskAdvisor）
查价格 · 问顾问	国家、重量、尺寸、推荐渠道、报价
我的 · 联系顾问	无单号，纯咨询

约束

• 输入框避开底栏与 iOS 键盘（visualViewport / 安全区）
• 首版可复用 AiAdvisorShell，套进 H5 布局并做键盘适配即可

---

4.4 我的（账户后勤 + 注册/绑定融合）

客户目标

「钱还够吗？我是谁？没账号怎么注册？已有账号怎么绑微信？」

两种态

态	谁看到	首屏内容
访客态	未登录	欢迎文案 + 微信注册 / 绑定已有账号 + 账号密码登录入口
登录态	已登录客户	身份条 + 资产 + 服务列表（含退出）

与现有 /wechat/register、/wechat/bind 的关系

• OAuth 回调地址不变：微信公众号仍回调 /wechat/register、/wechat/bind（避免改 MP 白名单）。
• 入口收拢到「我的」：访客在 /h5/me 点按钮进入上述流程；成功后引导回 /h5/me 或去登录。
• 其它 Tab 未登录：统一跳到 /h5/me（而不是 PC 登录大页），降低手机跳出。

flowchart TD
  ME[/h5/me 访客] -->|微信注册| REG[/wechat/register OAuth]
  ME -->|绑定已有账号| BIND[/wechat/bind OAuth]
  ME -->|账号密码登录| LOGIN[/h5/login]
  REG -->|成功| ME2[/h5/me 或 /h5/login]
  BIND -->|成功| ME2
  LOGIN -->|登录成功| H5[/h5/orders]

登录态首屏结构（短页 + 列表入口）

1. 身份条：头像、名称、会员等级徽章、客户编号（可复制）
2. 资产条（两块并排）
   • 账户余额 → 点进充值
   • 可用优惠券数 / 积分（营销上线后显示；未上线可隐藏）
3. 服务列表（单元格）
   • 充值
   • 编辑资料 / 修改密码
   • 语言切换
   • 联系客服
   • 退出登录

原则

• 注册/绑定是「我的」的获客入口，不再作为孤立营销页理解
• 余额与待办强相关：支付失败深链「我的 → 充值」
• 不做 PC 多卡片仪表盘；手机用 身份 + 资产 + 列表 三段式

---

5　跨页关键流程（必须打通）

5.1 查价 → 决策

填国家+重量 → 出推荐卡 → 
  ├─ 去下单（有 H5 下单则进；否则引导 PC / 客服协助）
  └─ 问顾问（解释价差、时效、货物限制）

5.2 订单待支付 → 支付

查订单（待我处理）→ 卡片「去支付」→ 支付确认 
  → 成功：回到列表并刷新
  → 余额不足：跳转「我的-充值」，充值后可返回原单

5.3 运输中 → 轨迹

查订单 → 「看轨迹」→ 详情-轨迹 Tab
（无登录场景可降级 /track/query）

5.4 异常 → 顾问

异常卡片 → 「问顾问」→ AI 页预填运单与状态
（次要）提供「复制单号给人工客服」

---

6　视觉与交互（手机客户产品感）

对齐 PC 工作台的「问候 + 余额 + 情绪色卡片」，做成 轻量移动版；不整页照搬液态玻璃动画。
Token：src/views/h5/customer-center/styles/tokens.less（仅 /h5 壳）。

6.1 设计原则（客户视角）

1. 先看见钱与待办，再看见设置
2. 一屏一件事：Hero / 待办 / 快捷宫格分层，不把营销和改密同权
3. 情绪色可扫读：催办橙、应付红、品牌青绿、成功绿
4. 微信友好：少持续动画；主交互 2～3 个微动效即可

6.2 Design Token

Token	用途
--h5-bg / --h5-bg-hero	雾灰底 + 主色浅渐变顶带
--h5-surface	白卡片
--h5-radius 16 / --h5-radius-sm 12	卡片圆角
--h5-shadow	轻浮起阴影
--h5-warning / --h5-danger / --h5-success	待办 / 应付 / 完成

主色继续 var(--app-primary-color)，不另起品牌色。

6.3 卡片层级

层级	形态	典型位置
Hero	渐变头图 + 大数字 CTA	「我的」问候/余额
情绪卡	左边色条或 tone 底	待支付订单、待办条、推荐报价
内容卡	白底圆角轻阴影	普通订单、表单
工具列表	弱化字色	改密、退出

6.4 「我的」信息架构（P0 已落地）

Hero（问候 + 头像 + 会员标 + 语言）
 → 余额大卡（低余额变橙色）
 → 待办条（有才显示 → 查订单对应 Tab）
 → 快捷宫格：下单 / 券 / 邀请 / 佣金
 → 次要列表：资料 / 改密 / 退出

访客：品牌氛围 + 扫码主卡 + 注册/绑定主次按钮。

6.5 底栏

• 选中：主色小圆底 + 加粗文案（不仅改文字色）
• 查订单角标保留；有待办时可轻脉冲（仅角标/待办点）

6.6 交互

• 列表用 触底加载；破坏性操作二次确认
• 复制单号：点击即复制 + Toast
• 主按钮 :active 轻微缩放
• Hero 进入：短上升淡入（h5-enter）

6.7 美化波次

波次	内容	状态
P0	Token +「我的」Hero/余额/宫格 + 底栏选中态	✅
P1	订单卡情绪条 + 查价推荐卡	✅
P2	顾问上下文 tip + prefill；券/邀请/佣金视觉；空态	✅
P3	骨架屏、微动效、余额不足回流文案统一	✅

6.8 性能与包体

• H5 壳走轻量入口（参考 /wechat/*、/track/query）
• 查订单 禁止 HandsontablePro
• 查价格结果用普通列表；避免工作台级持续 blob 动画

---

7　登录与入口

7.1 推荐入口

入口	说明
微信公众号菜单 / 消息链接	直达 /h5（或约定域名）
扫码登录后的手机跳转	已绑定用户进入客户中心而非 PC 首页
PC 登录页提示	「手机访问请用微信打开客户中心」

7.2 鉴权

• 四 Tab 均需客户登录态（JWT / 现有 RBAC customer）
• 未登录：统一跳转客户登录；微信内优先走已有绑定/静默策略（与 docs/微信登录整合方案.md 衔接）
• /track/query 保持可公开，作为未登录查轨迹补充，不替代「查订单」Tab

7.3 与 PC 路由的关系

方案	说明	建议
A. 独立 /h5/*	手机专用路由 + 底栏布局	推荐，边界清晰
B. 同路由响应式改造	同一 priceCheck/myOrders 自适应	成本高、易拖垮 PC
C. User-Agent 自动切换组件	同 path 不同 view	可作优化，首版不必

首版建议 方案 A：

• /h5 → 重定向到 /h5/orders 或 /h5/price
• /h5/assistant · /h5/price · /h5/orders · /h5/me
• 底栏 router-link 对应上述四路径
• 业务 API 与 PC 共用

---

8　技术落地建议（供评审，非详细设计）

8.1 目录草案

src/views/h5/customer-center/
  layout.vue          # 底栏壳
  assistant/index.vue
  price/index.vue
  orders/index.vue
  orders/detail.vue
  me/index.vue
  components/
    OrderCard.vue
    QuoteCard.vue
    StatusTabs.vue
    AppTabBar.vue

8.2 接口复用

页面	主要复用
查价格	postOrderPriceCheck、shipping options、优惠券报价字段
查订单	postOrderList、getOrderStatusCounts、getOrderDetail、支付确认接口
轨迹	详情内轨迹接口；或公开 queryPublicTrackTimeline
我的	现有 profile / 余额 / 充值相关 API
AI	现有顾问组件与 openAskAdvisor

后端若能为列表增加「最新轨迹一句摘要」「待我处理聚合计数」，可明显减请求；非首版阻塞，前端可先聚合 pendingPayment + problematic。

8.3 状态分组实现

前端维护 H5_ORDER_STATUS_GROUPS 映射表（客户分组 → 系统 status 列表），请求时：

• 选中某一客户分组 → status in (...) 或多次 count 聚合
• 与 PC ORDER_STATUS_TABS 并存，互不影响

---

9　分期计划

一期（可用闭环，建议 1～2 周量级评估）

• H5 布局壳 + 四 Tab 路由（/h5/*）
• 查价格：精简表单 + 报价卡片列表 + 问顾问
• 查订单：客户分组 Tab + 订单卡 + 详情（概要/轨迹/费用）+ 待支付
• AI顾问：嵌入壳（复用 AiAdvisorShell）
• 我的：访客态融合微信注册/绑定；登录态身份、余额、改资料/改密、退出
• 独立 H5 账号密码登录（/h5/login，不跳 PC 登录页）
• H5 微信扫码登录：GET /wechat/mp/login-qrcode + 长按识别 + 轮询登录
• 独立 H5 充值（/h5/recharge，不跳 PC 充值页）
• 中英文与 /h5 SPA 回退（serve -s / Traefik）
• 键盘适配与运单上下文在顾问页的完整预填联调
• 手机完整下单（二期）：/h5/place-order 三步精简下单 + 查价「去下单」草稿深链

二期

• H5 精简下单（/h5/place-order）+ 查价结果写入 oms_price_check_order_draft 深链
• 营销：券包 /h5/coupons、邀请 /h5/invite、佣金 /h5/commission（「我的」入口）
• 支付失败/余额不足回流：订单列表/详情 → 确认弹窗 → /h5/recharge
• 待办推送（公众号模板消息：待支付、异常）

三期

• 更完整的订单操作（拦截等）按需放开
• 离线缓存最近查询条件 / 最近订单
• PWA 或小程序封装

---

10　验收标准（客户视角）

1. 查价格：只填国家+重量，可在一屏内看到推荐价与至少 1 个比价结果。
2. 查订单：进入后 3 秒内理解「有没有要我处理的单」；运输中订单 2 步内看到轨迹。
3. AI顾问：从订单点「问顾问」后，输入框上方能看到运单上下文。
4. 我的：余额与充值入口无需滚动过久即可发现。
5. 底栏：四 Tab 切换不丢登录态；内容不被底栏遮挡。
6. 不出现：手机上横向巨大表格、十余个状态 Tab 挤爆首屏、批量仓库工具条。

---

11　开放问题（评审时拍板）

#	问题	选项	建议
1	默认落地 Tab	查订单 / 查价格	查订单（刚需状态）
2	手机能否完整下单	一期仅查价；二期下单	二期已落地 /h5/place-order
3	异常是否进「待我处理」	是 / 否（仅待支付）	待支付必进；问题件进「异常」Tab，角标可合并
4	是否微信内强制竖屏 H5 壳	独立 /h5 vs 响应式	独立 /h5
5	AI 是否要登录	要 / 游客可问通用问题	与现网顾问策略对齐，建议 要登录
6	品牌名展示	顶栏显示公司名 / 仅 Tab	顶栏短名 +「客户中心」

---

12　总结

H5 客户中心不是把四个 PC 页塞进底栏，而是用客户的两条主线重组界面：

1. 钱：查价格（算清楚再行动）
2. 状态：查订单（待我处理 → 在途 → 轨迹 / 异常）

AI顾问 负责降低理解成本，我的 负责账户后勤。
先做「看得清价格、盯得住订单」，再扩展下单与营销，才能在手机上真正替客户省时间。

---

下一步：评审本文 §11 开放问题 → 出交互线框（四 Tab 首屏）→ 再拆前端任务与接口缺口清单。