购物车中商品的选中状态之后的一些业务逻辑操作

最新推荐文章于 2022-12-13 13:34:52 发布

上头upup

最新推荐文章于 2022-12-13 13:34:52 发布

阅读量920

点赞数 1

分类专栏：小程序

本文链接：https://blog.csdn.net/qq_45802159/article/details/104961151

版权

当用户点击商品单选框时，业务逻辑包括：根据商品ID更新商品列表中相应对象的选中状态，判断全选按钮状态，计算并更新商品总数和总价，最后将这些数据同步到界面展示。

摘要由CSDN通过智能技术生成

在这里插入图片描述

如图，当我们点击商品的单选框之后我们要对数据进行处理

总结一下业务逻辑：
以点击单个复选框为列

当点击商品的复选框之后传入当前商品的id
拿到商品列表，在商品列表中找到所点击商品对象，更改其对象中isChecked字段的值
此时商品列表的数据已被更改。还没有同步到界面中
重新判定全选按钮的状态
重新判定商品数量和商品总价
全部判定好了之后再写入各自的数据中界面就会同步起来了

//单个复选框 
    handleItemChange(e) {
   
        const id = e.currentTarget.dataset.id
        const cartList

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

上头upup

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue购物车商品累加结算代码

04-07

同时，`methods`选项中定义的函数可以作为事件处理函数，执行具体业务逻辑。 4. **组件化**：为了代码结构清晰，可以将购物车、商品列表、商品项等分别封装为组件。组件间通过`props`传递数据，使用`emit`触发父...

仿美团商品列表展示购物车

06-30

在IT行业中，构建一个类似美团的商品列表展示及购物车功能是一项常见的需求，它涉及到前端界面设计、数据管理以及用户交互等多个方面。以下是对这个主题的详细解析：首先，"商品列表展示"是电商网站的核心部分，它...

参与评论您还未登录，请先登录后发表或查看评论

购物车选中

Comfortablelive的博客

11-23

530

adpater package com.sn.shopcat; import android.view.View; import android.view.ViewGroup; import android.widget.BaseExpandableListAdapter; import android.widget.CheckBox; import android.widget.ImageVi...

vue 刷新页面保持复选框的选中状态_vue结合vuex实现购物车

weixin_39982580的博客

12-13

979

题图 FromBing By Clm上一篇文章react结合redux实现了一个购物车功能，本篇给大家演示用vue结合vuex实现相同的购物车功能。首先看下要实现的页面功能：观察页面，灰色标签标识了页面的功能，具体功能分析如下：1、可以实现全选/反选功能，全选/反选功能和每件商品的选中功能联动。2、商品数量增减功能，商品数量的修改会同步到服务端。3、商品件数和总价会根据商品选中数量实时...

解决el-menu刷新之后选中状态消失

qq_33414883的博客

12-10

1788

在mounted里写上它的值打印一下window.location.href.split(’/’)的值，再找到对应的值

checkbox选中后刷新页面选中状态不清空

chimeidian9400的博客

06-10

3343

$(function () { var dv = document.getElementById('test'), cbs = dv.getElementsByTagName('input'); dv.onclick = function (e) { e ...

Android购物车初步实现2（功能篇）

Smile浅唱

05-29

2153

前面开始把ui写好了，接下来准备写功能，同样的也要分析一下，这是撸代码的基本原则。觉得解释比较啰嗦可以直接去看我的源码（这里）分析因为这个demo中有店铺信息和商品信息，所以我需要创建两个实体类。而且它们都有选中和非选中的状态，所以可以在实体类中给它们添加这些属性，最好是用boolean类型的，true为选中，false为未选中（打字好累的。。。）同理，编辑功能实现也可以这样，true显示，fa

商城购物车业务逻辑

sinat_35491286的博客

03-15

8711

商城购物车结算与选中商品的逻辑

vue开发中购物车逻辑总结

weixin_42207241的博客

04-13

4581

添加购物车后同步修改购物车徽标的显示数量因为涉及到组件之间的传值，我将需要传递的数据，放在Vuex中，可以方便供整个Vue实例使用/修改。使用change事件监听购买数量input框的修改，使用$emit触发父组件方法，将input修改数据传递父组件data中selectedNum存储（默认数据为1）。添加购物到车绑定点击事件，在事件处理函数中手动定义对象，对象包含商品id、商品数量、商品...

小程序角标的添加以及绑定购物车数量进行实时更新

wsxDream的博客

12-04

1620

首先介绍一下角标的方法： // tabBer角标 index代表的是第几个tabber text表示角标内容 wx.setTabBarBadge({ index: 2, text: '1' }) } { wx.removeTabBarBadge({ //移除指定位置的tabbar右上角的标志 index: 2, })

Day16-购物车页面-商品列表修改购物车商品的勾选状态

qq_59110215的博客

12-01

561

卷

购物车系统设计

JavaEdge全是干货的技术号

12-13

4734

购物车系统的主要功能包括：加购、购物车列表页和结算下单核心实体：只有一个“购物车”实体至少包括：SKUID、数量、加购时间和勾选状态属性购物车内的数据在多端一致用户登录前后购物车内商品能无缝衔接除了每个用户的“用户购物车”，还要实现一个“暂存购物车”保存用户未登录时加购的商品，并在用户登录后自动合并“暂存购物车”和“用户购物车”。暂存购物车存储在客户端浏览器或App，可存放到Cookie或LocalStorage。Redis存储会有更高的性能，可以支撑更多的并发请求。

Django 14购物商城项目（购物车商品选中逻辑）

这里的分享，都是干货

12-29

996

Django 13购物商城项目 1、单个商品选中逻辑1.1、最终效果展示1.2、html1.3、js1.4、views.py2、购物车全选2.1、逻辑2.2、html2.3、css2.4、js2.5、视图2.6、路由 1、单个商品选中逻辑（代码在【Django 14购物商城项目】中已经有） 1.1、最终效果展示 1.2、html 没有点击事件时，获取前端出过来的参数C_is_select判断 ...

购物车（五）02-商品的全选控制——点击全选按钮控制选中与否：单选按钮的状态取反

weixin_44867717的博客

10-28

1027

商品的全选控制——点击全选按钮控制选中与否：单选按钮的状态取反控制商品是否全选实现思路：把products中所有商品的checked属性全部修改一遍 selectAll () { // 实现所有商品的全部选中或者全部取消 // 控制全选按钮的样式 this.isAll = !this.isAll let products = [...this.products] // 修改所有的商品的选中状态 products.forEach(item => { item.ch

购物车实现勾选框选中再传递值(超简单版)

qq_41839784的博客

04-21

2671

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input type="checkbox" value="0" name="test...

（十）实现购物车中的对商品的数量选择操作

感恩、奋进、自信

05-04

8326

实现购物车中的对商品的数量选择操作，如图1所示，当一开始的时候，界面最右侧只有一个“+”按钮；当点击右侧任意一个“+”按钮的时候，点击的食品的相应地方会出现“-”按钮，并且出现添加的数量，如图2所示；当在点击其他食品的“+”按钮的时候，也会出现点击的食品的相应地方会出现“-”按钮，并且出现添加的数量，同时底部购物车相应的地方也会做出变化，如图3所示。图1图2图3下面我们就详细的讲解上述联动的效...

Vue购物车全选、反选——单选全部选中、全选自动选中以及总价

A_gyb的博客

09-10

3051

1.模拟购物车数据 data() { return { //模拟购物车数据arr arr:[ { ischeck:false, //默认为false name:'篮球', price:98 }, { ischeck:false, //默认为false name:'足球', price:10

微信小程序全选，微信小程序checkbox，微信小程序购物车

weixin_30885111的博客

11-11

1023

微信小程序，这里实现微信小程序checkbox,有需要此功能的朋友可以参考下。摘要: 加减商品数量，汇总价格，全选与全不选设计思路：一、从网络上传入以下Json数据格式的数组 1.标题title 2.图片地址3.数量num 4.价格price 5.是否选中selected 二、点击复选框toggle操作如已经选中的，经点击变成未选中，反之而反之点击依据index作为标识，...

使用Taro实现跨端购物车逻辑及示例代码

`state`中定义了`cartdata`来存储购物车中的商品信息，`isactive`表示全选按钮的状态，`check`表示单个商品的选择状态，`totalnum`和`totalprice`分别记录了购物车中商品的总数量和总价。`activedata`则保存了当前...

购物车中 商品的选中状态之后的一些业务逻辑操作

购物车中商品的选中状态之后的一些业务逻辑操作