TrueUsed 前端是一个基于 Vue 3 + Vite 的桌面端二手交易平台演示项目。它围绕“卖家自出 / 平台验货”两条交易模式搭建页面,并把订单、验货、物流、售后、帮助中心和客服中心串成一套可演示的完整流程。
- 桌面端展示优先,不做移动端适配
- 面向二手交易平台场景
- 使用真实页面流程承接 mock 数据,而不是只做静态 UI
- 首页与验货内容展示更偏“平台补充信息 + 风险提示”表达
- 适合作品集、课程项目、答辩演示和流程讲解
- Vue 3
- Vite
- Vue Router
- Pinia
- Axios
- Vant
- UnoCSS
- lucide-vue-next
- 首页商品浏览、搜索与首屏导流
- 商品详情
- 结算页 / 支付页 / 支付成功页
- 我的订单
- 订单详情
- 卖家订单管理
- 平台验货模式商品展示
- 验货报告列表与详情查看
- 平台验货订单与订单详情绑定
- mock 物流轨迹展示
- 退款申请页
- 退款详情页
- 买家查看售后进度
- 卖家处理退款与 mock 手动完成退款
- 帮助中心
- 客服中心
- 客服消息面板
- 钱包、地址、消息、个人中心等基础页面
- 登录后保存 access token,并配合后端 HttpOnly refresh token 完成会话维持
- 登出请求会显式附带当前
Authorization头,配合后端执行服务端 token 撤销 - 个人中心部分统计文案已调整为“待接真实数据”,避免把占位值误写成真实业务指标
- 发布普通商品
- 买家下单并支付
- 卖家手动发货
- 订单详情展示 mock 物流
- 物流推进到指定节点后,买家确认收货
- 发布平台验货商品
- 商品在详情页展示验货模式信息
- 买家支付后进入待平台出库
- 平台仓自动生成 mock 物流
- 买家可在订单详情查看验货报告与物流轨迹
- 完成确认收货
- 买家在订单页发起退款
- 卖家在售后详情页审批
仅退款自动完成退货退款暂不做逆向物流,由卖家手动完成 mock 退款闭环- 买家在退款被拒绝后可重新申请
项目当前不是纯静态页面,但也不是全真实系统。以下部分仍然是 mock:
- 商品、验货和物流数据存在模拟成分
- 客服消息是 mock 工单列表
- 帮助中心内容是基于当前实现编写的静态知识库
退货退款没有真实逆向物流- 个人中心统计、部分消息页和运营数字仍以演示数据为主
- Node.js 18+
- npm 9+
npm installnpm run dev默认地址:http://localhost:5173
npm run build- 前端开发服务器默认端口:
5173 vite.config.js中已配置/api代理,默认目标为http://localhost:8081- 可通过
VITE_API_PROXY_TARGET覆盖后端地址,示例见.env.example - 无后端时可设置
VITE_USE_MOCK=true,请求会走src/mock/client.js的本地 mock adapter - 启动前建议先确保后端服务可用
- 若后端启用了 token 撤销,前端登出需要保留本地 access token 直至
/auth/logout请求发出
- 页面已经围绕真实业务流程重构,不再是零散模块拼接
- 明确区分
卖家自出和平台验货两种模式的文案、状态和交互 - 首页首屏已经改为突出“先看成色/拆修/配件”的交易判断信息,而不是泛化宣传文案
- 订单详情页把验货报告、物流轨迹和售后入口聚合到同一条链路里
- 验货报告页已并入主导航壳层,并开始展示后端返回的报告编号、规格、质检员与验货中心字段
- 帮助中心和客服中心内容已经和当前实现保持一致,不再是空白占位
- 以桌面端布局为主,导航和信息层次更适合展示型项目
- 不支持移动端适配
- 逆向物流未实现
- 部分数据仍然是 mock,不适合直接当生产系统使用
- 缺少系统化 E2E 测试与视觉回归测试
- 一些非主线页面仍有继续精修空间
dist/构建产物仍在仓库中,提交时需要注意与源码变更保持一致
前端主线功能已经可以完成演示,本轮重点更新集中在首页、验货报告页和认证登出联动。若继续迭代,建议在保持 dist 与源码同步的前提下再做统一提交。