点餐小程序实战教程14点餐功能

news2024/12/26 1:00:40

目录

  • 1 功能分析
  • 2 初始化菜品的数量
  • 3 加入购物车
  • 4 显示购物车
  • 5 最终的效果
  • 总结

上一篇我们讲解了如果通过扫码实现餐桌信息显示,本篇我们介绍一下点餐的功能。

1 功能分析

点餐的话一般我们是在菜品点击+号或者-号来加入购物车,加入购物车之后还可以修改数量,看到点餐的数量和总价格。

使用微搭实现点餐功能要稍微复杂一点,有几个步骤需要考虑

  • 如何给菜品添加一个默认的数量
  • 如何在菜品显示之后回填用户选择的数量
  • 在点击+号或者-号的时候如何更新购物车的信息

2 初始化菜品的数量

我们在显示菜品的时候,是通过读取数据源的数据进行显示。但是有一个问题是,我们的数据源中并没有数量这个字段,那如何增加这个字段呢?

我们可以考虑在数据列表加载成功时候重新修改一下列表的数据
在这里插入图片描述
在查询成功的时候我们调用一个自定义方法,来重新加载数据。点击代码区点击+号,创建一个javascript方法
在这里插入图片描述
可以修改方法的名称为showList
在这里插入图片描述
在查询成功的时候我们调用这个方法
在这里插入图片描述
在这里插入图片描述
首先我们需要得到列表的数据,可以从事件对象event里获取,我们在自定义方法中添加一个打印方法,打印一下我们的event

console.log(event)

点击实时预览,打开开发者工具,可以看到我们的输出结果
在这里插入图片描述
列表的数据我们可以从event.detail.data里拿到,他的类型是数组,数组的元素是对象,对象里就包含我们在数据源里定义的结构

拿到数据之后就需要增加一个属性,数量。我们先需要添加一个变量,用来标识购物车,变量类型选择数组

在这里插入图片描述
我会去看当前列表里的数据是否在购物车中存在,如果存在我就把购物车中的数量赋值给当前元素,不存在就初始化成0,再增加一个变量,表示构造好的数据,类型选择数组
在这里插入图片描述
在自定义方法中我们初始化一下数据

export default function({event, data}) {
  console.log(event)
  const currentList = event.detail.data
  $w.page.dataset.state.tempList = currentList.map(dish =>{
    const item = $w.page.dataset.state.cart.find(cartItem=>cartItem._id===dish._id)
    dish.count = item?item.count:0
    return dish
  })
  
}

这样执行完毕后,我们的列表数据里就多了一个数量的属性
在这里插入图片描述
数据处理好了之后,我们需要将我们返回的数据绑定到循环展示上
在这里插入图片描述

3 加入购物车

加入购物车的时候,我们先需要搭建一下布局,布局是由两个图标和一个文本组成
在这里插入图片描述
文本组件我们绑定数量属性
在这里插入图片描述
添加一个自定义方法,叫addCart,加入如下代码

export default function ({ event, data }) {
  const dish = data.target
  $w.page.dataset.state.tempList = $w.page.dataset.state.tempList.map(item => {
    if (item._id === dish._id) {
      item.count++
    }
    $w.page.dataset.state.cart
    return item
  })
  const cart = $w.page.dataset.state.cart || [];
  const cartItem = cart.find(item => item._id === dish._id);
  if (cartItem) {
    cartItem.count++;
  } else {
    cart.push({ ...dish, count: 1 });
  }
  $w.page.dataset.state.cart = cart;
}

对应的我们再加一个removeCart的方法,用来从购物车里移除信息

export default function ({ event, data }) {  
  const dishId = data.target._id;  
  const decreaseAmount = 1;  
  let cart = $w.page.dataset.state.cart || [];  
  let tempList = [...$w.page.dataset.state.tempList]; // 使用浅拷贝以避免直接修改原始状态  
  
  const tempListItemIndex = tempList.findIndex(item => item._id === dishId);  
  
  if (tempListItemIndex !== -1) {  
    const tempListItem = tempList[tempListItemIndex];  
  
    if (tempListItem.count >= decreaseAmount) {  
      tempListItem.count -= decreaseAmount;  
  
      // 更新购物车  
      const cartItemIndex = cart.findIndex(item => item._id === dishId);  
      if (cartItemIndex !== -1) {  
        if (tempListItem.count === 0) {  
          // 如果tempList中的数量减至0,则从购物车中删除该项  
          cart.splice(cartItemIndex, 1);  
        } else {  
          // 否则,更新购物车中的数量  
          cart[cartItemIndex].count = tempListItem.count;  
        }  
      }  
  
      // 更新应用状态  
      $w.page.dataset.state.tempList = tempList;  
      $w.page.dataset.state.cart = cart;  
  
      if (tempListItem.count === 0) {  
        // 数量减至0时显示提示,并且此时购物车中的对应项应该已经被删除  
        $w.utils.showToast({  
          title: "已从购物车中移除",  
          icon: "success", // 或者其他适合的图标  
          duration: 2000  
        });  
      }  
    } else {  
      // 数量已经不足以减少,显示提示  
      $w.utils.showToast({  
        title: "数量已经是最小值了",  
        icon: "error",  
        duration: 2000  
      });  
    }  
  } else {  
    // 未找到对应菜品项,显示错误提示  
    $w.utils.showToast({  
      title: "未找到对应的菜品项",  
      icon: "error",  
      duration: 2000  
    });  
  }  
}

