0. 为什么要重做
| 问题 | 现状 | 影响 |
|---|
| 路径无架构 | 71 页平铺在单一 pages/mall 子包 | 难维护、无法分包加载、首屏体积大 |
| 入口重复 | pages/home/* 与 pages/mall/* 各有 index/cart/category/user | 两套入口互相打架 |
| 写法陈旧 | Vue2 Options API + ColorUI 类名，无设计令牌、无状态管理 | 组件不可复用、视觉难统一 |
| 状态层错代 | Vuex 3（Vue2 世代）挂在 Vue3 工程 | 类型/响应式隐患 |
| 旧页死路 | fission/group、fastpay/*、trade/*、team/equity/transfer 仍绑废弃后端 jft | 逻辑跑不通 |
| 多用户特征淹没 | 店铺域（多商户）、成长域（裂变经济）混在通用 goods/user 目录 | 主线不清 |
目标：建立清晰、可扩展、可分包加载的页面架构；统一设计语言与组件；凸显「多商户 + 裂变经济」两条主线；与后端 API 分组一一对齐。
1. 总体定位：B2B2C 多用户商城
平台（xshop）
├─ 多商户（商家/门店/供应商）—— PC 后台经营，C 端仅展示与下单
├─ 会员（C 端用户）—— 本 App 的服务对象
│ ├─ 交易闭环：浏览 → 店铺 → 购物车 → 下单 → 支付 → 履约 → 退款
│ └─ 成长经济：团队/邀请 → 权益/积分 → 分红/资产 → 提现/转账
└─ 多角色：会员用 C 端 App；商家/代理/供应商用 PC 后台；C 端提供「商家入驻」入口转 PC 流程
两条主线（贯穿信息架构）：
- 多商户主线：店铺域 → 跨店购物车 → 按店拆单 → 店铺级履约
- 裂变经济主线：团队树 → 邀请 → 权益/积分 → 分红/资产 → 提现转账
2. 新页面路径架构（核心 · 推翻旧设计）
主包（TabBar，保持精简）+ 7 个业务域子包。每个子包对应一个后端 API 分组，内聚独立、可预加载。
主包（TabBar 页 · 4 页）
| 路径 | 页面 | 职责 |
|---|
pages/index/index | 商城首页 | 搜索 + Banner + 分类宫格 + 本地商户推荐 + 推荐流 + 活动 |
pages/local/local | 本地商户 | 地区选择 + 商户分类筛选 + 店铺列表/网格 → 进店铺首页 |
pages/cart/cart | 购物车 | 多店铺分组 · 多商品选中 · 优惠券入口 · 结算（角标联动） |
pages/mine/mine | 我的 | 会员卡 + 订单状态行 + 资产/成长/账户入口聚合 |
子包 1 · goods 商品域 → /api/goods/*
| 路径 | 页面 |
|---|
goods/detail/detail | 商品详情（图文/SKU/运费试算/加购/收藏） |
goods/search/search | 搜索（热搜/历史/结果） |
goods/brand/brand | 品牌馆 |
goods/topic | 专题页 |
子包 2 · store 店铺域（多商户核心）→ /api/goods?store=
| 路径 | 页面 |
|---|
store/home/home | 店铺首页（店招/商品/优惠券/动态） |
store/apply/apply | 商家入驻入口（引导转 PC 入驻流程） |
店铺列表/搜索已上移为 TabBar「本地商户」页（pages/local/local），不在子包内重复。
子包 3 · order 订单域 → /api/order/* + /member/order/refund/*
| 路径 | 页面 |
|---|
order/list/list | 订单列表（状态 Tab + 退款售后 Tab） |
order/detail/detail | 订单详情（含退款入口） |
order/checkout/checkout | 确认订单（地址/优惠券/运费） |
order/pay/pay | 支付收银台 |
order/success/success | 支付成功 |
order/refund/list | 退款列表 |
order/refund/detail | 退款详情 |
order/logistics/logistics | 物流跟踪 |
order/comment/comment | 评价 |
子包 4 · asset 资产域（会员金融）→ /member/wallet|points|coupon|dividend|transaction + withdraw|transfer
| 路径 | 页面 |
|---|
asset/overview/overview | 资产总览（余额/积分/优惠券/分红汇总） |
asset/wallet/wallet | 钱包余额 |
asset/points/points | 积分明细 |
asset/coupon/coupon | 优惠券（可用/历史） |
asset/dividend/dividend | 分红记录 |
asset/transaction/transaction | 交易流水 |
asset/withdraw/withdraw | 提现 |
asset/transfer/transfer | 转账 |
子包 5 · growth 成长域（裂变经济）→ /member/team|equity
| 路径 | 页面 |
|---|
growth/team/team | 团队树 |
growth/invite/invite | 邀请海报/二维码 |
growth/equity/equity | 权益中心 |
⚠️ 拼团暂缓（用户决策 2026-08-11）：growth/group/* 暂不建。后端 /api/group/*、/member/group/* 已就绪，后续按需再加。
子包 6 · content 内容域
| 路径 | 页面 |
|---|
content/post/detail | 帖子详情 |
content/notice/notice | 公告列表 |
content/event/detail | 活动报名 |
子包 7 · account 账户域 → /member/profile|address|message|setting + login
| 路径 | 页面 |
|---|
account/login/login | 登录 |
account/profile/profile | 个人资料 |
account/address/list | 地址列表 |
account/address/edit | 地址编辑 |
account/message/list | 消息列表 |
account/message/detail | 消息详情 |
account/setting/setting | 设置 |
account/bind/bind | 实名/绑定 |
页面总数：主包 4 + 子包 ≈ 37 = ~41 页（旧 71 → 新 41，砍重复 + 死页 + 拼团暂缓）。
3. 导航与入口设计
TabBar
首页 · 本地商户 · 购物车(角标) · 我的
首页聚合区
搜索条 → Banner 轮播 → 分类宫格（快捷入口）→ 本地商户推荐（多商户主线起点）→ 推荐商品流 → 活动入口
本地商户页（TabBar · 多商户主线入口）
地区选择器（省/市/区）→ 商户分类筛选（餐饮/零售/服务…）→ 店铺列表/网格（店招·名称·地区·评分·商品数）→ 点击进入 store/home。支持搜索、按距离/评分排序。
购物车页（多店铺 · 多商品 · 优惠券预留）
- 按店铺分组：每店一组，含店招/店名（可点进店铺）+ 该店商品行（图/标题/SKU规格/单价/数量步进器/勾选）
- 多商品选中：每店独立勾选 + 底部全选；按选中店铺/商品结算（跨店自动拆单）
- 结算栏：合计金额 + 「去结算」（角标联动购物车数量）
- 优惠券预留：去结算时带入可用优惠券入口，在
order/checkout 内置优惠券选择器（对接 /member/coupon/available，UI 与选券逻辑预留，可分步接入）
我的页结构
┌─ 会员卡（头像/昵称/等级 · 积分 · 余额）
├─ 订单状态行：待付款 / 待发货 / 待收货 / 退款售后 / 全部订单
├─ 我的资产：钱包 · 优惠券 · 分红 · 资产总览
├─ 我的成长：团队 · 权益 · 邀请
├─ 常用工具：收藏 · 地址 · 消息 · 设置
└─ 商家入驻入口（转 PC）
4. 技术约定（现代化）
| 维度 | 旧 | 新（推荐） |
|---|
| 写法 | Vue2 Options API | Vue3 <script setup> 组合式 |
| 状态 | Vuex 3（错代） | Pinia（cartStore / userStore / storeStore） |
| 组件 | ColorUI 类名 | 设计令牌 + 自研基础组件 + uView Plus 复杂交互 |
| 样式 | 散写 | SCSS 设计令牌（color/spacing/type/radius/shadow） |
| 请求 | flyio + mallRequest | 保留 mallRequest（Promise/401）+ 新增 api/ 模块层 |
| 路由 | 单子包 | 主包 + 7 子包 + preloadRule |
设计令牌层（uni.scss / styles/tokens.scss）
// 色 · 轻奢金棕
$primary: #D4AF37; $primary-d: #B8902A;
$secondary: #6B3E1B;
$bg: #F8F5F0; $surface: #FFFFFF;
$text: #2C2218; $text-sub: #8A7E6B; $line: #E8E0D5;
$success: #4A9B6E; $warn: #D4870F; $danger: #C0392B;
// 间距 4rpx 基阶 · 字号 22/26/28/32/36/44rpx · 圆角 8/16/24/32rpx
自研基础组件
XBtn · XCard · XCell · XTag · XPrice · XStatusTag · XEmpty · XPopup · XNavBar · XTabs
状态管理（Pinia）
cartStore：购物车列表/选中/角标数/跨店分组userStore：会话 token/会员资料/登录态storeStore：当前店铺上下文（从首页/商品进入店铺时设置）
请求模块层（api/）
页面不硬编码 URL，统一走 api/goods.js、api/order.js、api/store.js、api/asset.js、api/growth.js、api/account.js，底层调 mallRequest。
5. 后端 API 映射（全部已就绪）
| 域 | API 组 | 关键端点 |
|---|
| 商品 | /api/goods/* | detail / list |
| 店铺 | /api/goods?store= | 复用 list 带 store 过滤 |
| 运费/地区 | /api/shipping/fee · /api/region/* | fee / tree / children / resolve / full |
| 订单 | /api/order/* | create / list / detail / paid |
| 退款 | /member/order/refund/* | apply / list / detail ✅ 刚补齐 |
| 购物车 | /member/cart/* | add / list / update / delete |
| 地址 | /member/address/* | list / add / update / delete / setDefault |
| 资料/收藏 | /member/profile · /member/favorite | get / update / list / toggle |
| 优惠券 | /member/coupon/* | available / list / receive |
| 钱包/积分 | /member/wallet · /member/points | info / log |
| 团队/邀请 | /member/team/* | tree / invite |
| 权益 | /member/equity | center |
| 拼团（暂缓） | /api/group/* · /member/group/* | list / detail / join / my（已就绪，暂不接入） |
| 消息 | /member/message/* | list / unread / detail |
| 分红/交易 | /member/dividend · /member/transaction | log / log |
| 提现/转账 | /member/withdraw · /member/transfer | apply / do |
| 快捷支付 | /member/setting/quick-pay | get / post |
会员登录：POST /member/login（公开，签发 token）
6. 迁移分期
| 阶段 | 内容 | 优先级 |
|---|
| A 骨架 | 主包 TabBar + 7 子包路由 + 设计令牌 + 基础组件 + Pinia + api 层 | P0 |
| B 交易闭环 | 首页/分类/搜索 + 商品详情 + 店铺 + 购物车 + 下单/支付/成功 | P0 |
| C 订单中心 | 订单列表/详情 + 退款 + 物流 + 评价 | P1 |
| D 会员资产 | 钱包/积分/优惠券/资产总览/分红/交易/提现/转账 | P1 |
| E 成长裂变 | 团队/邀请/权益（拼团暂缓） | P2 |
| F 内容+账户 | 社区/公告/活动 + 登录/资料/地址/消息/设置 | P2 |
| 收敛旧页 | 下线 fission/group、fastpay/*、trade/*、team/equity/transfer 等绑 jft 旧页；合并 pages/home/* 重复页 | 随各阶段 |
原则：新目录全新写，不在旧 pages/mall 上改；旧页待对应新页上线后删除。
7. 已确认决策（2026-08-11）
- 技术栈：✅ Vue3
<script setup> 组合式 + SCSS 设计令牌（告别 Options API + ColorUI）
- 组件库：✅ 自研基础组件（品牌视觉统一）+ uView Plus 复杂交互（Picker/日历/Swiper/Steps）
- 旧页处置：✅ 新目录全新写（
pages/ 主包 + 各子包目录），旧 pages/mall 保持不动作参照，新页上线后逐个删除
- 商家入驻入口：✅ C 端「我的」放入口，引导转 PC 完成资质提交与审核（复用商户自助入驻方案）