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

需求分析

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

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

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

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

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

修改页面

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

具体的代码如下：

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也对我们的业务功能编写提供了很大的便利。