效果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>购物车</title>
</head>
<body>
<style>
*{
padding: 0;
margin: 0;
}
#app{
width: 1000px;
overflow: hidden;
border: 1px solid #ccc;
margin: 20px auto;
padding: 10px;
}
.list{
list-style: none;
padding: 10px;
display: flex;
border-bottom: 1px solid #ccc;
}
.list .itemCheck{
padding-right: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.list .itemDetails{
flex: 0 0 74%;
display: flex;
flex-direction: column;
justify-content: space-around;
padding-left: 10px;
}
.list .itemDetails .itemBtns{
display: flex;
align-items: center;
width: 130px;
}
.itemBtns .subtractNumber,.numberText,.addNumber{
width: 31%;
padding: 0;
text-align: center;
height: 22px;
border: 1px solid #ccc;
}
.list .itemDel{
display: flex;
}
.list .itemDel button{
width: 30px;
border: none;
margin:0 2px;
}
.list .itemDel button:nth-child(1){
background-color: red;
opacity: 0.5;
}
.list .itemDel button:nth-child(2){
background-color: royalblue;
opacity: 0.5;
}
.list .itemDel button:nth-child(3){
background-color: greenyellow;
opacity: 0.5;
}
.list .itemDel button:hover{
opacity: 1;
}
</style>
<script src="../vue.js"></script>
<div id="app">
<ul>
<div>全选:<input type="checkbox" style="margin-left: 2px;" v-model="isAllCheked" @change="handleChange"></div>
<li class="list"
v-for="(item, index) of dataList"
:key="item.id"
>
<div class="itemCheck">
<input
type="checkbox"
class="checkbox"
v-model="selectItem"
:value="item"
@change="handleItemChange"
>
</div>
<div class="itemImg">
<img :src="item.url" class="itemImg" width="100">
</div>
<div class="itemDetails">
<p class="title">{{item.name}}</p>
<p>淘宝价￥<em>{{item.price}}</em></p>
<div class="itemBtns">
<input type="button" class="subtractNumber" value="-" @click="subtractNumber(item,index)" />
<input
type="number"
class="numberText"
v-model="item.number"
>
<input type="button" class="addNumber" value="+" @click="addNumber(item)"/>
</div>
</div>
<div class="itemDel">
<button @click="handelItemDel(index)">删除</button>
<button>联系卖家</button>
<button>分享</button>
</div>
</li>
</ul>
<p>总金额:{{ getSum() }} <span v-for="data of selectItem"></span><button>结算下单</button></p>
</div>
<script>
let vm = new Vue({
el: "#app",
data:{
isAllCheked: false, //全选状态
selectItem:[], //购物车勾选累加
dataList: [ //购物车数据
{
id: "01",
name: "Dickies荧光色仙人掌印花短Tee 男式宽松oversize短袖T恤DK006263 NV海军蓝 M/170",
price: 299,
number: 1,
url: "http://img20.360buyimg.com/imgzone/jfs/t1/19692/36/12479/305379/5c983a63Eda377d99/0d72ee391cee5c90.jpg"
},{
id: "02",
name: "【特价】FIRS杉杉 西裤男 秋季商务休闲西装裤男士西裤 STK91H001-1 84",
price: 178,
number: 2,
url: "https://img30.360buyimg.com/popWaterMark/jfs/t5875/125/8562531272/360028/cf12c5d4/597c5232N504a31d9.jpg"
},{
id: "03",
name: "【特价】FIRS杉杉 短袖衬衫男2019春新款纯色纯棉休闲衬衣 DSHC9113D淡粉 41",
price: 130,
number: 3,
url: "http://img30.360buyimg.com/popWaterMark/jfs/t16663/209/905176105/252629/fda4afe/5aaf7785Nfa873ce2.jpg"
}
]
},
methods: {
// 购物车勾选累加
getSum() {
let sum = 0;
for (let i in this.selectItem) {
sum += this.selectItem[i].number * this.selectItem[i].price
}
return sum
},
// 添加数量
addNumber(item) {
item.number++
},
// 减少数量
subtractNumber(item,index) {
item.number--
// 数量不能小于0
if (item.number === 0) {
item.number = 1
// 确认框
let r = window.confirm("是否删除")
if (r==true)this.dataList.splice(index,1)
}
},
// 全选按钮
handleChange() {
console.log(this.isAllCheked)
if (this.isAllCheked) {
this.selectItem = this.dataList
} else{
this.selectItem = []
}
},
// 商品的勾选监听
handleItemChange() {
if( this.selectItem.length === this.dataList.length) {
this.isAllCheked = true
}else {
this.isAllCheked = false
}
},
// 删除商品
handelItemDel(index) {
// 确认框
let r = window.confirm("是否删除")
if (r==true)this.dataList.splice(index,1)
}
}
})
</script>
</body>
</html>
