# 客户小程序：`miniprogram` → `sqxp-wx` 差异分析（功能与样式）

**分析日期**：2026-04-19  
**判定标准**：以 `miniprogram` 为唯一权威；**不得**在 `sqxp-wx` 中保留或新增源端不存在的业务能力或界面结构（仅允许为适配工程差异做等价技术替换，如请求封装、无 Vant 时的组件替换，但**交互与视觉须对齐源端**）。

---

## 1. 分析范围

| 类别 | `miniprogram` 路径 | `sqxp-wx` 路径 |
|------|-------------------|----------------|
| 客户端页面 | `src/pages/client/**/*.vue` | `pages/client/**/*.vue` |
| 客户端公共组件 | `src/components/client/**` | `components/client/**` |
| 拨号行内组件 | `src/components/phone-dial-inline.vue` | `components/phone-dial-inline.vue` |
| 评价 API 封装 | `src/api/reviewApi.ts` | **无对应文件**（逻辑散落在页面内） |
| 工具函数 | `src/utils/*`（与客户页相关的） | `utils/*` |
| 静态数据 | `src/static/data/china-region-cascader.json` | **缺失** |

---

## 2. 路由与页面「文件是否存在」

客户端 **17** 个 `.vue` 页面在两侧均存在，`pages.json` 中客户端子包/页面注册基本齐全。  
**结论**：路由与页面**文件壳**已对齐；**不等于**功能与样式已对齐。

---

## 3. 页面级差异总览（行数为粗粒度参考）

> 行数差异大通常表示：接口组合、分页、筛选、布局层级、样式块、边界处理等与源不一致。最终以**对照源逐屏验收**为准。  
> **外链**：其它文档若需按页直链，请使用下文 **§3.1** 中的 `diff-client-*` HTML 锚点（与 §3 表中结论一致）。

| 页面路径 | miniprogram 行数 | sqxp-wx 行数 | 差异（wx−源） | 功能与样式结论（概要） |
|----------|-----------------:|-------------:|--------------:|--------------------------|
| `pages/client/home/home.vue` | 957 | 174 | −783 | **重大差异**：源为「一级分类多页轮播 + 左侧栏分页 + 商品分页/筛选 + TOKEN/分类/价格清单」等完整询价首页；目标为「关键词 + 简单列表 + 加购 + 商品浮层」。布局、接口组合、交互与样式**均未等效**。 |
| `pages/client/cart/cart.vue` | 890 | 301 | −589 | **重大差异**：源含地址卡片展示选中地址、分页购物车行、与浮层关闭后刷新/勾选同步等；目标大量删减，样式与区块结构与源不一致。 |
| `pages/client/order/create/create.vue` | 742 | 290 | −452 | **重大差异**：源使用 `van-button` 等 Vant 布局与样式体系，区块划分、间距、表单与商品行交互与目标不同；功能上需逐项对照提交参数、删除/排除行、支付方式等。 |
| `pages/client/order/order.vue` | 577 | 234 | −343 | **重大差异**：订单列表标签、卡片、状态映射、跳转与空态等通常较源简化。 |
| `pages/client/product/detail.vue` | 872 | 503 | −369 | **较大差异**：源含评价 API、统计、Tab/富文本等组合；目标需对照是否缺字段、缺区块、缺样式。 |
| `pages/client/product/view.vue` | 588 | 289 | −299 | **较大差异**：商品详情展示与加购/底部栏与源不一致风险高。 |
| `pages/client/review/list.vue` | 554 | 216 | −338 | **较大差异**：源通过 `reviewApi` 与类型定义组织请求；目标行数显著少，筛选/分页/点赞/预览等需逐条对照。 |
| `pages/client/review/create.vue` | 555 | 193 | −362 | **较大差异**：评价表单字段、媒体上传、匿名、标签等与源需逐项对照。 |
| `pages/client/address/select.vue` | 487 | 115 | −372 | **重大差异**：地址选择列表 UI、默认选中、管理入口等与源不一致风险高。 |
| `pages/client/address/edit.vue` | 464 | ≈460 | ≈0 | **已按源对齐主链路**：`china-region-cascader.json` + `multiSelector` + SCSS；仍建议与源文件做 **diff 扫尾**（校验分支、边界市辖区）。 |
| `pages/client/address/address.vue` | 438 | 178 | −260 | **较大差异**：列表分页、行内电话组件、操作区布局等通常较源简化。 |
| `pages/client/order/pay/pay.vue` | 349 | 187 | −162 | **中等差异**：支付流程核心可能有，展示与异常分支、样式与源需对照。 |
| `pages/client/invoice/invoice.vue` | 290 | 149 | −141 | **较大差异**：开票列表、可申请订单弹窗等逻辑与 UI 需对照。 |
| `pages/client/order/detail/detail.vue` | 737 | 705 | −32 | **接近**：近期已按源对齐布局、配送员、电话拨号、商品浮层、底部 Tab 等；仍需做一次**像素级/样式块级**与行为细节对照（含 `scroll-view` 与底部安全区）。 |
| `pages/client/profile/profile.vue` | 312 | 105 | −207 | **重大差异**：源含 **头像 URL 解析**、**仪表盘统计接口**、**联系客服（拉号+拨号）**、菜单项组合与 **SCSS 分层样式**；目标为简化卡片 + 固定菜单。 |
| `pages/client/refund/refund.vue` | 128 | 79 | −49 | **中等差异**：列表字段与空态、样式需对照。 |
| `pages/client/settlement/settlement.vue` | 137 | 73 | −64 | **中等差异**：统计区与列表样式、分页需对照。 |

