会员管理系统实战开发教程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语言的重难点知识进行更深入的学习。 今日练习题关键字:记负均正    旋转数组的最小数字    二分查找 💓博主…

Next.js基础语法

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

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问…

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…

【UE 材质】实现角度渐变材质、棋盘纹理材质

目标 步骤 一、角度渐变材质 1. 首先通过“Mask”节点将"Texture Coordinate" 节点的R、G通道分离 2. 通过“RemapValueRange”节点将0~1范围映射到-1~1 可以看到此时R通道效果&#xff1a; G通道效果&#xff1a; 继续补充如下节点 二、棋盘纹理材质 原视频链接&…

git分支管理策略

git的基础操作以及常用命令在上篇博客哦~ git原理与基本使用 1.分支管理 1.主分支 在版本回退⾥&#xff0c;我们已经知道&#xff0c;每次提交&#xff0c;Git都把它们串成⼀条时间线&#xff0c;这条时间线就可以理解为是⼀个分⽀。截⽌到⽬前&#xff0c;只有⼀条时间线&…

Docker原理详细剖析-Namespace

一、简介 docker容器技术从2013年开始火了以后&#xff0c;2014年左右当时有幸在学校能和学院教授一起做些项目以及学习。其中docker技术在当时来说还算是比较新的技术&#xff0c;国内关于这块的资料以及使用也才刚刚开始&#xff0c;讨论docker技术&#xff0c;算是相对时髦的…

【办公自动化】使用Python批量处理Excel文件并转为csv文件

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…

Hbase文档--架构体系

阿丹&#xff1a; 基础概念了解之后了解目标知识的架构体系&#xff0c;就能事半功倍。 架构体系 关键组件介绍&#xff1a; HBase – Hadoop Database&#xff0c;是一个高可靠性、高性能、面向列、可伸缩的分布式存储系统&#xff0c;利用HBase技术可在廉价PC Server上搭建起…

WordArt Designer:基于用户驱动与大语言模型的艺术字生成

AIGC推荐 FaceChain人物写真开源项目&#xff0c;支持风格与穿着自定义&#xff0c;登顶github趋势榜首&#xff01; 前言 本文介绍了一个基于用户驱动&#xff0c;依赖于大型语言模型(LLMs)的艺术字生成框架&#xff0c;WordArt Designer。 该系统包含四个关键模块:LLM引擎、…