vue购物车

上一篇实现了简单的购物车功能,然而实际开发中完全不够,这一篇讲述更多的功能!这次使用了bootstrap框架,页面显示比较好看。

1、页面布局

      导入bootstrap框架的css样式文件:bootstrap.min.css

2、要实现的功能:(1)点击全选框或单个选框,并合计总价 (2)选中全部或单个,点击批量删除,进行删除操作

3、(1)点击全选框或单个选框,并合计总价

          在methods添加方法:selectAll    selectSingle

//点击全选按钮
                  selectAll() {
                      //event.currentTarget.checked表示点击完后该选择框的状态
                      if (!event.currentTarget.checked) {
                          this.allSelectedGoods = [];
                      } else {
  
                          this.allSelectedGoods = [];//先置空,然后再重新添加,不然数组里会有重复!因为有可能点击全选之前已经选择了几个单选按钮。也就是数组里已经添加过了对应的id。
                          this.goods.forEach((v, k) => {
                              this.allSelectedGoods.push(v.id)
                          })
                      }
                  
                  },
                  //点击单选按钮
                  selectSingle(k) {
                      if (event.currentTarget.checked) {
                          this.allSelectedGoods.push(this.goods[k].id)
                      } else {
                          for (var i = 0; i < this.allSelectedGoods.length; i++) { if (this.goods[k].id === this.allSelectedGoods[i]) { this.allSelectedGoods.splice(i, 1); this.allChecked = false; break; } } } }
(2)选中全部或单个,点击批量删除,进行删除操作


//批量删除
                  delSelect() {
                      if (confirm("确认删除" + this.allSelectedGoods.length + "条信息吗?")) {
                          for(var i=this.goods.length-1;i>=0;i--){
                              if (this.allSelectedGoods.indexOf(this.goods[i].id)!==-1) {
                                  //从allSelectedGoods数组中也需要删除
                                  var index = this.allSelectedGoods.indexOf(this.goods[i].id);
                                  this.allSelectedGoods.splice(index,1);
                                  //删除goods数组中的信息
                                  /*var index = this.goods.indexOf(v.id);*/
                                  this.goods.splice(i,1);
                              }
                          }
                      }
                  }
              }
4、计算总价


//totalPrice计算总价
                  totalPrice() {
                      var totalprice = 0;
                      this.goods.forEach((v, k) => {
                          if (this.allSelectedGoods.indexOf(v.id) !== -1) {
                              totalprice += v.price * v.num;
                          }
                      });
                      return totalprice
                  }


打赏

关闭

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少
支付宝
微信

打开支付宝扫一扫,即可进行扫码打赏哦