点餐小程序实战教程08-购物车功能开发

目录

  • 1 创建购物车
  • 2 增加数量
  • 3 减少数量
  • 4 切换分类时回填数据
  • 5 显示购物车信息
  • 总结

我们上一篇搭建了点餐业务的数据初始化加载,本篇实现一下加入购物车的功能。在购物车设计的时候有两种方案,一种是使用数据表的方案,一种是使用变量的方案。

数据表方案的优点是持久化到数据源中,下一次打开小程序的时候还可以继续点餐。变量的方案是比较简单,不用和数据源有太多的交互。

1 创建购物车

打开我们的应用编辑器,在全局变量添加一个变量cartList
在这里插入图片描述

2 增加数量

接着我们实现一下增加数量的事件,在代码区点击+号增加一个自定义方法
在这里插入图片描述
方法的逻辑是将当前数据的count字段加一,并把记录加入到购物车中,如果是首次加入直接在数组中添加元素即可,如果已经存在我们就更新对应的元素,代码如下:

export default function({event, data}) {console.log(data.target)const record = data.targetrecord.count++;if($w.app.dataset.state.cartList.length ===0){$w.app.dataset.state.cartList.push(record)}else{let flag = false$w.app.dataset.state.cartList.forEach(item=>{if(item._id == record._id){flag = trueitem.count = record.count}})if(!flag){$w.app.dataset.state.cartList.push(record)}}
}

代码的逻辑是先看购物车是不是空的,如果数组的长度为0表示购物车是空的,那我们直接调用数组的push方法将菜品放入购物车

如果购物车不为空,那么就去循环一下购物车,看当前选的商品放入购物车里没,条件是购物车的商品的标识等于我们选购商品的标识,加入了我们就更新购物车商品的数量,如果没加入我们就直接放入

在调用自定义方法时,需要传入参数,参数是我们当前这条记录
在这里插入图片描述

3 减少数量

增加的做好之后,我们要开发一下减少的功能。同样的在代码区增加一个自定义方法,命名为minus
在这里插入图片描述
减少的逻辑需要先判断一下当前的数量够不够减,不能出现负数,代码如下

export default function ({ event, data }) {const record = data.targetif (record.count > 0) {record.count--;}if ($w.app.dataset.state.cartList.length === 0) {$w.app.dataset.state.cartList.push(record)} else {let flag = false$w.app.dataset.state.cartList.forEach(item => {if (item._id == record._id) {flag = trueitem.count = record.count}})if (!flag) {$w.app.dataset.state.cartList.push(record)}}
}

调用的时候也需要传入所在行的数据
在这里插入图片描述
还有一个逻辑是当数量减为0的时候我们要隐藏减号和文本组件,可以设置条件展示,加一个判断条件
在这里插入图片描述

4 切换分类时回填数据

目前代码存在的问题是如果我们选购了商品,如果切换分类的时候我们已经选择的信息就消失了,为了记住信息,我们在加载数据的时候要把购物车的信息再回填一下,修改我们的initMenuCount方法,添加如下代码

export default function({event, data}) {const list = event.detail.dataconsole.log(list)$w.app.dataset.state.showlist_temp = list.map(item=>{const product = $w.app.dataset.state.cartList.find(v=>v._id==item._id)item.count = product?product.count:0return item})
}

这里event.detail.data可以获取原表格的数据,这个是从数据源查出来的,然后我们先是循环了原表格,调用了数组的map方法。在具体的每一条记录我们需要看一下购物车里的数据是否和当前表格一样,一样我们就把数量修改为购物车的数量。

最后处理好的数据我们在赋值回去,这样就起到了一个数据更新的作用。

5 显示购物车信息

我们还需要一个购物车显示的功能,显示总价,已经购买商品的数量。选中页面组件,添加一个普通容器,里边放入网格布局
在这里插入图片描述
修改一下网格布局的列,我们只需要两列
在这里插入图片描述
第一列添加一个图标和两个文本组件
在这里插入图片描述
切换到样式,设置布局模式为横向排列、垂直居中
在这里插入图片描述
第二列添加一个按钮
在这里插入图片描述
我们第一个文本要显示总价,总价的话从购物车求和就可以,绑定如下表达式

`${$w.app.dataset.state.cartList.reduce((total,current)=>{return total+(current.cpjg*current.count)
},0).toFixed(2)}`