在给图片绑定事件的时候,记得要把当前所在行的数据传入自定义方法中
在这里插入图片描述
在这里插入图片描述
点餐的时候,如果没加入购物车,应该只显示+号的图标,我们可以给-号和文本绑定条件展示
在这里插入图片描述

4 显示购物车

当菜品被添加到购物车后,我们需要显示一下购物车的信息。选中页面组件,添加一个普通容器
在这里插入图片描述
里边添加一个普通容器和一个按钮
在这里插入图片描述
修改外层的普通容器的样式,布局设置为横向排列,两端对齐
在这里插入图片描述
在内层的普通容器里继续添加两个普通容器,用来显示购物车的图标和价格
在这里插入图片描述
设置布局为横向排列,左对齐
在这里插入图片描述
第一个普通容器添加一个图片组件和一个文本组件,设置图片的宽和高各为46
在这里插入图片描述
文本内容绑定为购物车的长度
在这里插入图片描述
在添加一个文本用来显示总价,绑定为购物车的总价

"¥ " + $w.page.dataset.state.cart.reduce((accumulator, item) => {  
  return accumulator + (item.jg*item.count || 0); 
}, 0)

在这里插入图片描述

5 最终的效果

初始状态,我们的购物车不显示,只显示一个+号
在这里插入图片描述
点击+号,显示购物车的信息
在这里插入图片描述
继续点+号,总价变化数量不变
在这里插入图片描述

总结

我们本篇介绍了点餐功能,主要涉及到列表数据的搭建,加入购物车,移除购物车的功能。需要掌握数据列表数据加载之后重新构造数据的问题,还有就是购物车和列表的数据的逻辑关系。

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

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

相关文章

APP 安全测试项总结

一、安装包测试 1.1、关于反编译 目的是为了保护公司的知识产权和安全方面的考虑等,一些程序开发人员会在源码中硬编码一些敏感信息,如密码。而且若程序内部一些设计欠佳的逻辑,也可能隐含漏洞,一旦源码泄漏,安全隐患…

Temporal Dynamic Quantization for Diffusion Models阅读

文章目录 AbstractIntroductionBackgrounds and Related Works2.1 扩散模型2.2 量化2.3 量化感知训练和训练后量化 TemporalDynamic Quantization3.1 量化方法3.2 扩散模型量化的挑战3.3 TDQ模块的实现3.4 工程细节时间步的频率编码TDQ模块的初始化 Experimental SetupResults5…

#git 问题failed to resolve head as a valid ref

问题如下: 解决方法: 1、运行 git fsck --full 可以查看具体error信息,一般都是head索引问题 2、.git\refs\heads\xxx(当前分支)txt编辑器打开显示乱码,而不是hash编码 3、在.git\logs\refs\heads\xxx&a…

如何评价 Python 语言的运行速度

Python 作为一门编程语言,其运行速度一直是业界讨论的焦点。它的简洁语法和广泛的应用使得它在开发过程中非常高效,然而,运行速度与一些更底层的编程语言相比存在一定的劣势。这是否是由于 Python 语法的简洁性所带来的代价?我们可…

心觉:自我暗示语“正确姿势”的科学解释

Hi,我是心觉,与你一起玩转潜意识、脑波音乐和吸引力法则,轻松掌控自己的人生! 挑战每日一省写作185/1000天 “如何重塑高效学习的潜意识”这个系列文章其实昨天已经写完了 在写这个系列文章的时候,我突然有一个关于…

宠物空气净化器该怎么选?希喂、美的、有哈这三款有推荐的吗?

终于要到国庆了,这可是打工人除春节外最长的假期!在外上班后,回家的次数越来越少了,这次国庆肯定要回去陪陪父母。这票是真难买啊,候补了我一个多星期才买到。本来以为最困难的问题已经解决了,又想到我家猫…

Mamba以及我们看的第一篇MambaOcc

