goods组件分为左侧的menu和右侧的商品列表
<div class="goods">
<div class="menu-wrapper" ref="menuWrapper"></div>
<div class="foods-wrapper" ref="foodsWrapper"></div>
</div>
在header和购物车不动的情况下,左右两侧都可以滚动,我们将goods的position设置为absolute,超过的部分进行隐藏
.goods
display: flex
position: absolute
width: 100%
top:174px /* header的高度*/
bottom: 46px /* 购物车的高度*/
overflow: hidden
.menu-wrapper
flex: 0 0 80px /* 等分 缩放 宽度*/
width: 80px
background: #f3f5f7
.foods-wrapper
flex: 1
background: #FFF
vue-resource获取goods数据:首先先接受父组件App.vue传过来的seller数据,因为有可能用的到,
props: {
seller: {
type: Object
}
然后在created中获取数据,存到goods中
created() {
//请求的ajex地址,成功的回调,拿到一个response
this.$http.get('/api/goods').then((response) => {
//response是一个属性,将其转化为json对象
response = response.body;
//console.log(response);
if (response.errno === ERR_OK) {
// 数据在data字段中,将goods对象传给header组件,通过:goods
this.goods = response.data;
// console.log(this.goods);
});
}
});
}
其中,goods用data做一个绑定,因为后续要操作goods,goods的状态要反映到dom上,所以要给他添加getter setter
data() {
return {
goods: []
};
}
在menu-wrapper下,获取数据后应用到左侧的 menu菜单栏,item.name即为热销榜、单人精彩套餐,饮料等菜单栏选项;type>0的时候菜单前面有图片要显示,还跟之前一样将classMap添加到created中
<ul><!-- 如果index等于currentIndex,就为这个li添加一个current类,改变左侧导航栏的背景颜色-->
<li v-for="(item,index) in goods" :key="item.id" class="menu-item"}">
<span class="text" border-1px>
<span v-show="item.type>0" class="icon" :class="classMap[item.type]"></span>{{item.name}}
</span>
</li>
</ul>
created() {
this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee'];
}
接下来为菜单栏添加样式:使用table做垂直居中,不要忘了把相应的3x图片考到goods组件下,border-1px不要忘了引入相应的styl
.menu-item // li
display: table; // 使用table做垂直居中
height: 54px
width: 56px
padding: 12px 12px
line-height 14px
.icon // 图片
display : inline-block
width : 12px
height : 12px
margin-right : 2px
vertical-align : top /* 设置对其方式 */
background-size : 12px 12px
background-repeat : no-repeat
&.decrease
bg-image('decrease_3')
&.discount
bg-image('discount_3')
&.guarantee
bg-image('guarantee_3')
&.invoice
bg-image('invoice_3')
&.special
bg-image('special_3')
.text // 文字
display table-cell
font-size : 12px
width 56
text-align middle
border-1px(rgba(7, 17, 27, 0.1))
右侧食品列表的布局:在food-wrapper下,添加商品布局,两个ul布局,先遍历foods,在遍历每一种food下的goods,每一种food对应一种标题,标题下为goods列表,每一个good左侧为good的图片,右侧为相关介绍(标题,描述,月售,好评率,价格等)
<div class="foods-wrapper" ref="foodsWrapper">
<ul>
<li v-for="item in goods" :key="item.id" class="food-list food-list-hook">
<h1 class="title">{{item.name}}</h1> <!-- 特色粥品-->
<!-- 粥类可能有很多种粥品-->
<ul>
<li v-for="food in item.foods" :key="food.id" class="food-item" border-1px @click="selectFood(food,$event)">
<div class="icon">
<img width="57px" :src="food.icon" alt="">
</div>
<div class="content">
<h2 class="name">{{food.name}}</h2>
<p class="desc">{{food.description}}</p>
<div class="extra">
<span class="count">月售{{food.sellCount}}份</span><span>好评率{{food.rating}}%</span>
</div>
<div class="price">
<span class="now">¥{{food.price}}</span><span class="old" v-show="food.oldPrice">¥{{food.oldPrice}}</span>
</div>
<div class="cartcontrol-wrapper">
<cartcontrol v-on:cart-add="cartAdd" :food="food"></cartcontrol> <!-- 传入food!!!-->
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
接下来添加样式:
.foods-wrapper
flex: 1
background: #FFF
.title // 第一层循环商品的分类
padding-left 14px
height 26px
line-height 26px
border-left 2px solid #d9dde1
font-size 12px
color rgb(147,153,159)
background #f3f5f7
.food-item // good下各种foods的二层循环
display flex // 左侧图像宽度固定,右侧自适应,还是flex布局方式
padding 18px
border-1px(rgba(7, 17, 27, 0.1))
&:last-child // 最后一个good的border和margin都是零
border-none()
margin-bottom 0px
food-item与title平级,每个food-item的下方都有一个border,但是最后一个没有,所以在mixin.style中设置一个border-none函数
border-none() /* 将列表中最后一项的横线去掉的时候才会用到*/
&:after
display: none
接下来在food-item下写每一个food的介绍,左侧图片(icon固定宽度)详情(content自适应),flex布局
.icon
flex 0 0 57px /* 左侧宽度固定*/
margin-right 10px
.content
flex 1 //右侧自适应
在content下添加name等描述部分
.icon
flex 0 0 57px /* 左侧宽度固定*/
margin-right 10px
.content
flex 1 //右侧自适应
.name
font-size 17px
margin 2px 0 8px 0
height 17px
line-height 17px
color rgb(7,17,27)
.desc, .extra
font-size 10px
line-height 12px
color rgb(147,153,159)
.desc
margin-bottom 8px
.extra
line-height 10px
.count
margin-right 12px
.price
line-height 24px
font-weight: 700
.now
margin-right 8px
font-size 14px
color rgb(240,20,20)
.old
text-decoration line-through // 划掉的横线
color rgb(147,153,159)
font-size 10px
基本布局完成,接下来要实现左右两侧滚动和联动的特效