本篇我们将构建商品控件与购物车联动。
商品控件
商品控件的结构编写
在商品组件的标签内完成项目结构，以及数据，事件的绑定，与判断逻辑的书写。
{{item.name}}
{{food.name}}
{{food.description}}
{{food.month_saled_content}} {{food.praise_content}}￥{{food.min_price}} /{{food.unit}}
Shopcart组件是Goods组件的子组件，在Shopcart组件初始化的时候我们可以传入给其参数poiInfo selectFoods.
请求数据，声明方法与计算属性
定义商品组件的样式
.goods { display: -webkit-box; display: -ms-flexbox; display: flex; position: absolute; top: 190px; bottom: 51px; overflow: hidden; width: 100%; } .goods .menu-wrapper { -webkit-box-flex: 0; -ms-flex: 0 0 85px; flex: 0 0 85px; background: #f4f4f4; } .goods .menu-wrapper .menu-item { padding: 16px 23px 15px 10px; border-bottom: 1px solid #e4e4e4; position: relative; } .goods .menu-wrapper .menu-item.current { background: white; font-weight: bold; margin-top: -1px; } .goods .menu-wrapper .menu-item:first-child.current { margin-top: 1px; } .goods .menu-wrapper .menu-item .text { font-size: 13px; color: #333333; line-height: 17px; vertical-align: middle; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .goods .menu-wrapper .menu-item .text .icon { width: 15px; height: 15px; vertical-align: middle; } .goods .menu-wrapper .menu-item .num { position: absolute; right: 5px; top: 5px; width: 13px; height: 13px; border-radius: 50%; color: white; background: red; text-align: center; font-size: 7px; line-height: 13px; } .goods .foods-wrapper { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .goods .foods-wrapper .container-list { padding: 11px 11px 0 11px; border-bottom: 1px solid #e4e4e4; } .goods .foods-wrapper .container-list img { width: 100%; margin-bottom: 11px; border-radius: 5px; } .goods .foods-wrapper .food-list { padding: 11px; } .goods .foods-wrapper .food-list .title { height: 13px; font-size: 13px; background: url(btn_yellow_highlighted@2x.png) no-repeat left center; background-size: 2px 10px; padding-left: 7px; margin-bottom: 12px; } .goods .foods-wrapper .food-list .food-item { display: flex; margin-bottom: 25px; position: relative; } .goods .foods-wrapper .food-list .food-item .icon { flex: 0 0 63px; background-position: center; background-size: 120% 100%; background-repeat: no-repeat; margin-right: 11px; height: 75px; } .goods .foods-wrapper .food-list .food-item .content { flex: 1; } .goods .foods-wrapper .food-list .food-item .content .name { font-size: 16px; line-height: 21px; color: #333333; margin-bottom: 10px; padding-right: 27px; } .goods .foods-wrapper .food-list .food-item .content .desc { font-size: 10px; line-height: 19px; color: #bfbfbf; margin-bottom: 8px; -webkit-line-clamp: 1; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .goods .foods-wrapper .food-list .food-item .content .extra { font-size: 10px; color: #bfbfbf; margin-bottom: 7px; } .goods .foods-wrapper .food-list .food-item .content .extra .saled { margin-right: 14px; } .goods .foods-wrapper .food-list .food-item .content .product { height: 15px; margin-bottom: 6px; } .goods .foods-wrapper .food-list .food-item .content .price { font-size: 0; } .goods .foods-wrapper .food-list .food-item .content .price .text { font-size: 14px; color: #fb4e44; } .goods .foods-wrapper .food-list .food-item .content .price .unit { font-size: 12px; color: #bfbfbf; }
商品数量控制组件
这里用了vue动画
cart-decrease类为商品数量减少结构。 使用指令v-show控制其显隐。有商品数量的时候会按照规定动画进行显示，反之则隐藏。
cart-count类为选中的商品数量。
cart-add类为商品数量增加结构。
通过vue全局api set进行第一次点击增加商品按钮时候的设置。
https://cn.vuejs.org/v2/api/#...{{food.count}} .cartcontrol { font-size: 0; } .cartcontrol .cart-decrease { display: inline-block; width: 26px; height: 26px; font-size: 26px; color: #b4b4b4; } .cartcontrol .cart-count { display: inline-block; width: 25px; text-align: center; font-size: 12px; line-height: 26px; vertical-align: top; } .cartcontrol .cart-add { display: inline-block; width: 26px; height: 26px; font-size: 26px; color: #ffd161; position: relative; } .cartcontrol .cart-add .bg { width: 20px; height: 20px; border-radius: 50%; background: black; position: absolute; left: 3px; top: 3px; z-index: -1; } .move-enter-active, .move-leave-active { transition: all 0.5s linear; } .move-enter, .move-leave-to { transform: translateX(20px) rotate(180deg); }
购物车组件
我们现在创建shopcart购物车组件。
0}">
0}">
0}">
{{totalCount}}
￥{{totalPrice}}
另需{{shipping_fee_tip}}
0}">{{payStr}}
.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: 98px;
background: rgba(7, 17, 27, 0.6);
}
到此购物车与组件联动就结束了。下篇我们讲如何进行商品分类菜单数量提示。
总结
以上所述是小编给大家介绍的Vue商品控件与购物车联动效果的实例代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