### 3.1 按页面跳转锚点（与上表同一结论，供其它文档外链）

以下 `<a id>` 为稳定锚点；说明文字与 **上表** 中对应行一致（若某页已大幅对齐，仍保留锚点便于文档回链）。

<a id="diff-client-address-edit"></a>

**`pages/client/address/edit.vue`** — **主链路已对齐源**：本地 `china-region-cascader.json` + `multiSelector` + 与源一致的表单/开关/提交样式；建议与源再做一次 **diff 扫尾**。

<a id="diff-client-refund"></a>

**`pages/client/refund/refund.vue`** — **中等差异**：列表字段与空态、样式需对照。

<a id="diff-client-review-list"></a>

**`pages/client/review/list.vue`** — **较大差异**：源通过 `reviewApi` 与类型定义组织请求；目标行数显著少，筛选/分页/点赞/预览等需逐条对照。（另见本文 **§4.1** 表格中「评价 API」行。）

<a id="diff-client-review-create"></a>

**`pages/client/review/create.vue`** — **较大差异**：评价表单字段、媒体上传、匿名、标签等与源需逐项对照。

<a id="diff-client-invoice"></a>

**`pages/client/invoice/invoice.vue`** — **较大差异**：开票列表、可申请订单弹窗等逻辑与 UI 需对照。

<a id="diff-client-settlement"></a>

**`pages/client/settlement/settlement.vue`** — **中等差异**：统计区与列表样式、分页需对照。

<a id="diff-client-product-view"></a>

**`pages/client/product/view.vue`** — **较大差异**：商品详情展示与加购/底部栏与源不一致风险高。

<a id="diff-client-product-detail"></a>

**`pages/client/product/detail.vue`** — **较大差异**：源含评价 API、统计、Tab/富文本等组合；目标需对照是否缺字段、缺区块、缺样式。

---

## 4. 共享模块与依赖差异

### 4.1 源有、`sqxp-wx` 无或不等价

| 模块 | miniprogram | sqxp-wx | 影响 |
|------|-------------|---------|------|
| 评价 API | `src/api/reviewApi.ts` | **`api/reviewApi.js` 已补充**；评价相关页逐步改为引用 | `product/detail` 等若仍混用旧写法需扫尾。 |
| 头像 URL | `utils/avatar.ts` | **`utils/avatar.js` 已补充**；`profile` 尚未接入 | `profile` 仍待接 `resolveUserAvatarUrl`。 |
| 客服电话 | `utils/service-contact.ts` | **`utils/service-contact.js` 已补充**；`profile` 尚未接入 | `profile` 仍待接「联系客服」。 |
| 仪表盘统计 | `API_URL.CLIENT_DASHBOARD`（`config/api.ts`） | **`API_URL.CLIENT_DASHBOARD` 已导出**；`profile` 尚未调用 | 顶部三数仍为占位直至 `profile` 对齐。 |
| 省市区数据 | `static/data/china-region-cascader.json` | **`static/data/` 已复制** | `address/edit` 已使用；其它页若需同数据再引用。 |

