在shopcart中添加<shopcart-list></shopcart-list>实现样式
<transition name="fade">
<div class="shopcart-list" v-show="listShow">
<div class="list-header">
<h1 class="title">购物车</h1>
<span class="empty" @click="empty">清空</span>
</div>
<div class="list-content" ref="listContent">
<ul>
<li class="food" v-for="food in selectFoods" :key="food.id">
<span class="name">{{food.name}}</span>
<div class="price">
<span>￥{{food.price * food.count}}</span>
</div>
<div class="cartcontrol-wrapper">
<!-- 记得将cartcontrol组件import到shopcart中，并注册components-->
<cartcontrol :food = "food"></cartcontrol>
</div>
</li>
</ul>
</div>
</div>
</transition>1）cartcontrol组件引用 import 引入，在components中注册，就可以使用<cartcontrol></cartcontrol>,在shopcart-list中设置了v-show="listShow"，v-show默认display：none，所以此时看不到购物车列表的变化，可以在点击cartcontrol组件的加减号时观察动态HTML的变化以确认是否实现li列表的呈现
2） <div class="shopcart-list" v-show="listShow">，计算属性listShow，取决于totalCount或者是totalPrice是否大于0
定义变量fold:true来确定详情列表是展开还是折叠的状态，默认为折叠状态
listShow() {
if (!this.totalCount) {
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;
}3）点击cartcontrol（页面下方购物车）就可以来回切换详情表的展开和折叠 <div class="content" @click="toggleList"> <!-- 详情界面-->
toggleList() {
if (!this.totalCount) { //购物车没有商品的时候不可点击
return;
}
this.fold = !this.fold; //当前是收起状态就展开，展开状态就收起
},@toggleList定义在购物车组件中，点击购物车，通过改变fold的true和false状态，控制购物车详情界面的展开或者折叠；listShow将fold的状态传回给shoplist的v-show，通过v-show来决定购物车详情的展开或折叠，同时listShow还设置没有商品时是不可展开的（ this.fold = true）。
4) 编写购物车详情列表的样式，以便查看效果
.shopcart-list
position absolute
top 0
left 0
z-index -1
width 100%
transform translate3d(0, -100%, 0) //整个列表相对于当前自身的高度做一个偏移
&.fade-enter-active, &.fade-leave-active
transition: all 0.5s linear
transform translate3d(0, -100%, 0) //每个表项相对于当前自身的高度做一个偏移
&.fade-enter, &.fade-leave-active
transform translate3d(0, 0, 0)
.list-header
height 40px
line-height 40px
padding 0 18px
background #f3f5f7
border-bottom 1px solid rgba(7, 17, 27, 0.1)
.title
float left
font-size 14px
color rgb(7,17,27)
.empty
float right
font-size 12px
color rgb(0,160,220)
.list-content
padding 0 18px
max-height 217px
overflow hidden
background #ffffff
.food
position relative
padding 12px 0
box-sizing border-box
border-1px(rgba(7,17,27,0.1))
.name
line-height 24px
font-size 14px
color rgb(7,17,27)
.price
position absolute
right 90px
bottom 12px
line-height 24px
font-size 14px
font-weight 700
color rgb(240, 20, 20)
.cartcontrol-wrapper
position absolute
right 0
bottom 6px5）样式写好了，但是cartcontrol的加减号还是不能点击的，且列表是不能滚动的。在cartControl中的addCart()方法中，结合BScroll，我们是通过BScroll派发事件，才可以点击。import引入BScroll，在listShow（）中对BScroll进行初始化，只有列表有表项的时候才会有滚动，取到列表DOM，listContent
if (show) {
this.$nextTick(() => {
if (!this.scroll) {
this.scroll = new BScroll(this.$refs.listContent, {
click: true
});
} else {
this.scroll.refresh();
}
});
}6）添加清空的方法
hideList() {
this.fold = true; //点击mark层，购物车详情列表被收回
},7）添加半透明背景，点击背景购物车详情列表消失，并设置渐变效果transition
<transition name="fade">
<!-- listShow表示当list详情列表显示的时候mask才显示 -->
<div class="list-mask" v-show="listShow" @click="hideList()"></div>
</transition>CSS
.list-mask
position fixed
top 0
left 0
width 100%
height 100%
z-index 40 //z-index要小于shopcart的index
backdrop-filter blur(10px)
-webkit-backdrop-filter blur(10px)
opacity 1
background rgba(7, 17, 27, 0.6)
&.fade-enter-active, &.fade-leave-active
opacity 1
transition: all 0.5s //设置缓动效果
background rgba(7, 17, 27, 0.6)
&.fade-enter, &.fade-leave-active
opacity 0
background rgba(7, 17, 27, 0)8）点击去结算输出价格
pay() { //点击去结算
if (this.totalPrice < this.minPrice) {
return;
}
window.alert(`支付￥${this.totalPrice}元`);
//window.alert('支付' + this.totalPrice + '元');
}
