充电宝租赁平台 H5 客户端与运营后台

项目概述

在广东真格软件有限公司实习期间，参与 充电宝租赁 / 共享充电宝 平台的前端建设。业务按端拆分如下：

两端与同一套后端接口协作，形成「后台配置主数据 → 用户扫码或入口进入 H5 → 选门店支付 → 轮询/展示订单状态」的典型租赁类闭环。

业务背景与价值

• C 端：用户通过链接或二维码携带 city、store 等参数进入首页，查看当前城市下的门店列表与门店信息，在收银页完成押金或订单相关支付（项目内集成 PayPal 按钮流程），并在订单详情页轮询支付/订单状态。
• B 端运营：在后台维护城市、门店、推广员等基础数据，处理订单查询与详情，配置系统信息，支撑线下布点与线上投放。

H5 客户端（WorkSpace/power_bank_web）

技术栈

• 框架：Vue 3 + TypeScript + Vue Router 4
• 构建：Vite 6，多环境（dev / pro）
• UI：Vant 4、Tailwind CSS 4
• 国际化：vue-i18n 10
• 网络：Axios
• 地图类型（工程能力）：@types/google.maps（首页含城市经纬度、门店坐标等数据结构与地图相关逻辑预留）

主要职责与页面

1. 首页（/）
   • 根据路由参数解析城市编码，拉取城市信息与门店列表（名称、地址、缩略图、经纬度等）。
   • 支持运营配置的欢迎弹窗等首页文案（接口 getHomeMsg 等）。
2. 收银 / 下单（/checkout）
   • 根据门店编码等查询加载门店信息。
   • 集成 PayPal JS SDK：创建服务端订单、用户授权扣款、capture 成功后跳转订单详情。
   • 用户协议勾选校验。
3. 订单详情（/order-detail）
   • 按订单号轮询订单状态，超时给出友好提示，用于支付结果确认类场景。
4. 用户协议（/user-agreement）
   • 服务条款展示，与收银页勾选逻辑配合。

个人收获（简历可写表述）

• 完成 移动端租赁下单链路 与第三方支付（PayPal）在浏览器内的对接与异常处理。
• 使用 Vant + Tailwind 搭建列表、弹窗、空态等高频交互；接触 vue-i18n 的多语言组织方式。
• 理解 订单状态轮询、路由 Query 传参等与后端订单模型的配合。

运营后台（power_bank_admin）

技术栈

• 框架：Vue 3 + TypeScript + Vue Router 4（Hash 路由）
• 构建：Vite 5，多环境（dev / test / pro）
• UI：Ant Design Vue 4、Pinia、Sass、Tailwind CSS 3
• 通用能力：wangEditor / Quill、ECharts、Cropper.js、qrcode、xlsx 等（与同类中后台工程一致，便于运营物料与导入导出）

主要职责与模块

业务路由挂载在根布局下，主要包括：

1. 订单管理：订单列表与详情（views/pb/order）。
2. 门店管理：门店维护、创建与信息查看（views/pb/store）。
3. 城市管理：城市维度数据维护（views/pb/city）。
4. 推广员管理：推广员列表、创建、编辑与信息维护（views/pb/promoter）。
5. 系统设置：平台侧基础信息配置（views/pb/system）。

此外，工程内包含 系统管理 能力（部门、角色、管理员、权限、字典项等），用于多角色分工与菜单权限控制（router/modules/core.ts）。

个人收获（简历可写表述）

• 在 Ant Design Vue 体系下完成表格、表单、弹窗、详情页等中后台标准模块。
• 参与 O2O 类主数据（城市—门店—订单）在后台的配置与查询闭环。
• 理解登录后 拉取用户信息 + 枚举字典初始化 再进入业务页的路由守卫模式。

协作与工程说明

• 前后端分离：H5 与 Admin 均通过 Axios 调用后端接口；支付以服务端创建的第三方订单号为准，前端负责调起与结果跳转、轮询。
• 若博客使用 Hexo，categories: 项目经历 即归入该分类；其他静态站点请按站点约定调整 frontmatter 或文件目录。

仓库路径备忘

• H5：WorkSpace/power_bank_web
• 运营后台：power_bank_admin

文档依据当前仓库路由与关键页面整理，日期与标签可按个人博客习惯修改。