博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
微信小程序(11)--购物车
阅读量:4336 次
发布时间:2019-06-07

本文共 3084 字,大约阅读时间需要 10 分钟。

今天记录一下购物车案例,实现购物车的全选,单选,数量加一减一,金额总数,以及清空购物车。

{
{item.title}}
¥{
{item.price}}
-
{ {item.num}}
+
×
全选
¥{
{totalPrice}}
购物车是空的哦~
// page/component/new-pages/cart/cart.jsPage({  data: {    carts:[],               // 购物车列表    hasList:false,          // 列表是否有数据    totalPrice:0,           // 总价,初始为0    selectAllStatus:true    // 全选状态,默认全选  },  onShow() {    this.setData({      hasList: true,      carts:[        {id:1,title:'白菜 半斤',image:'/image/s5.png',num:4,price:0.02,selected:true},        {id:2,title:'素米 500g',image:'/image/s6.png',num:1,price:0.05,selected:true}      ]    });    this.getTotalPrice();  },  /**   * 当前商品选中事件   */  selectList(e) {    const index = e.currentTarget.dataset.index;    let carts = this.data.carts;    const selected = carts[index].selected;    carts[index].selected = !selected;    this.setData({      carts: carts    });    this.getTotalPrice();  },  /**   * 删除购物车当前商品   */  deleteList(e) {    const index = e.currentTarget.dataset.index;    let carts = this.data.carts;    carts.splice(index,1);    this.setData({      carts: carts    });    if(!carts.length){      this.setData({        hasList: false      });    }else{      this.getTotalPrice();    }  },  /**   * 购物车全选事件   */  selectAll(e) {    let selectAllStatus = this.data.selectAllStatus;    selectAllStatus = !selectAllStatus;    let carts = this.data.carts;    for (let i = 0; i < carts.length; i++) {      carts[i].selected = selectAllStatus;    }    this.setData({      selectAllStatus: selectAllStatus,      carts: carts    });    this.getTotalPrice();  },  /**   * 绑定加数量事件   */  addCount(e) {    const index = e.currentTarget.dataset.index;    let carts = this.data.carts;    let num = carts[index].num;    num = num + 1;    carts[index].num = num;    this.setData({      carts: carts    });    this.getTotalPrice();  },  /**   * 绑定减数量事件   */  minusCount(e) {    const index = e.currentTarget.dataset.index;    let carts = this.data.carts;    let num = carts[index].num;    if(num <= 1){      return false;    }    num = num - 1;    carts[index].num = num;    this.setData({      carts: carts    });    this.getTotalPrice();  },  /**   * 计算总价   */  getTotalPrice() {    let carts = this.data.carts;                  // 获取购物车列表    let total = 0;    for(let i = 0; i

 

转载于:https://www.cnblogs.com/juewuzhe/p/8227799.html

你可能感兴趣的文章
centos yum源配置 与yum配置文件
查看>>
XXL-Job分布式任务调度
查看>>
ASP隐藏文件地址,并在下载时替换文件名
查看>>
Windows下MongoDB的安装与设置MongoDB服务
查看>>
Microsoft.Jet.OLEDB.4.0”提供程序不支持 ITransactionLocal 接口。本地事务不可用于当前提供程序...
查看>>
oc 代码块的使用
查看>>
转:Eclipse中打开文件所在文件夹的插件及设置
查看>>
Django 之Form
查看>>
开发ProxyServer的时候如何在一台PC上调试
查看>>
C#用于对用户输入数据进行校验的类
查看>>
低速前碰开发
查看>>
python-9-IO编程
查看>>
【GoLang】转载:我为什么放弃Go语言,哈哈
查看>>
【MySQL】MySQL 如何实现 唯一随机数ID
查看>>
【Redis】Redis分布式集群几点说道
查看>>
HDU2819(KB10-E 二分图最大匹配)
查看>>
mysql主从复制、redis基础、持久化和主从复制
查看>>
文档工具GitBook使用
查看>>
两个链表的第一个公共节点
查看>>
知道这20个正则表达式,能让你少写1,000行代码
查看>>