首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >会员管理小程序实战开发教程-消费记录功能

会员管理小程序实战开发教程-消费记录功能

原创
作者头像
低代码布道师
修改于 2021-07-12 06:17:42
修改于 2021-07-12 06:17:42
1.2K0
举报
文章被收录于专栏:微搭低代码微搭低代码

我们前边利用六篇篇幅介绍了会议管理小程序的各项功能,今天我们先复习一下我们已经完成的功能:

首页

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

首页我们分为两个区域,上边是快捷功能的入口,包含会员登记、会员充值、会员消费、发票申请四个功能。下边是导航区域,包含首页及会员功能。

会员登记

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

可以录入会员的基本信息,并且将信息提交至数据库

会员充值

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

可以给会员进行充值

会员消费

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

可以记录会员的消费情况

发票申请

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

可以记录发票的信息

会员查询

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

可以查询会员的详情信息

关于学习方法

官方群里有小伙伴吐槽文档比较少,学习内容少。其实在我看来,如果想跟一个新技术或者新产品,自学是非常有必要的。那如何自学呢?看官方文档和官方视频是必要的,但是如果只是看的话容易造成眼高手低。

看了感觉都会了,但是一旦自己动手做,好像又啥都不会。我的建议是带着问题去学习,比如像我这个教程一样,我就是观察到日常中的生活场景,然后利用微搭低代码去实现这个场景。

那做什么呢?有时候我们刚开始开发,尤其要开发一个产品的时候,往往是觉得无从下手。我给的建议是借鉴前人已经做好的,比如从百度搜索现成的产品,或者从淘宝里搜。这样我们对比着现成的产品来思考,当然现成的产品都比较复杂,我们可以做一定的裁剪,保证我们设计的功能是自己能把握的。

产品思路有了就可以动手做了,在做的过程中再不断的思考,这样你的学习就有的放矢,不会觉得没有可学的内容了。

消费记录功能

会员无非就两个消费的动作,一个是充值一个是消费。当初考虑的是弄个充值记录和消费记录,在查询页面利用页签进行切换。后来看了一下现有的APP,貌似没有把这两个功能拆分开的,所以重新规划一下功能,把两个记录合并到一个字段里。

修改数据源

在会员登记的数据源中,新增加一个消费记录的字段,字段类型还是数组

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

然后修改一下增加余额,将充值记录添加到刚增加的数组中

代码语言:txt
AI代码解释
复制
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),
        addrecord:_.push({
            money:params.account,
            adddate:Date.now()
        }),
        spend:_.push({
            money:params.account,
            type:0,
            adddate:Date.now()
        })
    });
    return { updated: result.updated };
}

方法修改完毕之后还是需要进行先测试,点击方法测试按钮

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

从导航条进入到云开发cloudbase产品

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

找到我们的数据源

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

找到id复制

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

粘贴到方法里

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

我们看一下数据库中的记录,如果记录更新了表明方法已经执行成功了

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

然后修改消费金额的方法

代码语言:txt
AI代码解释
复制
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()
        }),
        spend:_.push({
            money:params.account,
            type:1,
            adddate:Date.now()
        })
    });
    return { updated: result.updated };
}

按照同样的方法也需要进行一下测试

会员详情页改造

我们在上一节中介绍了姓名如何显示,本节我们继续介绍剩余的字段如何显示,首先是性别,我们先选中姓名的字段,克隆一下

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

然后修改字段的标题为性别

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

右侧的内容的话我们需要使用表达式,我们使用三元表达式来格式化输出,将数据库的0或者1显示为男或者女

在这里插入图片描述
在这里插入图片描述
代码语言:txt
AI代码解释
复制
($page.dataset.state.sex=='1')?'男':'女'

基础信息都设置好后,我们增加一个标题组件,修改为充值消费记录

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

我们展示的是一个表格,有两个字段,分别为日期和金额,我们先做一下表头,先放置一个栅格布局,列比例设置成6:6

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

在每个布局里添加一个文本组件,并修改文本的内容

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

表头做好之后我们需要添加表格的内容,我们选中栅格布局克隆一下

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

在栅格布局的循环展示for我们绑定一下数据,绑定为我们的充值消费记录字段

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

对于里边的内容,我们都使用表达式进行绑定

在这里插入图片描述
在这里插入图片描述
代码语言:txt
AI代码解释
复制
app.utils.formatDate($for.id18.adddate, 'yyyy年mm月dd日')
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

最后实际的效果如下:

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

总结

