商城消费者端 (Consumer) 开发文档
本文档包含了商城消费者前端模块的详细开发指南和状态说明。
📂 项目结构
消费者端模块位于 pages/mall/consumer/ 目录下，基于 UniApp x (UTS/UVUE) 开发。
核心页面清单
| 页面文件 | 描述 | 当前状态 |
|---|---|---|
index.uvue |
首页 (商城门面) | ✅ 正常 |
category.uvue |
商品分类浏览 | ✅ 正常 |
cart.uvue |
购物车 | ✅ 正常 |
profile.uvue |
个人中心 (用户主页) | ✅ 正常 |
orders.uvue |
订单列表管理 | ✅ 正常 |
order-detail.uvue |
订单详情页 | ✅ 正常 |
apply-refund.uvue |
申请售后 (退款/退货) | ✅ 正常 |
refund.uvue |
售后记录列表 | ✅ 正常 |
chat.uvue |
在线客服 | ✅ 正常 |
messages.uvue |
消息通知中心 | ✅ 正常 |
关键功能实现
-
用户个人中心:
- 可视化展示用户状态（积分、余额）。
- 订单状态快捷入口（待支付、待发货、待收货等）。
- 我的服务: 优惠券、地址、收藏夹。
- 新功能: 已集成“评价”入口（跳转至待评价订单）和“退款/售后”入口（跳转至售后记录页）。
-
订单管理:
- 多状态标签页切换（全部、待支付、待收货、已完成）。
- 操作: 支付、取消、提醒发货、确认收货、评价、申请售后。
- 与
supabaseService后端服务实时交互。
-
售后系统:
- 独立页面
apply-refund.uvue：支持仅退款/退货退款，关联原订单金额。 - 售后列表
refund.uvue：查看历史退款记录及进度。
- 独立页面
-
客服与消息:
- 在线客服
chat.uvue：支持文本/表情发送，消息持久化存储。 - 消息中心
messages.uvue：聚合系统通知与客服消息。
- 在线客服
🛠 技术栈
- 框架: UniApp x (Vue 3 + UTS)
- 后端: Supabase (PostgreSQL)
- 语言: UTS (TypeScript 方言)
- 样式: SCSS / UVUE Styles
🚀 快速开始
- 环境准备: 确保已安装 HBuilderX 并配置好 UniApp x 插件。
- 数据库: 运行
doc_mall/consumer/sql/下的 SQL 脚本初始测试数据。 - 运行: 在 HBuilderX 中打开项目，运行到 Web 浏览器或 App 模拟器。