vue实现淘宝购物车功能

2020-06-16 06:56:55易采站长站整理

<p class="caculate">
<span class="mark" @click="numDecrease(goods.number)"></span>
<span class="beeforCacul">{{goods.number}}</span>
<span class="cacul" :num="goods.cartDetailId">{{goods.number}}</span>
<span class="mark" @click="numAdd(goods.number)"></span>
</p>
</div>
</div>
</div>
<div class="edit" v-if="cartStatus === 'edit'">
<label>
<input type="checkbox" name="allRadio" class="disN" @click="allCheck($event)">
<b></b>
<span>全选</span>
</label>
<span class="delet">删除(3)</span>
</div>
<div class="gotopay" v-if="cartStatus === 'account'">
<label>
<input type="checkbox" name="allRadio" class="disN" @click="allCheck($event)">
<b></b>
<span class="marginR40">全选</span>
<span>合计:</span>
<span class="sum">¥{{sumPrice.toFixed(2)}}</span>
</label>
<span class="delet" @click="cauSum">去结算({{totalNumber}})</span>
</div>
</div>
</div>


export default {
components: {

},
name: "life",
data() {
return {
cartStatus:"account", //购物车状态,account结算,edit删除编辑状态
cartShops: [], //店铺列表
sumPrice:0, //合计金额
totalNumber: 0, //总数
shopList:[], //店铺列表
goodsList:[], //商品列表
};
},
watch: {

},
mounted() {
this.getCartDetail();
},
methods: {
//购物车列表
getCartDetail: function(){
this.$http.get("api/product/v1/getCartDetail").then( res => {
if(res.data.code === 200){
//console.log(res.data.data)
this.cartShops = res.data.data.cartShops;
}else{
Toast(res.data.msg);
}
}).catch( error => {
console.log(error)
})
},
//商品选择
goodsCkeck: function(event,goodsList,shopList,shopId){
//商品列表+-,店铺是否checked(店铺列表+-),全选是否checked
var input = document.getElementsByTagName('input')
if(event.currentTarget.checked){
this.goodsList.push(String(event.currentTarget.value));
//如果店铺内所有商品全选,店铺选中
var newArr = this.goodsList;
var tt = goodsList.every(function(itemValue){
return (newArr.indexOf(String(itemValue.cartDetailId)) != -1)