医美品牌「傲莱菈」产品验真 H5 与公众号运营后台

项目概述

在广东真格软件有限公司实习期间，参与面向医美机构的一条业务线：假体等产品序列号验真、质保卡信息管理，并与微信公众号 ANGELA PEACH（傲莱菈） 场景配合使用。工作拆成两个前端工程：

两端通过同一套后端接口协作，形成「公众号引流 / 品牌露出 → H5 验真与质保 → 后台统一维护主数据」的闭环。

业务背景与价值

• 品牌与合规：用户通过扫码或输入序列号，在 H5 中完成「傲莱菈产品验真」，增强正品认知与信任。
• 机构工作流：合作医美机构登录后，可录入、查询与维护质保卡相关信息（含凭证图片等），支撑院内流程。
• 用户侧：终端用户可绑定手机号、查看与质保卡相关的信息，与公众号运营活动衔接。
• 运营与数据：后台对假体序列号、合作机构、质保卡等主数据进行集中管理，并具备看板、导入导出等运营能力。

H5 客户端（oth_product_code_h5）

技术栈

• 框架：Vue 3 + TypeScript + Vue Router 4
• 构建：Vite 6
• UI：Vant 3、Tailwind CSS 4、Font Awesome
• 网络与工具：Axios；条码/扫码相关 @zxing/library、quagga
• 微信：集成微信 JS-SDK 配置（如 initWxConfig），适配公众号内打开能力

主要职责与模块

1. 首页验真
   • 扫码查询、手动输入序列号查询。
   • 展示验真结果（如客户姓名、机构名称、手术医生、手术日期、假体型号等字段，以接口为准）。
   • 品牌文案与视觉（如「傲莱菈产品验真」导航标题、渐变主色等）。
2. 机构端（/organ/*）
   • 登录鉴权、路由守卫（未登录跳转登录页）。
   • 质保卡列表、新增录入（表单项、手术日期、图片凭证上传等）、详情页、个人中心等。
3. 用户端（/user/*）
   • 质保卡相关页面、手机号绑定等用户动线。

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

• 在 移动端 H5 + 微信环境 下完成页面与接口联调，处理鉴权、上传与表单校验等典型场景。
• 使用 Vant + Tailwind 快速搭建一致的体验，并接触 条码识别 在验真入口中的集成思路。

运营后台（oth_product_code_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 裁剪上传、xlsx 表格导入导出等

主要职责与模块

1. 业务子系统「记录管理 / othpcd」
   • 序列号管理：假体等产品序列号主数据维护。
   • 机构管理：合作医美机构信息维护。
   • 质保卡管理：质保卡列表与详情、编辑、Excel 导入等运营能力。
2. 系统管理能力
   • 部门、角色、管理员、权限、数据字典等 RBAC 与基础配置，支撑多角色分工。
3. 仪表盘
   • 指标与数据分析类组件（含移动端布局适配判断），便于运营侧总览。

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

• 在 中后台 Ant Design Vue 体系下完成 CRUD、表格、弹窗表单、导入导出等高频需求。
• 理解 权限路由 meta 与菜单、按钮级能力控制的配合方式。
• 接触 富文本、图表、文件上传裁剪 等运营后台常见能力拼装。

协作与工程侧说明

• 前后端分离：两端均以 Axios 调用后端 REST 接口，字段与状态码以后端约定为准。
• 双端分工：H5 侧重微信内体验与 C/B 端动线；Admin 侧重主数据、审核与运营效率。
• 若你的博客使用 Hexo，categories: 项目经历 会归入「项目经历」分类；若使用 VitePress / Docusaurus，请将 categories 改为你站点约定的 sidebar 或文件夹结构（可把本文移动到对应 docs/项目经历/ 目录）。

仓库路径备忘

• H5：oth_product_code_h5
• 运营后台：WorkSpace/tmp/oth_product_code_admin（与实习环境路径一致时可直接打开）

文档根据当前仓库代码结构整理，日期与标签可按你博客习惯自行修改。