VUE2.0 饿了么学习笔记（9）购物车添加商品，是否起送状态的实现

1）首先是selectFoods数组汇总存储选中的商品，这里是假设的值，还没有实现，主要包括商品的单价和数量

 props: {
            selectFoods: { //保存一个被选择商品的数组,包括被选择商品的单价和数量
                type: Array,
                default() {
                    return [{
                      //  price: 10,
                       // count: 2
                    }];
                }
            },

2）购物车中商品总价的实现totalPrice(){},当总价大于0时，字体的颜色大小有变化，通过:class实现<div class="price" :class="{'highlight': totalCount > 0}">￥{{totalPrice}}元</div>

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.totalCount === 0) { //不要忘了加this
                    return `￥${this.minPrice}元起送`; 
                } else if (this.totalPrice < this.minPrice) {
                    let diff = this.minPrice - this.totalPrice;//忘了加this
                    return `还差￥${diff}元起送`;//不要忘了加$
                } else {
                    return '去结算';
                }
            },
            payClass() {
                if (this.totalPrice < this.minPrice) {
                    return 'not-enough';
                } else {
                    return 'enough';
                }
            },

}

3）购物车上方圆角商品个数的添加，直接引用food.count进行累加即可，totalCount(){},商品个数为0时不显示，大于0时显示个数和样式，添加样式highlight
  <div class="logo" :class="{'highlight': totalCount > 0}"> 圆角标(满足某种条件添加属性用:class)

  <div class="num" v-show="totalCount > 0">{{totalCount}}</div> 商品个数(满足条件添加字体使用v-show)

4）右下角三种情况：（）元起送，还差（）起送，去结算，payDesc(){return}实现
<div class="pay" :class="payClass">  {{payDesc}} </div>
可以结算的时候背景变颜色，属性变化用:class="payClass"，payClass返回'not-enough'或者'enough'，两者在css中有定义

的值，还没有实现，主要包括商品的单价和数量