微信加油H5系统源码 — 附近油站导航、在线支付、三级分...

1. 微信加油H5系统源码 — 附近油站导航、在线支付、三级分销佣金、管理后台一站式解决方案

复制代码

1. 
   
2. 
   
3. 
   
4. ---
   
5. 
   
6. # 团油快电系统 -- 功能详细说明
   
7. 
   
8. ## 一、项目整体
   
9. 
   
10. 本系统是一个面向微信生态的能源服务平台，采用三层架构：面向普通用户的手机端H5页面、面向管理员的Web后台管理系统、以及提供接口服务的Node.js后端。系统通过对接能链开放平台的加油API，将油站查询与在线支付能力整合到微信场景中，同时构建了会员体系与分销佣金机制。
    
11. 
    
12. 数据库方面，系统使用了十一张数据表，涵盖用户、油站、油品价格、油枪、订单、分销佣金、提现记录、管理员、系统配置、用户反馈、公告和Banner广告图。
    
13. 
    
14. ---
    
15. 
    
16. ## 二、用户端功能（手机H5页面）
    
17. 
    
18. ### 1. 登录注册
    
19. 
    
20. 用户通过手机号和密码注册账号。注册时系统自动生成六位邀请码。登录时系统校验手机号是否有效、密码是否正确，通过后生成JWT令牌返回给前端。用户信息包括手机号、昵称、头像、VIP等级、VIP过期时间和邀请码。
    
21. 
    
22. ### 2. 首页与油站发现
    
23. 
    
24. 首页顶部展示轮播图广告和导航图标（如附近油站、优惠活动、加油指引等入口），下方展示公告列表。页面核心是基于定位的附近油站列表，显示每个油站的品牌标签（中石化、中石油、壳牌）、名称、地址、距离和参考油价。支持按距离、价格、品牌等条件排序筛选。
    
25. 
    
26. ### 3. 油站详情与加油下单
    
27. 
    
28. 点击油站卡片进入详情页，以渐变色头部卡片展示油站品牌、名称、地址、营业时间和联系电话。下方展示油站设施标签（如便利店、洗车、卫生间）和油品价格列表（92号、95号、98号），每项标注标准价和VIP专属价。用户可选择油品后看到可用油枪列表（空闲、使用中、维护中三种状态）。加油金额支持两种输入方式：直接输入金额，或输入升数系统自动计算金额。快速金额按钮提供100、200、300、500四个选项。
    
29. 
    
30. 提交订单时，系统先通过能链API获取认证令牌，再调用能链接口创建订单并构建H5支付跳转链接，同时将订单同步保存到本地数据库。用户确认后跳转到能链支付页面完成付款。
    
31. 
    
32. 油站详情页右上角有两个按钮：星标收藏按钮（点击切换收藏状态，黄色高亮表示已收藏）和分享按钮（点击弹出分享引导弹窗，微信内引导用户点击右上角菜单分享，微信外提供复制链接功能）。每次进入详情页自动记录浏览历史到本地存储。
    
33. 
    
34. ### 4. 订单管理
    
35. 
    
36. 订单列表页面展示用户的所有加油订单，每张订单卡片包含订单号、油站名称和品牌、油品类型、金额、创建时间和状态标签（待支付、支付中、已完成、已取消）。支持按状态筛选。点击订单进入详情页查看完整信息。
    
37. 
    
38. ### 5. 个人中心
    
39. 
    
40. 个人中心顶部以渐变色头部展示用户头像、昵称和手机号，下方统计区显示全部订单数量和累计佣金。菜单列表包括：我的订单（跳转订单列表）、分销中心、我的收藏、浏览历史、意见反馈、设置和关于我们。
    
41. 
    
42. 我的收藏：以弹窗形式展示已收藏的油站列表，每个油站显示品牌标签、名称、地址和收藏时间。点击可跳转油站详情，可单独删除或一键清空。
    
43. 
    
44. 浏览历史：同样以弹窗展示近期浏览的油站记录，自动去重，保留近五十条，每条显示名称、地址和浏览日期，支持一键清空。
    
