vue实战记录（五）- vue实现购物车功能之商品总金额计算和单选全选删除功能 vue实战

一、单价商品的金额计算
整个操作过程是，商品的数量是可以控制的，可增可减，最少为1。并且在数量的变化中，商品的总价也在变化。

控制数量与总价的变化需要定义新方法。

页面中的+和-控制数量的变化，当点击的时候调用changeMoney()函数，传递参数，通过数量的变化去改变金额。+的时候增1，-的时候减1。

cart.html

二、单选选中商品
在购物车中，需要选择当前想买的商品，这一功能成为商品的单选，并且在选中商品的同时，总金额会累加上选中的商品总价。

需要绑定单选按钮的选中状态，选中为true，再次点击状态取反。

cart.html

这仅仅只是实现选中商品，如何进行选中商品的金额累加呢，需要进行金额的计算，新增方法：

然后在每一个需要对金额进行计算的地方都要调用这个函数。选中商品的最后就需要调用这个方法，所以在

selectedProduct()方法的最后要添加调用：
this.calcTotalPrice();//选中商品后调用计算总金额函数
三、全选选中商品
全选就是一键选中所有商品，然后总金额是所有商品的总价的总和。取消全选有两个方式：一是直接按取消全选，而是取消任何一个商品的选中。

计算总金额的方法在上方已经提过，所以只需要在全选的方法后面调用该方法就可以计算所有的总金额。

全选和取消全选的方法就是各自传送一个状态flag，点击是谁就进行相关的操作，所以新增一个checkAll()方法。

先在data新增属性：

checkAllFlag: false,//选中全部
cart.html:

cart.js

四、删除商品
点击每个商品后面的删除按钮，可以弹出一个确定是否删除该订单的模态框，点击no取消删除，点击Yes确定删除，确定删除后就会把当前商品从商品列表里删除。这一个操作本该是前台调用接口将当前元素的id传给后台进行删除操作，这里只是模拟删除数据。

这里存在一个问题还没解决，就是全选状态下删除某一个商品，总金额没有改变（待解决）

点击删除按钮时有一个状态传递，即点击那个商品后面的删除就把当前项传递给模态框的删除方法。

在data中新增属性：




delFlag:false,//删除
curProduct: ‘’//当前商品
cart.html

<a href=“javascript:void 0” class=“item-edit-btn” @click=“delConfirm(item)”>


cart.js

    delConfirm: function (item) {
        this.delFlag = true;//打开删除当前订单的模态框
        this.curProduct = item;//确认点击的当前商品待删除
    },
    delProduct: function () {//这里只是模拟删除数据，真实的需要传递选中的商品元素的id传给后台，从后台删除
        index = this.productList.indexOf(this.curProduct);//从当前商品列表找到要删除的商品元素
        this.productList.splice(index, 1);//然后从列表里删除当前要删除的商品元素，数量为1
        this.delFlag = false;//关闭模态框
    }

cart.js的全部代码：

Vue.filter(‘money’,(value,type) => {//全局过滤器 总价
return "￥ " + value.toFixed(2) + type;//保留两位小数
});
new Vue({
el:’#app’,
data: {
totalMoney: 0,//总金额
productList: [],//商品列表
checkAllFlag: false,//选中全部
delFlag:false,//删除
curProduct: ‘’
},
filters: {//局部过滤器 单价
formatMoney: function (value) {
return "￥ " + value.toFixed(2);//保留两位小数
}
},
mounted: function() {//挂载 钩子 实例插入文档
this.cartView();
},
methods: {
cartView: function () {
let _this = this;
//获取数据，返回结果
this.KaTeX parse error: Expected 'EOF', got '}' at position 211: … }); }̲, chang…set(item, “checked”, true);//局部注册
}else{
item.checked = !item.checked;//状态取反
}
//如果取消一个商品的选中，全选也取消
var itemisChecked = [];
this.productList.forEach(function (item, index){
if (item.checked === true ) {
itemisChecked.push(item);
}
})
if (itemisChecked.length === this.productList.length ) {
this.checkAllFlag = true;
}else{
this.checkAllFlag = false;
}
this.calcTotalPrice();//选中商品后调用计算总金额函数
},
checkAll: function (flag) {
this.checkAllFlag = flag;
this.productList.forEach((item, index) => {
if(typeof item.checked == ‘undefined’) {//检测属性是否存在
this.$set(item, “checked”, this.checkAllFlag);//局部注册
}else{
item.checked = this.checkAllFlag;//状态取反
}
});
this.calcTotalPrice();//全选时调用计算总金额函数
},
calcTotalPrice: function () {
this.totalMoney = 0;//每次遍历商品之前对总金额进行清零
this.productList.forEach((item, index) => {//遍历商品，如果选中就进行加个计算，然后累加
if (item.checked){
this.totalMoney += item.productPrice*item.productQuantity;//累加的
}
});
},
delConfirm: function (item) {
this.delFlag = true;//打开删除当前订单的模态框
this.curProduct = item;//确认点击的当前商品待删除
},
delProduct: function () {//这里只是模拟删除数据，真实的需要传递选中的商品元素的id传给后台，从后台删除
index = this.productList.indexOf(this.curProduct);//从当前商品列表找到要删除的商品元素
this.productList.splice(index, 1);//然后从列表里删除当前要删除的商品元素，数量为1
this.delFlag = false;//关闭模态框
}
},
});

作　　者：sueRimn
出　　处：https://www.cnblogs.com/suRimn/p/10341102.html