vue 购物车实例
<template>
<div class="about">
<div class="main">
<div class="item" v-for="item in list" :key="item.id">
<div class="item_left">
<img :src="item.img" alt="" />
</div>
<div class="item_right">
<p>{{ item.name }}</p>
<p>售价{{ item.price }}元</p>
<div class="step">
<!-- 减 -->
<button
@click="del(item.id)"
:disabled="item.num === 0"
class="bt2"
>
-
</button>
<!-- 加 -->
<button
@click="add(item.id)"
:disabled="item.num === 5"
class="bt1"
>
+
</button>
<input type="text" v-model="item.num" />
<div class="piece">
<p>已选{{ math }}个商品,总计{{ total }}元</p>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "about",
data: function () {
return {
shoppingCar: [], //购物车
list: [
{
id: 1,
name: "限定商品名称1",
price: 999,
img: "",
num: 0,
},
{
id: 2,
name: "限定商品名称2",
price: 88,
img: "",
num: 0,
},
{
id: 3,
name: "限定商品名称3",
price: 941,
img: "",
num: 0,
},
{
id: 4,
name: "限定商品名称4",
price: 399,
img: "",
num: 0,
},
{
id: 5,
name: "限定商品名称5",
price: 959,
img: "",
num: 0,
},
{
id: 6,
name: "限定商品名称6",
price: 119,
img: "",
num: 0,
},
],
};
},
created() {},
methods: {
add(id) {
// 定义一个变量是否存在索引 先通过商品id找到相应商品坐标索引
let addIndex = this.list.findIndex((item) => item.id === id);
// 定义一个变量判断购物车内有没有这个商品
// 在data里添加一个购物车数组，判断该商品是否有数量在购物车内，如果有将该商品数量以及购物车数量依次累加|否则将该商品添加到购物车内数量依次累加
let carAddIndex = this.shoppingCar.findIndex((item) => item.id === id);
// console.log(addIndex, carAddIndex, "addIndex", "carAddIndex");
if (carAddIndex !== -1) {
this.shoppingCar[carAddIndex].num++;
this.list[addIndex].num++;
} else {
this.shoppingCar.push({
id: id,
num: 1,
price: this.list[addIndex].price,
});
this.list[addIndex].num++;
}
console.log(this.shoppingCar);
},
del(id) {
//同理
let delIndex = this.list.findIndex((item) => item.id === id);
let carDelIndex = this.shoppingCar.findIndex((item) => item.id === id);
// console.log(delIndex, carDelIndex, "delIndex", "carDelIndex");
if (carDelIndex !== -1) {
// 如果购物车内商品数量有且等于1将该商品删除掉|否则依次递减
if (this.shoppingCar[carDelIndex.num === 1]) {
this.shoppingCar.splice(carDelIndex, 1);
this.list[delIndex].num--;
} else {
this.shoppingCar[delIndex].num--;
this.list[delIndex].num--;
}
console.log(this.shoppingCar);
}
},
},
computed: {
math() {
let num = 0;
this.shoppingCar.forEach((item) => {
num += item.num;
});
return num;
},
total() {
let money = 0;
this.shoppingCar.forEach((item) => {
money += item.num * item.price;
});
return money;
},
},
};
</script>
<style lang="less" scoped>
.about {
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
*:focus {
outline: none;
}
.main {
width: 95%;
border: 1px solid red;
margin: 60px auto 0;
.item {
width: 100%;
height: 120px;
border: 1px solid orange;
margin-top: 20px;
margin-bottom: 80px;
display: flex;
.item_left {
width: 30%;
height: 100px;
border: 1px solid;
display: flex;
justify-content: center;
align-items: center;
img {
width: 90px;
height: 90px;
}
}
.item_right {
width: 70%;
margin-left: 20px;
position: relative;
border: 1px solid red;
.step {
position: absolute;
top: 70px;
right: 0;
width: 80px;
height: 30px;
// border: 1px solid orange;
background: #efefef;
button {
width: 25px;
height: 25px;
border: none;
}
.bt1 {
position: absolute;
top: 2px;
left: 50px;
}
.bt2 {
position: absolute;
top: 2px;
left: 0;
border: 1px solid red;
}
input {
position: absolute;
top: 2px;
left: 26px;
width: 25px;
height: 25px;
display: inline-block;
border: none;
text-align: center;
}
}
}
}
.piece {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 80px;
background: #efefef;
}
}
}
</style>
浙公网安备 33010602011771号