会员管理系统实战开发教程06-会员充值

我们上篇讲解了会员开卡的操作,有了会员卡之后日常就是给会员进行充值,充值的逻辑是对余额进行累加,而且要记录充值的情况。

1 创建充值记录表

打开控制台,点击+号创建数据源
在这里插入图片描述
输入数据源名称充值记录
在这里插入图片描述
点击编辑添加字段
在这里插入图片描述
先添加充值金额字段,类型选择数字
在这里插入图片描述
再添加充值日期字段,类型选择日期时间
在这里插入图片描述
添加所属会员卡字段,类型选择关联关系,关联模型选择会员卡信息
在这里插入图片描述

2 生成模型页面

打开我们的模型应用,点击创建页面
在这里插入图片描述
选择表格与表单,数据模型选择我们刚创建的数据源
在这里插入图片描述

3 创建充值页面

选择我们的会员列表,添加一个普通容器,下边添加一个表单容器
在这里插入图片描述
在代码区创建一个布尔类型的变量控制我们的表单是否显示
在这里插入图片描述
然后给普通容器绑定是否可见,绑定我们刚刚定义的变量
在这里插入图片描述
在这里插入图片描述
切换到样式页签,设置定位,设置为绝对定位
在这里插入图片描述
选中下拉框,设置筛选条件,让我们的所属会员等于我们的memberid
在这里插入图片描述
设置这个筛选条件的目的是只过滤当前会员开通的会员卡,而不是全部列出来

4 打开充值页面

选中充值按钮,创建一个自定义方法,我们在点击按钮的时候让我们的是否显示页面的变量设置为true

export default function({event, data}) {$page.dataset.state.openchongzhi = true
}

然后给按钮定义点击事件,调用我们的自定义方法
在这里插入图片描述

5 设置关闭页面

我们要用图标来控制页面的关闭,找到标题的组件,在里边添加一个图标组件
在这里插入图片描述
设置普通容器的样式为两端对齐
在这里插入图片描述

self {display: flex;justify-content: space-between;flex-direction: row;
}

给图标组件定义事件,方法选择变量赋值,让我们的变量赋值为false
在这里插入图片描述

6 给会员卡累加余额

我们选择会员卡,充值完毕后,记录写入了充值记录表,写入成功后需要更新一下会员卡的记录,进行余额的累加

先定义一个变量用来保存选中后会员卡的ID
在这里插入图片描述
给会员卡的下拉选择组件增加一个事件,选中值之后我们将值赋值给变量
在这里插入图片描述

再定义一个变量,用来查询会员卡的信息
在这里插入图片描述
定义一个自定义方法用来更新会员卡的余额

export default function({event, data}) {console.log("yue",data.target)console.log("cardid",$page.dataset.state.cardid)$w.card.trigger()console.log("card",$w.card.data)app.cloud.callModel({name:'hykxx_gmcze7h',methodName:'wedaUpdate',params:{_id:$w.card.data._id,ye:$w.card.data.ye+data.target}})
}

然后设置表单容器的提交事件,在提交成功之后调用我们的自定义方法
在这里插入图片描述

最终的效果

在这里插入图片描述

总结

本篇介绍了会员充值的功能,先需要创建充值记录的数据源,接着开发充值页面,充值的逻辑是先将记录写入到充值记录表了,接着更新会员卡的余额,感兴趣的照着做一遍吧。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/59583.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【C进阶】深度剖析数据在内存中的存储

目录 一、数据类型的介绍 1.类型的意义: 2.类型的基本分类 二、整形在内存中的存储 1.原码 反码 补码 2.大小端介绍 3.练习 三、浮点型在内存中的存储 1.一个例子 2.浮点数存储规则 一、数据类型的介绍 前面我们已经学习了基本的内置类型以及他们所占存储…

WebRTC之FEC前向纠错协议

FEC前向纠错用于丢包恢复,对媒体包进行异或或其他算法生成冗余包进行发送。如果接收端出现丢包,可以通过冗余包恢复出原始的媒体包。FEC的代价是增加码率带宽,所以一般会根据网络状况、丢包率来动态调整FEC冗余系数,也会结合NACK/…

无涯教程-Android - 环境设置

您可以从Oracle的Java网站下载最新版本的Java JDK-Java SE下载,您将在下载的文件中找到有关安装JDK的说明,按照给定的说明安装和配置安装程序。最后,将PATH和JAVA_HOME环境变量设置为引用包含 java 和 javac 的目录,通常分别是java_install_dir/bin和java_install_d…

D-Link DCS 密码泄露漏洞

0x01 前言 本次测试仅供学习使用,如若非法他用,与本文作者无关,需自行负责!!! 0x02 漏洞描述 D-link DCS是一款成像色彩为彩色 是一款网络摄像机。D-link DCS系统存在密码泄露漏洞,攻击者通过…

C语言每日一练-----Day(4)

本专栏为c语言练习专栏,适合刚刚学完c语言的初学者。本专栏每天会不定时更新,通过每天练习,进一步对c语言的重难点知识进行更深入的学习。 今日练习题关键字:记负均正    旋转数组的最小数字    二分查找 💓博主…

“精准时空”赋能制造业智能化发展

