购物车实现
人生代码
共 8975字，需浏览 18分钟
·
2021-04-06 15:16
选择商品
单选 总金额需要计算 全选 总金额需要计算 取消全选 总金额需要计算 删除 总金额需要计算 商品数量
增加 单个商品金额需要计算，总金额需要计算 减少 单个商品金额需要计算，总金额需要计算
针对金额，我们需要使用到 Vue 中的 filter 过滤属性，来为金额添加单位
filters:{
round:function (value) {
return "$"+value.toFixed(2);
}
},
商品表格的实现
拿到商品数据，进行循环渲染 处理商品金额单位 处理商品数量 删除操作 商品单选
<table class="detial-wrap">
<tr>
<th>商品信息</th>
<th>商品金额</th>
<th>商品数量</th>
<th>总金额</th>
<th>编辑</th>
</tr>
<tr v-for="(item, cartIndex) in cartList" :key="`cart_${cartIndex}`">
<td class="goods-detial-wrap">
<div class="checkbox-wrap left">
<span class="checkbox" v-bind:class="{'checked':item.checked}" @click="selectedProduct(item)" ></span>
</div>
<div class="goods-detial right">
<div class="good-img left"><img :src="item.imgPic"/></div>
<div class="good-text left">
<div class="name">{{item.name}}</div>
<dl class="gifts">
<dt>赠送：</dt>
<dd v-for="(gift, giftIndex) in item.gifts" :key="`gift_${giftIndex}`">{{gift.giftName}}</dd>
</dl>
</div>
</div>
</td>
<td class="unitprice">{{item.price | round}}</td>
<td class="buy-num">
<div class="choosenum-handler">
<i class="icon-minus" @click="changeMoney(item,-1)"></i>
<span class="countbox">{{item.count}}</span>
<!--<input type="text" v-model="item.count" disabled>-->
<i class="icon-plus" @click="changeMoney(item,1)"></i>
</div>
<div class="stock onsell"></div>
</td>
<td class="amount">{{item.price * item.count | round}}</td>
<!--<td class="icon icon-delete" @click="delFlag=true"></td>-->
<td class="icon icon-delete" @click="delConfirm(item)"></td>
</tr>
</table>
全选，反选功能
<footer class="checkout-wrap">
<div class="total-check-wrap left">
<div class="checkbox-wrap left"><span class="checkbox " :class="{'checked':checkAllFlag}" @click="checkAll(true)"></span></div>
<div class="check-text">
<span class="checked-all" @click="checkAll(true)">全选</span>
<span class="unchecked-all" @click="checkAll(false)">取消全选</span>
</div>
</div>
<div class="checkout right">
<div class="total-money"><span class="name">总金额 :</span><span class="amount">{{ totalMoney | money}}元</span></div>
<a href="#"><input type="submit" value="结账" class="danger"/></a>
</div>
</footer>
给全选的商品每一个都加上 item.checked = true 给反选的商品每一个都加上 item.checked = false 然后计算总金额
checkAll:function (flag) {
this.checkAllFlag =flag;
var _this =this;
this.cartList.forEach(function (item,index) {
//如果第一次直接点击全选
if(typeof item.checked =='undefined'){
_this.$set(item,"checked",_this.checkAllFlag);
}else {
item.checked = _this.checkAllFlag;
}
});
this.getTotalMount();
},
删除商品
delConfirm:function (item) {
//保存对象才知道删除那个对象(用于模态框)
this.curProduct=item;
var index = this.cartList.indexOf(item);
this.cartList.splice(index,1);
}
单选商品 计算总金额
selectedProduct:function (item) {
if(typeof item.checked =='undefined'){
this.$set(item,"checked",true);
}else {
item.checked = !item.checked;
}
this.getTotalMount();
},
总金额方法
getTotalMount:function () {
var _this=this;
_this.totalMoney=0;
this.cartList.forEach(function (item,index) {
if(item.checked){
_this.totalMoney+=item.price*item.count;
}
})
},
商品的增加与减少
changeMoney:function (product,way) {
if (way>0) {
product.count++;
this.$emit('change');
}else{
product.count--;
this.$emit('change');
if(product.count<1){
product.count=1;
}
}
this.getTotalMount();
},
评论