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>
<!--所选商品列表-->
<div class="list-content" ref='listContent'>
<ul>
<li class="food-item" v-for="food in selectFoods">
<div class="desc-wrapper">
<!--左侧-->
<div class="desc-left">
<!--所选商品名字-->
<p class="name">{{food.name}}</p>
<!--所选商品描述 unit 例 des 霆锋苦辣鸡腿堡1个-->
<p class="unit" v-show="!food.description">{{food.unit}}</p>
<p class="description" v-show="food.description">{{food.description}}</p>
</div>
<!--商品单价-->
<div class="desc-right">
<span class="price">￥{{food.min_price}}</span>
</div>
</div>
<!--复用商品增减组件 Cartcontrol-->
<div class="cartcontrol-wrapper">
<Cartcontrol :food='food'></Cartcontrol>
</div>
</li>
</ul>
</div>
<div class="list-bottom"></div>
</div>
加入遮罩层
<!-- 遮罩层 -->
<div class="shopcart-mask" 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>
样式
<style>
.shopcart-wrapper{
width: 100%;
height: 51px;
background: #514f4f;
position: fixed;
left: 0;
bottom: 0;
display: flex;
z-index: 99;
}
.shopcart-wrapper.highligh{
background: #2d2b2a;
}
.shopcart-wrapper .content-left{
flex: 1;
}
.shopcart-wrapper .content-left .logo-wrapper{
width: 50px;
height: 50px;
background: #666666;
border-radius: 50%;
position: relative;
top: -14px;
left: 10px;
text-align: center;
float: left;
}
.shopcart-wrapper .content-left .logo-wrapper.highligh{
background: #ffd161;
}
.shopcart-wrapper .content-left .logo-wrapper .logo{
font-size: 28px;
color: #c4c4c4;
line-height: 50px;
}
.shopcart-wrapper .content-left .logo-wrapper .logo.highligh{
color: #2D2B2A;
}
.shopcart-wrapper .content-left .logo-wrapper .num{
width: 15px;
height: 15px;
line-height: 15px;
border-radius: 50%;
font-size: 9px;
color: white;
background: red;
position: absolute;
right: 0;
top: 0;
}
.shopcart-wrapper .content-left .desc-wrapper{
float: left;
margin-left: 13px;
}
.shopcart-wrapper .content-left .desc-wrapper .total-price{
font-size: 18px;
line-height: 33px;
color: white;
}
.shopcart-wrapper .content-left .desc-wrapper .tip{
font-size: 12px;
color: #bab9b9;
line-height: 51px;
}
.shopcart-wrapper .content-left .desc-wrapper .tip.highligh{
line-height: 12px;
}
.shopcart-wrapper .content-right{
flex: 0 0 110px;
font-size: 15px;
color: #BAB9B9;
line-height: 51px;
text-align: center;
font-weight: bold;
}
.shopcart-wrapper .content-right.highligh{
background: #FFD161;
color: #2D2B2A;
}
.shopcart-wrapper .shopcart-list{
position: absolute;
left: 0;
top: 0;
z-index: -1;
width: 100%;
}
.shopcart-wrapper .shopcart-list.show{
transform: translateY(-100%);
}
.shopcart-wrapper .shopcart-list .list-top{
height: 30px;
text-align: center;
font-size: 11px;
background: #f3e6c6;
line-height: 30px;
color: #646158;
}
.shopcart-wrapper .shopcart-list .list-header{
height: 30px;
background: #F4F4F4;
}
.shopcart-wrapper .shopcart-list .list-header .title{
float: left;
border-left: 4px solid #53c123;
padding-left: 6px;
line-height: 30px;
font-size: 12px;
}
.shopcart-wrapper .shopcart-list .list-header .empty{
float: right;
line-height: 30px;
margin-right: 10px;
font-size: 0;
}
.shopcart-wrapper .shopcart-list .list-header .empty img{
height: 14px;
margin-right: 9px;
vertical-align: middle;
}
.shopcart-wrapper .shopcart-list .list-header .empty span{
font-size: 12px;
vertical-align: middle;
}
.shopcart-wrapper .shopcart-list .list-content{
max-height: 360px;
overflow: hidden;
background: white;
}
.shopcart-wrapper .shopcart-list .list-content .food-item{
height: 38px;
padding: 12px 12px 10px 12px;
border-bottom: 1px solid #F4F4F4;
}
.shopcart-wrapper .shopcart-list .list-content .food-item .desc-wrapper{
float: left;
width: 240px;
}
.shopcart-wrapper .shopcart-list .list-content .food-item .desc-wrapper .desc-left{
float: left;
width: 170px;
}
.shopcart-wrapper .shopcart-list .list-content .food-item .desc-wrapper .desc-left .name{
font-size: 16px;
margin-bottom: 8px;
/* 超出部分隐藏*/
-webkit-line-clamp: 1;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
height: 16px;
}
.shopcart-wrapper .shopcart-list .list-content .food-item .desc-wrapper .desc-left .unit{
font-size: 12px;
color: #B4B4B4;
}
.shopcart-wrapper .shopcart-list .list-content .food-item .desc-wrapper .desc-left .description{
font-size: 12px;
color: #B4B4B4;
/* 超出部分隐藏*/
overflow: hidden;
height: 12px;
}
.shopcart-wrapper .shopcart-list .list-content .food-item .desc-wrapper .desc-right{
float: right;
width: 70px;
text-align: right;
}
.shopcart-wrapper .shopcart-list .list-content .food-item .desc-wrapper .desc-right .price{
font-size: 12px;
line-height: 38px;
}
.shopcart-wrapper .shopcart-list .list-content .food-item .cartcontrol-wrapper{
float: right;
margin-top: 6px;
}
.shopcart .shopcart-mask{
position: fixed;
top: 0;
right: 0;
width: 100%;
height: 100%;
z-index: 98;
background: rgba(7,17,27,0.6);
}
</style>
总结
我们从搭购物车结构，到所选商品列表细化，这里我们复用了增减商品的组件，然后加入遮罩层。通过计算属性与方法，加入控制逻辑完成了购物车的详情页面。
以上所述实小编给大家介绍的Vue实现购物车详情页面的方法，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！