同步徽标
- 将购物车的数据用一个数据存储起来，在car数组中，存储一些商品的对象 ，id：商品的id，count：要购买的数量，price：商品的单价，selected：false商品在 购物车中是否被选中
state:{
car:[]
},
- 拼接出一个要保存到store中car数组里的商品对象信息（直接在加入购物车按钮绑定的方法中定义）
addToShopCar(){
this.ballFlag=!this.ballFlag
var goodsinfo={
id:this.id,
count:this.selectedCount,
price:this.goodsinfo.price,
selected:true
}
},
- 点击加入购物车，把商品的信息保存到store的car上，如果购物车中有这个对应的商品了就只需要更新数量，如果没有，则直接把商品数据push到car中
mutations:{
addToCar(state,goodsinfo){
var flag=false
state.car.some(item=>{
if(item.id==goodsinfo.id){
item.count+=parseInt(goodsinfo.count)
flag=true
return true
}
})
if(!flag){
state.car.push(goodsinfo)
}
}
},
- 调用store中的mutations来讲商品加入购物车
this.$store.commit("addToCar",goodsinfo)
- 实现徽标的自动更新，在getter中使用方法让所有商品数量相加，并把它同步到页面中
getter:{
getAllCount(state){
var c=0
state.car.forEach(item=>{
c+=item.count
})
return c
}
}
<span class="mui-badge" id="badge">{{$store.getters.getAllCount}}</span>
- 实现购物车的本地持久存储，当更新car后，把car数组存储到本地的localStorage中，在加入购物车方法中添加
localStorage.setItem('car',JSON.stringify(state.car))
- 从本地取出之前存储的car数据，在main.js中操作
localStorage.getItem('car')||'[]'
绘制购物车页面的商品列表
-
使用mui中的card样式先简略制作 商品卡片和结算价格两部分
使用mint-ui中的switch组件设置一个勾选按钮，用于勾选是否结算价格再设置一个数字选择框用于购物车界面
<div class="goods-list">
<div class="mui-card">
<div class="mui-card-content">
<div class="mui-card-content-inner">
<mt-switch v-model="value"></mt-switch>
<img src="../../images/小米.jpg" height="728" width="446"/></div>
<div class="info">
<h1></h1>
<p>
<span class="price">$2199</span>
<numbox></numbox>
<a href="#">删除</a>
</p>
</div>
</div>
</div>
</div>
<style scoped>
.shopcar-container{
background-color: #eee;
overflow: hidden;
}
.goods-list img{
width: 60px;
height: 60px;
}
h1{
font-size: 13px;
}
.price{
color: red;
font-weight: bold;
}
.mui-card-content-inner{
display: flex;
align-items: center;
}
.info{
display: flex;
flex-direction: column;
justify-content: space-between;
}
</style>
