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

这篇具有很好参考价值的文章主要介绍了会员管理系统实战开发教程06-会员充值。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

1 创建充值记录表

打开控制台,点击+号创建数据源
会员管理系统实战开发教程06-会员充值,低代码,微搭
输入数据源名称充值记录
会员管理系统实战开发教程06-会员充值,低代码,微搭
点击编辑添加字段
会员管理系统实战开发教程06-会员充值,低代码,微搭
先添加充值金额字段,类型选择数字
会员管理系统实战开发教程06-会员充值,低代码,微搭
再添加充值日期字段,类型选择日期时间
会员管理系统实战开发教程06-会员充值,低代码,微搭
添加所属会员卡字段,类型选择关联关系,关联模型选择会员卡信息
会员管理系统实战开发教程06-会员充值,低代码,微搭

2 生成模型页面

打开我们的模型应用,点击创建页面
会员管理系统实战开发教程06-会员充值,低代码,微搭
选择表格与表单,数据模型选择我们刚创建的数据源
会员管理系统实战开发教程06-会员充值,低代码,微搭

3 创建充值页面

选择我们的会员列表,添加一个普通容器,下边添加一个表单容器
会员管理系统实战开发教程06-会员充值,低代码,微搭
在代码区创建一个布尔类型的变量控制我们的表单是否显示
会员管理系统实战开发教程06-会员充值,低代码,微搭
然后给普通容器绑定是否可见,绑定我们刚刚定义的变量
会员管理系统实战开发教程06-会员充值,低代码,微搭
会员管理系统实战开发教程06-会员充值,低代码,微搭
切换到样式页签,设置定位,设置为绝对定位
会员管理系统实战开发教程06-会员充值,低代码,微搭
选中下拉框,设置筛选条件,让我们的所属会员等于我们的memberid
会员管理系统实战开发教程06-会员充值,低代码,微搭
设置这个筛选条件的目的是只过滤当前会员开通的会员卡,而不是全部列出来

4 打开充值页面

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

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

然后给按钮定义点击事件,调用我们的自定义方法
会员管理系统实战开发教程06-会员充值,低代码,微搭

5 设置关闭页面

我们要用图标来控制页面的关闭,找到标题的组件,在里边添加一个图标组件
会员管理系统实战开发教程06-会员充值,低代码,微搭
设置普通容器的样式为两端对齐
会员管理系统实战开发教程06-会员充值,低代码,微搭

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

给图标组件定义事件,方法选择变量赋值,让我们的变量赋值为false
会员管理系统实战开发教程06-会员充值,低代码,微搭

6 给会员卡累加余额

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

先定义一个变量用来保存选中后会员卡的ID
会员管理系统实战开发教程06-会员充值,低代码,微搭
给会员卡的下拉选择组件增加一个事件,选中值之后我们将值赋值给变量
会员管理系统实战开发教程06-会员充值,低代码,微搭

再定义一个变量,用来查询会员卡的信息
会员管理系统实战开发教程06-会员充值,低代码,微搭
定义一个自定义方法用来更新会员卡的余额

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
    }
  })
}

然后设置表单容器的提交事件,在提交成功之后调用我们的自定义方法
会员管理系统实战开发教程06-会员充值,低代码,微搭

最终的效果

会员管理系统实战开发教程06-会员充值,低代码,微搭

总结

本篇介绍了会员充值的功能,先需要创建充值记录的数据源,接着开发充值页面,充值的逻辑是先将记录写入到充值记录表了,接着更新会员卡的余额,感兴趣的照着做一遍吧。文章来源地址https://www.toymoban.com/news/detail-685236.html

