佳宸学习和分享笔记的地方

0%

vue.js商城项目(八)购物车

vue.js商城项目(八)购物车

得到购物车数据方法编写

先要取得localStorage里的数据,我们先在data里注册两个属性cartInfo(购物车中商品的信息)和isEmpty(购物是否为空的标识,方便页面呈现),然后再编写具体的getCartInfo()方法

1
2
3
4
5
6
7
8
9
10
11
//得到购物车的商品
getCartInfo() {
//判断localStorage里是否有购物车数据
if (localStorage.cartInfo) {
//如果有数据,我们去除并赋值给cartInfo
this.cartInfo = JSON.parse(localStorage.cartInfo)
}
//打印到控制台查看效果
//console.log(' this.cartInfo:' + JSON.stringify(this.cartInfo))
this.isEmpty = this.cartInfo.length > 0 ? false : true
},

加入购物车的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
addGoodsToCart() {
//取出购物车内的商品数据
let cartInfo = localStorage.cartInfo ? JSON.parse(localStorage.cartInfo) : []
//判断购物车内是否已经有这个商品
//如果没有返回undeifnd,如果有返回第一个查找到的数据
let isHaveGoods = cartInfo.find(cart => cart.goodsId == this.goodsId)
console.log(isHaveGoods)
if (!isHaveGoods) {
//没有商品直接添加到数组中
//重新组成添加到购物车的信息
let newGoodsInfo = {
goodsId: this.goodsInfo.ID,
Name: this.goodsInfo.NAME,
price: this.goodsInfo.PRESENT_PRICE,
image: this.goodsInfo.IMAGE1,
count: 1
}
cartInfo.push(newGoodsInfo) //添加到购物车
localStorage.cartInfo = JSON.stringify(cartInfo) //操作本地数据
Toast.success('添加成功')

} else {
Toast.success('已有此商品')
}
this.$router.push({ name: 'Cart' }) //进行跳转
},

计算总价

1
2
3
4
5
6
7
8
9
10
computed: {
totalMoney() {
let allMoney = 0
this.cartInfo.forEach((item, index) => {
allMoney += item.price * item.count
})
localStorage.cartInfo = JSON.stringify(this.cartInfo)
return allMoney
}
},

修改购物车计数器事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<van-checkbox
class="card-goods__item"
v-for="(item,index) in cartInfo"
:key="index"
:name="item.goodsId"
>
<van-card
:title="item.Name"
:num="item.count"
:price="item.price"
:thumb="item.image"
@click.stop
>
<van-stepper
slot="footer"
v-model="item.count"

/>
</van-card>

</van-checkbox>
</van-checkbox-group>

1571473946368

点击stepper时会触发checkbox的事件,用@click.stop阻止card内部事件冒泡

计算总价

1
2
3
4
5
totalMoney() {
return this.cartInfo.reduce((total, item) => {
return total + (this.checkedGoods.indexOf(item.goodsId) !== -1 ? item.price*item.count : 0)
}, 0)*100
},

可以用一行代码写出来,为了清晰写了两行,使用reduce函数增加总价,判断打勾的商品,如果存在就用价格乘以数量,如果不存在加0.

1571568902600

1
2
3
4
5
6
7
<van-checkbox
class="card-goods__item"
v-for="(item,index) in cartInfo"
:key="index"
:name="item.goodsId"
v-model="checked"
>

在vant组件中,:name属性中的值会存入data() checkedGoods: [], //是否选中的物品