这里用到了数组的求和方法,reduce需要两个参数,第一个是求和的方法,我们这里使用的是单价*数量进行累加,第二个参数是我们初始时的初值,我们设置为0

第二个文本要显示购买的数量,直接获取数组的长度即可,绑定如下表达式

`${$w.app.dataset.state.cartList.length}`

然后设置一下普通容器的定位设置成固定定位
在这里插入图片描述

总结

本篇我们实现了一下购物车的功能,涉及到添加到购物车,显示总价、购买的件数等逻辑。涉及到具体逻辑就需要对javascript有比较深入的掌握,否则很难实现功能,编程的基本功还是要扎实掌握的。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/100010.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

设计模式-享元模式

概念 共享内存&#xff08;主要考虑内存&#xff0c;而非效率&#xff09;相同的数据&#xff0c;共享使用&#xff08;JS中未找到经典应用场景&#xff09; 演示 <!-- 无限下拉列表&#xff0c;将事件代理到高层节点上 --> <!-- 如果都绑定到<a>标签&#x…

大型语言模型:RoBERTa — 一种鲁棒优化的 BERT 方法

一、介绍 BERT模型的出现导致了NLP的重大进展。BERT的架构源自Transformer&#xff0c;在各种下游任务上实现了最先进的结果&#xff1a;语言建模&#xff0c;下一句预测&#xff0c;问答&#xff0c;NER标记等。 大型语言模型&#xff1a;BERT — 来自变压器的双向编码器表示 …

如何在 Spring Boot 中提高应用程序的安全性

如何在 Spring Boot 中提高应用程序的安全性 Spring Boot是一种流行的Java开发框架&#xff0c;用于构建Web应用程序和微服务。在构建应用程序时&#xff0c;安全性是至关重要的因素。不论您的应用程序是面向公众用户还是企业内部使用&#xff0c;都需要采取适当的措施来确保数…

promtail multiline 堆栈日志处理

找到自己的promtail.yaml中job_name段落&#xff0c;增加multiline段落&#xff0c;下面文件只是部分内容&#xff0c;只需要修改firstline后面的正则表达式匹配日志行首&#xff0c;如果堆栈换行后不是此格式行首&#xff0c;将自动把堆栈的行合并到上一行中。 - job_name: k…

微信小程序 在bindscroll事件中监听scroll-view滚动到底

scroll-view其实提供了一个 bindscrolltolower 事件 这个事件的作用是直接监听scroll-view滚动到底部 但是 总有不太一样的情况 公司的项目 scroll-view 内部 最下面有一个 类名叫 bottombj 的元素 我希望 滚动到这个 bottombj 上面的时候就开始加载滚动分页 简单说 bottombj这…

c#设计模式-行为型模式 之 中介者模式

&#x1f680;简介 又叫调停模式&#xff0c;定义一个中介角色来封装一系列对象之间的交互&#xff0c;使原有对象之间的耦合松散&#xff0c;且可以独立地改变它们之间的交互。 从下右图中可以看到&#xff0c;任何一个类的变 动&#xff0c;只会影响的类本身&#xff0c;以及…

【Linux】基本指令-入门级文件操作(一)

目录 前言 ⭕linux的树状文件结构 ⭕绝对路径和相对路径 ⭕当前路径和上级路径 ⭕隐藏文件 基本指令&#xff08;重点&#xff09; 1 pwd 指令 2 mkdir 指令 3 touch 指令 4 ls 指令 4.1 ls只加选项不加文件/目录名&#xff0c;默认查看当前目录下的文件 4.1.1 ls -a…

【香橙派-OpenCV-Torch-dlib】TF损坏变成RAW格式解决方案及python环境配置

前言 本文将介绍在香橙派&#xff08;Orange Pi&#xff09;开发板上进行软件配置和环境搭建的详细步骤&#xff0c;以便运行Python应用程序。这涵盖了以下主要内容&#xff1a; 获取所需软件&#xff1a;提供了香橙派操作系统和balenaEtcher工具的下载链接&#xff0c;以确保…

flutter实现透明appbar(一)

前言 在项目中如何实现透明的appbar&#xff0c;方式一&#xff1a; 使用stack和positioned定位功能把appbar定位到页面的最上面&#xff0c; 实现 实现 Widget build(BuildContext context) {return Scaffold(body: Stack(children: [_homePage(), _appBar()],),);}_appbar…

图片大小转换(对于图片进行压缩)