45. 
    
46. 意见反馈：用户可选择反馈类型（功能建议、问题反馈、其他）并填写内容提交，管理员可在后台查看和回复。
    
47. 
    
48. 设置弹窗提供消息通知和位置服务的开关选项。关于我们弹窗展示应用版本和简介信息。底部有退出登录按钮。
    
49. 
    
50. ### 6. 分销中心
    
51. 
    
52. 分销中心采用审批制访问控制。用户首次访问时，如果未申请或申请被拒绝，页面仅显示申请入口和状态提示。提交申请时可选择分销等级（一级、二级、三级），填写真实姓名和手机号，并可上传收款码图片。
    
53. 
    
54. 审批通过后，用户可查看完整的佣金统计面板，包括累计佣金、可提现佣金和冻结佣金。邀请码区域展示个人邀请码并生成二维码供他人扫码注册。邀请好友列表显示已邀请用户的昵称、手机号（脱敏显示）和注册时间。
    
55. 
    
56. 提现功能：用户选择提现金额（不少于100元）和提现方式（微信、支付宝），上传收款码图片后提交申请。提现申请进入待审核状态，管理员审核通过后变为已打款。提现记录列表展示每次提现的金额、方式、状态和时间。
    
57. 
    
58. 分销关系基于用户的父子层级结构：每个用户注册时可填写邀请码绑定上级，上级获得一级分销佣金（3%），上上级获得二级分销佣金（1%）。
    
59. 
    
60. ---
    
61. 
    
62. ## 三、管理后台功能
    
63. 
    
64. 管理后台需管理员账号登录后使用，所有接口均校验管理员角色权限。左侧导航栏包含以下功能页面。
    
65. 
    
66. ### 1. 仪表盘
    
67. 
    
68. 展示系统核心数据概览，包括总用户数、总订单数、今日订单数、总佣金等统计指标。
    
69. 
    
70. ### 2. 用户管理
    
71. 
    
72. 以表格展示所有注册用户列表，列包含ID、手机号、昵称、VIP等级、邀请码、上级ID、状态和注册时间。支持编辑用户信息（昵称、状态），启用或禁用用户账号，以及删除用户。
    
73. 
    
74. ### 3. 油站管理
    
75. 
    
76. 油站列表表格展示油站ID、名称、品牌、地址、电话、营业时间和状态。支持新增油站（填写外部油站ID、名称、品牌、经纬度等）、编辑油站基本信息、删除油站。编辑弹窗中可修改各油品类型的标准价格和VIP价格。
    
77. 
    
78. ### 4. 订单管理
    
79. 
    
80. 展示所有用户的加油订单，列包含订单ID、用户信息、油站名称、油品类型、金额、状态和时间。支持按状态筛选。点击详情查看订单完整信息。待支付或支付中的订单可由管理员执行取消操作。
    
81. 
    
82. ### 5. 提现管理
    
83. 
    
84. 展示所有用户的提现申请列表，列包含ID、用户手机号、昵称、提现金额、提现方式（微信/支付宝/银行卡）、账户信息、收款码图片（点击可放大预览）、状态标签和申请时间。支持按状态筛选。待审核状态的申请可执行通过或拒绝操作，已通过状态的申请可标记为已打款。审核拒绝后佣金自动退回用户可提现余额。
    
85. 
    
86. ### 6. 分销申请管理
    
87. 
    
88. 展示用户提交的分销员申请列表，列包含申请人信息、申请等级、真实姓名、联系电话、备注、收款码图片、申请时间和当前状态。管理员可审批通过或拒绝申请，通过后更新用户的分销员状态和等级。
    
89. 
    
90. ### 7. 系统配置
    
91. 
    
92. 分为两个标签页：
    
93. 
    
94. 接口参数设置：以分类折叠面板展示微信配置（AppID、密钥、Token、消息加解密密钥）、微信支付配置（商户号、API密钥、证书序列号、支付回调地址）、分销比例（佣金池比例、一二三级分销比例）、地图配置和能链API对接配置（应用标识、密钥、渠道编号、接口地址、回调地址）。所有配置支持直接编辑保存。
    