作者:邓中亮 高达动态厘米级的高精度定位服务,不仅是北斗卫星导航系统的一大独门绝技,其在产业化应用层面也已逐步向普适化、标配化演进,并延展出时空智能新兴产业。 5月17日,当长征三号乙运载火箭成功发射北斗系统的…

ubuntu触摸板自然滚动设置无效

natural scrolling does not work in gnome - Unix & Linux Stack Exchange settings->Mouse & Touchpad 里设置触摸板滚动方向为Natural无效,可能的原因是xserver-xorg-input-synaptics捕获了触摸板行为,把它xserver-xorg-input-synaptics …

Apache Spark 的基本概念和在大数据分析中的应用

Apache Spark是一个开源的大数据分析框架,可以快速高效地处理大规模的数据集。Spark具有以下特点: 快速性: Spark使用内存计算,能够在迭代算法、交互式数据挖掘和实时流处理等场景中表现出色。 灵活性: Spark支持多种…

Next.js基础语法

Next.js 目录结构 入口App组件(_app.tsx) _app.tsx是项目的入口组件,主要作用: 可以扩展自定义的布局(Layout)引入全局的样式文件引入Redux状态管理引入主题组件等等全局监听客户端路由的切换 ts.config…

驱动版本问题:connect error, url mysql.db.url:jdbc:mysql://IP地址:3306/数据库名

MySQL升级版本 5.7.43 必须升级驱动版本 8.0 以上版本 启动项目报错 使用Druid数据库连接池获取Mysql常见的错误--不兼容问题 后来百度搜索发现原来是Mysql版本和mysql-connector-java版本不一致造成的。 查询Mysql版本号: SELECT version(); 然后去官网找对应版…

iOS开发Swift-2-图片视图、App图标-赏月App

1.创建新项目 点击File - New - Project。 选择Single View App,点击Next。 填写文件信息,点击Next。 选择文件位置,点击Create。 修改App显示名称为 “赏月”。 2.设置背景色 选择Main,点击View界面,选择右边属性&…

用docker-compose搭建LNMP

docker-compose搭建LNMP 一、compose 的部署1.Docker Compose 环境安装 二、编写Docker Compose1.准备依赖文件,配置nginx2.配置mysql3.配置php4.编写docker-compose.yml5.执行6.查看 一、compose 的部署 (1)公司在实际的生产环境中,需要使用…

Cesium 加载 geojson 文件并对文件中的属性值进行颜色设置

文章目录 需求分析解决 需求 Cesium 加载 geojson 文件并对文件中的属性值进行颜色设置 分析 在搜寻多种解决方案后,最后总结出 自己的解决方案 方案一,没看懂 var geojsonOptions {clampToGround : true //使数据贴地};var entities;promise Cesium…

uniapp 支持图片放大

<view class"list" v-for"(item, index) in urls" :key"index"><image :src"item" click"viewImg(item, index)" disabled></image></view> js // 预览大图 viewImg(data, index) {uni.previewImag…

Java【手撕滑动窗口】LeetCode 209. “长度最小子数组“, 图文详解思路分析 + 代码

文章目录 前言一、长度最小子数组1, 题目2, 思路分析3, 代码 前言 各位读者好, 我是小陈, 这是我的个人主页, 希望我的专栏能够帮助到你: &#x1f4d5; JavaSE基础: 基础语法, 类和对象, 封装继承多态, 接口, 综合小练习图书管理系统等 &#x1f4d7; Java数据结构: 顺序表, 链…

React入门 组件学习笔记

项目页面以组件形式层层搭起来&#xff0c;组件提高复用性&#xff0c;可维护性 目录 一、函数组件 二、类组件 三、 组件的事件绑定 四、获取事件对象 五、事件绑定传递额外参数 六、组件状态 初始化状态 读取状态 修改状态 七、组件-状态修改counter案例 八、this问…

如何安装chromadb

下载最新版本的python3.10 因为chromadb需要sqlite3的最小版本是3.35.0 使用如下命令安装 pip install chromadb 安装完毕后在python3的命令行窗口输入 import chromadb 如果不报错代表成功&#xff0c;如果报错sqlite3的最小版本是3.35.0&#xff0c;使用如下方式解决 …

校园照明控制系统的基本组成部分

1.1 主控中心 系统使用通用计算机作为主控中心&#xff0c;通过 RLINK 通讯装置与网络实现通 讯。计算机上可直接实现编程&#xff0c;监控&#xff0c;故障报警等功能。局域网上的计算机也可以 通过主控中心实现监控功能。 1.2 RLINK 通讯装置 主控中心与系统网络各单元的…

mysql 间隙锁原理深度详解

目录 一、前言 二、mysql之mvcc 2.1 什么是mvcc 2.2 mvcc组成 2.2.1 Undo log 多版本链 2.2.2 ReadView 2.2.3 快照读与当前读 三、RR级别下的事务问题 3.1 RR隔离级别解决的问题 3.1.1 幻读问题 3.2 幻读效果演示 3.2.1 准备测试表和数据 3.2.2 修改事务级别 3.…

Acwing798.差分矩阵

前缀和与差分 图文并茂 超详细整理&#xff08;全网最通俗易懂&#xff09;_前缀和差分_林小鹿的博客-CSDN博客 代码展示&#xff1a; #include<iostream> #include<cstdio> using namespace std; const int N 1e3 10; int a[N][N], b[N][N]; void insert(int x…