Vue实现购物车详情页面的方法实现购物车详情页面的方法
主要介绍了Vue实战之购物车详情页面的实现,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴
价值,需要的朋友可以参考下
上次我们为商品分类菜单添加了显示购物数量,这篇我们继续推进项目,来实现购物车的详情页面,在开始之前我们先看它在
页面中的样子:
如上所示,此页面包含了购物列表,而它由商品名称,单价,增减商品功能构成,增减商品功能我们在商品列表中实现过,那
么我们现在可以进行复用。
搭出购物车结构搭出购物车结构
我们将购物车底部构建出来,
<templete>
<div class="shopcart" :class="{'highligh':totalCount>0}">
<div class="shopcart-wrapper">
</div>
</div>
</templete>
老情况,在templete模板下的shopcart-wrapper内完成底部购物车一栏:
1 count大于大于0.让它打开让它打开
<!-- 左=>内容包含购物车icon 金额 配送费 -->
<div class="content-left">
<div class="logo-wrapper" :class="{'highligh':totalCount>0}" @click="toggleList">
<span class="icon-shopping_cart logo" :class="{'highligh':totalCount>0}"></span>
<i class="num" v-show="totalCount">{{totalCount}}</i>
</div>
<div class="desc-wrapper">
<p class="total-price" v-show="totalPrice">¥{{totalPrice}}</p>
<p class="tip" :class="{'highligh':totalCount>0}">另需{{poiInfo.shipping_fee_tip}}</p>
</div>
</div>
<!-- 去结算 -->
<div class="content-right" :class="{'highligh':totalCount>0}">
{{payStr}}
</div>
搭建所选商品列表
如图所示,我们分好结构,紧接着搭建所选商品的列表
所选商品的列表 shopcart-list默认隐藏的,也就是说我们在没有选择食品的时候,点击购物车它不会展开。
1.list-hearder,左右结构包括1号口袋与清空购物车
2.list-content 列表,存放我们选择的食物
2.1左边是我们的食物名字,商品描述;右侧是数量,加减商品的组件。
<div class="shopcart-list" v-show="listShow" :class="{'show':listShow}">
<!--列表顶部满减信息-->
<div class="list-top" v-if="poiInfo.discounts2">
{{poiInfo.discounts2[0].info}}
</div>
<!--1号口袋 清空功能-->
<div class="list-header">
<h3 class="title">1号口袋</h3>
<div class="empty" @click="emptyFn">
<img src="./ash_bin.png" />
<span>清空购物车</span>
</div>
</div>
评论0