Use calculated attributes to achieve shopping cart effects (increase or decrease in product quantity, calculate amount and total price for single-select and multiple-select,)
Knowledge involved:
Vue basic instructions
Vue computed properties
Use Vue's basic syntax knowledge, including interpolation expressions and data binding, common instructions, calculated properties, etc., to achieve the data display effect of the shopping cart.
Renderings show
Code
Use v-for loop to achieve the effect of displaying the shopping cart
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>购物车</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
</div>
<template id="root">
<div class="shop-cart">
<div class="tabs">
<div class="border">
<!-- data-*表示自定义属性。 -->
<div class="title active" data-index="0">
全部商品
<span class="count">3</span>
</div>
<div class="title" data-index="1">
降价商品
<span class="count">0</span>
</div>
<div class="title last" data-index="2">
库存紧张
<span class="count">0</span>
</div>
<div class="line"></div>
</div>
</div>
<div class="lists">
<div class="header">
<ul class="clearfix">
<li>
<input type="checkbox" class="select-all">
<label>全选</label>
</li>
<li class="product-info">商品信息</li>
<li>单价</li>
<li>数量</li>
<li>金额</li>
<li>操作</li>
</ul>
</div>
<!-- 实验需要操作的节点 -->
<div id="shoplist" class="shoplist">
<!-- 店铺内容及样式参考 -->
<div class="shop" v-for="sName in shopcarts" :key="sName.cartId">
<div class="shop-info">
<span class="shop-tip">店铺：</span>
<a class="shop-name" href="#" :key="sName.cartId" >{
{sName.shopName}}</a>
<a href="#" class="wangwang">旺旺</a>
</div>
<div class="products" >
<div class="item" v-for="shop in sName.products" :key="shop.productId">
<div class="select-logo">
<!-- -->
<input type="checkbox" v-bind:checked="shop.isSelect" @click="shop.isSelect=!shop.isSelect">
<img :src="shop.topImg" alt="产品logo">
</div>
<div class="product-detail" >
<div class="left">
<a href="#" class="product-name">
{
{shop.productName}}
</a>
<div class="logos">
<a href="#" class="card">信用卡</a>
<a href="#" class="service">保障服务</a>
<a href="#" class="order">订单险</a>
<a href="#" class="seven">7天无理由</a>
</div>
</div>
<div class="right" v-html="shop.spec">
</div>
</div>
<div class="price">
<p class="market-price">￥{
{shop.marketPrice}}</p>
<p class="real-price">￥{
{shop.price}}</p>
</div>
<div class="count">
<span class="sub" @click="reduce(shop)">-</span>
<span class="input"><input type="text" :value="shop.count"></span>
<span class="add" @click="add(shop)">+</span>
</div>
<div class="amount">￥{
{shop.count*shop.price}}</div>
<div class="delete">
<a href="#">删除</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="operate">
<div class="left">
<input type="checkbox" class="select-all-footer">
<a href="javascript:void(0);">删除</a>
</div>
<div class="right">
<div>已选择商品<span class="selected-count">{
{sumShop}}</span>件</div>
<div class="amount">合计（不含运费）： <span class="sum">￥{
{sumPrice}}</span></div>
<a href="javascript:void(0);" class="settle">结算</a>
</div>
</div>
</div>
</template>
<script src="./js/data.js"></script>
<script>
// 实现头部的动画
var titles = document.querySelectorAll('.title')
var line = document.querySelector('.line')
for (let i = 0; i < titles.length; i++) {
titles[i].addEventListener('mouseenter', function() {
for (var j = 0; j < titles.length; j++) {
titles[j].classList.remove('active')
}
this.classList.add('active')
line.style.left = i * line.offsetWidth + 'px'
})
}
</script>
</body>
</html>
Store information data about shopping carts, stores and products
var shopcarts = [
{
// 购物车编号
cartId: 1,
// 店铺编号
shopId: 2001,
// 店铺名称
shopName: "荣耀官方旗舰店",
products: [
{
// 商品编号
productId: 1001,
// 商品名称
productName: "【64GB限时优惠100元】华为旗下荣耀Play4T手机新品大电池AI摄影",
// 顶层图片
topImg: "img/4.jpg",
// 商品图片
imgs: [
"img/1.jpg",
"img/2.jpg",
"img/3.jpg",
"img/4.jpg",
],
// 是否参加电竞节
isActivity: true,
// 是否支持信用卡
isCard: true,
// 是否支持七天退货
isSeven: true,
// 是否如实描述
isRealDesc: true,
// 规格
spec: `<p>机身颜色：iPhone8 银色4.7英寸</p>
<p>版本类型：中国大陆</p>
<p>套餐类型：官方标配</p>
<p>存储容量：256GB</p>`,
marketPrice: 2000,
// 单价
price: 1199.00,
// 购买的数量
count: 2,
// 金额
amount: 2398.00
},
{
// 商品编号
productId: 1002,
// 商品名称
productName: "【6+64GB魅海蓝限时低至1199元】华为旗下荣耀手机荣耀9X麒麟",
// 顶层图片
topImg: "img/5.jpg",
// 商品图片
imgs: [
"img/1.jpg",
"img/2.jpg",
"img/3.jpg",
"img/4.jpg",
],
// 是否参加电竞节
isActivity: true,
// 是否支持信用卡
isCard: true,
// 是否支持七天退货
isSeven: true,
// 是否如实描述
isRealDesc: true,
// 规格
spec: `<p>机身颜色：iPhone8 银色4.7英寸</p>
<p>版本类型：中国大陆</p>
<p>套餐类型：官方标配</p>
<p>存储容量：256GB</p>`,
marketPrice: 2000,
// 单价
price: 1199.00,
// 购买的数量
count: 2,
// 金额
amount: 2398.00
}
]
},
{
// 购物车编号
cartId: 2,
// 店铺编号
shopId: 2002,
// 店铺名称
shopName: "罗蒙派大星专卖店",
products: [
{
// 商品编号
productId: 1003,
// 商品名称
productName: "罗蒙夏季休闲裤男薄款大码长裤宽松直筒男裤冰丝超薄西裤男士裤子",
// 顶层图片
topImg: "img/6.jpg",
// 商品图片
imgs: [
"img/1.jpg",
"img/2.jpg",
"img/3.jpg",
"img/4.jpg",
],
// 是否参加电竞节
isActivity: false,
// 是否支持信用卡
isCard: true,
// 是否支持七天退货
isSeven: true,
// 是否如实描述
isRealDesc: true,
// 规格
spec: "<p>颜色：宝蓝色【5023款】+宝蓝色【5023】</p><p>尺码：28[腰围2尺10]</p>",
marketPrice: 200,
// 单价
price: 168.00,
// 购买的数量
count: 2,
// 金额
amount: 336.00
}
]
},
{
// 购物车编号
cartId: 3,
// 店铺编号
shopId: 2003,
// 店铺名称
shopName: "雅鹿提趣专卖店",
products: [
{
// 商品编号
productId: 1004,
// 商品名称
productName: "雅鹿天丝休闲裤男士夏季薄款商务修身长裤子直筒西裤夏天冰丝男裤",
// 顶层图片
topImg: "img/7.jpg",
// 商品图片
imgs: [
"img/1.jpg",
"img/2.jpg",
"img/3.jpg",
"img/4.jpg",
],
// 是否参加电竞节
isActivity: false,
// 是否支持信用卡
isCard: true,
// 是否支持七天退货
isSeven: true,
// 是否如实描述
isRealDesc: true,
// 规格
spec: "<p>颜色：660卡其(单件)</p><p>尺码：29</p>",
marketPrice: 200,
// 单价
price: 118.00,
// 购买的数量
count: 1,
// 金额
amount: 118.00
}
]
}
]
1. add(shop)Number of items + 1
2. reduce(shop)Number of items - 1
3. sumShopTotal number of checked items
4. sumPriceCalculation of total price of checked items
const app = Vue.createApp({
template:'#root',
data(){
return {
shopcarts,
}
},
methods:{
//商品数量+1
add(shop){
shop.count++;
},
//商品数量-1
reduce(shop){
if(shop.count>0){
shop.count--;
}
},
},
computed:{
sumPrice:function(){
let total = 0;
for (var i = 0; i < this.shopcarts.length; i++) {
for (var j = 0; j < this.shopcarts[i].products.length; j++) {
var item = this.shopcarts[i].products[j];
// 判断 isSelect 的值，
if (item.isSelect == true) {
total += item.price * item.count;
}
}
}
return total != 0 ? total.toString().replace(/\B(?=(\d{3})+$)/g, ',') : 0;
},
sumShop:function(){
let shopTotal = 0;
for (var i = 0; i < this.shopcarts.length; i++) {
for (var j = 0; j < this.shopcarts[i].products.length; j++) {
var item = this.shopcarts[i].products[j];
// 判断 isSelect 的值，
if (item.isSelect == true) {
// count 商品数量相加 求总数
shopTotal += item.count;
}
}
}
return shopTotal;
}
}
})
app.mount('#app')