数量加减组件学习

关于加/减组件及价格计算
实现效果：

(一)cartControl.vue组件

初始状态只显示+，点击+号,food(类自父组件)set一个新属性count,同时显示数量，出现-号部分
<template>
<div class="cartControl">

<!--减号区 s--->
<transition name="fade">
    <div class="cart-decrease" v-show="food.count>0" @click.stop.prevent="decreaseCart($event)">
        <transition name="inner">
            <span class="inner iconfont icon-jian"></span>
        </transition>
    </div>
</transition>
<!--减号区 e--->
<!--商品数量区 s--->
<span class="cart-count" v-show="food.count>0">
    {{food.count}}
</span>
<!--商品数量区 e--->
<!--加号区 s--->
<span class="iconfont icon-jia cart-add" @click.stop.prevent="addCart($event)">
</span>
<!--加号区 e--->

</div>
</template>
JS部分：
<script>

export default{
    props:{
        food:{
            type:Object
        }
    },
    methods:{
       //点击加号执行的事件
       addCart(event){
            //去除引入better-scroll自带的事件点击
           if(!event._constructed){
               return;
           }
           //初始状态下，food.count是不存在的
           if(!this.food.count){
               //给food对象新增一个count属性，初始值为1
               Vue.set(this.food,'count',1);
           }
           else{
               //如果count的值存在
               //点击加号的时候，每次count值加1
               this.food.count++;
           }
       },
       decreaseCart(event){
           //去除引入better-scroll自带的点击事件
           if(!event._constructed){
               return;
           }
           //点击减号时候，food.count每次减一
           this.food.count--;
       }
      
    
    }
}

</script>
(二)shopCart.vue组件

价格及菜品显示部分
<template>

<div>
    <div class="shopCart">
        <!--点击黑色区域出现详情列表 s--->
        <div class="content" @click="toggleList($event)">
            <!--left s--->
             <div class="content-left">
                  <!--购物车图标 s--->
                  <div class="logo-wrapper">
                      <!--totalCount>0(有添加菜品) logo添加hightlight
                      即选中的状态为蓝色背景--->
                      <div class="logo" :class="{'highlight':totalCount>0}">
                          <i class="iconfont icon-gouwuche" :class="{'highlight':totalCount>0}"></i>
                      </div>
                      <!--已选择的商品数量 s--->
                      <div class="num" v-show="totalCount>0">
                         {{totalCount}} 
                      </div>
                      <!--已选择的商品数量 e--->
                  </div>
                  <!--购物车图标 e--->
                  <!-- 价格 s -->
                  <div class="price" :class="{'highlight':totalPrice>0}">
                      ￥{{totalPrice}}
                  </div>
                  <!-- 价格 e -->
                  <!-- 配送费 s -->
                  <div class="desc">
                      另需配送费￥{{deliveryPrice}}
                  </div>
                  <!-- 配送费 e -->
             </div>    
            <!--left e--->
            <!--右侧显示起送价 s--->
            <div class="content-right">
                <div class="pay" :class="payClass" @click.stop.prevent="pay">
                    {{payDesc}}
                </div>
            </div> 
            <!--右侧显示起送价 e--->
        </div>
        <!--点击黑色区域出现详情列表 e--->
        <!--菜品列表 s--->
        <transition name="fade">
            <div class="shopcart-list" v-show="listShow">
                <!--header s--->
                <div class="list-header">
                    <h1 class="title">购物车</h1>
                    <span class="empty" @click="empty">清空</span>
                </div>
                <!--header e--->
                <!--列表 s--->
                <div class="list-content" ref="listContent">
                    <ul>
                        <li class="shopcart-food" v-for="food in selectFoods">
                            <span class="name">{{food.name}}</span>
                            <div class="price">
                                <span>￥{{food.price * food.count}}</span>
                            </div>
                            <div class="cartControl-wrapper">
                                <!---引入cartControl.vue组件--->
                                <cartControl :food="food"></cartControl>
                            </div>
                        </li>
                    </ul>
                </div>
                <!--列表 e-->
            </div>
        </transition>
        <!--菜品列表 e--->
    </div>
</div>
**JS部分：**

goods父组件中：

goods.vue中的seller来自于home组件

<script>
    import BScroll from "better-scroll";
    import cartControl from "../component/cartControl.vue";
    export default{
        components:{
            cartControl
        },
        props:{
            //接收来自父组件的selectFoods
            selectFoods:{
                type:Array,
                //设置default,保证你需要用到该属性的时候不会undefined
                default(){
                    return [
                        {
                            price:20,
                            count:2
                        }
                    ];
                
                }
            },
            //接收来自父组件的配送费
            deliveryPrice:{
                type:Number,
                default:0
            },
            //接收来自父组件的minPrice
            minPrice:{
                type:Number,
                default:0
            }
            
        },
        data(){
            return {
                fold:true
            }
        },
        computed:{
            //totalCount，选中的菜品总数
            totalCount(){
                let count=0;
                //选中的食物selectFoods来自于父组件
                this.selectFoods.forEach(food=>{
                    count+=food.count;
                })
                return count;
            
            },
            //总价格
            totalPrice(){
                let total=0;
                this.selectFoods.forEach(food=>{
                    total+=food.price * food.count
                });
                return total;
            },
            //payClass定义
            payClass(){
                //若总价小于最小价格要返回的class
                if(this.totalPrice<this.minPrice){
                    return "not-enough"
                }
                else{
                    return "enough"
                }
            },
            //起送描述
            payDesc(){
                if(this.totalPrice===0){
                    return `￥${this.minPrice}元起送`
                }
                else if(this.totalPrice<this.minPrice){
                    return `还差￥${diff}元起送`;
                }
                else{
                
                    return "去结算"
                }
            
            },
            //控制菜品列表的显示
            listShow(){
                //是否显示由fold决定，fold的值由toggleList决定
                if(!this.totalCount){
                    //fold为true，列表不显示，是折叠的状态
                    this.fold=true;
                    return false;
                }
                let show=!this.fold;
                if(show){
                    this.$nextTick(()=>{
                        //列表展示的情况下为其初始化为可滑动
                        if(!this.scroll){
                            this.scroll=new BScroll(this.$refs.listContent,{
                                click:true
                            });
                        }
                        else{
                            this.scroll.refresh();
                        
                        }
                    
                    });
                    
                }
                return show;
            
            }
        
        
        },
        methods:{
            //点击去结算执行的方法
            pay(){
                if(this.totalPrice<this.minPrice){
                    return;
                }
                window.alert("支付"+this.totalPrice+"元")
            
            },
            //列表切换：
            toggleList(){
                if(!this.totalCount){
                    return;
                }
                this.fold=!this.fold;
            },
            empty(){
                this.selectFoods.forEach(food=>{
                    food.count=0;
                })
            }
        
        
        }
    }
</script>

</template>