關於加/減組件及價格計算
實現效果：
(一)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>