1)首先是selectFoods数组汇总存储选中的商品,这里是假设的值,还没有实现,主要包括商品的单价和数量
<div class="logo" :class="{'highlight': totalCount > 0}"> 圆角标(满足某种条件添加属性用:class)
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中有定义
的值,还没有实现,主要包括商品的单价和数量