<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 800px;
height: 800px;
background-color: pink;
margin: 0 auto;
}
li {
list-style: none;
}
.box ul li {
height: 100px;
background-color: #efefef;
display: flex;
margin-top: 10px;
justify-content: space-between;
align-items: center;
}
.box ul li .radio {
display: flex;
align-items: center;
}
.box ul li .radio img {
width: 100px;
height: 100px;
}
.box ul li .title {
width: 500px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.box ul li .title span {
font-size: 16px;
font-weight: bold;
padding: 10px 0px;
}
.box ul li .title .price {
font-size: 20px;
padding: 10px 0px;
}
.box .main {
display: flex;
justify-content: space-between;
align-items: center;
width: 800px;
height: 50px;
background-color: skyblue;
margin-top: 70px;
}
.box .main .sum {
font-size: 20px;
font-weight: bold;
}
.box .main .settlement {
width: 100px;
height: 50px;
background-color: blanchedalmond;
}
.box .main .settlement span {
line-height: 50px;
padding-left: 20%;
font-size: 18px;
cursor: pointer;
}
.box ul li .num-count {
width: 130px;
height: 30px;
background-color: skyblue;
display: flex;
justify-content: center;
}
.box ul li .num-count input {
width: 50px;
outline: none;
text-align: center;
}
.box ul li .num-count button {
width: 25px;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li v-for="(item,index) in goodslist" :key="item.name">
<div class="radio">
<input
type="checkbox"
:checked="item.checked"
@click="changechecked($event,item.name)"
/>
<img :src="item.img" alt="" />
</div>
<div class="title">
<span>{{item.name}}</span>
<p class="price">￥{{item.price}}</p>
</div>
<div class="num-count">
<button ref="sub" @click="subcount(item.name)">-</button>
<input type="text" :value="item.count" />
<button ref="add" @click="addcount(item.name)">+</button>
</div>
</li>
</ul>
<div class="main">
<input type="checkbox" v-model="ischecked" @click="allchecked" />
<div class="sum">￥{{sum}}.00</div>
<div class="settlement">
<span @click="settlement">结算({{count}})</span>
</div>
</div>
</div>
<script src="./vue-2.6.12.js"></script>
<script>
new Vue({
el: ".box",
data: {
sum: 0,
ischecked: false,
count: 0,
goodslist: [
{
name: "Redmi Book Pro 15 2022全新12代英特尔处理器 ",
price: 5599,
img: "./购物车图片/1.jpg",
checked: false,
count: 1,
},
{
name: "Redmi G 2021锐龙版 3050Ti版本",
price: 5788,
img: "./购物车图片/2.jpg",
checked: false,
count: 1,
},
{
name: "Pro 14 增强版 i5 独显 - Win11",
price: 4799,
img: "./购物车图片/3.jpg",
checked: false,
count: 1,
},
{
name: "RedmiBook Pro 15 R5/16G/512G 灰",
price: 4699,
img: "./购物车图片/4.jpg",
checked: false,
count: 1,
},
],
},
methods: {
changechecked(e, name) {
let result = this.goodslist.map((item) => {
if (name == item.name) {
item.checked = e.target.checked;
}
return item.checked;
});
let res = result.every((item) => {
return item;
});
if (res) {
this.ischecked = true;
} else {
this.ischecked = false;
}
this.getnewsum();
this.getnumcount();
},
subcount(name) {
this.goodslist.filter((item) => {
if (item.name == name) {
if (item.count <= 0) return (item.count = 0);
item.count--;
}
});
this.getnewsum();
this.getnumcount();
},
addcount(name) {
this.goodslist.filter((item) => {
if (item.name == name) {
item.count++;
}
});
this.getnewsum();
this.getnumcount();
},
allchecked(e) {
if (e.target.checked) {
this.goodslist.forEach((item) => {
item.checked = true;
});
} else {
this.goodslist.forEach((item) => {
item.checked = false;
});
}
this.getnewsum();
this.getnumcount();
},
settlement() {
alert("你本次消费" + this.sum + ".00");
},
getnewsum() {
let num = 0;
this.goodslist.find((item) => {
if (item.checked) {
num += item.price * item.count;
}
});
this.sum = num;
},
getnumcount() {
let count = 0;
this.goodslist.find((item) => {
if (item.checked) {
count += item.count;
}
});
this.count = count;
},
},
});
</script>
</body>
</html>
