Vue实现购物车详情页面的方法_vue实现购物车系统 - CSDN文库

购物车详情页面

购物车页面

906 浏览量更新于2023-05-26 评论收藏 72KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

Vue实现购物车详情页面的方法实现购物车详情页面的方法

主要介绍了Vue实战之购物车详情页面的实现,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴

价值，需要的朋友可以参考下

上次我们为商品分类菜单添加了显示购物数量，这篇我们继续推进项目，来实现购物车的详情页面，在开始之前我们先看它在

页面中的样子：

如上所示，此页面包含了购物列表，而它由商品名称，单价，增减商品功能构成，增减商品功能我们在商品列表中实现过，那

么我们现在可以进行复用。

搭出购物车结构搭出购物车结构

我们将购物车底部构建出来，

<templete>

<div class="shopcart" :class="{'highligh':totalCount>0}">

<div class="shopcart-wrapper">

</div>

</div>

</templete>

老情况，在templete模板下的shopcart-wrapper内完成底部购物车一栏：

1 count大于大于0.让它打开让它打开

<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>

<div class="list-header">

<h3 class="title">1号口袋</h3>

<div class="empty" @click="emptyFn">

<img src="./ash_bin.png" />

<span>清空购物车</span>

</div>

</div>

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余5页未读，立即下载

评论0

weixin_38502916

粉丝: 2
资源: 945

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