app.vue
<template>
<div>
<my-header></my-header>
<my-list :list="list" @jian="jianFn" @jia='jiaFn'></my-list>
<my-footer :list="list"></my-footer>
</div>
</template>
<script>
import MyFooter from "./components/MyFooter.vue";
import MyList from "./components/MyList.vue";
import MyHeader from "./components/MyHeader.vue";
export default {
components: { MyHeader, MyList, MyFooter },
data() {
return {
list: [
{
id: 100,
title:
"班俏BANQIAO超火ins潮卫衣女士2020秋季新款韩版宽松慵懒风薄款外套带帽上衣",
price: 100,
count: 0,
img: "https://img2.baidu.com/it/u=3744598050,4191464688&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1664038800&t=f0ace1c7e73b31a6d4622de4130c8729",
isDone: false,
},
{
id: 101,
title:
"嘉叶希连帽卫衣女春秋薄款2020新款宽松bf韩版字母印花中长款外套ins潮",
price: 200,
count: 0,
img: "https://img2.baidu.com/it/u=4244947304,878295677&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334",
isDone: false,
},
],
};
},
methods: {
jianFn(id) {
this.list.forEach((obj) => {
if(obj.id ===id && obj.count>=1){
obj.count--
}
});
},
jiaFn(id){
this.list.forEach(obj=>{
if(obj.id===id){
obj.count++
}
})
}
},
};
</script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li {
list-style: none;
}
/* 总盒子 */
.container {
margin: 0 auto;
width: 500px;
background-color: #ddd;
}
</style>
MyHeader
<template>
<div>
<div class="top">
<p class="top_title">购物车案例</p>
</div>
</div>
</template>
<script>
export default {
name: 'MyHeader',
}
</script>
<style scoped>
.top {
width: 500px;
height: 60px;
background-color: rgb(25, 122, 254);
}
.top_title {
color: #fdfefe;
text-align: center;
line-height: 60px;
}
</style>
MyList
<template>
<div class="center_box">
<div class="context_box" v-for="obj in list" :key="obj.id">
<div class="ck">
<input type="checkbox" v-model="obj.isDone" />
</div>
<div class="img">
<img :src="obj.img" />
</div>
<div class="right">
<p class="title">
<span class="right_title">{{ obj.title }}</span>
</p>
<p class="countBtn">
<span class="right_title">
<font color="red">¥{{ obj.price }}</font>
</span>
<button class="btn" @click="jianFn(obj.id)">-</button>
<span class="price">{{ obj.count }}</span>
<button class="btn" @click="jiaFn(obj.id)">+</button>
</p>
</div>
</div>
</div>
</template>
<script>
export default {
name: "MyList",
props: ["list"],
methods: {
jianFn(id) {
this.$emit("jian", id);
},
jiaFn(id) {
this.$emit("jia", id);
},
},
};
</script>
<style scoped>
.center_box {
width: 500px;
background-color: blanchedalmond;
}
.context_box {
width: 500px;
height: 170px;
background-color: #fdfefe;
padding: 10px 0;
border: 1px solid #d5d3d3;
}
.ck {
margin-right: 10px;
width: 20px;
height: 150px;
float: left;
line-height: 150px;
padding: 0 10px;
}
.img {
float: left;
width: 150px;
height: 150px;
}
.img img {
width: 100%;
height: 100%;
border-radius: 12px;
cursor: move;
}
.right {
float: left;
width: 300px;
height: 150px;
margin-left: 10px;
/* background-color: yellow; */
}
.btn {
margin: 0 10px;
width: 40px;
height: 30px;
background-color: rgb(244, 245, 247);
border-radius: 5px;
border: 0;
cursor: pointer;
}
.right_title {
margin-right: 60px;
color: #24272a;
font-size: 20px;
font-weight: 600;
}
.countBtn {
float: right;
}
.title {
margin-bottom: 20px;
}
.price {
display: inline-block;
width: 50px;
height: 40px;
border: 2px solid rgb(236, 238, 241);
border-radius: 5px;
text-align: center;
line-height: 40px;
}
</style>
MyFooter
<template>
<div class="my_bottom">
<div class="ck">
<input type="checkbox" v-model="isAll" />
<span>全选</span>
</div>
<div class="total_box">
<span>合计:</span>
<span class="total_price">¥ <span>{{sumPrice}}</span></span>
</div>
<div class="bottom_right">
<span class="bottom_right_total">结算({{ shopCount }})</span>
</div>
</div>
</template>
<script>
export default {
props: ["list"],
computed: {
isAll: {
get() {
if (this.list.length === 0) {
return false;
}
return this.list.every((item) => item.isDone === true);
},
set(val) {
this.list.forEach((item) => {
item.isDone = val;
});
},
},
shopCount() {
let count = 0;
this.list.forEach((item) => {
if (item.isDone) {
count += item.count;
}
});
return count;
},
sumPrice(){
let sum=0;
this.list.forEach(obj=>{
if(obj.isDone){
sum+=obj.price*obj.count
}
})
return sum
}
},
};
</script>
<style>
.my_bottom {
position: relative;
margin-top: 5px;
width: 500px;
height: 40px;
background-color: #fdfefe;
float: left;
border: 0.5px solid #d5d3d3;
line-height: 40px;
color: #24272a;
}
.my_bottom div {
float: left;
}
.ck {
width: 110px;
height: 16px;
padding: 0 10px;
float: left;
}
.ck span {
margin-left: 10px;
font-size: 16px;
line-height: 16px;
}
/* 合计盒子 */
.total_box {
float: left;
margin-left: 50px;
width: 200px;
}
.total_price {
color: #ff0000;
font-weight: 800;
}
.bottom_right {
margin-top: 5px;
position: absolute;
right: 15px;
height: 30px;
width: 100px;
background-color: #197afe;
border: 1px solid #197afe;
border-radius: 15px;
color: #fdfefe;
text-align: center;
line-height: 30px;
cursor: pointer;
}
.bottom_right_total {
padding: 0 10px;
}
</style>