上一篇我们讲解了如何点击按钮弹出层，已经罗列了会员管理的一些常见功能。本篇我们介绍一下会员开卡的业务。
1 创建变量
我们会员开卡的业务的话，也是要在本页面弹出，弹出其实只是让组件是否显示和隐藏，我们先定义一个布尔值类型的变量来控制我们开卡页面的显示。
打开我们的模型应用，在代码区点击+号
点击新建自定义变量，变量的类型选择布尔值
布尔值只有两个取值，要么是false，要么是true，这样我们就可以通过布尔值来控制页面是否显示
2 组件搭建
给页面添加一个普通容器组件，里边添加表单容器，数据模型选择会员卡信息
我们给普通容器绑定条件展示，点击fx绑定我们刚刚定义的变量
因为我们变量的默认值是false，所以设置之后当前的组件就不再显示了
3 点击开卡显示页面
在列表页的操作列当我点击更多的时候，列出会员可以操作的菜单，点击开卡的时候要让页面显示出来，这个时候就需要让变量赋值为true
在代码区点击+号，创建一个JavaScript方法
先复制一下变量的路径
然后用赋值语句将变量的值赋值为true
export default function({event, data}) { $page.dataset.state.showpage = true }
给开卡按钮绑定事件，方法选择我们刚刚定义的方法
目前我们的开卡页面是在表格的下方，弹出的时候我们希望居中显示，可以设置容器的定位，设置为绝对定位
页面弹出后还需要给一个关闭按钮，在表单容器标题那块增加一个图标组件
修改普通容器的样式，改为两端对齐
self { display: flex; justify-content: space-between; flex-direction: row; }
给图标定义点击事件，方法选择变量赋值，给我们的变量赋值为false
修改一下图标的CSS，让鼠标变成一个小手
self { cursor: pointer; }
4 表单填充默认值
当我们打开会员卡页面的时候，卡号是我们提交到数据源中自动生成的，没必要给用户显示，因此我们设置为隐藏
开卡日期我们显示当天的日期，我们绑定为系统当期时间
会员信息需要在点击开卡的时候就选择好，先在代码区创建一个memberid，类型选择文本
给开卡按钮，传入我们记录的数据标识
然后在自定义方法中进行赋值
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 = "" } }
给所属会员绑定选中值
当我们提交成功后将页面关闭，给变量赋值为false即可
最终的效果
总结
我们本篇介绍了开卡业务的开发，主要涉及到组件的隐藏与显示，方法的传参，以及组件默认值的设置。综合应用这些知识点就可以按照需求开发出自己想要的功能来。
