new

package.json

@@ -10,6 +10,7 @@
     "lint": "eslint --ext .js,.vue src"
   },
   "dependencies": {
+    "better-scroll": "^0.1.8",
     "stylus": "^0.54.5",
     "vue": "^2.1.0",
     "vue-resource": "^1.0.3",

src/App.vue

@@ -23,7 +23,7 @@
       </div>
     </div>
     <!-- 头部 -->
-    <router-view></router-view>
+    <router-view :seller="seller"></router-view>
 
   </div>
 </template>

src/components/cartControl/cartControl.styl

@@ -0,0 +1,48 @@
+.cartControl
+  font-size 0
+  .cart-decrease, .cart-add
+    display inline-block
+    padding 6px
+    line-height 24px
+    font-size 24px
+    vertical-align top
+    color rgb(0, 160, 220, 0.2)
+  .cart-count
+    display inline-block
+    font-size 10px
+    line-height 24px
+    width 12px
+    vertical-align top
+    padding-top 6px
+    text-align center
+    color rgb(147, 153, 159)
+  .cart-decrease
+    padding 4px 6px 6px 6px
+    &.fade-enter-active
+      animation: bounce-in .5s;
+    &.fade-leave-active
+      animation: bounce-out .5s;
+    @keyframes bounce-in {
+      0% {
+        transform: scale(0);
+      }
+      50% {
+        transform: scale(1.5);
+      }
+      100% {
+        transform: scale(1);
+      }
+        transform  transition3D(0,0,0)
+    }
+    @keyframes bounce-out {
+      0% {
+        transform: scale(1);
+      }
+      50% {
+        transform: scale(1.5);
+      }
+      100% {
+        transform: scale(0);
+      }
+    }
+

src/components/cartControl/cartControl.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="cartControl">
+    <transition name="fade">
+      <span class="iconfont icon-jian cart-decrease" v-show="food.count>0" @click="decreaseCart($event)"></span>
+    </transition>
+      <span class="cart-count" v-show="food.count > 0 ">
+      {{food.count}}
+    </span>
+    <span class="iconfont icon-jia cart-add" @click="addCart($event)"></span>
+  </div>
+</template>
+
+<script type="text/ecmascript-6">
+  import Vue from 'vue';
+  export default {
+    props: {
+      food: {
+        type: Object
+      }
+    },
+    methods: {
+      addCart(event) {
+        if (!event._constructed) {
+          // 去掉自带click事件的点击
+          return;
+        }
+        if (!this.food.count) {
+          Vue.set(this.food, 'count', 1);
+        } else {
+          this.food.count++;
+        }
+      },
+      decreaseCart(event) {
+        if (!event._constructed) {
+          // 去掉自带click事件的点击
+          return;
+        }
+          this.food.count--;
+      }
+    }
+  };
+</script>
+<style lang="stylus" rel="stylesheet/stylus">
+  @import "cartControl.styl";
+</style>

src/components/goods/goods.styl

@@ -16,6 +16,14 @@
       height 54px
       line-height 14px
       padding 0 12px
+      &.current
+        position relative
+        z-index 10
+        margin-top -1px
+        background #fff
+        font-weight 700
+        .text
+          border-none()
       .icon
         display inline-block
         width 12px
@@ -76,20 +84,25 @@
             color rgb(147, 153, 159)
           .desc
             margin-bottom 8px
+            line-height 12px
           .extra
-            &.count
+            .count
               margin-right 12px
           .price
             font-weight 700px
             line-height 24px
             .now
               margin-right 8px
               font-size 14px
-              color rgb(240,20,20)
+              color rgb(240, 20, 20)
             .old
               font-size 10px
               color rgb(147, 153, 159)
               text-decoration line-through
+          .cartControl-wrapper
+            position absolute
+            right 0
+            bottom 12px
 
 
 

src/components/goods/goods.vue

@@ -1,17 +1,18 @@
 <template>
   <div class="good">
-    <div class="menu-wrapper">
+    <div class="menu-wrapper" ref="menuWrapper">
       <ul>
-        <li v-for="item in goods" class="menu-item border-1px">
+        <li v-for="(item, index) in goods" class="menu-item border-1px" :class="{'current':currentIndex === index}"
+            @click="selectMenu(index, $event)">
           <span class="text">
             <span v-show="item.type>0" class=" icon" :class="classMap[item.type]"></span>{{item.name}}
           </span>
         </li>
       </ul>
     </div>
-    <div class="foods-wrapper">
+    <div class="foods-wrapper" ref="foodWrapper">
       <ul>
-        <li v-for="item in goods" class="food-list">
+        <li v-for="item in goods" class="food-list food-list-hook">
           <h1 class="title">{{item.name}}</h1>
           <ul>
             <li v-for="food in item.foods" class="food-item">
@@ -22,22 +23,28 @@
                 <h2 class="name">{{food.name}}</h2>
                 <p class="desc">{{food.description}}</p>
                 <div class="extra">
-                  <span class="count">月售{{food.sellCount}}</span>
-                  <span class="count">好评{{food.rating}}</span>
+                  <span class="count">月售{{food.sellCount}}</span><span class="count">好评{{food.rating}}</span>
                 </div>
                 <div class="price">
-                  <span class="now">￥{{food.price}}</span>
-                  <span class="old" v-show="food.oldPrice">￥{{food.oldPrice}}</span>
+                  <span class="now">￥{{food.price}}</span><span class="old" v-show="food.oldPrice">￥{{food.oldPrice}}</span>
+                </div>
+                <div class="cartControl-wrapper">
+                  <cartControl :food="food"></cartControl>
                 </div>
               </div>
             </li>
           </ul>
         </li>
       </ul>
     </div>
+    <shopCart :delivery-price="seller.deliveryPrice" :min-price="seller.minPrice"></shopCart>
   </div>
 </template>
 <script type="text/ecmascript-6">
+  import BScroll from 'better-scroll';
+  import shopCart from '../shopcart/shopCart.vue';
+  import cartControl from '../cartControl/cartControl.vue';
+
   const ERR_OK = 0;
   export default {
     props: {
@@ -47,18 +54,76 @@
     },
     data () {
       return {
-        goods: []
+        goods: [],
+        listHeight: [],
+        scrolly: 0
       };
     },
     created() {
       this.$http.get('/api/goods').then((response) => {
         response = response.body;
         if (response.errno === ERR_OK) {
           this.goods = response.data;
-          console.log(this.goods);
+          this.$nextTick(() => {
+            this._initScroll();
+            this._calculateHeight();
+          });
         }
       });
       this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee'];
+    },
+    mounted() {
+//      this.$nextTick(() => {
+//       this._initScroll();
+//      });
+    },
+    computed: {
+      currentIndex() {
+        for (let i = 0; i < this.listHeight.length; i++) {
+          let height = this.listHeight[i];
+          let height2 = this.listHeight[i + 1];
+          if (!height2 || (this.scrolly >= height && this.scrolly < height2)) {
+            return i;
+          }
+        }
+      }
+    },
+    methods: {
+      _initScroll() {
+//        console.log(this.$refs);
+//        console.log((this.$refs.menuWrapper));
+        this.menuScroll = new BScroll(this.$refs.menuWrapper, {
+          click: true
+        });
+        this.foodScroll = new BScroll(this.$refs.foodWrapper, {probeType: 3,
+          click: true});
+        this.foodScroll.on('scroll', (pos) => {
+          this.scrolly = Math.abs(Math.round(pos.y));
+        });
+      },
+      _calculateHeight() {
+        let foodList = this.$refs.foodWrapper.getElementsByClassName('food-list-hook');
+        let height = 0;
+        this.listHeight.push(height);
+        for (let i = 0; i < foodList.length; i++) {
+          let item = foodList[i];
+          height += item.clientHeight;
+          this.listHeight.push(height);
+        }
+      },
+      selectMenu(index, event) {
+        if (!event._constructed) {
+          // 去掉自带click事件的点击
+          return;
+        }
+        let foodList = this.$refs.foodWrapper.getElementsByClassName('food-list-hook');
+        let el = foodList[index];
+        this.foodScroll.scrollToElement(el, 300);
+      }
+    },
+    components: {
+      shopCart,
+      cartControl
     }
   };
 </script>

src/components/shopcart/shopCart.styl

@@ -0,0 +1,89 @@
+.shopCart
+  position fixed
+  left 0px
+  bottom 0px
+  z-index 50
+  width 100%
+  height 48px
+  .content
+    display flex
+    background #141d27
+    .content-left
+      flex 1
+      .logo-wrapper
+        display inline-block
+        position relative
+        top -10px
+        margin 0 12px
+        padding 6px
+        width 56px
+        height 56px
+        box-sizing border-box
+        vertical-align top
+        border-radius 50%
+        background #141d27
+        .num
+          position absolute
+          top 0
+          right 0
+          width 24px
+          height 24px
+          line-height 24px
+          text-align center
+          border-radius 16px
+          font-size 9px
+          font-weight 700
+          color #ffffff
+          background rgb(240, 20, 20)
+          box-shadow 0 4px 8px 0 rgba(0, 0, 0, 0.4)
+        .logo
+          width 100%
+          height 100%
+          text-align center
+          border-radius 50%
+          background #2b343c
+          &.highlight
+            background rgb(0, 160, 220)
+          .icon-gouwuche
+            line-height 44px
+            font-size 24px
+            color #80858a
+            &.highlight
+              color #fff
+      .price
+        display inline-block
+        vertical-align top
+        margin-top 12px
+        line-height 24px
+        padding-right 12px
+        box-sizing border-box
+        border-right 1px solid rgba(255, 255, 255, 0.1);
+        font-size 16px
+        font-weight 700
+        color rgba(255, 255, 255, 0.4);
+        &.highlight
+         color #ffffff
+      .desc
+        display inline-block
+        vertical-align top
+        line-height 24px
+        margin-left 12px
+        margin-top 12px
+        color rgba(255, 255, 255, 0.4)
+        font-size 10px
+    .content-right
+      flex 0 0 105px
+      width 105px
+      .pay
+        height 48px
+        line-height 48px
+        text-align center
+        font-size 12px
+        color rgba(255, 255, 255, 0.4);
+        font-weight 700
+        background #2b333b
+        &.not-enough
+          background #2b333b
+        &.enough
+          background #00b43c
+          color #ffffff