本篇主要介绍了会员详情信息的制作方法,展示了如何使用表达式来格式化数据的方法,用好表达式就可以按照你的需要显示出数据来,在开发的过程中还是非常重要的一个知识点。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
0基础一篇文学会低代码开发会员管理小程序(四)
我们上篇介绍了会员充值记录功能的开发,通过数据源新增数组字段来保存充值记录信息,并介绍了云开发的数组操作方法。
低代码布道师
2021/07/08
5610
0基础一篇文学会低代码开发会员管理小程序(四)
0基础一篇文学会低代码开发会员管理小程序(三)
我们在上一篇实现了会员的充值记录功能,期间遇到一个BUG导致了新增功能都不好使,并进行了记录。
低代码布道师
2021/07/08
4390
0基础一篇文学会低代码开发会员管理小程序(三)
会员管理小程序实战开发01-总体介绍
日常作为消费者,我们总是需要购买形形色色的物品或者服务。在这些物品或者服务购买的过程中,我们也和各种商家打交道,商家为了营销获得稳定的客源,总是推荐店内的会员消费。
韩锴
2022/02/07
1.3K0
会员管理小程序实战开发教程-会员信息删除
日常我们在记录会员信息的时候,随着会员信息的增多,有必要定期清理一些已经不来消费的顾客,那么小程序删除的功能是必备的。
低代码布道师
2021/07/15
2.1K0
会员管理小程序实战开发教程-会员信息删除
会员管理小程序实战开发03-首页开发
上一节我们介绍了数据源的相关只是并且创建了管理员的表,本节我们准备创建用户信息表。
韩锴
2022/02/15
8620
会员管理小程序实战开发教程-按条件过滤数据
我们在会员小程序中实现了会员列表的功能,但在常规的业务中,只是做列表展示还是不够的,我们还需要设置查询条件,根据条件过滤数据。本篇就介绍如何在低代码中进行按条件过滤数据。
低代码布道师
2021/07/13
1.3K0
会员管理小程序实战开发教程-按条件过滤数据
会员管理小程序实战开发04-用户登录及注册
上一节我们介绍了用户信息数据源的创建及网格布局的使用,本节的话我们讲解用户的登录及注册功能任何开发。
韩锴
2022/02/15
2.5K1
会员管理小程序实战开发教程-会员信息编辑
我们在会员管理小程序底部的导航栏会员菜单中实现了会员查询的功能,日常免不了要对会员信息进行编辑,本文讲解一下会员编辑功能如何进行开发。
低代码布道师
2021/07/15
2.2K0
会员管理小程序实战开发教程-会员信息编辑
会员管理小程序实战开发11-获取会员手机号
我们的会员小程序最重要的采集信息就是会员的手机号,首先手机号唯一,可以用来唯一标识会员的身份。其次在日常的业务操作中,如会员的充值、消费等,需要根据会员的手机号来进行操作。
韩锴
2022/02/24
1.2K0
会员管理小程序实战开发08-低码中操作数据库
<hr style=" border:solid; width:100px; height:1px;" color=#000000 size=1">
韩锴
2022/02/24
8520
会员管理小程序实战开发02-数据源介绍
我们上一节介绍了会员管理小程序的整体规划,有了规划其实只是确定了目标,并不能够马上就拥有一款小程序。
韩锴
2022/02/15
6500
会员管理小程序实战开发07-页面跳转
上一节我们介绍了低代码中的生命周期函数和自定义方法,本节我们介绍一下低代码中的页面跳转。
韩锴
2022/02/16
7230
0基础一篇文学会低代码开发会员管理小程序(六)
本实战教程是利用腾讯云微搭低代码,快速的搭建一款会员管理的小程序,方便商家日常通过小程序来管理会员。功能分为会员信息登记、充值、消费、发票及会员查询功能。历史文章目录如下:
低代码布道师
2021/07/08
7690
0基础一篇文学会低代码开发会员管理小程序(六)
使用微搭低代码实现小程序消息订阅及发送功能
日常我们使用小程序时,经常会有消息弹框提醒,提示你是否允许小程序发送消息。当你选择允许后,在小程序提交的数据当状态发生改变时,比如订单的状态发生改变,小程序会推送订阅消息方便用户及时获取最新的数据。
韩锴
2022/02/07
1.5K2
0基础一篇文学会低代码开发会员管理小程序(一)
摘要:本文利用低代码技术,使用拖拽的方式快速开发一款会员管理系统,实现会员在线注册、充值、消费等功能。即使没有任何开发基础的小白,只要按照教程的步骤也可以掌握app的开发方法,进入到软件开发领域。
低代码布道师
2021/07/08
1.7K2
0基础一篇文学会低代码开发会员管理小程序(一)
腾讯云微搭低代码理发预约小程序实战教程
日常生活中,我们经常去理发馆理发。如果是老顾客的话会问店主索取电话,想要理发的时候先问问店里的排队情况,然后按照约定的时间上门理发。
韩锴
2022/03/04
2.6K0
利用微搭低代码开发每周菜谱小程序(二)
有粉丝提问,低码里的问卷调查可以设置分数么,可以统计一下投票的结果么?我们就用低码来实际搭建一个问卷调查的案例来解决以上问题。
低代码布道师
2021/07/14
1.2K0
利用微搭低代码开发每周菜谱小程序(二)
会员管理系统PC端教程(二)
我们要实现的效果是页面有查询条件,在查询条件下边有表格,可以显示多条的会员信息。这个时候就需要使用PC端的组件库了,点击组件菜单,切换到组件视图。
低代码布道师
2021/07/27
1.4K0
0基础一篇文学会低代码开发会员管理小程序(五)
我们在上一篇中详细的介绍了消费功能开发,通过新增消费记录字段并新增了减少余额的自定义方法。而且我们也介绍了通过克隆页面来快速实现功能的开发。
低代码布道师
2021/07/08
5560
0基础一篇文学会低代码开发会员管理小程序(五)
利用微搭搭建答题小程序
解题的思路的话是先安装模板,然我我们在一步步的分析一下模板做了什么工作,需要做哪些改造。
低代码布道师
2021/11/07
3.9K1
推荐阅读
相关推荐
0基础一篇文学会低代码开发会员管理小程序(四)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档