目录
- 引言
- 界面原型
- [1 表结构搭建](#1 表结构搭建)
-
- [1.1 优惠活动表 (promotions)](#1.1 优惠活动表 (promotions))
- [1.2 活动规则表 (promotion_rules)](#1.2 活动规则表 (promotion_rules))
- [1.3 用户优惠券表 (user_coupons)](#1.3 用户优惠券表 (user_coupons))
- [2 搭建后台应用](#2 搭建后台应用)
- [3 搭建小程序功能](#3 搭建小程序功能)
-
- [3.1 创建变量](#3.1 创建变量)
- [3.2 搭建布局](#3.2 搭建布局)
- 最终效果
引言
在数字化转型浪潮下，传统加油站面临着运营效率、服务质量和管理水平的诸多挑战。智慧加油站管理系统应运而生，它不仅是传统加油站的数字化升级，更是一次服务模式的革新。本系统采用现代化的低代码搭建技术，整合了加油站运营管理的各个环节，为站点管理者、工作人员和用户提供了全方位的智能化解决方案。
系统的核心功能涵盖了油价管理、优惠活动运营、员工排班、设备监控等关键业务模块。通过实时油价调整机制，站点可以根据市场变化灵活定价；丰富的促销活动管理功能，让运营者能够制定多样化的营销策略，提升用户粘性；智能化的排班系统则确保了人力资源的合理配置，提高了工作效率。
在本教程中，我们将深入探讨智慧加油站管理系统的技术实现细节，包括系统架构设计、核心功能模块的开发流程、数据库设计等关键环节。通过实际的代码示例和最佳实践分享，帮助开发者更好地理解和应用相关技术，为智慧加油站的建设提供有力支持。
界面原型
本篇实战教程，我们将实现一下优惠活动管理功能，包括表结构的搭建、后台管理功能搭建以及小程序端展示功能
1 表结构搭建
优惠活动模块，通过promotions表存储活动基本信息，promotion_rules表定义活动规则，user_coupons表记录用户优惠券使用情况，支持多样化的营销策略
1.1 优惠活动表 (promotions)
| 字段名 | 数据类型 | 约束条件 | 默认值 | 说明 |
|---|---|---|---|---|
| promotion_name | 文本 | NOT NULL | - | 活动名称 |
| promotion_type | 枚举 | NOT NULL | - | 活动类型：折扣/满减/赠品/积分 |
| start_time | 日期时间 | NOT NULL | - | 活动开始时间 |
| end_time | 日期时间 | NOT NULL | - | 活动结束时间 |
| status | 枚举 | NOT NULL | 'DRAFT' | 活动状态：草稿/生效/暂停/结束 |
| description | 文本 | - | NULL | 活动描述 |
| image_url | 图片 | - | NULL | 活动图片URL |
1.2 活动规则表 (promotion_rules)
| 字段名 | 数据类型 | 约束条件 | 默认值 | 说明 |
|---|---|---|---|---|
| promotion_id | 关联关系 | NOT NULL, FOREIGN KEY | - | 关联的活动ID |
| rule_type | 枚举 | NOT NULL | - | 规则类型：金额/数量/会员等级 |
| condition_value | 数字 | NOT NULL | - | 条件值（如：满300元） |
| discount_value | 数字 | NOT NULL | - | 优惠值（如：减50元） |
| max_discount | 数字 | - | NULL | 最大优惠金额 |
| usage_limit | 数字 | - | NULL | 使用次数限制 |
| member_level | 文本 | - | NULL | 适用会员等级 |
1.3 用户优惠券表 (user_coupons)
| 字段名 | 数据类型 | 约束条件 | 默认值 | 说明 |
|---|---|---|---|---|
| user_id | 关联关系 | NOT NULL | - | 用户ID |
| promotion_id | 关联关系 | NOT NULL, FOREIGN KEY | - | 关联的活动ID |
| status | 枚举 | NOT NULL | 'UNUSED' | 使用状态：未使用/已使用/已过期 |
| received_time | 日期时间 | - | CURRENT_TIMESTAMP | 领取时间 |
| used_time | 日期时间 | - | NULL | 使用时间 |
| expire_time | 日期时间 | NOT NULL | - | 过期时间 |
和用户关联的表我们暂时不创建，后续把用户体系构建好了之后再创建
2 搭建后台应用
有了表结构之后，我们还是先搭建后台管理功能。打开我们的管理后台，创建页面，根据表创建对应的列表、编辑、查看页面
切换到页面设计，添加菜单
切换到活动列表页面，设置筛选器，勾选必要的查询条件
在操作列，添加按钮，设置为活动规则
切换到活动规则列表页面，选中页面组件，添加URL参数，添加activityid
设置表格的数据筛选，活动标识等于我们的URL参数
选中页面组件，添加弹窗组件
弹窗内容添加表单容器，选择活动规则表
设置活动标识的选中值，点击fx进行绑定
绑定为我们的URL参数
关闭弹窗的默认打开配置
关闭底部按钮显示
修改表单容器的提交事件，配置为关闭弹窗、刷新表格
回到活动列表页面，给活动规则按钮配置点击事件，打开我们的活动规则页面，将当前行的数据标识传入
3 搭建小程序功能
3.1 创建变量
在代码区点击创建变量，新增内置数据表查询，选择我们的活动表
配置查询条件，配置为活动状态等于生效
3.2 搭建布局
先在页面里添加一个普通容器，里边放置一个文本组件，设置为优惠活动
在下边继续添加普通容器，里边添加两个普通容器
设置外层容器的样式为横向排列，横向平分
普通容器里添加两个文本组件用来显示活动名称和描述
然后添加一个图片组件用来显示背景，这里主要用到了一个布局原则，父相子绝
父相子绝是CSS布局中的一个重要概念，指的是父元素设置position: relative，子元素设置position: absolute。这种布局方式的原理是：当子元素设置为absolute定位时，它会脱离文档流，并且会以最近的已定位祖先元素（position不为static）作为参考点进行定位。通过在父元素上设置position: relative，可以让子元素以父元素为参考点进行定位，而不是相对于整个页面。这种布局方式常用于弹窗、下拉菜单、悬浮提示等需要精确定位的场景。
我们的父容器是相对定位
而图片组件是绝对定位
为了不让文本组件被图片覆盖住，我们设置文本组件为相对定位，置顶
最终效果
在站点信息的下边显示最新活动，给一个不错的布局展示