0. 简介 深度学习架构有很多,但近些年最成功的莫过于 Transformer,其已经在多个应用领域确立了自己的主导地位。如此成功的一大关键推动力是注意力机制,这能让基于 Transformer 的模型关注与输入序列相关的部分,实现更好的上下文…

动手测试:CPU的L1~L3级缓存和内存的读取速度测试

引言 在许多文章中指出了这些缓存的架构,速度差异等。纸上得来终觉浅,今天想实际写代码简单测试一下。 背景 现代计算机系统中,CPU缓存(L1、L2、L3)和主内存(RAM)之间的读取速度有着显著的差…

数据结构之链表(2),双向链表

目录 前言 一、链表的分类详细 二、双向链表 三、双向链表的实现 四、List.c文件的完整代码 五、使用演示 总结 前言 接着上一篇单链表来详细说说链表中什么是带头和不带头,“哨兵位”是什么,什么是单向什么是双向,什么是循环和不循环。然后实…

U盘恢复数据工具:让数据失而复得的魔法

优盘里数据丢失无疑会给我们的工作和生活带来诸多不便。幸运的是,优盘数据恢复软件应运而生,它们如同数据的守护者,为我们提供了找回丢失数据的希望。这次我们就一同来探讨u盘恢复数据有什么方法吧。 1.福昕恢复数据 链接直达:h…

AutoSar 通信服务架构,CAN通信诊断详解

文章目录 Com(通信服务模块)PDU的定义和结构PDU的分类IPDU Mux 模块PDU R 模块(路由)Bus TP 模块BUS InterfaceCanIf模块LinIf模块 发送数据示例(CAN报文)接收数据示例(CAN报文)通信…

监控告警功能详细介绍及操作演示:运维团队的智能保障

在当今这个信息化高速发展的时代,运维团队面临着前所未有的挑战。为了确保系统的稳定性和高效运维,监控告警功能成为了运维团队不可或缺的得力助手。本文将详细介绍我们的监控告警功能,并结合实际操作页面进行演示,帮助运维团队更…

Docker入门指南:快速学习Docker的基本操作

为什么需要Docker 有时我们在本地开发好程序并成功运行之后,却在服务器上运行不起来,通过观察日志通常会发现,哦原来是这个库没安装,于是我们就需要先安装需要用到的库,然后再启动服务你可能还会发现用到的数据库信息…

《Linux从小白到高手》理论篇(六):Linux软件安装一篇通

List item 本篇介绍Linux软件安装相关的操作命令,看完本文,有关Linux软件安装相关操作的常用命令你就掌握了99%了。 Linux软件安装 RPM RPM软件的安装、删除、更新只有root权限才能使用;查询功能任何用户都可以操作;如果普通用…

真正的Open AI ——LLaMA颠覆开源大模型

1. LLaMA 简介 LLaMA(Large Language Model Meta AI)是由Meta(原Facebook)推出的一个大型语言模型系列,旨在通过更小的模型规模和更少的计算资源,实现与其他主流语言模型(如GPT)相媲…

spring简短注入

新建bean 创建set方法 jpackage com.dependency.spring6.bean;import org.slf4j.Logger; import org.slf4j.LoggerFactory;public class User {private static final Logger LOGGER LoggerFactory.getLogger(User.class);private String username;private String password;pr…

RPA跨流程复用元素技巧|实在RPA研究

为什么要跨流程复用元素 在 RPA 操作中,元素至关重要,因为自动化的本质就是模拟人类对元素的操作。基本上,每个流程都会包含若干个元素。对于同时维护多个流程的用户而言,相似的流程包,甚至是同一个元素。例如电商用户…

Solidworks斜接法兰快速绘制钣金箱体

Solidworks斜接法兰快速绘制钣金箱体 Chapter1 Solidworks斜接法兰快速绘制钣金箱体 Chapter1 Solidworks斜接法兰快速绘制钣金箱体 0.5mm间距为钣金焊接的预留焊缝。

Linux云计算 |【第四阶段】RDBMS1-DAY6

主要内容: MySQL索引(索引分类、创建索引)、用户及授权(创建用户并授权、查看授权、撤销授权、授权库mysql)、root密码恢复、备份、使用mysqldump进行逻辑备份、Percona 一、MySQL索引 1、基本概念 MySQL 索引(Inde…

给虚拟机安装操作系统以及无密码SSH登录

安装完虚拟化软件VMware Workstation Pro 17之后,我们下载了Ubuntu光盘映像文件,上次说演示desktop版的安装,但是考虑到后面要部署数据库,所以为了方便起见还是下载sever服务器版。 文件还挺大,在等待下载完成这会我们…