1第四篇:会员消费功能开发
1.1上篇回顾
我们上篇介绍了会员充值记录功能的开发,通过数据源新增数组字段来保存充值记录信息,并介绍了云开发的数组操作方法。
1.2本篇介绍
本篇我们继续我们的开发,有了会员充值功能后,自然需要有消费的功能,每次可以记录会员的消费金额,并且对会员的余额进行修改。开发步骤还是按照我们以往的顺序进行
修改数据源
创建页面
开发页面功能
预览发布
1.3修改数据源
为了记录我们的消费信息,我们需要在原有的会员的数据源增加消费记录字段,字段的类型我们选择数组。
点击数据源管理菜单,找到我们创建的会员登记数据源,点击标题进到具体的详情页
点击详情页右上角的编辑按钮进入数据源的编辑模式
在编辑页面点击添加字段按钮,新增会员的消费记录字段,字段类型设置为数组
字段添加好后我们同样的需要增加一个自定义方法,方法名称为减少余额
具体代码如下
module.exports = async function (params, context) {
const newParams = Object.assign({}, params, {
updatedAt: Date.now(),
});
delete newParams.createdAt;
delete newParams._id;
const _ = context.database.command;
console.log(params.account);
let money=-parseInt(params.account)
const result = await context.collection.doc(params._id).update({
account:_.inc(money),
consume:_.push({
money:params.account,
adddate:Date.now()
})
});
return { updated: result.updated };
}
减少余额我们需要对消费的金额取负数,这样累加的时候就是作差,对于消费的金额我们使用数据的push方法添加到消费记录里
方法增加好后务必进行测试,否则影响后续功能开发,点击方法测试按钮
此外还需要给方法增加两个参数,分别是每次消费的金额和当前记录的主键
在做测试的时候需要记录的主键,如何找呢?先在导航条找到云产品,然后点击云开发cloudbase
进入到我们的低码环境中
找到我们的数据源
就可以看到主键信息了
将id复制到我们的方法里测试方法是否正确,观察数据库的结果是否和我们预期的结果是一致的
看到成功后点击出参映射,将结果映射到出参里
点击确定按钮,这样我们的自定义方法就创建好了。
1.4创建页面
数据源修改好之后就需要创建页面,软件开发最大的魅力就是复用了,如果有类似的功能只需要点击一下鼠标一个功能就开发好了。
其实消费功能和充值功能是类似的,我们只需要复制一下之前的页面即可。我们先克隆一下列表页面。
我们修改一下页面信息
接着克隆充值页面
修改一下页面信息
然后我们在iconfont下载一个图标,修改一下首页的第三个模块为会员消费
然后点击图片组件的云图标上传图标资源并且选中
修改文本组件的内容为会员消费
我们在容器组件上增加跳转的事件,以便点击的时候能跳转到会员消费列表页面
还有就是在会员消费列表页面的点击事件需要改到会员消费页面,我们原来是使用低代码方法实现的,我们还是用低码,创建一个新的跳转详情页方法
具体代码如下:
export default function({event, data}) {
app.navigateTo({
pageId: 'minus', // 页面 Id
params: {memberid: data.target},
});
}
然后将列表的点击事件更改为新的方法即可
列表页修改好后,我们需要修改一下消费页面,具体就是修改页面的标题,提交的方法
1.5预览发布
页面修改好后我们点击预览,进行实时预览,来测试我们的功能是否正常
1.6下篇预告
我们下一篇开发发票管理功能,我们下期见