运行结果
- 商品数量的增加与删除
- 商品的全选以及单件商品的选择
- 价格与总价的同步
<template>
<div>
<!--头部区域-->
<header class="header">
<a href="index.html" class="icon-back"></a>
<h3>购物车</h3>
<a href="" class="icon-menu"></a>
</header>
<!--安全提示-->
<section class="jd-safe-tip">
<p class="tip-word">
您正在安全购物环境中，请放心购物
</p>
</section>
<!--中间内容-->
<main class="jd-shop-cart-list">
<section>
<div class="shop-cart-list-title">
<div class="left">
<span class="cart-title">HK自营</span>
</div>
<span class="right">您享受满100元免运费服务</span>
</div>
<div class="shop-cart-list-con" v-for="(shop,index) in shopListArr" :key="shop.shopId">
<div class="left">
<a
href="javascript:;"
class="cart-check-box"
:checked="shop.checked"
@click="selectedSingleShop(shop)"
></a>
</div>
<div class="center">
<img :src="shop.shopImage" :alt="shop.shopName">
</div>
<div class="right">
<a href="#">{{shop.shopName}}</a>
<div class="shop-price">
<div class="single-price">{{shop.shopPrice | moneyFormat}}</div>
<div class="total-price">总价：{{shop.shopPrice * shop.shopNumber | moneyFormat}}</div>
</div>
<div class="shop-deal">
<span @click="singleShopPrice(shop,false)">-</span>
<input disabled="false" type="number" v-model="shop.shopNumber">
<span @click="singleShopPrice(shop,true)">+</span>
</div>
<div class="shop-deal-right" @click="clickTrash(shop,$event)">
<span></span>
<span></span>
</div>
</div>
</div>
</section>
</main>
<!--面板-->
<div class="panel" ref="panel" style="display: none;">
<div ref="panelContent" class="panel-content">
<div class="panel-title">您确认删除这个商品吗?</div>
<div class="panel-footer">
<a
href="javascript:;"
class="cancel"
@click.prevent="hidePanel()"
>取消</a>
<a
href="javascript:;"
class="submit"
@click.prevent="delShop()"
>确定</a>
</div>
</div>
</div>
<!--底部通栏-->
<div id="tab_bar">
<div class="tab-bar-left">
<a
href="javascript:;"
class="cart-check-box"
:checked="isSelectedAll"
@click="selectedAll(isSelectedAll)"
></a>
<span style="font-size: 16px;">全选</span>
<div class="select-all">
合计：<span class="total-price">{{totalPrice | moneyFormat}}</span>
</div>
</div>
<div class="tab-bar-right">
<a href="index.html" class="pay">去结算</a>
</div>
</div>
</div>
</template>
<script>
import './../assets/css/base.css'
import './../assets/css/cart.css'
import axios from 'axios'
export default {
name: "Cart",
data(){
return {
// 购物车中商品数据
shopListArr : [],
// 总价
totalPrice:0,
// 用来标识是否全选
isSelectedAll:false,
// 垃圾盖子
up:'',
// 要删除商品
currentDelShop :{},
}
},
created(){
this.getProduct();
},
methods:{
// 1. 获取网络数据
getProduct(){
axios.get('http://demo.itlike.com/web/jdm/api/shoplist').then((response)=>{
console.log(response);
if(response.status===200){
this.shopListArr = response.data.result.shopList;
}
}).catch((error)=>{
alert('网络出现异常！');
})
},
// 2. 单个商品加减
singleShopPrice(shop,flag){
// flag = true 加
// flag = false 减
if(flag){
shop.shopNumber += 1;
}else{
if(shop.shopNumber <= 1){
shop.shopNumber = 1;
alert('只有一件商品了！');
return;
}
shop.shopNumber -= 1;
}
// 2.1 计算总价
this.getAllShopPrice()
},
// 3. 全选
selectedAll(flag){
// 3.1 属性控制
this.isSelectedAll = ! flag;
// 3.2 遍历购物车所有商品数据
this.shopListArr.forEach((value,index)=>{
if(typeof value.checked === 'undefined'){
// 当前对象没有该属性
this.$set(value,'checked',!flag);
}else{
value.checked = !flag;
}
});
// 3.3 计算总价
this.getAllShopPrice()
},
// 4. 单选和取消选中
selectedSingleShop(shop){
if(typeof shop.checked === 'undefined'){
this.$set(shop,'checked',true);
}else{
shop.checked = !shop.checked;
}
// 4.2 判断是否全选
this.hasSelectedAll();
// 4.3 计算总价
this.getAllShopPrice()
},
// 5. 是否要全选
hasSelectedAll(){
let flag = true;
this.shopListArr.forEach((value,index)=>{
if(!value.checked){
flag = false;
}
});
this.isSelectedAll = flag && this.shopListArr.length > 0;
},
// 6. 计算商品总价
getAllShopPrice(){
let tPrice = 0;
this.shopListArr.forEach((value,index)=>{
// 6.1 遍历所有商品
if(value.checked){
// 6.2 判断是否选中
tPrice += value.shopNumber * value.shopPrice;
}
});
// 6.3 更新总价格
this.totalPrice = tPrice;
},
// 7. 点击垃圾篓
clickTrash(shop,event){
// 7.1 获取父标签
let trashes = event.target.parentNode;
let up = trashes.firstElementChild;
// 7.2 加过渡
up.style.transition = 'all .2s ease';
up.style.webkitTransition = 'all .2s ease';
// 7.3 实现动画
up.style.transformOrigin = '0 0.5rem';
up.style.webkitTransformOrigin = '0 0.5rem';
up.style.transform = 'rotate(-45deg)';
up.style.webkitTransform = 'rotate(-45deg)';
// 7.4 显示面板
this.$refs.panel.style.display = 'block';
this.$refs.panelContent.className = 'panel-content jump';
// 7.5 赋值全局变量 方便实用
this.up = up;
// 7.6 记录当前点击商品，方便删除
this.currentDelShop = shop;
},
// 8. 点击取消
hidePanel(){
// 8.1 隐藏面板
this.$refs.panel.style.display = 'none';
this.$refs.panelContent.className = 'panel-content';
// 8.2 盖子闭合
this.up.style.transform = 'rotate(0deg)';
this.up.style.webkitTransform = 'rotate(0deg)';
},
// 9. 点击确定，删除当前商品
delShop(){
// 9.1 隐藏面板
this.$refs.panel.style.display = 'none';
this.$refs.panelContent.className = 'panel-content';
// 9.1.2 获取索引
let index = this.shopListArr.indexOf(this.currentDelShop);
this.shopListArr.splice(index,1);
// 9.2 计算总价
this.getAllShopPrice();
// 9.3 判断是否全选
this.hasSelectedAll();
}
},
filters:{
// 格式化金钱
moneyFormat(money){
return '￥' + Number(money).toFixed(2);
}
}
}
</script>
<style scoped>
</style>
