企业电商 / 微信服务号 H5 小程序与运营后台
润泽源电商平台（已上线）
面向铜川照金润泽源中医健康产业有限公司的企业电商平台，以照金高山艾品牌为展示主线。用户通过微信服务号进入 H5 小程序，浏览品牌与商品、登录个人账户并办理订单交易；运营管理后台和业务 API 负责内容维护与业务处理。
企业与品牌
铜川照金润泽源中医健康产业有限公司 · 照金高山艾
产品形态
微信服务号内的 H5 小程序，配套独立运营后台与业务 API。
系统组成
zjgsa-store 移动商城、zjgsa-admin 管理后台、zjgsa-api 业务服务。
技术栈
Vue 3、TypeScript、Vite、Element Plus、Node.js、Express 与 MySQL。
核心业务
商品与分类、轮播内容、微信 OAuth、地址、订单、JSAPI 支付、发货与整单原路退款。
上线状态
平台功能已完成并上线，当前等待甲方提供完整的商品、品牌及运营资料，资料确认后补充正式内容。
项目概览
围绕用户选购与运营维护两条流程，将商城界面、后台管理和交易服务组织成一套系统。
微信服务号内的 H5 小程序提供品牌首页、商品搜索与分类、购物车和个人中心，承接用户浏览、微信登录与个人订单操作。
运营后台维护商品价格、库存、图片、上下架状态、分类和首页轮播，并通过工作台与订单详情查看业务状态。
业务 API 统一处理身份认证、商品数据、地址、订单、微信支付、退款及物流状态，商城和后台共享业务数据。
商城、运营后台与订单交易功能已完成，微信支付及退款链路已完成联调；当前等待甲方提供完整资料，以补充正式商品与运营内容。
商城与后台页面
按移动商城、运营管理和订单退款的顺序整理 11 张截图，展示用户入口与后台操作之间的关联。
商城首页：品牌展示与商品入口
围绕照金高山艾品牌组织移动端首页，用企业标识、主题轮播和热销商品建立浏览入口。全部商品、热销推荐、直播专区和品牌故事集中在首页，底部导航连接首页、商城、购物车与个人中心。
商品列表：搜索、分类与商品信息
商城页提供商品搜索和分类筛选，以双列卡片展示封面、名称、副标题、分类、库存与价格。热销标签和划线价格补充商品展示信息，商品内容由后台维护后通过公开接口读取。
微信登录：由用户主动授权
购物车、地址与订单等操作需要登录时，页面展示微信授权弹层。用户可以暂不登录，也可以阅读隐私政策并主动确认授权后继续，浏览商品与登录后的交易操作各有明确入口。
个人中心：订单状态与服务入口
个人中心集中提供待付款、待发货、待收货和售后入口，并连接收货地址、联系客服、企业资质与品牌介绍。截图展示未登录状态，用户可以从顶部进入微信登录，再查看个人订单与服务。
后台登录：独立的管理入口
管理后台使用独立的管理员账号登录，与商城微信用户身份分开。登录页沿用照金高山艾的品牌标识、深绿色与浅色背景，并保留企业主体和技术支持信息。
运营工作台：统计与常用操作
工作台汇总全部商品、在售商品、低库存商品、分类、订单、成交额和待处理退款，并提供商品、分类和订单管理的快捷入口。右侧列出商品、交易与内容运营所需资料，便于甲方补充并确认正式运营内容。
商品分类：维护展示状态与排序
后台以表格维护高山艾系列、艾灸养护、艾草日用和健康礼赠等分类。分类名称、商品数量、排序与启用状态集中展示，新增、编辑和删除入口用于维护商城中的商品组织方式。
商品管理：查询、上下架与库存维护
商品管理支持按名称、分类和状态筛选，列表同时展示价格、库存、标签、上下架状态与排序。运营人员可以在一个页面查看商品状态并进入编辑，后台保存的商品资料供 H5 商城展示。
商品编辑：基础信息、销售设置与图文内容
商品编辑将分类、名称、副标题、价格、库存、规格、展示标签、图片和详情内容按业务分组。第一张商品图片作为商城封面，热销与推荐开关、上下架状态和排序共同控制前台展示。
轮播图编辑：首页主题与跳转维护
首页轮播由后台维护图片、展示主题、标签、主副标题、说明、按钮文字和跳转目标。运营配置与商城首页对应，使品牌主题和商品专题可以通过后台调整。
订单详情：支付、退款与操作记录
订单详情汇集商品明细、收货信息、金额、支付流水、退款记录和操作日志，后台还提供退款状态同步入口。截图展示一分钱测试商品的退款成功记录，说明订单、支付与退款结果如何在运营界面中关联查看。
核心业务流程
把商品发布、用户下单和运营处理连接起来，明确每个阶段由哪个页面和服务承担。
运营维护与商品展示
管理员维护分类、商品、图片、价格、库存和展示状态，商城通过公开商品接口读取结果；首页轮播另由后台配置主题、文案与跳转。
微信登录与个人服务
用户从微信服务号进入 H5 小程序浏览商品，在需要个人操作时主动进行微信 OAuth 授权。登录后的商城会话用于地址簿、个人订单与交易请求。
创建订单与支付结果确认
服务端读取商品与收货信息创建订单，保存商品、价格和地址快照，再生成微信 JSAPI 支付参数。支付通知与查单结果用于更新订单状态，连接用户支付与后台订单处理。
发货、收货与退款处理
后台记录发货信息，用户确认收货；发货前支持整单原路退款。退款流水、状态同步和订单事件用于查看处理结果，截图中的退款记录来自测试交易。
技术实现
结合 zjgsa 项目的代码与开发记录，整理前台、后台和交易服务的实现重点。
Vue 3 与 TypeScript 页面开发
商城与后台分别使用 Vue 3、TypeScript、Vite 和 Vue Router。商城使用移动端布局与底部导航，后台结合 Element Plus、Pinia 和表格表单处理运营操作。
Express 与 MySQL 业务接口
Node.js API 通过 Express 路由与 mysql2 访问数据库，统一承载商品、分类、内容、地址及交易数据，前台公开读取接口与需要身份认证的操作分别组织。
商城与管理员身份区分
商城使用微信 OAuth 建立用户身份并签发商城 JWT，管理员通过账号密码登录获得后台会话。商城接口与后台接口分别检查对应身份。
商品图片与内容管理
后台支持商品图片上传与图文内容维护，商品封面、轮播图和展示字段由运营配置。内容保存与前台读取通过业务 API 衔接。
订单金额与数据快照
金额统一使用整数分，订单保存商品和收货信息快照。创建订单时由后端读取价格与用户身份，避免把前端提交的价格或用户编号直接作为交易依据。
微信支付与退款通知
接入微信支付 API v3，使用原始通知正文进行公钥验签，并解密支付和退款通知。订单详情结合支付流水、退款记录和事件日志展示业务结果，退款重试复用已有商户退款单号。
工程与上线实践
围绕三个工程的协作、品牌一致性和交易联调，记录当前平台的实现方式与运营范围。
前台、后台与 API 分工
zjgsa-store 承担用户浏览与个人交易界面，zjgsa-admin 承担运营维护，zjgsa-api 承担认证与业务规则。商品和订单数据通过 API 连接两端，页面展示与业务状态分开处理。
统一品牌与移动端体验
商城首页、商品页和购物车复用品牌顶栏，将企业标识、页面标题与公司信息组织在一起；后台延续深绿色品牌视觉，并针对桌面运营任务采用表格、弹窗和详情抽屉。
交易联调与记录追踪
使用一分钱测试商品联调微信支付与原路退款，在订单详情保留支付、退款和操作记录。交易状态以服务端与微信结果为依据，接口测试与微信客户端人工验收分别覆盖不同环节。
功能交付与资料完善
商城、运营后台及交易功能已完成，平台已上线。当前等待甲方提供完整的正式商品资料、品牌内容与运营素材，资料确认后通过现有后台完成内容补充与发布。