Vue3实现饿了么商品列表详情购物车评论（三）

前言

饿了么系列：

1. Vue3实现饿了么短信验证和高德定位（一）
2. Vue3实现饿了么商家筛选排序（二）
3. Vue3实现饿了么商品列表详情购物车评论（三）

效果展示

①高度还原商家页面(以汉堡王为例)

商家详情

优惠信息

②购物车

1. 购物车为空时和添加商品之后的样式变化
2. 已选商品展示并计算金额

③商品与分类列表的联动

④用户评价

具体实现

• 封装商品的加购组件
  这个+号组件多处有用到，封装成一个组件便于使用。

//遍历每一个商品，添加一个count变量存储商品加购的数量
this.$axios("/api/profile/batch_shop")
    .then(res => {
   
        res.data.recommend.forEach(recommend => {
   
            recommend.items.forEach(item => {
   
                item.count = 0;
        	})
     	})
    })

//为加减号绑定事件
decreaseCount(){
    this.food.count--; },
increaseCount(){
    this.food.count++; }

//减号在count大于0时才显示
<span @click="decreaseCount" class="cartbutton button-minus" v-if="food.count > 0">

• 购物车

计算商品总额

//遍历商品
this.shopInfo.recommend