云起云市场_国内正版独立SaaS抖音QQ微信百度支付宝小程序软件应用交易服务市场商店平台

 找回密码
 立即注册
查看: 6.6K|回复: 9

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

[复制链接]

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

[复制链接]
平面插画风格微信加油H5广告图生成 (1).jpg
  1. 微信加油H5系统源码 — 附近油站导航、在线支付、三级分销佣金、管理后台一站式解决方案
复制代码



  1. ---

  2. # 团油快电系统 -- 功能详细说明

  3. ## 一、项目整体

  4. 本系统是一个面向微信生态的能源服务平台,采用三层架构:面向普通用户的手机端H5页面、面向管理员的Web后台管理系统、以及提供接口服务的Node.js后端。系统通过对接能链开放平台的加油API,将油站查询与在线支付能力整合到微信场景中,同时构建了会员体系与分销佣金机制。

  5. 数据库方面,系统使用了十一张数据表,涵盖用户、油站、油品价格、油枪、订单、分销佣金、提现记录、管理员、系统配置、用户反馈、公告和Banner广告图。

  6. ---

  7. ## 二、用户端功能(手机H5页面)

  8. ### 1. 登录注册

  9. 用户通过手机号和密码注册账号。注册时系统自动生成六位邀请码。登录时系统校验手机号是否有效、密码是否正确,通过后生成JWT令牌返回给前端。用户信息包括手机号、昵称、头像、VIP等级、VIP过期时间和邀请码。

  10. ### 2. 首页与油站发现

  11. 首页顶部展示轮播图广告和导航图标(如附近油站、优惠活动、加油指引等入口),下方展示公告列表。页面核心是基于定位的附近油站列表,显示每个油站的品牌标签(中石化、中石油、壳牌)、名称、地址、距离和参考油价。支持按距离、价格、品牌等条件排序筛选。

  12. ### 3. 油站详情与加油下单

  13. 点击油站卡片进入详情页,以渐变色头部卡片展示油站品牌、名称、地址、营业时间和联系电话。下方展示油站设施标签(如便利店、洗车、卫生间)和油品价格列表(92号、95号、98号),每项标注标准价和VIP专属价。用户可选择油品后看到可用油枪列表(空闲、使用中、维护中三种状态)。加油金额支持两种输入方式:直接输入金额,或输入升数系统自动计算金额。快速金额按钮提供100、200、300、500四个选项。

  14. 提交订单时,系统先通过能链API获取认证令牌,再调用能链接口创建订单并构建H5支付跳转链接,同时将订单同步保存到本地数据库。用户确认后跳转到能链支付页面完成付款。

  15. 油站详情页右上角有两个按钮:星标收藏按钮(点击切换收藏状态,黄色高亮表示已收藏)和分享按钮(点击弹出分享引导弹窗,微信内引导用户点击右上角菜单分享,微信外提供复制链接功能)。每次进入详情页自动记录浏览历史到本地存储。

  16. ### 4. 订单管理

  17. 订单列表页面展示用户的所有加油订单,每张订单卡片包含订单号、油站名称和品牌、油品类型、金额、创建时间和状态标签(待支付、支付中、已完成、已取消)。支持按状态筛选。点击订单进入详情页查看完整信息。

  18. ### 5. 个人中心

  19. 个人中心顶部以渐变色头部展示用户头像、昵称和手机号,下方统计区显示全部订单数量和累计佣金。菜单列表包括:我的订单(跳转订单列表)、分销中心、我的收藏、浏览历史、意见反馈、设置和关于我们。

  20. 我的收藏:以弹窗形式展示已收藏的油站列表,每个油站显示品牌标签、名称、地址和收藏时间。点击可跳转油站详情,可单独删除或一键清空。

  21. 浏览历史:同样以弹窗展示近期浏览的油站记录,自动去重,保留近五十条,每条显示名称、地址和浏览日期,支持一键清空。

  22. 意见反馈:用户可选择反馈类型(功能建议、问题反馈、其他)并填写内容提交,管理员可在后台查看和回复。

  23. 设置弹窗提供消息通知和位置服务的开关选项。关于我们弹窗展示应用版本和简介信息。底部有退出登录按钮。

  24. ### 6. 分销中心

  25. 分销中心采用审批制访问控制。用户首次访问时,如果未申请或申请被拒绝,页面仅显示申请入口和状态提示。提交申请时可选择分销等级(一级、二级、三级),填写真实姓名和手机号,并可上传收款码图片。

  26. 审批通过后,用户可查看完整的佣金统计面板,包括累计佣金、可提现佣金和冻结佣金。邀请码区域展示个人邀请码并生成二维码供他人扫码注册。邀请好友列表显示已邀请用户的昵称、手机号(脱敏显示)和注册时间。

  27. 提现功能:用户选择提现金额(不少于100元)和提现方式(微信、支付宝),上传收款码图片后提交申请。提现申请进入待审核状态,管理员审核通过后变为已打款。提现记录列表展示每次提现的金额、方式、状态和时间。

  28. 分销关系基于用户的父子层级结构:每个用户注册时可填写邀请码绑定上级,上级获得一级分销佣金(3%),上上级获得二级分销佣金(1%)。

  29. ---

  30. ## 三、管理后台功能

  31. 管理后台需管理员账号登录后使用,所有接口均校验管理员角色权限。左侧导航栏包含以下功能页面。

  32. ### 1. 仪表盘

  33. 展示系统核心数据概览,包括总用户数、总订单数、今日订单数、总佣金等统计指标。

  34. ### 2. 用户管理

  35. 以表格展示所有注册用户列表,列包含ID、手机号、昵称、VIP等级、邀请码、上级ID、状态和注册时间。支持编辑用户信息(昵称、状态),启用或禁用用户账号,以及删除用户。

  36. ### 3. 油站管理

  37. 油站列表表格展示油站ID、名称、品牌、地址、电话、营业时间和状态。支持新增油站(填写外部油站ID、名称、品牌、经纬度等)、编辑油站基本信息、删除油站。编辑弹窗中可修改各油品类型的标准价格和VIP价格。

  38. ### 4. 订单管理

  39. 展示所有用户的加油订单,列包含订单ID、用户信息、油站名称、油品类型、金额、状态和时间。支持按状态筛选。点击详情查看订单完整信息。待支付或支付中的订单可由管理员执行取消操作。

  40. ### 5. 提现管理

  41. 展示所有用户的提现申请列表,列包含ID、用户手机号、昵称、提现金额、提现方式(微信/支付宝/银行卡)、账户信息、收款码图片(点击可放大预览)、状态标签和申请时间。支持按状态筛选。待审核状态的申请可执行通过或拒绝操作,已通过状态的申请可标记为已打款。审核拒绝后佣金自动退回用户可提现余额。

  42. ### 6. 分销申请管理

  43. 展示用户提交的分销员申请列表,列包含申请人信息、申请等级、真实姓名、联系电话、备注、收款码图片、申请时间和当前状态。管理员可审批通过或拒绝申请,通过后更新用户的分销员状态和等级。

  44. ### 7. 系统配置

  45. 分为两个标签页:

  46. 接口参数设置:以分类折叠面板展示微信配置(AppID、密钥、Token、消息加解密密钥)、微信支付配置(商户号、API密钥、证书序列号、支付回调地址)、分销比例(佣金池比例、一二三级分销比例)、地图配置和能链API对接配置(应用标识、密钥、渠道编号、接口地址、回调地址)。所有配置支持直接编辑保存。

  47. 全部配置项:以表格形式展示数据库中所有配置记录,支持按配置键或描述搜索筛选。每条配置标注管理来源--绿色标签表示该配置由"接口参数设置"页面统一管理,灰色标签表示手动设置的配置项。可直接编辑任意配置。

  48. ### 8. 公告管理

  49. 管理系统公告,公告内容支持富文本编辑器。列表展示标题、内容摘要、发布时间和发布状态。支持新增、编辑和删除公告。已发布的公告会显示在用户端首页。

  50. ### 9. Banner管理

  51. 管理首页展示的轮播图、广告图和导航项。列表展示每个Banner的类型(轮播图/广告图/导航项,以不同颜色标签区分)、标题、预览图、排序序号、显示状态和创建时间。

  52. 编辑弹窗支持三种类型:轮播图和广告图需要上传图片(支持点击更换,限制JPG/PNG/GIF/WebP格式,不大于5MB),可填写跳转链接;导航项类型不需要图片,通过可视图标网格选择器选取图标(提供二十余个常用图标和若干表情符号),点击即可选中并有实时预览。所有类型均支持设置排序序号和显示/隐藏开关。

  53. ### 10. 反馈管理

  54. 展示用户提交的意见反馈,列表包含反馈人信息、反馈类型(功能建议/问题反馈/其他)、内容和提交时间。支持按状态筛选。管理员可对反馈进行回复,回复后状态变为已回复。

  55. ---

  56. ## 四、外部API对接

  57. 系统与能链开放平台进行了完整对接,实现以下核心流程:

  58. 1. 用户令牌获取:使用用户手机号调用能链接口获取认证令牌,令牌有效期两小时,过期自动刷新。
  59. 2. 油站查询:调用能链附近油站接口,传入经纬度和查询半径获取周边油站数据。
  60. 3. 订单创建:调用能链下单接口,传入油站编号、油枪号、油品编号和金额,获取能链订单号。
  61. 4. H5支付:通过认证码构建能链H5收银台支付链接,用户在微信浏览器中完成支付。
  62. 5. 支付回调:能链在支付完成后回调系统接口通知支付结果,系统更新本地订单状态和分销佣金。

  63. 签名机制采用MD5算法:将请求参数按字母排序拼接后追加密钥,取MD5大写作为签名。接口请求需携带应用标识和时间戳。

  64. ---

  65. ## 五、权限与安全

  66. 用户端采用JWT令牌认证,所有接口(除登录注册外)均需携带Authorization请求头。管理员接口额外校验角色为admin。密码使用bcrypt加密存储。手机号在列表展示时中间四位脱敏显示。

  67. ---
  68. 基于代码分析,这个项目的独特卖点是:**真实对接能链团油API的微信加油H5完整系统 + 三级分销 + 管理后台**。

  69. ---

  70. **SEO标题:**

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

  72. ---

  73. **备选标题(根据投放场景选用):**

  74. 1. 加油站微信H5商城源码 对接能链团油API 支持分销提现
  75. 2. 油站导流变现系统源码 微信H5加油支付 三级分销
  76. 3. 微信加油小程序源码替代方案 H5在线支付油站管理系统
复制代码
13425962014128724.jpeg




上一篇:H5直播系统源码 主播观众小助手三端分离 直播间弹幕互动...
下一篇:彩票分析预测商业源码含H5前台+管理后台+支付对接 专家方...
回复

使用道具 举报

你好棒!!
回复

使用道具 举报

支持!!!
回复

使用道具 举报

不错!!
回复

使用道具 举报

支持!!!
回复

使用道具 举报

已加客服
回复

使用道具 举报

你历害!!
回复

使用道具 举报

沙发!!
回复

使用道具 举报

顶一下!!
回复

使用道具 举报

afx*** 前天 11:07 | 显示全部楼层
非常好!!
回复

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies |上传

本版积分规则

加载中0.118889

QQ|小黑屋|云起SaaS | 鲁ICP备15033450号-1 劰载中...|网站地图

GMT+8, 2026-6-20 04:38 , Processed in 0.169894 second(s), 29 queries .

Copyright © 菏泽云起网络科技有限公司.

快速回复 返回顶部 返回列表