加油站实战小程序04今日油价

2025/4/10 12:52:32 来源：https://blog.csdn.net/u012877217/article/details/146840532 浏览: 次关键词：加油站实战小程序04今日油价

引言

在加油站小程序众多实用功能中，为用户提供当日油价查询服务格外便捷。接下来，本文将详细介绍该小程序后台的维护功能，以及小程序端相关信息的展示功能。

1 创建数据源

打开数据库，添加油品表，并添加对应的字段
在这里插入图片描述

字段名称	字段标识	数据类型	是否必填	默认值	字段说明
油品名称	name	文本	否	-	油品名称
当前价格	current_price	数字	否	-	当前价格
计量单位	unit	文本	否	元/升	计量单位
状态	status	枚举	否	1	状态：1-正常 2-停用

将油品名称设置为主列字段
在这里插入图片描述

接着创建油品价格历史表
在这里插入图片描述

字段名称	字段标识	数据类型	是否必填	默认值	字段说明
ID	id	INT	否	自增	主键标识
油品标识	ypbs	关联关系	否	-	关联油品表的数据标识
价格	price	数字	否	-	油品价格
生效时间	effective_time	日期时间	否	-	价格生效时间
调整原因	reason	文本	是	-	价格调整原因

2 搭建管理后台功能

表创建好之后，打开我们的管理后台，根据表创建管理页面
在这里插入图片描述

切换到页面设计，添加今日油价菜单

先录入基础数据

操作列我们添加两个按钮，分别是调整油价、历史记录

调整油价我们弹出弹窗，编辑信息，在保存的时候要把信息写入到历史记录表里。选中页面组件添加弹窗
在这里插入图片描述
弹出内容里添加表单容器，选择油价历史表

关闭弹窗的默认打开，关闭底部按钮显示

给调整油价按钮设置点击事件，设置为打开弹窗，传入我们表格的所在行的数据标识字段

设置弹窗里的油品标识字段，绑定选中值属性
在这里插入图片描述
绑定我们弹窗的参数

在表单容器的提交事件，我们分别配置更新油品表的价格字段，刷新数据表格，关闭弹窗

这里更新的时候条件设置为数据标识等于我们的弹窗的入参

价格的话可以从表单的字段得到
在这里插入图片描述
切换到油价历史列表页面，选中页面组件，添加URL参数，oilid

给数据表格设置数据筛选，让我们的油品标识等于我们的URL参数

回到油品列表页面，设置历史记录按钮的事件为打开页面，打开油价历史列表页面，传入参数
在这里插入图片描述

3 搭建小程序功能

3.1 搭建布局

小程序部分，我们需要提取表里的数据作展示，先看一下原型的效果
在这里插入图片描述
打开我们的小程序，先添加一行一列

在列里边添加普通容器，下边再添加四个普通容器

设置外层普通容器，内边距为16px，横向排列、两端对齐，8px的圆角，相对定位

在内层容器的第一个普通容器里添加文本组件，修改文本内容为今日油价，设置普通容器的样式为，12px字号、白色字体、上下各2px的内边距，左右各8px的内边距，4px的圆角，绝对定位，距上边-10px，距左边16px
在这里插入图片描述
其余的普通容器，里边都放置三个文本