传入的是图片途径 import java.io.*; import java.awt.image.BufferedImage; import javax.imageio.ImageIO; import java.util.Base64;// 限制图像大小为4MB public byte[] limitImageSize(File imageFile, int maxSizeInBytes) throws IOException {if (imageFile.length() …

BuyVM 拉斯维加斯 VPS 测评

description: 发布于 2023-07-05 BuyVM 拉斯维加斯 VPS 测评 产品链接&#xff1a;https://my.frantech.ca/cart.php?gid37 G口不限制流量&#xff0c;抗一般投诉&#xff0c;不抗版权投诉。 中国大陆连通性尚可。 CPU&#xff0c;硬盘速度不错。 规格 $3.50 USD/mo 1G…

js验证字符串是否是时间日期格式

参考文章 验证字符串是否是时间日期格式 返回 布尔值 表示 Dayjs的日期是否通过校验。 不严格的校验 只检查传入的值能否被解析成一个时间日期 dayjs(2022-01-33).isValid(); // true, parsed to 2022-02-02dayjs(some invalid string).isValid(); // false严格校验 检查…

vue中使用ali-oss上传文件到阿里云上

1.使用 npm 安装ali-oss npm install ali-oss --save2.写ali-oss.js // 引入ali-oss let OSS require(ali-oss) let client new OSS({region: oss-cn-xxx, // bucket所在的区域&#xff0c; 默认oss-cn-hangzhousecure: true, // secure: 配合region使用&#xff0c;如果指…

生成多元正态数据

目录 一、mvrnorm()函数使用介绍 例1&#xff1a;生成服从多元正态分布的数据 例2:生成一组服从多元正态分布的观测 一、mvrnorm()函数使用介绍 获取来自给定均值向量和协方差阵的多元正态分布的数据。 MASS包中的mvrnorm()函数可以让这个问题变得很容易&#xff0c;其调用…

win10搭建Selenium环境+java+IDEA(3)

这里主要对前面的maven和selenium做补充说明&#xff0c;以及更新一些pom文件下载依赖的问题。 IDEA里面&#xff0c;如果你创建的工程是maven工程文件&#xff0c;那么就会有一个pom.xml文件&#xff0c;可以在这个网站&#xff1a;https://mvnrepository.com/搜索依赖&#…

【API要返回一棵树的结构】数据库表结构是平铺的数据,但是api要实现树状结构展示。api实现一棵树的结构,如何实现呢,递归?如何递归呢

数据库中的数据是平铺的&#xff0c;一行行的&#xff0c;但是api要查询出来的数据要求是一棵树的结构&#xff0c; 怎么把平铺的数据转换成树状结构呢&#xff1f; public List<CarbonRepo> findCarbonRepo(Integer type){// 1. 先查出所有数据。 baseFindList 方法就是…

基于Keil a51汇编 —— 程序模板文件以及规则

程序模板文件 下面的代码模板包含有关如何编写自己的程序集模块的指南和提示。此模板文件模板。A51 在文件夹 \C51\ASM 中提供。 $NOMOD51 ; 禁用预定义的 8051 寄存器 #include <reg52.h> // 包含头文件; ;根据需要更改小写名称。 ;该汇编模板让你…

[PwnThyBytes 2019]Baby_SQL - 代码审计+布尔盲注+SESSION_UPLOAD_PROGRESS利用

[PwnThyBytes 2019]Baby_SQL 1 解题流程1.1 分析1.2 解题 2 思考总结 1 解题流程 1.1 分析 此题参考文章&#xff1a;浅谈 SESSION_UPLOAD_PROGRESS 的利用 访问正常来讲用ctf-wscan是能扫出source.zip文件的&#xff0c;且F12后提示了有source.zip&#xff0c;那我们就下载…

多项目并行管理:优化协调策略提高效率

多项目同时进行已然是大部分项目管理者面临的现状了。相比于单项目管理&#xff0c;多项目管理可能会出现项目资源分配不均&#xff0c;项目进度监控难以及沟通协作复杂等问题。 可以通过一款灵活高效得项目管理工具&#xff0c;来帮助您进行多项目管理&#xff0c;比如 Zoho …

文件解析的方法与原理

文件的解析使用python的struct模块,接下来会用到的2个方法: 解包unpack()方法 : 使用该方法可以从写好的二进制文件中读出文件。它的函数原型为:struct.unpack(fmt,string),fmt参数是格式字符串。string表示要转换的python值。最终函数返回一个元组。 calcsize()方法 : 该方法用…