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

目录

  • 引言
  • [1 创建数据源](#1 创建数据源)
  • [2 搭建管理后台功能](#2 搭建管理后台功能)
  • [3 搭建小程序功能](#3 搭建小程序功能)
    • [3.1 搭建布局](#3.1 搭建布局)
    • [3.2 创建变量](#3.2 创建变量)
    • [3.3 数据绑定](#3.3 数据绑定)
  • 最终效果

引言

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

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

其余的普通容器,里边都放置三个文本

3.2 创建变量

在代码区,我们新建一个内置数据表查询,从油品表里获取3条数据

点击运行可以看到我们的数据

3.3 数据绑定

定义好变量之后,就可以给文本组件绑定数据了,第一个文本绑定为油品名称

第二个文本绑定为价格

第三个文本绑定为单位

按照上述方法绑定第二列和第三列的文本,注意绑定的时候要修改数组的索引,第二列修改为1,第三列修改为2

最终效果

首页我们在站点信息下边添加了今日油价的展示

相关推荐
fakaifa25 分钟前
beikeshop多商户跨境电商独立站最新版v1.6.0版本源码
前端·小程序·uni-app·php·beikeshop多商户·beikeshop跨境电商
Angus-zoe29 分钟前
微信小程序唤起app
微信小程序·小程序
NocoBase2 小时前
NocoBase 本周更新汇总:优化及缺陷修复
低代码·开源·资讯
不老刘2 小时前
微信小程序使用 Vant Weapp 组件库教程
微信小程序·小程序·vant
Mr.Liu62 小时前
小程序30-wxml语法-声明和绑定数据
前端·微信小程序·小程序
清风絮柳13 小时前
51. “闲转易”交易平台小程序(基于springboot&vue)
vue.js·spring boot·小程序·毕业设计·校园二手交易平台·二手交易小程序·闲转易交易系统
说私域13 小时前
基于开源AI大模型与S2B2C模式的线下服务型门店增长策略研究——以AI智能名片与小程序源码技术为核心
大数据·人工智能·小程序·开源
小程序照片合成14 小时前
uniapp微信小程序开发工具本地获取指定页面二维码
微信小程序·小程序·uniapp·二维码
低代码布道师15 小时前
加油站小程序实战教程05活动管理
低代码·小程序
橘猫云计算机设计19 小时前
基于django优秀少儿图书推荐网(源码+lw+部署文档+讲解),源码可白嫖!
java·spring boot·后端·python·小程序·django·毕业设计