vue手机商城项目实战（10）-购物车组件实现

1、在购物车中没有商品时，显示购物车为空图片，图片下载：

2、解压后上传至assets\img目录下

修改Shopcar.vue如下：

<template>
<div id="shopcar">
<!-- 顶部导航栏 -->
<mt-header title="购物车">
<mt-button slot="left" icon="back" @click="goback">返回</mt-button>
</mt-header>
<div class="main">
<p class="remind" v-if="shopCart.length===0">
<img :src="emptycart" />
</p>
<ul class="goods-list" v-if="shopCart.length>0">
<li v-for="(item,index) in shopCart" :key="item.id">
<span @click.stop="changeSelected(index)" class="choose-icon">
<icon :name="item.selected?'check-circle':'circle'" scale="1.4"></icon>
</span>
<img :src="item.img[0]" />
<div class="name">{{item.name}}</div>
<div class="price">
<div class="single">单价:¥{{item.price}}</div>
<div class="all">合计:¥{{item.price*item.num}}</div>
</div>
<div class="add">
<span @click.stop="changeCartNum(index,-1)">
<icon name="minus" scale=".8"></icon>
</span>
<span class="num">{{item.num}}</span>
<span @click.stop="changeCartNum(index,1)">
<icon name="plus" scale=".8"></icon>
</span>
</div>
<div class="remove" @click.stop="removeFromCart(index)">删除</div>
</li>
</ul>
</div>
<div class="total">
<span class="choose-icon" @click.stop="changeSelectedAll">
<icon :name="isSelectedAll&&shopCart.length>0?'check-circle':'circle'" scale="1.4"></icon>
</span>
<div class="content">
合计
<span class="price">¥ {{totalPrice}}</span>
//暂时不实现
<span class="order" @click.stop="buy">结算</span>
</div>
</div>
</div>
</template>
<script>
import { MessageBox } from 'mint-ui';
export default {
data(){
return {
emptycart:require("@/assets/img/emptycart.jpg")
}
},
methods:{
// 返回
goback(){
this.$router.go(-1);
},
// 提交改变选中状态
changeSelected(index){
this.$store.commit("changeSelected",index);
},
// 提交删除商品
removeFromCart(index){
// 提示
MessageBox.confirm('确定删除该商品吗?').then(action => {
this.$store.commit("removeFromCart",index);
});
},
// 提交改变数量
changeCartNum(index,changeNum){
if(this.shopCart[index].num == 1 && changeNum == -1){
// 如果数量为1且减少数量，则删除
this.removeFromCart(index);
}else{
// 修改
this.$store.commit("changeCartNum",{index,changeNum});
}
},
// 提交改变全选状态
changeSelectedAll(){
this.$store.commit("changeSelectedAll");
}
},
computed:{
// 获取购物车
shopCart(){
return this.$store.state.shopCart;
},
// 获取是否全选
isSelectedAll(){
return this.$store.getters.isSelectAll;
},
// 获取选中商品总价
totalPrice(){
return this.$store.getters.totalPrice;
}
}
}
</script>
<style scoped>
#shopcar {
position: fixed;
top: 0;
bottom: 0;
width:100%;
z-index: 3;
background-color:#fff;
}
.main {
position: fixed;
width: 100%;
overflow-y: auto;
}
.remind img {
display: block;
width: 100%;
}
.goods-list li {
position: relative;
display: flex;
align-items: center;
width: 100%;
border-bottom: 1px solid #ddd;
margin-top:2px;
}
.goods-list li .choose-icon {
padding: 0 6px;
color: #1296db;
}
.goods-list li img {
margin: 4px 10px;
width: 40px;
height: 41px;
border-radius: 50%;
}
.goods-list li .name {
width: 80px;
font-size: 15px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.goods-list li .price {
font-size: 10px;
margin-left: 10px;
color: #e8380d;
}
.single {
margin-top: 8px;
line-height: 20px;
}
.all {
line-height: 20px;
}
.add {
position: absolute;
top: 50%;
right: 60px;
transform: translateY(-50%);
}
.add span {
float: left;
}
.add span .fa-icon {
padding: 2px;
color: #fff;
background-color: #1296db;
border-radius: 50%;
}
.add span.none .fa-icon {
background-color: #eee;
}
.add span.num {
margin: 0 6px;
line-height: 20px;
font-size: 14px;
}
.remove {
position: absolute;
top: 0;
bottom: -1px;
right: 0;
width: 50px;
line-height: 50px;
text-align: center;
color: #fff;
background-color: #e8380d;
}
.total {
position: fixed;
bottom: 0;
display: flex;
align-items: center;
width: 100%;
height: 40px;
border-top: 1px solid #ddd;
}
.total .choose-icon {
padding: 0 6px;
color: #1296db;
}
.total .content {
margin-left: 10px;
width: 100%;
line-height: 40px;
}
.total .content .price {
margin-left: 10px;
font-size: 14px;
color: #e8380d;
}
.total .content .order {
float: right;
width: 50%;
font-size: 14px;
text-align: center;
color: #fff;
background-color: #e8380d;
}
</style>

修改store\index.js：
1、在mutations中新增以下方法：

// 改变商品选中状态
changeSelected(state,index){
state.shopCart[index].selected = !state.shopCart[index].selected;
},
// 删除商品
removeFromCart(state,index){
state.shopCart.splice(index,1);
},
// 改变购物车商品数量
changeCartNum(state,playload){
var index = playload.index;
var changeNum = playload.changeNum;
state.shopCart[index].num += changeNum;
},
// 全选或全不选
changeSelectedAll(state){
// 获取是否为全选状态
var flag = this.getters.isSelectAll;
// 如果全选,则全不选,没全选则全选
for(var i=0;i<state.shopCart.length;i++){
state.shopCart[i].selected = !flag ;
}
}

2、新增getters属性如下：

getters:{
// 是否全选
isSelectAll(state){
for(var i=0;i<state.shopCart.length;i++){
if(!state.shopCart[i].selected){
return false;
}
}
return true;
},
// 选中商品总价
totalPrice(state){
var sum = 0;
for(var i=0;i<state.shopCart.length;i++){
if(state.shopCart[i].selected){
sum += state.shopCart[i].price * state.shopCart[i].num;
}
}
return sum;
}
}

喜欢 (16)赏

【请潘老师喝杯Coffee吧！】

分享 (0)