会员管理小程序实战开发教程-会员信息删除

2021-07-15 18:02:09 浏览数 (1)

需求分析

日常我们在记录会员信息的时候,随着会员信息的增多,有必要定期清理一些已经不来消费的顾客,那么小程序删除的功能是必备的。

本文就讲解一下会员信息如何进行删除,考虑到读者群还有一部分是老板,对于软件开发技术不是特别了解,我们在讲解的过程中尽量保持通俗易懂。

先说一下具体的思路,首先是删除按钮放到哪里比较合适,在PC端的业务中如果是删除一般是放到列表上,这样方便选中记录并且删除。移动端因为空间比较小,所以考虑到在详情页中放删除按钮。

第二个需要考虑是删除的逻辑,删除的逻辑需要先获得记录的主键,获取主键是为了保证只删除该删除的记录。一般删除动作比较危险,为了防止误删,需要给用户一个提示,当他确认之后我们再做删除的动作。

好了,原理介绍了这么多,我们就实操一下如何实现会员信息的删除功能。

修改页面

我们在页面管理里选中我们的详情页面

在这里插入图片描述在这里插入图片描述

切换到页面的组件视图,我们在余额字段的下边,添加个容器组件,并且在里边放置删除的按钮

在这里插入图片描述在这里插入图片描述

按钮放置进去一般是垂直排列的,为了让按钮水平排列我们需要设置一下容器组件的布局,选中容器组件,然后在右侧的属性面板选中样式页签,进行相应的设置

在这里插入图片描述在这里插入图片描述

按钮的话我们先设置一下按钮的基础数据

在这里插入图片描述在这里插入图片描述

因为我们的删除操作是有明确的业务逻辑在里边的,所以需要以低代码的形式进行操作,点击顶部的菜单的低代码编辑按钮

在这里插入图片描述在这里插入图片描述

找到我们的详情页,在handler旁边点击 号创建低码方法

在这里插入图片描述在这里插入图片描述

具体的代码如下:

代码语言:txt复制
export default  function({event, data}) {
    app.showModal({
        title: '删除用户信息',
        content: '确认删除吗?',
        async success(res) {
            if (res.confirm) {
                let res = await app.cloud.dataSources.member.delete({
                    _id:data.target,
                });
                app.navigateBack({
                delta: 1
                });
            } else if (res.cancel) {
                
            }
        }
    });
}

业务逻辑我们一开始就介绍了,我们使用了三个api分别是showModel

在这里插入图片描述在这里插入图片描述

这个api调用之后会填一个提示框,让用户选择是否确认。第二个api是操作数据源

在这里插入图片描述在这里插入图片描述

我们调用了数据源的删除用户方法,方法名和参数可以参考数据源的具体方法

在这里插入图片描述在这里插入图片描述

第三个api是返回页面的api

在这里插入图片描述在这里插入图片描述

低码方法构建好之后,我们就需要给按钮设置点击事件,切换到按钮的事件页签,选择我们刚才定义的低代码方法

在这里插入图片描述在这里插入图片描述

添加后还需要给方法传参,我们选择当前的状态变量传递id即可

在这里插入图片描述在这里插入图片描述

这样我们就设置好了

页面的效果

进入到会员列表

在这里插入图片描述在这里插入图片描述

点击其中的一条信息,点击删除按钮

在这里插入图片描述在这里插入图片描述

弹出确认框,点击确认信息就删除了

在这里插入图片描述在这里插入图片描述

总结

本篇我们具体介绍了如何实现删除功能,一般涉及到业务逻辑操作的,免不了要编写低代码方法,这就涉及到如果调用官方的API,所以日常经常翻阅API也对我们的业务功能编写提供了很大的便利。

0 人点赞