### 4.2 组件实现差异（允许技术替换，但须对齐行为与视觉）

| 组件 | 说明 |
|------|------|
| `phone-dial-inline` | 源用 **Vant `VanIcon`**；目标用字符 **☎** 等。属工程差异替换时，**须**以源布局/字号/点击区域为基准做视觉对齐。 |
| `product-detail-overlay` | 已从源迁入并改为 `parseResponseJson`；仍建议与源文件做 **diff 定期对齐**（防止后续单侧改动分叉）。 |

### 4.3 技术栈与样式语言

| 项 | miniprogram | sqxp-wx |
|----|-------------|---------|
| 脚本 | TypeScript + `parseResponseJson` / `res.data` 混用（以各页为准） | JavaScript + 多页统一 `parseResponseJson` |
| UI 库 | 部分页使用 **Vant**（如 `van-button`） | 多为 **原生 `button` / `view`**，**样式与源不一致**属系统性差异 |
| 样式 | 大量 **`lang="scss"`** 嵌套 | 不少页为 **单行 scoped CSS**，可维护性与视觉层级与源不同 |

---

## 5. 「仅 sqxp-wx 存在」且与源不一致的点（收敛方向：删或改回与源一致）

以下按「**不要添加功能**」原则，属目标端相对源**多出来或偏离**、需在完全对齐时处理的事项：

1. **`profile` 菜单**  
   - 源端 `menuItems`：**我的订单、收货地址、结算记录、退款记录**（另单独有 **联系客服** 行）。  
   - 目标端 `menuItems` 含 **「我的发票」** 等源 `profile` **菜单中未出现**的入口。  
   - **发票页**在源 `pages.json` 已注册，且在仓库 `miniprogram/src` 内 **未检索到** 任何 `navigateTo`/`switchTab` 指向该页（`profile` 亦无入口）。完全对齐源 **profile UI** 时，应移除目标端 profile 中源所无的菜单项；**发票页 `.vue` 本身**仍须与源页 **功能与样式对齐**（页面可达性以源「已注册页面」为准，不在 profile 硬加入口）。

2. **历史文档**  
   - `docs/sqxp-wx-迁移进度记录.md` 中部分描述（如订单详情评价入口）可能与当前「以源为准」的代码不一致，**以代码与本文档为准**。

---

## 6. 样式对齐的通用检查项（适用于所有客户页）

以 `miniprogram` 对应 `.vue` 的 `<style lang="scss" scoped>`（及非 scoped 的 `page` 样式）为基准：

- 页面根布局（`100%` / `flex` / `scroll-view` / 固定底栏 / 安全区）是否与源一致  
- 卡片圆角、间距、字体阶梯、主色 `#07c160` 使用是否与源一致  
- 列表行高、分割线、空态、加载更多提示是否与源一致  
- 是否存在源有而目标省略的 **区块标题、辅助说明、二次确认**  

---

## 7. 结论（是否迁移完毕）

| 维度 | 结论 |
|------|------|
| 页面文件是否齐 | **是**（17 页均在） |
| 功能是否与源等效 | **否**（首页、购物车、确认订单、订单列表、地址、评价、商品详情、个人中心等均为高风险未等效区） |
| 样式是否与源等效 | **否**（Vant vs 原生、SCSS 嵌套 vs 精简 CSS、布局删减） |

**整体结论**：当前状态为 **「核心链路可跑 + 多页大幅简化」**，**不满足**「客户小程序功能与样式已全部从 `miniprogram` 迁移到 `sqxp-wx` 且无遗漏」的目标。

---

## 8. 建议的验收方式（后续执行迁移时使用）

1. 按页面建立 **用例清单**（接口、分页、筛选、跳转、异常 Toast）。  
2. 每页 **双开真机或同分辨率模拟器** 对照源与目标录屏比对。  
3. 每页合并前做 **diff**：以源文件为左侧，目标为右侧，直至模板结构、样式块、脚本分支对齐。  

（本文仅作差异登记，具体执行顺序见 `docs/sqxp-wx-client-migration-remaining-plan.md`。）