购物车 全选 不全选 选择计算价格
<template>
<div>
<van-nav-bar fixed title="购物车" left-text="返回" right-text="..." left-arrow />
<div class="cart-box">
<van-checkbox-group v-model="upcart" @change="groupChange">
<van-swipe-cell style="margin-top: 20px" v-for="(item, index) in cart" :key="index">
<van-row class="tban">
<van-col style="margin-left: 20px;" span="3">
<van-checkbox :name="item"></van-checkbox>
</van-col>
<van-col span="21">
<van-card
:price="item.tolist.actualPrice"
:title="item.tolist.dtitle"
:thumb="item.tolist.mainPic"
>
<template #num>
<van-stepper v-model="item.number" @change="upNum" />
</template>
</van-card>
</van-col>
</van-row>
<template #right>
<van-button square text="删除" type="danger" @click="sel(index)" class="delete-button" />
</template>
</van-swipe-cell>
</van-checkbox-group>
</div>
<van-submit-bar :price="totalPrice" button-text="提交订单">
<van-checkbox v-model="Qche" @click="Qcheck">全选</van-checkbox>
</van-submit-bar>
</div>
</template>
<script>
export default {
data() {
return {
cart: [],
Qche: false,
upcart: []
// totalPrice:0
};
},
methods: {
upNum() {
this.lo();
},
groupChange(name) {
if (name.length < this.cart.length) {
this.Qche = false;
} else if (name.length == this.cart.length) {
this.Qche = true;
}
},
Qcheck() {
if (this.Qche) {
this.upcart = this.cart;
} else {
this.upcart = [];
}
},
lo() {
localStorage.cart = JSON.stringify(this.cart);
}
},
computed: {
totalPrice() {
let ban = 0;
this.upcart.map(item => {
ban += item.number * item.tolist.actualPrice * 100;
});
return ban;
}
},
created() {
let cart = localStorage.cart;
if (cart) {
this.cart = JSON.parse(cart);
}
}
};
</script>
<style scoped>
.cart-box {
margin-top: 50px;
margin-bottom: 50px;
}
.goods-card {
margin: 0;
/* @white; */
}
.delete-button {
height: 100%;
}
.tban {
display: flex;
align-items: center;
justify-content: center;
}
</style>
