vue 购物车案例（加全选，单选）
<template>
<div class="home">
//左右联动的左部分
<div class="left">
<div
:id="selindex===index? 'sel':''"
v-for="(item,index) in data"
:key="index"
@click="onlick(index)" >
{{item.anchor_point}}
</div>
</div>
<div class="right" ref="res">
//左右联动的右侧
<div ref="qq" style="width:100%;"
v-for="(item,index) in data" :key="index">
<div v-for="(items,index) in item.commodity_list" :key="index">
<div class="div">
<img :src="items.comm_image" width="50px" height="50px" />
<div style="width:100%">
<p style="font-size:12px;">{{items.comm_title}}</p>
<p class="po" style="font-size:12px;color:red;margin-top:10px;">
<span>￥{{items.fabulous}}</span>
<span class="iconfont icon-jiahao" @click="toCart(items)"></span>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="bottom">
//购物车的内容
<p class="cc">
<span class="iconfont icon-gwc" @click="th"></span>
<span class="math">{{this.cart.length}}</span>
</p>
<p style="color:red">
<span>{{totalMoney}}￥</span>
<span>{{nn}}件</span>
</p>
<p style="width:110px;text-align:center;background:red;">结算</p>
</div>
<div class="d" v-show="show">
<p >
<span @click="ch">x</span>
<span>
<input type="checkbox" v-model="one"
@click="change" />全选
</span>
</p>
<div class="sd" v-for="(item,index) in cart" :key="index">
<input type="checkbox" class="c" :checked="item.checked" @click="OnClick(item,index)" />
<img :src="item.dd.comm_image" width="50px" height="50px" /> <div style="width:100%">
<p style="font-size:12px;">{{item.dd.comm_title}}</p>
<p class="po" style="font-size:12px;color:red;margin-top:10px;">
<span>￥{{item.dd.fabulous}}</span>
<span style="margin-right:15px;">
<button @click="jian(item)">-</button>
{{item.num}}
<button @click="jia(item)">+</button>
</span>
<span @click="del(index)" style="float:right" class="iconfont icon-shanchu">
</span>
</p>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
data: [],
selindex: 0,
show: false,
cart:[],
one:false
};
},
computed: {
del(index) {
this.cart.splice(index, 1);
localStorage.cart = JSON.stringify(this.cart);
},
totalMoney() {
let total = 0;
this.cart.forEach(element => {
if (element.checked === true) {
total += element.dd.comm_price * element.num;
}
});
return total;
},
nn(){
let tota = 0;
this.cart.forEach(element => {
if (element.checked === true) {
tota += element.num;
}
});
return tota;
}
},
mounted() {
this.$axios.get("./List.json").then(res => {
this.data = res.data;
console.log(res.data);
});
console.log(this.$refs.res);
this.$refs.res.addEventListener("scroll", this.handScroll, true);
let cartz = JSON.parse(window.localStorage.getItem("day6_9")) || []; if (cartz.length >= 1) {
this.num = cartz.length;
}
//初始化购物车数据
let cart = localStorage.cart;
if (cart != null && cart != undefined) {
this.cart = JSON.parse(cart);
}
},
methods: {
jian(item) {
if (item.num > 1) {
item.num--;
}
},
jia(item) { item.num++; },
OnClick(item, index) {
item.checked = !item.checked;
},
change() {
this.one = !this.one;
if (this.one === true) {
this.cart.forEach(element => {
element.checked = true;
});
} else if (this.one === false) {
this.cart.forEach(element => {
element.checked = false;
});
}
},
toCart(items){
let rel = false;//用于记录是否有重复商品,false为默认值，即没有重复商品
let dd=items;
//items是右部联动的对象，或者说是数组。
this.cart.map((item)=>{
console.log(item)
if(item.dd.id == dd.id){
item.num ++;
rel = true;//当前有重复商品
return; 0
}
}) //没有重复商品时，添加新商品
if(!rel){
this.cart.push({
dd,num:1,checked:false,
}); //把数据追加到 this.cart
}
console.log(this.cart)
localStorage.cart = JSON.stringify(this.cart);//替换原来的localStorage中的数据
},
th(){
this.show=true;
},
ch(){
this.show=false;
},
onlick(index) {
this.$refs.res.removeEventListener("scroll", this.handScroll, true);
console.log("已删除");
this.selindex = index;
let one = this.$refs.qq[this.selindex];
one.scrollIntoView({ behavior: "smooth" });
this.$refs.res.addEventListener("auto", this.handScroll, true);
},
handScroll(event) {
console.log("进行滚动");
// 整体滚动的距离
var scrollTop = event.target.scrollTop;
window.console.log(scrollTop); // 每一块距顶部的高度
var leftElement = this.$refs.qq;
for (let index = 0; index < leftElement.length; index++) {
if (
scrollTop >= leftElement[index].offsetTop && scrollTop < leftElement[index + 1].offsetTop ) {
this.selindex = index;
}
if (scrollTop >= 1730) {
this.selindex = 6;
}
}
}
}};
</script>
注意：我用的json数据格式有所不同，所以我写这篇备注一下！
[ { "anchor_point": "热销", "commodity_list": [ { "id": 1, "comm_image": "https://p0.meituan.net/xianfu/589531149ec5714807aa486720c4e7c533409.jpg@150w_150h_80Q_0e_1l.webp", "comm_title": "牛轧雪花酥", "comm_message": "微微咸甜的浓郁奶香中，别有一番风味，口感松软有嚼劲，只想再来一口", "comm_price": 1.2, "fabulous": 5, "Sell_out": 300, "comm_label": "" }, { "id": 2, "comm_image": "https://p0.meituan.net/xianfu/f5f411a16cb44ba528a8e81cec507f0535600.jpg@150w_150h_80Q_0e_1l.webp", "comm_title": "满杯百香果", "comm_message": "满杯百香果，酸甜百香多。富含多种水果芳香物质的百香果，搭配高纤椰果和Q弹珍珠，口感酸甜爽口，是您解腻畅饮的法宝。【杯型：热饮为16盎司纸杯，冰饮为700ml大杯】", "comm_price": 8, "fabulous": 27, "Sell_out": 300, "comm_label": "力荐" }, { "id": 3, "comm_image": "https://p0.meituan.net/xianfu/6ad169126ed5837edeb6bed613705f8535562.jpg@150w_150h_80Q_0e_1l.webp", "comm_title": "冰鲜柠檬水", "comm_message": "手工现捣的，冰鲜更美味", "comm_price": 5, "fabulous": 14, "Sell_out": 100, "comm_label": "力荐" }, { "id": 4, "comm_image": "https://p0.meituan.net/xianfu/44e3e8f829f8845dd0ab078f8bf0c2cd47588.jpg@150w_150h_80Q_0e_1l.webp", "comm_title": "黑珍珠奶茶", "comm_message": "台湾奶茶经典，风靡30年", "comm_price": 8, "fabulous": 19, "Sell_out": 300, "comm_label": "力荐" }, { "id": 15, "comm_image": "https://p0.meituan.net/xianfu/d7b1e9d8bc1ec9fa0e694e0db7e9047041383.jpg@150w_150h_80Q_0e_1l.webp", "comm_title": "奥利奥雪王大圣代", "comm_message": "新鲜冰淇淋，大杯是过瘾", "comm_price": 7, "fabulous": 23, "Sell_out": 200, "comm_label": "" }, { "id": 16, "comm_image": "https://p1.meituan.net/xianfu/3d7aac1aa60dfeaf6a7cd1b5ed4ea45b35673.jpg@150w_150h_80Q_0e_1l.webp", "comm_title": "棒打鲜橙", "comm_message": "新品上市，棒打鲜橙，现切现捣", "comm_price": 7, "fabulous": 4, "Sell_out": 100, "comm_label": "" } ] }, { "anchor_point": "摇摇奶昔", "commodity_list": [ { "id": 7, "comm_image": "https://p0.meituan.net/xianfu/afa9a56210e465c2b1c2d29a70fc896437802.jpg@150w_150h_80Q_0e_1l.webp", "comm_title": "吃土摇摇奶昔", "comm_message": "新品上市，吃土摇摇奶昔，奥利奥风味，喝前摇一摇", "comm_price": 7, "fabulous": 9, "Sell_out": 100, "comm_label": "" }, { "id": 8, "comm_image": "https://p1.meituan.net/xianfu/d58e749653ed003c36b07ce6c7afd8d038046.jpg@150w_150h_80Q_0e_1l.webp", "comm_title": "草莓摇摇奶昔", "comm_message": "一杯有三宝，喝前摇一摇", "comm_price": 7, "fabulous": 2, "Sell_out": 100, "comm_label": "" }, { "id": 9, "comm_image": "https://p0.meituan.net/xianfu/35ec0799e982562ec020e9ea58ca41b432420.jpg@150w_150h_80Q_0e_1l.webp", "comm_title": "蓝莓摇摇奶昔", "comm_message": "一杯有三宝，喝前摇一摇", "comm_price": 7, "fabulous": 2, "Sell_out": 100, "comm_label": "" } ] }, { "anchor_point": "雪王圣代冰淇淋茶", "commodity_list": [ { "id": 10, "comm_image": "https://p0.meituan.net/xianfu/13d34394b08325f78eb8de0a4224984f28448.jpg@150w_150h_80Q_0e_1l.webp", "comm_title": "凤梨雪王大圣代", "comm_message": "新品上市酸甜凤梨，就是喜欢你。凤梨比菠萝甜，你是我的小甜甜。", "comm_price": 7, "fabulous": 4, "Sell_out": 48, "comm_label": "" }, { "id": 11, "comm_image": "https://p0.meituan.net/xianfu/73498f9b63552b43a87d9e5fa11cd33728136.jpg@150w_150h_80Q_0e_1l.webp", "comm_title": "红豆雪王大圣代", "comm_message": "软糯沙甜软糯沙甜小红豆，吃了一口就上头。", "comm_price": 7, "fabulous": 1, "Sell_out": 34, "comm_label": "" }, { "id": 12, "comm_image": "https://p0.meituan.net/xianfu/c2849342e7de8c6a1da36c1997b5ba2c29795.jpg@150w_150h_80Q_0e_1l.webp", "comm_title": "芒果雪王大圣代", "comm_message": "新品上市港式甜品冰淇淋，大块芒果肉，浓浓芒果香，幸福爆表的芒果控！", "comm_price": 7, "fabulous": 4, "Sell_out": 62, "comm_label": "" }, { "id": 13, "comm_image": "https://p1.meituan.net/xianfu/b8388b9b0db71f443aa6523459f1345738786.jpg@150w_150h_80Q_0e_1l.webp", "comm_title": "蓝莓雪王大圣代", "comm_message": "新鲜冰淇淋，大杯是过瘾", "comm_price": 7, "fabulous": 12, "Sell_out": 48, "comm_label": "" }, { "id": 14, "comm_image": "https://p1.meituan.net/xianfu/299caee5f3dac28d394b8b36936cee7038452.jpg@150w_150h_80Q_0e_1l.webp", "comm_title": "草莓雪王大圣代", "comm_message": "新鲜冰淇淋，大杯是过瘾", "comm_price": 7, "fabulous": 14, "Sell_out": 100, "comm_label": "" }, { "id": 15, "comm_image": "https://p0.meituan.net/xianfu/d7b1e9d8bc1ec9fa0e694e0db7e9047041383.jpg@150w_150h_80Q_0e_1l.webp", "comm_title": "奥利奥雪王大圣代", "comm_message": "新鲜冰淇淋，大杯是过瘾", "comm_price": 7, "fabulous": 22, "Sell_out": 200, "comm_label": "" } ] }, { "anchor_point": "真鲜果茶", "commodity_list": [ { "id": 16, "comm_image": "https://p1.meituan.net/xianfu/3d7aac1aa60dfeaf6a7cd1b5ed4ea45b35673.jpg@150w_150h_80Q_0e_1l.webp", "comm_title": "棒打鲜橙", "comm_message": "新品上市，棒打鲜橙，现切现捣", "comm_price": 7, "fabulous": 4, "Sell_out": 100, "comm_label": "" }, { "id": 17, "comm_image": "https://p0.meituan.net/xianfu/a5a530ed45cb17234305046aa0f673ff33657.jpg@150w_150h_80Q_0e_1l.webp", "comm_title": "柠檬芦荟茶", "comm_message": "新鲜芦荟搭配进口南非柠檬，混合香浓红茶，网红单品新选择", "comm_price": 6, "fabulous": 9, "Sell_out": 97, "comm_label": "" }, { "id": 18, "comm_image": "https://p0.meituan.net/xianfu/8d112e69b4a93030d187edb2990a84e327159.jpg@150w_150h_80Q_0e_1l.webp", "comm_title": "柠檬绿茶", "comm_message": "皮薄多汁，混合清香绿茶，清爽可口", "comm_price": 6, "fabulous": 4, "Sell_out": 44, "comm_label": "" }, { "id": 19, "comm_image": "https://p1.meituan.net/xianfu/dabfc07ab2b6d1ab62086e015bf16ad739606.jpg@150w_150h_80Q_0e_1l.webp", "comm_title": "柠檬红茶", "comm_message": "皮薄多汁，搭配醇厚红茶，清爽可口", "comm_price": 6, "fabulous": 7, "Sell_out": 82, "comm_label": "" }, { "id": 20, "comm_image": "https://p0.meituan.net/xianfu/61eb5801d9e651570f10990f50911e4a42614.jpg@150w_150h_80Q_0e_1l.webp", "comm_title": "森多玫果", "comm_message": "多种复合水果+椰果", "comm_price": 6, "fabulous": 4, "Sell_out": 100, "comm_label": "" } ] }, { "anchor_point": "大杯奶茶", "commodity_list": [ { "id": 21, "comm_image": "https://p0.meituan.net/xianfu/bbf65fac85a5384061b69bc8307403bc26169.jpg@150w_150h_80Q_0e_1l.webp", "comm_title": "", "comm_message": "浓醇奶茶搭配香滑黑糖冻及软糯红豆，两种小料双重口感体验，是人气饮品！【温度：热/冰，杯型：大杯】", "comm_price": 9, "fabulous": 2, "Sell_out": 95, "comm_label": "" }, { "id": 22, "comm_image": "https://p0.meituan.net/xianfu/42f5262d7b3f36e6bfcce634fafa221336111.jpg@150w_150h_80Q_0e_1l.webp", "comm_title": "霸霸红豆奶茶", "comm_message": "软糯红豆、融入香醇奶茶，给您的味蕾带来全新体验。好喝，看得见！【温度：热/冰，杯型：大杯】", "comm_price": 9, "fabulous": 4, "Sell_out": 45, "comm_label": "" }, { "id": 23, "comm_image": "https://p0.meituan.net/xianfu/af363552684930814ec30b172dd9788332905.jpg@150w_150h_80Q_0e_1l.webp", "comm_title": "霸霸燕麦奶茶", "comm_message": "健康燕麦、融入香醇奶茶，给您的味蕾带来全新体验。好喝，看得见！【温度：热/冰，杯型：大杯】", "comm_price": 9, "fabulous": 4, "Sell_out": 38, "comm_label": "" } ] }, { "anchor_point": "芝士奶盖", "commodity_list": [ { "id": 24, "comm_image": "https://p0.meituan.net/xianfu/509f572d5579e74684fc297ca361707f18461.jpg@150w_150h_80Q_0e_1l.webp", "comm_title": "芝士奶盖四季春", "comm_message": "芝士加纯茶，清新爽到家", "comm_price": 9, "fabulous": 4, "Sell_out": 147, "comm_label": "" }, { "id": 25, "comm_image": "https://p0.meituan.net/xianfu/c83706188e5ee354a8c0eddb0ef83a7919194.jpg@150w_150h_80Q_0e_1l.webp", "comm_title": "芝士奶盖红茶", "comm_message": "芝士奶盖+原叶红茶", "comm_price": 9, "fabulous": 3, "Sell_out": 22, "comm_label": "" }, { "id": 26, "comm_image": "https://p1.meituan.net/xianfu/87d55b8747205606e9febc7b0717a1a819075.jpg@150w_150h_80Q_0e_1l.webp", "comm_title": "芝士奶盖绿茶", "comm_message": "芝士奶盖+原叶绿茶", "comm_price": 9, "fabulous": 1, "Sell_out": 12, "comm_label": "" } ] }, { "anchor_point": "原叶绿茶", "commodity_list": [ { "id": 27, "comm_image": "https://p0.meituan.net/xianfu/44e3e8f829f8845dd0ab078f8bf0c2cd47588.jpg@150w_150h_80Q_0e_1l.webp", "comm_title": "珍珠奶茶", "comm_message": "奶茶经典，香醇浓郁。香醇浓郁的奶茶加入香Q弹牙、嚼劲十足的珍珠，经典饮品好喝不简单。【温度：热/冰，杯型：中杯】", "comm_price": 7, "fabulous": 11, "Sell_out": 300, "comm_label": "" }, { "id": 28, "comm_image": "https://p0.meituan.net/xianfu/44e3e8f829f8845dd0ab078f8bf0c2cd47588.jpg@150w_150h_80Q_0e_1l.webp", "comm_title": "雪王烤奶", "comm_message": "焦香又醇厚，一口就爱上。雪王烤奶由焦糖的浪漫和奶茶的浓香特调而成，并加入Q弹珍珠，甜而不腻，淡而不寡，它给你带来的这份惊喜会让你感受到什么才是与众不同。【温度：热/冰，杯型：中杯】", "comm_price": 8, "fabulous": 4, "Sell_out": 100, "comm_label": "" }, { "id": 29, "comm_image": "https://p0.meituan.net/xianfu/ca7c6ee285899155674994e5f3717c0714890.jpg@150w_150h_80Q_0e_1l.webp", "comm_title": "雪王英式奶茶", "comm_message": "先茶后奶，英式口感。红茶以独具一格的方法煮制，加入特选的优质鲜奶，香浓幼滑，醇香肆意。【温度：热/冰，杯型：中杯】", "comm_price": 8, "fabulous": 4, "Sell_out": 35, "comm_label": "" }, { "id": 30, "comm_image": "https://p0.meituan.net/xianfu/44e3e8f829f8845dd0ab078f8bf0c2cd47588.jpg@150w_150h_80Q_0e_1l.webp", "comm_title": "雪王烤奶", "comm_message": "焦香又醇厚，一口就爱上。雪王烤奶由焦糖的浪漫和奶茶的浓香特调而成，并加入Q弹珍珠，甜而不腻，淡而不寡，它给你带来的这份惊喜会让你感受到什么才是与众不同。【温度：热/冰，杯型：中杯】", "comm_price": 8, "fabulous": 4, "Sell_out": 100, "comm_label": "" }, { "id": 31, "comm_image": "https://p0.meituan.net/xianfu/ca7c6ee285899155674994e5f3717c0714890.jpg@150w_150h_80Q_0e_1l.webp", "comm_title": "雪王英式奶茶", "comm_message": "先茶后奶，英式口感。红茶以独具一格的方法煮制，加入特选的优质鲜奶，香浓幼滑，醇香肆意。【温度：热/冰，杯型：中杯】", "comm_price": 8, "fabulous": 4, "Sell_out": 35, "comm_label": "" } ] }]
如果想用代码操作的话，可能会存在问题（所以要在vue项目中进行）编译工具建议用Visual Studio Code,可以格式化代码，使用该json数据。
2825
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
