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

news2024/11/23 21:08:26

我们前边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);
  }

}