zzh
abfca7a21a
Ship customer portal and marketing pages, user edit drawer with employee archive, IDE employee numbers, channel config refactor, and related nginx/route updates. Co-authored-by: Cursor <cursoragent@cursor.com>
606 lines
23 KiB
Markdown
606 lines
23 KiB
Markdown
# 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 客户一天里的高频问题
|
||
|
||
按紧迫度排序：
|
||
|
||
```text
|
||
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 核心旅程（手机）
|
||
|
||
```mermaid
|
||
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 壳层结构
|
||
|
||
```text
|
||
┌─────────────────────────────┐
|
||
│ 顶栏（可选：标题 / 语言） │
|
||
├─────────────────────────────┤
|
||
│ │
|
||
│ 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 页面关系（不是四个孤岛）
|
||
|
||
```mermaid
|
||
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）
|
||
|
||
#### 单张订单卡片信息层级
|
||
|
||
```text
|
||
[状态标签] 应付 ¥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 登录大页），降低手机跳出。
|
||
|
||
```mermaid
|
||
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 查价 → 决策
|
||
|
||
```text
|
||
填国家+重量 → 出推荐卡 →
|
||
├─ 去下单（有 H5 下单则进；否则引导 PC / 客服协助）
|
||
└─ 问顾问（解释价差、时效、货物限制）
|
||
```
|
||
|
||
### 5.2 订单待支付 → 支付
|
||
|
||
```text
|
||
查订单（待我处理）→ 卡片「去支付」→ 支付确认
|
||
→ 成功：回到列表并刷新
|
||
→ 余额不足：跳转「我的-充值」，充值后可返回原单
|
||
```
|
||
|
||
### 5.3 运输中 → 轨迹
|
||
|
||
```text
|
||
查订单 → 「看轨迹」→ 详情-轨迹 Tab
|
||
（无登录场景可降级 /track/query）
|
||
```
|
||
|
||
### 5.4 异常 → 顾问
|
||
|
||
```text
|
||
异常卡片 → 「问顾问」→ 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 已落地）
|
||
|
||
```text
|
||
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 目录草案
|
||
|
||
```text
|
||
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 周量级评估）
|
||
|
||
- [x] H5 布局壳 + 四 Tab 路由（`/h5/*`）
|
||
- [x] 查价格：精简表单 + 报价卡片列表 + 问顾问
|
||
- [x] 查订单：客户分组 Tab + 订单卡 + 详情（概要/轨迹/费用）+ 待支付
|
||
- [x] AI顾问：嵌入壳（复用 AiAdvisorShell）
|
||
- [x] 我的：访客态融合微信注册/绑定；登录态身份、余额、改资料/改密、退出
|
||
- [x] 独立 H5 账号密码登录（`/h5/login`，不跳 PC 登录页）
|
||
- [x] H5 微信扫码登录：`GET /wechat/mp/login-qrcode` + 长按识别 + 轮询登录
|
||
- [x] 独立 H5 充值（`/h5/recharge`，不跳 PC 充值页）
|
||
- [x] 中英文与 nginx `/h5` SPA 回退
|
||
- [ ] 键盘适配与运单上下文在顾问页的完整预填联调
|
||
- [x] 手机完整下单（二期）：`/h5/place-order` 三步精简下单 + 查价「去下单」草稿深链
|
||
|
||
### 二期
|
||
|
||
- [x] H5 精简下单（`/h5/place-order`）+ 查价结果写入 `oms_price_check_order_draft` 深链
|
||
- [x] 营销：券包 `/h5/coupons`、邀请 `/h5/invite`、佣金 `/h5/commission`（「我的」入口）
|
||
- [x] 支付失败/余额不足回流：订单列表/详情 → 确认弹窗 → `/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 首屏）→ 再拆前端任务与接口缺口清单。
|