会员管理系统H5-01会员开卡

我们前边7篇文章讲解的是PC端的功能，还需要为商家提供一套移动端的后台管理程序。在微搭中，移动端的后台程序我们可以使用H5进行开发，开发完毕后可以启用登录，这样管理员就可以在手机上进行操作。

01 创建应用

登录微搭后台，点击创建应用，新建一个自定义应用

02 设置菜单

移动端的程序我们通常提供一个导航菜单，这里的导航菜单我们使用宫格导航来设置。从右侧的组件区域找到宫格导航，拖入到中间的编辑区

选中我们的组件，右侧切换到配置面板。宫格导航主要是设置导航设置

点击某个菜单，可以选择菜单的图标并且设置菜单的文字。第一个菜单我们设置成会员管理，第二个菜单我们设置成会员开卡

03 创建开卡页面

点击菜单的时候我们要跳转到开卡页面，先需要创建页面。点击左侧的页面创建图标，输入页面的名称


然后返回我们的首页，导航设置的打开页面，选择我们刚刚创建的页面

04 实现开卡的页面

开卡页面我们使用表单容器来实现，从组件区域找到表单容器，拖入页面中

表单容器需要选择数据源，会根据数据源的字段自动生成页面。选择会员卡数据源

所属会员我们是列出了所有的会员，通常的场景我们需要根据手机号来查找会员信息。在表单容器的上方我们添加一个普通容器，里边放置一个单行输入组件

选择单行输入的模板为搜索模板

然后在单行输入组件旁边放置一个按钮组件，设置普通容器的布局方式为横向排列

按钮的类型改为链接

05 实现数据填充

我们现在的逻辑是在搜索框里输入电话号码，输入完毕后点击查询按钮去匹配会员信息，然后填充到所属会员下拉列表里。

先在代码区创建一个变量

选择新建自定义变量

修改一下变量的名称改为telphone

然后给搜索框添加校验规则，规则选择手机号

添加一个事件，当值改变的时候，赋值给我们的变量

再点击代码区的+号，创建一个javascript方法

输入如下代码

export default async function({event, data}) {
try {
    const data = await $w.cloud.callDataSource({
      dataSourceName: "hyxx_u9t5lg8",
      methodName: "wedaGetItemV2",
      params: {
        // 筛选内容，筛选内容推荐使用编辑器数据筛选器生成
        filter: {
          where: {
            $and: [
              {
                sj: {
                  $eq: $page.dataset.state.telphone, // 获取单条时，推荐传入_id数据标识进行操作
                },
              },
            ],
          },
        },
        select: {
          $master: true, // 常见的配置，返回主表
        },
      },
    });
    console.log("请求结果", data); 
  $w.page.dataset.state.memberid = data._id
  } catch (e) {
    console.log("错误代码", e.code, "错误信息", e.message);
  }

}

代码的逻辑是根据搜索框输入的值去数据源匹配数据，将得到的会员信息的数据标识赋值给我们的变量

为此我们需要再创建一个变量来保存会员的数据标识

将我们的变量绑定到我们的所属会员选中值上

最后给我们的查询按钮配置点击事件，选中我们的自定义代码

设置完毕后，给表单容器添加一个返回上一页的事件

最终的效果

我们点击导航菜单的会员开卡，跳转到会员开卡页面，先输入手机号，点击查询，填充会员信息，然后录入充值金额和开卡日期即可

总结

我们本篇介绍了如何在移动端开发业务功能，主要介绍了宫格导航和表单容器两个组件的用法。还介绍了变量的定义、赋值，自定义的方法创建以及调用等操作。代码部分我们涉及到了微搭的数据源方法的调用，主要调用了查询单条。

低代码开发还是需要写一部分代码的，需要你熟练掌握javascript，语言学会了代码写起来就得心应手了，好了如果感兴趣打开你的编辑器练习一遍吧。