vue2饿了么--goods组件开发--布局部分

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

基本布局完成，接下来要实现左右两侧滚动和联动的特效

vue2饿了么--goods组件开发--布局部分

猜你喜欢