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

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

1 创建充值记录表

打开控制台,点击+号创建数据源
会员管理系统实战开发教程06-会员充值_第1张图片
输入数据源名称充值记录
会员管理系统实战开发教程06-会员充值_第2张图片
点击编辑添加字段
会员管理系统实战开发教程06-会员充值_第3张图片
先添加充值金额字段,类型选择数字
会员管理系统实战开发教程06-会员充值_第4张图片
再添加充值日期字段,类型选择日期时间
会员管理系统实战开发教程06-会员充值_第5张图片
添加所属会员卡字段,类型选择关联关系,关联模型选择会员卡信息
会员管理系统实战开发教程06-会员充值_第6张图片

2 生成模型页面

打开我们的模型应用,点击创建页面
会员管理系统实战开发教程06-会员充值_第7张图片
选择表格与表单,数据模型选择我们刚创建的数据源
会员管理系统实战开发教程06-会员充值_第8张图片

3 创建充值页面

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

4 打开充值页面

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

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

然后给按钮定义点击事件,调用我们的自定义方法
会员管理系统实战开发教程06-会员充值_第15张图片

5 设置关闭页面

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

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

给图标组件定义事件,方法选择变量赋值,让我们的变量赋值为false
会员管理系统实战开发教程06-会员充值_第18张图片

6 给会员卡累加余额

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

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

再定义一个变量,用来查询会员卡的信息
会员管理系统实战开发教程06-会员充值_第21张图片
定义一个自定义方法用来更新会员卡的余额

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-会员充值_第22张图片

最终的效果

会员管理系统实战开发教程06-会员充值_第23张图片

总结

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

你可能感兴趣的:(低代码,微搭)