95. 
    
96. 全部配置项：以表格形式展示数据库中所有配置记录，支持按配置键或描述搜索筛选。每条配置标注管理来源--绿色标签表示该配置由"接口参数设置"页面统一管理，灰色标签表示手动设置的配置项。可直接编辑任意配置。
    
97. 
    
98. ### 8. 公告管理
    
99. 
    
100. 管理系统公告，公告内容支持富文本编辑器。列表展示标题、内容摘要、发布时间和发布状态。支持新增、编辑和删除公告。已发布的公告会显示在用户端首页。
     
101. 
     
102. ### 9. Banner管理
     
103. 
     
104. 管理首页展示的轮播图、广告图和导航项。列表展示每个Banner的类型（轮播图/广告图/导航项，以不同颜色标签区分）、标题、预览图、排序序号、显示状态和创建时间。
     
105. 
     
106. 编辑弹窗支持三种类型：轮播图和广告图需要上传图片（支持点击更换，限制JPG/PNG/GIF/WebP格式，不大于5MB），可填写跳转链接；导航项类型不需要图片，通过可视图标网格选择器选取图标（提供二十余个常用图标和若干表情符号），点击即可选中并有实时预览。所有类型均支持设置排序序号和显示/隐藏开关。
     
107. 
     
108. ### 10. 反馈管理
     
109. 
     
110. 展示用户提交的意见反馈，列表包含反馈人信息、反馈类型（功能建议/问题反馈/其他）、内容和提交时间。支持按状态筛选。管理员可对反馈进行回复，回复后状态变为已回复。
     
111. 
     
112. ---
     
113. 
     
114. ## 四、外部API对接
     
115. 
     
116. 系统与能链开放平台进行了完整对接，实现以下核心流程：
     
117. 
     
118. 1. 用户令牌获取：使用用户手机号调用能链接口获取认证令牌，令牌有效期两小时，过期自动刷新。
     
119. 2. 油站查询：调用能链附近油站接口，传入经纬度和查询半径获取周边油站数据。
     
120. 3. 订单创建：调用能链下单接口，传入油站编号、油枪号、油品编号和金额，获取能链订单号。
     
121. 4. H5支付：通过认证码构建能链H5收银台支付链接，用户在微信浏览器中完成支付。
     
122. 5. 支付回调：能链在支付完成后回调系统接口通知支付结果，系统更新本地订单状态和分销佣金。
     
123. 
     
124. 签名机制采用MD5算法：将请求参数按字母排序拼接后追加密钥，取MD5大写作为签名。接口请求需携带应用标识和时间戳。
     
125. 
     
126. ---
     
127. 
     
128. ## 五、权限与安全
     
129. 
     
130. 用户端采用JWT令牌认证，所有接口（除登录注册外）均需携带Authorization请求头。管理员接口额外校验角色为admin。密码使用bcrypt加密存储。手机号在列表展示时中间四位脱敏显示。
     
131. 
     
132. ---
     
133. 基于代码分析，这个项目的独特卖点是：**真实对接能链团油API的微信加油H5完整系统 + 三级分销 + 管理后台**。
     
134. 
     
135. ---
     
136. 
     
137. **SEO标题：**
     
138. 
     
139. 微信加油H5系统源码 — 附近油站导航、在线支付、三级分销佣金、管理后台一站式解决方案
     
140. 
     
141. ---
     
142. 
     
143. **备选标题（根据投放场景选用）：**
     
144. 
     
145. 1. 加油站微信H5商城源码 对接能链团油API 支持分销提现
     
146. 2. 油站导流变现系统源码 微信H5加油支付 三级分销
     
147. 3. 微信加油小程序源码替代方案 H5在线支付油站管理系统
     

复制代码

你好棒！！

支持！！！

不错！！

支持！！！

已加客服

你历害！！

沙发！！