到了这里,关于会员管理系统实战开发教程06-会员充值的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • QT上位机开发(会员充值软件)

    【 声明:版权所有,欢迎转载,请勿用于商业用途。 联系信箱:feixiaoxing @163.com】         所有的控件当中,除了label、edit、radio、combobox和button之外,另外一个用的比较多的控件就是grid,也可称之为表格。表格,在很多场景下都可以发挥着重要的作用,比如说统计、项目管

    2024年01月24日
    浏览(48)
  • 门店会员管理系统有哪些功能?2023门店会员管理系统该如何选?

    不管是自己单独开店,还是同时开多家门店的老板来说,都普遍面临房租高,人难招,生意不好等难题。 很多老板都想通过 借助会员管理系统来留住新老客户,通过提升会员等级、赠送会员积分等玩法,持续刺激客户到店消费。 那么,门店会员管理系统具体有哪些实用功能

    2024年02月08日
    浏览(81)
  • 超市会员管理系统

    目录 一、需求分析 二、问题描述 三、总体设计 四、详细设计 1)数据类型 2) 函数名 3)登陆界面 4)主界面 5)界面设计 (1)系统说明 (2) 输入会员信息  (3) 显示会员信息  (4)查询会员信息 (5) 插入会员信息 (6)删除会员信息 (7)修改会员信息 (8)会员消费

    2024年02月09日
    浏览(46)
  • 【会员管理系统】篇一之项目预热

    vue.js  vueCLI 3.x   Axios   babel     EcmaScript6  Eslint  Mock.js   Easy-Mock           Element UI    Vuex (1)新建文件夹,在vscode中打开,使用终端 npm init -y (2)安装mock.js    npm  install mockjs (3)新建demo1.js文件,在其中编写代码 运行 node demo1.js 也可使用  console.log(JSON.stringif

    2024年02月07日
    浏览(37)
  • PHP结课报告 《会员信息管理系统》

    《动态网站设计与开发》 考试改革报告 项目名称:        会员注册管理系统         专业班级: 计算机科学与技术 学生学号:        *************           学生姓名:            ***              日    期:          2022.12.12          目  录 1.系统开发背

    2024年02月11日
    浏览(43)
  • JAVA小项目之超市会员管理系统

    1、会员类Member     (1)姓名        name:String     (2)卡号        cardId:int     (3)密码        password:String     (4)积分        score:int     (5)开卡日期    registDate:String      2、会员管理类     (1)所有会员(卡)--集合:List  ArrayListMember      

    2024年02月07日
    浏览(44)
  • 干洗店收银系统、上门洗鞋小程序,干洗店会员管理系统

    干洗店收银系统、上门洗鞋小程序,干洗店会员管理系统可以增加洗衣店的优势,让干洗店回本快,通过发行会员卡卡促销回收资金带来效益,减少投资压力。 干洗店管理软件功能介绍 预约上门收衣 智能提醒+员工手机APP抢单+APP拍照同步上传 快速完成订单 系统定价+系统

    2024年02月08日
    浏览(43)
  • 基于Springboot+uniapp的美容美发预约、会员管理、充值小程序(有文档、Java毕业设计)

     大家好,我是DeBug,很高兴你能来阅读!作为一名热爱编程的程序员,我希望通过这些教学笔记与大家分享我的编程经验和知识。在这里,我将会结合实际项目经验,分享编程技巧、最佳实践以及解决问题的方法。无论你是初学者还是有一定经验的程序员,我都希望能够为你

    2024年01月21日
    浏览(52)
  • 基于springboot+vue+elementui的健身房会员管理系统的

    为了帮助用户更好的了解和理解程序的开发流程与相关内容,本文将通过六个章节进行内容阐述。 第一章:描述了程序的开发背景,程序运用于现实生活的目的与意义,以及程序文档的结构安排信息; 第二章:描述了程序的开发环境,包括程序开发涉及到的技术,程序开发

    2024年02月06日
    浏览(68)
  • Android美容美发理发店会员管理系统uniapp小程序

    本论文中实现的美容美发会员将以用户核心的日常信息维护工作为主,主要涵盖了个人中心,会员管理,会员等级管理,充值信息管理,扣费信息管理,项目类型管理,美食服务管理,服务预约管理,产品类型管理,美容产品管理,订单信息管理,入库信息管理,礼品信息管

    2024年03月11日
    浏览(70)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包