购物车组件

购物车组件

• goods.vue:要传两个参数
  配送费:derlivery-price
  起送费 :min-price
  
• app.vue中的router-view要传递参数给子元素
  
• shopcart.vue接受参数

当选中商品时左侧购物车图标和总和以及右侧都会发生变化
所有的状态变化都依赖于selectFoods

   

//只有选中商品才会显示右上角的总数

   
//class也可以计算
       {{ payDesc }}
   

{{ totalCount }}
另需配送费￥{{deliveryPrice }} 
props: {
   selectFoods:{
     type: Array,
     default() {
       return []
     }
   },
   deliveryPrice:{
     type: Number,
     default: 0
 },
   minPrice: {
     type: Number,
     default: 0
 }
},
computed: {
 totalPrice() {//总价=单价*数量
   let total = 0;
   this.selectFoods.forEach((food) => {
     total += food.price * food.count;
   })
   return total
 },
 totalCount() {//总数量
   let count = 0
   this.selectFoods.forEach((food) => {
     count += food.count;
   })
   return count
 },
 payDesc() {//右侧的描述和总价是有关的
   if(this.totalPrice === 0){
     return  `￥${this.minPrice}起送`
   }else if(this.totalPrice < this.minPrice){
     let diff = this.minPrice - this.total Price
     reurn `还差￥${diff}`
   }else {
     return '去结算'
   }
 },
payClass() {
 if(this.totalPrice < this.minPrice){
   reutn 'not-enough'
 }else{
   return 'enough
 }
}
}
--------css------------------------------------------------------------------
.logo
   width: 100%
   height: 100%
   border-radius:50%
   text-align: center
   background: #2b343c
   &.highlight
       background: rgb(0,160,220)
       .icon-shopping_cart
           line-height: 44px
           font-size: 24px
           color: #80858a
           &.highlight
               color: #fff
 .price
   &.hightlight
     color: #fff

.pay
 &.not-enough
   background: #2b333b
 &.enough
   background: #00b43c
   color: #fff

• 购物车是对选择商品的映射

加减按钮组件cartcontrol.vue

在goods.vue中引入
因为按钮很多地方都需要，所以做成组件

• 把div设置成inline-block,要去掉间隙就给父元素的font-size设置为0

        

            {{ food.count }}
        
        

            
        

• 给加减按钮添加动画效果
  平移
  滚动
  透明度
  在vue中通过transition

  

    
  


.cart-decrease
            display: inline-block
            padding: 6px            
            .inner
                display:inline-block
                line-height: 24px
                font-size: 24px
                color: rgb(0,160,220)
                transition: all 0.4s linear
            &.v-enter-active,&.v-leave-active
                transition:all 0.4s linear
            &.v-enter,&.v-leave-active
                opacity: 0
                transform:translateX(24px)
                .inner1
                    transform: rotate(180deg)

goods.vue 传参给shopcart

           selectFoods() {
                let foods = [];
                this.goods.forEach((good) => {
                    good.foods.forEach((food) => {
                        if(food.count) {//如果food有count属性说明被选中
                            foods.push(food);
                        }
                    })
                });
                return foods;
            }

购物车小球飞入动画

• 小球需要两个层，控制两个方向
• 相对于视口做动画，所以小球用fixed布局
• 要动态计算起始点的位置，获取加号相对于屏幕的位置
  添加商品的时候派发一个事件