上次我们为商品分类菜单添加了显示购物数量，这篇我们继续推进项目，来实现购物车的详情页面，在开始之前我们先看它在页面中的样子：
如上所示，此页面包含了购物列表，而它由商品名称，单价，增减商品功能构成，增减商品功能我们在商品列表中实现过，那么我们现在可以进行复用。
搭出购物车结构
我们将购物车底部构建出来，
<templete>
<div :class="{'highligh':totalCount>0}">
<div>
</div>
</div>
</templete>
老情况，在templete模板下的shopcart-wrapper内完成底部购物车一栏：
1 count大于0.让它打开
<!-- 左=>内容包含购物车icon 金额 配送费 -->
<div>
<div :class="{'highligh':totalCount>0}" @click="toggleList">
<span :class="{'highligh':totalCount>0}"></span>
<i v-show="totalCount">{{totalCount}}</i>
</div>
<div>
<p v-show="totalPrice">￥{{totalPrice}}</p>
<p :class="{'highligh':totalCount>0}">另需{{poiInfo.shipping_fee_tip}}</p>
</div>
</div>
<!-- 去结算 -->
<div :class="{'highligh':totalCount>0}">
{{payStr}}
</div>
搭建所选商品列表
如图所示，我们分好结构，紧接着搭建所选商品的列表
所选商品的列表 shopcart-list默认隐藏的，也就是说我们在没有选择食品的时候，点击购物车它不会展开。
1.list-hearder，左右结构包括1号口袋与清空购物车
2.list-content 列表，存放我们选择的食物
2.1左边是我们的食物名字，商品描述；右侧是数量，加减商品的组件。
<div v-show="listShow" :class="{'show':listShow}"> <!--列表顶部满减信息--> <div v-if="poiInfo.discounts2"> {{poiInfo.discounts2[0].info}} </div> <!--1号口袋 清空功能--> <div> <h3>1号口袋</h3> <div @click="emptyFn"> <img src="https://www.jb51.net/article/ash_bin.png" /> <span>清空购物车</span> </div> </div> <!--所选商品列表--> <div ref='listContent'> <ul> <li v-for="food in selectFoods"> <div> <!--左侧--> <div> <!--所选商品名字--> <p>{{food.name}}</p> <!--所选商品描述 unit 例 des 霆锋苦辣鸡腿堡1个--> <p v-show="!food.description">{{food.unit}}</p> <p v-show="food.description">{{food.description}}</p> </div> <!--商品单价--> <div> <span>￥{{food.min_price}}</span> </div> </div> <!--复用商品增减组件 Cartcontrol--> <div> <Cartcontrol :food='food'></Cartcontrol> </div> </li> </ul> </div> <div></div> </div>
加入遮罩层
<!-- 遮罩层 -->
<div v-show="listShow" @click="hideMask()"></div>
到这里，结构咱们就搭好了。
注册组件，添加功能
我们通过props为购物车组件传入所需要的数据；
计算属性：
通过totalCount计算所选的商品数量；
通过totalPrice计算所选商品的总价；
通过payStr控制去结算；
listShow是我们控制购物车详情页展示的要点，依据totalCount所选商品数量对fold折叠进行控制，fold为true，商品数量为0.购物车详情页为折叠状态。
接着我们将状态取反赋值到show，并且依据show，来控制商品详情页面商品一定多时，可以进行鼠标滚动。
方法:
通过toggleList点击购物车logo时候，进行判断，如果没有选择商品那么我们什么也不做。如果我们选择了商品，那么将fold取反。因为我们在计算属性listShow中设置过实例中的fold属性为true，所有它是折叠的。在我们取反后，它就会展开。
emptyFn清空购物车
最后我们点击遮罩层的时候，让遮罩层隐藏，也就是fold为true。
<script> // 导入BScroll import BScroll from 'better-scroll' // 导入Cartcontrol import Cartcontrol from 'components/Cartcontrol/Cartcontrol' export default { data() { return { fold: true } }, props: { poiInfo: { type: Object, default: {} }, selectFoods: { type: Array, default() { return [ // { // min_price: 10, // count: 3 // }, // { // min_price: 7, // count: 1 // } ]; } } }, computed: { // 总个数 totalCount() { let num = 0; this.selectFoods.forEach((food) => { num += food.count; }); return num; }, // 总金额 totalPrice() { let total = 0; this.selectFoods.forEach((food) => { total += food.min_price * food.count; }); return total; }, payStr() { if(this.totalCount > 0) { return "去结算"; } else { return this.poiInfo.min_price_tip; } }, listShow() { if(!this.totalCount) { // 个数为0 this.fold = true; return false; } let show = !this.fold; // BScoll相关 if(show) { this.$nextTick(() => { if(!this.shopScroll) { this.shopScroll = new BScroll(this.$refs.listContent, { click: true }); } else { this.shopScroll.refresh(); } }); } return show; } }, methods: { toggleList() { if(!this.totalCount) { // 个数为0 return; } this.fold = !this.fold; }, emptyFn() { this.selectFoods.forEach((food) => { food.count = 0; }); }, hideMask() { this.fold = true; } }, components: { Cartcontrol, BScroll } } </script>
样式