Skip to content

About

No description, website, or topics provided.

Resources

Stars

0 stars

Watchers

0 watching

Forks

Repository files navigation

TrueUsed Web

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 撤销
  • 个人中心部分统计文案已调整为“待接真实数据”,避免把占位值误写成真实业务指标

当前业务闭环

1. 卖家自出

  1. 发布普通商品
  2. 买家下单并支付
  3. 卖家手动发货
  4. 订单详情展示 mock 物流
  5. 物流推进到指定节点后,买家确认收货

2. 平台验货

  1. 发布平台验货商品
  2. 商品在详情页展示验货模式信息
  3. 买家支付后进入待平台出库
  4. 平台仓自动生成 mock 物流
  5. 买家可在订单详情查看验货报告与物流轨迹
  6. 完成确认收货

3. 售后退款

  1. 买家在订单页发起退款
  2. 卖家在售后详情页审批
  3. 仅退款 自动完成
  4. 退货退款 暂不做逆向物流,由卖家手动完成 mock 退款闭环
  5. 买家在退款被拒绝后可重新申请

mock 数据说明

项目当前不是纯静态页面,但也不是全真实系统。以下部分仍然是 mock:

  • 商品、验货和物流数据存在模拟成分
  • 客服消息是 mock 工单列表
  • 帮助中心内容是基于当前实现编写的静态知识库
  • 退货退款 没有真实逆向物流
  • 个人中心统计、部分消息页和运营数字仍以演示数据为主

本地开发

环境要求

  • Node.js 18+
  • npm 9+

安装依赖

npm install

启动开发环境

npm 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 与源码同步的前提下再做统一提交。

About

No description, website, or topics provided.

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Used by

Contributors

Languages