纯前端vue处理购物车思路方法
<div id="app" v-cloak> <div class="Zenobia_i_banner"></div> <div class="Zenobia_i_alone" v-for="item,index in list"> <div class="iconfont iconyi" v-if="item.ischeck" @click="select(item.id,index,false,item.nums,item.price,item.total)"></div> <div class="iconfont iconwei" v-else @click="select(item.id,index,true,item.nums,item.price,item.total)"></div> <div class="Zenobia_i_alone_caipin"> <img class="Zenobia_i_alone_caipin_pic" :src="Zenobia_Url+item.pic" @click="showPic(Zenobia_Url+item.pic)"> <div class="Zenobia_i_alone_caipin_info"> <div class="Zenobia_i_alone_caipin_info_title">{{item.name}}</div> <div class="Zenobia_i_alone_caipin_info_box"> <div class="Zenobia_i_alone_caipin_info_box_price">${{item.price}}</div> <div class="Zenobia_i_alone_caipin_info_box_nums"> <div class="iconfont iconjian" @click="cutNums(index,item.nums,item.price)"></div> <input type="text" v-model="item.nums"> <div class="iconfont iconjia" @click="addNums(index,item.nums,item.price)"></div> </div> </div> </div> </div> </div> <div class="Zenobia_i_bottom"> <div class="Zenobia_i_bottom_left" @click="quanxuan"> <div class="iconfont iconyi" v-if="isquanxuan"></div> <div class="iconfont iconwei" v-else></div> <div class="Zenobia_i_bottom_left_text">全选</div> </div> <div class="Zenobia_i_bottom_right"> <div class="Zenobia_i_bottom_right_price">${{price}}</div> <button class="Zenobia_i_bottom_right_btn" type="button" @click="titjiao">提交订单</button> </div> </div> </div>
data: { list: [{ "id": 1, "name": "Sweet and sour fillet of pork",//商品名称 "pic": "/public/uploads/images/pics/1.jpg",//商品图片 "price": 100,//商品价格 "ischeck": false,//默认未选择 "nums": 1,//默认数量1 "total": 100//先默认单品合计等于单价 }, { "id": 2, "name": "Braised Prawns", "pic": "/public/uploads/images/pics/2.jpg", "price": 50, "ischeck": false, "nums": 1, "total": 50 }], goods: [],//选中商品数组 price: 0,//合计 isquanxuan: false,//是否全选 }, methods: { addNums: function(index, nums, price) { var that = this; that.list[index].nums++; that.list[index].total = that.list[index].total + price if (that.list[index].ischeck) { that.price = that.price + price } }, cutNums: function(index, nums, price) { var that = this; if (nums == 1) { return } that.list[index].nums--; that.list[index].total = that.list[index].total - price; if (that.list[index].ischeck) { that.price = that.price - price; } }, quanxuan: function() { var that = this; //每次点击全选时选中数组先清空,合计清零 that.goods = []; that.price = 0; if (that.isquanxuan) {//取消全选 that.isquanxuan = false; for (var i in that.list) { that.list[i].ischeck = false;//所有全部 } } else {//点击全选 that.isquanxuan = true; for (var i in that.list) { that.list[i].ischeck = true; that.price = that.price + that.list[i].total;//计算合计 var goods = { id: that.list[i].id, nums: that.list[i].nums, price: that.list[i].price, total: that.list[i].total } that.goods.push(goods);//把选中的重新插入到数组中 } } console.log(JSON.stringify(that.goods)) }, select: function(id, index, ischeck, nums, price, total) { var that = this; that.list[index].ischeck = ischeck; console.log(JSON.stringify(that.goods)) if (ischeck) { that.price = that.price + parseInt(total); for (var i in that.goods) { if (that.goods[i].id == id) { that.goods[i].nums = that.goods[i].nums + nums that.goods[i].total = that.goods[i].total + total return } } var goods = { id: id, nums: nums, price: price, total: total } that.goods.push(goods); } else { that.price = that.price - parseInt(total); for (var i in that.goods) { if (that.goods[i].id == id) { that.goods.splice(i, 1) } } } }, }