会员管理系统实战开发教程05-会员开卡-Toy模板网

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

上一篇我们讲解了如何点击按钮弹出层，已经罗列了会员管理的一些常见功能。本篇我们介绍一下会员开卡的业务。

1 创建变量

我们会员开卡的业务的话，也是要在本页面弹出，弹出其实只是让组件是否显示和隐藏，我们先定义一个布尔值类型的变量来控制我们开卡页面的显示。

打开我们的模型应用，在代码区点击+号
会员管理系统实战开发教程05-会员开卡,低代码,微搭
点击新建自定义变量，变量的类型选择布尔值

布尔值只有两个取值，要么是false，要么是true，这样我们就可以通过布尔值来控制页面是否显示

2 组件搭建

给页面添加一个普通容器组件，里边添加表单容器，数据模型选择会员卡信息
会员管理系统实战开发教程05-会员开卡,低代码,微搭
我们给普通容器绑定条件展示，点击fx绑定我们刚刚定义的变量

因为我们变量的默认值是false，所以设置之后当前的组件就不再显示了

3 点击开卡显示页面

在列表页的操作列当我点击更多的时候，列出会员可以操作的菜单，点击开卡的时候要让页面显示出来，这个时候就需要让变量赋值为true

在代码区点击+号，创建一个JavaScript方法
会员管理系统实战开发教程05-会员开卡,低代码,微搭
先复制一下变量的路径

然后用赋值语句将变量的值赋值为true

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

给开卡按钮绑定事件，方法选择我们刚刚定义的方法
会员管理系统实战开发教程05-会员开卡,低代码,微搭
目前我们的开卡页面是在表格的下方，弹出的时候我们希望居中显示，可以设置容器的定位，设置为绝对定位

页面弹出后还需要给一个关闭按钮，在表单容器标题那块增加一个图标组件
会员管理系统实战开发教程05-会员开卡,低代码,微搭
修改普通容器的样式，改为两端对齐

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

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

修改一下图标的CSS，让鼠标变成一个小手

self {
  cursor: pointer;
}

会员管理系统实战开发教程05-会员开卡,低代码,微搭

4 表单填充默认值

当我们打开会员卡页面的时候，卡号是我们提交到数据源中自动生成的，没必要给用户显示，因此我们设置为隐藏
会员管理系统实战开发教程05-会员开卡,低代码,微搭
开卡日期我们显示当天的日期，我们绑定为系统当期时间

会员信息需要在点击开卡的时候就选择好，先在代码区创建一个memberid，类型选择文本

给开卡按钮，传入我们记录的数据标识
会员管理系统实战开发教程05-会员开卡,低代码,微搭

然后在自定义方法中进行赋值

export default function ({ event, data }) {
  console.log(data.target.id)
  let index = data.target.index
  let display = $page.widgets.container2[index].style.display
  if (display == "none") {
    $page.widgets.container2[index].style = { display: "block" }
    $page.dataset.state.memberid = data.target.id
    
  } else {
    $page.widgets.container2[index].style = { display: "none" }
    $page.dataset.state.memberid = ""
  }

}