店铺首页

src/common/utils/mUtils.js

@@ -11,6 +11,14 @@ export function MAP(key = 'c066bb79c8747e4d84aa9e86276f8174') {
   })
 }
 
+export const sessionstorage = {
+  save(key, value) {
+      sessionStorage.setItem(key, JSON.stringify(value));
+  },
+  fetch(key) {
+      return JSON.parse(sessionStorage.getItem(key)) || [];
+  },
+};
 
 export const localstorage = {
   save(key, value) {

src/components/cube-buy-cart.vue

@@ -2,16 +2,16 @@
   <section class="cart_module">
     <transition name="showReduce">
       <span
-        @click="removeOutCart(foods.category_id, foods.item_id, foods.specfoods[0].food_id, foods.specfoods[0].name, foods.specfoods[0].price, '', foods.specfoods[0].packing_fee, foods.specfoods[0].sku_id, foods.specfoods[0].stock)"
+        @click="removeOutCart"
         v-if="foodNum"
       >
-        <i class="cubeic-remove add_icon"></i>
+        <i class="cubeic-remove icon"></i>
       </span>
     </transition>
     <transition name="fade">
       <span class="cart_num" v-if="foodNum">{{foodNum}}</span>
     </transition>
-    <i class="cubeic-add add_icon" @click="addToCart()"></i>
+    <i class="cubeic-add icon" @click="addToCart"></i>
     <!-- <svg
       class="add_icon"
       @click="addToCart(foods.category_id, foods.item_id, foods.specfoods[0].food_id, foods.specfoods[0].name, foods.specfoods[0].price, '', foods.specfoods[0].packing_fee, foods.specfoods[0].sku_id, foods.specfoods[0].stock, $event)"
@@ -41,19 +41,19 @@ export default {
     //shopCart变化的时候重新计算当前商品的数量
     foodNum: function() {
       let category_id = this.categoryId;
-      let item_id = this.foods.item_id;
+      let item_id = this.food.id;
       if (
         this.shopCart &&
         this.shopCart[category_id] &&
         this.shopCart[category_id][item_id]
       ) {
-        let num = 0;
-        Object.values(this.shopCart[category_id][item_id]).forEach(
-          (item, index) => {
-            num += item.num;
-          }
-        );
-        return num;
+        // let num = 0;
+        // Object.values(this.shopCart[category_id][item_id]).forEach(
+        //   (item, index) => {
+        //     num += item.num;
+        //   }
+        // );
+        return this.shopCart[category_id][item_id].num;
       } else {
         return 0;
       }
@@ -63,43 +63,33 @@ export default {
   methods: {
     ...mapMutations(["ADD_CART", "REDUCE_CART"]),
     //移出购物车
-    removeOutCart(
-      category_id,
-      item_id,
-      food_id,
-      name,
-      price,
-      specs,
-      packing_fee,
-      sku_id,
-      stock
-    ) {
+    removeOutCart() {
       if (this.foodNum > 0) {
-        this.REDUCE_CART({
+        const food = this.food;
+        const addInfo = {
           shopid: this.shopId,
-          category_id,
-          item_id,
-          food_id,
-          name,
-          price,
-          specs,
-          packing_fee,
-          sku_id,
-          stock
-        });
+          category_id: this.categoryId,
+          food_id: food.id,
+          name: food.name,
+          favorable_price: food.favorable_price,
+          price: food.price
+        };
+        this.$store.commit("REDUCE_CART", addInfo);
       }
     },
     //加入购物车，计算按钮位置。
     addToCart() {
+    
+      const food = this.food;
       const addInfo = {
         shopid: this.shopId,
         category_id: this.categoryId,
         food_id: food.id,
         name: food.name,
-        favorable_price:food.favorable_price,
-        price:food.price
+        favorable_price: food.favorable_price,
+        price: food.price
       };
-      this.$store.commit('ADD_CART',addInfo);
+      this.$store.commit("ADD_CART", addInfo);
       let elLeft = event.target.getBoundingClientRect().left;
       let elBottom = event.target.getBoundingClientRect().bottom;
       this.showMoveDot.push(true);
@@ -121,45 +111,21 @@ export default {
 @import '~common/stylus/mixin.styl';
 
 .cart_module {
-  .add_icon {
-    position: relative;
-    z-index: 999;
-  }
-
   .cart_button {
     display: flex;
     align-items: center;
   }
 
-  .cubeic-add {
-    scw(20px, #3190e8);
-  }
-
-  .specs_reduce_icon {
-    fill: #999;
+  .icon {
+    scw($fontsize-large-xx, #3190e8);
   }
 
   .cart_num {
-    // @include sc(.65rem, #666);
-    min-width: 1rem;
+    display: inline-block;
+    min-width: 20px;
     text-align: center;
     font-family: Helvetica Neue, Tahoma;
-  }
-
-  .choose_specification {
-    .choose_icon_container {
-      display: flex;
-      align-items: center;
-
-      .show_chooselist {
-        display: block;
-        // @include sc(.55rem, #fff);
-        padding: 0.1rem 0.2rem;
-        background-color: $blue;
-        border-radius: 0.2rem;
-        border: 1px solid $blue;
-      }
-    }
+    scw($fontsize-medium, #323233);
   }
 }
 

src/components/footer.vue

 <template>
-  <div class="container">
+  <div class="cube-tab-bar">
     <cube-tab-bar v-model="selectedLabelDefault" @click="clickHandler">
       <cube-tab v-for="(item, index) in tabs" :label="item.label" :key="index">
         <i slot="icon" :class="item.icon"></i>

src/store/mutations.js

+import {sessionstorage} from '../common/utils/mUtils'
+
 export default {
     // 记录当前地理位置
     RECORD_ADDRESS(state, info) {
@@ -47,28 +49,51 @@ export default {
         let cart = state.cartList;
         let shop = cart[shopid] = (cart[shopid] || {});
         let category = shop[category_id] = (shop[category_id] || {});
-        let item = category[item_id] = (category[item_id] || {});
-        if (item[food_id]) {
-            item[food_id]['num']++;
+        // let item = category[item_id] = (category[item_id] || {});
+        
+        if (category[food_id]) {
+            category[food_id]['num']++;
         } else {
-            item[food_id] = {
+            category[food_id] = {
                 "num": 1,
                 "id": food_id,
                 "name": name,
                 "price": price,
-                "specs": specs,
+               /*  "specs": specs,
                 "packing_fee": packing_fee,
                 "sku_id": sku_id,
-                "stock": stock
+                "stock": stock */
             };
         }
         state.cartList = { ...cart };
         //存入localStorage
-        setStore('buyCart', state.cartList);
+        sessionstorage.save('buyCart', state.cartList);
     },
 
     // 移出购物车
-    REDUCE_CART() {
-
+	REDUCE_CART(state, {
+		shopid,
+		category_id,
+		item_id,
+		food_id,
+		name,
+		price,
+		specs,
+	}) {
+		let cart = state.cartList;
+		let shop = (cart[shopid] || {});
+		let category = (shop[category_id] || {});
+		// let item = (category[item_id] || {});
+		if (category && category[food_id]) {
+			if (category[food_id]['num'] > 0) {
+				category[food_id]['num']--;
+				state.cartList = {...cart};
+				//存入localStorage
+				sessionstorage.save('buyCart', state.cartList);
+			} else {
+				//商品数量为0，则清空当前商品的信息
+				category[food_id] = null;
 			}
+		}
+	},
 }
\ No newline at end of file

src/views/home/index.vue

 <template>
-  <cube-page type="recycle-list" title="RecycleList">
-    <div slot="content" class="scroll-list-wrap">
+  <div class="scroll-list-wrap">
     <cube-loading v-if="loading" :size="40"></cube-loading>
     <cube-sticky v-else :pos="scrollY">
       <cube-scroll
@@ -67,9 +66,8 @@
         </section>
       </cube-scroll>
     </cube-sticky>
-    </div>
     <footGuide default="home"></footGuide>
-  </cube-page>
+  </div>
 </template>
 
 <script>
@@ -81,7 +79,7 @@ import { mapGeolocation, MAP } from "../../common/utils/mUtils";
 import { mapState } from "vuex";
 var map = {};
 var b = {
-  shop_id: '8e3a39b19ec215d4c9c424ac1608751c',
+  shop_id: "8e3a39b19ec215d4c9c424ac1608751c",
   name: "清吧",
   address: "重庆市,市辖区,涪陵区",
   icon: "files/shop/77/image/a4558aa3-ccb2-4f2c-b5db-1461a25c12a9.jpg",
@@ -289,16 +287,8 @@ export default {
 </script>
 
 <style lang="stylus" scoped>
-.cube-page {
-  background-color: #fff;
-}
-
 .scroll-list-wrap {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  background-color: #fff;
 }
 
 .location {

src/views/shopItem/children/evaluate.vue

+<template>
+    <div style="height:600px;background:pink">
+      
+    </div>
+</template>
\ No newline at end of file

src/views/shopItem/children/food-detail.vue

+<template>
+  <div class="scroll-list-wrap">
+    <div @click="onClosePopup">132</div>
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+    onClosePopup() {
+      this.$emit("close");
+    }
+  }
+};
+</script>
+
+<style lang="stylus" scoped>
+.scroll-list-wrap {
+  z-index: 10;
+}
+</style>
\ No newline at end of file

src/views/shopItem/children/shopInfo.vue

+<template>
+    <div>
+        111111111111
+    </div>
+</template>
\ No newline at end of file

src/views/shopItem/index.vue

 <template>
-  <cube-page type="scroll-nav-side container" title="ScrollNav">
-    <div slot="content" class="scroll-list-wrap">
+  <div class="scroll-list-wrap">
     <cube-sticky :pos="scrollY">
-        <cube-scroll :scroll-events="scrollEvents" @scroll="scrollHandler">
+      <cube-scroll ref="scroll" :scroll-events="scrollEvents" @scroll="scrollHandler">
         <section class="page-header">
           <van-image width="76" height="76" :src="$globalUrlFile+shopInfo.icon"></van-image>
           <div class="prepend-content">
@@ -12,51 +11,82 @@
           </div>
         </section>
 
-          <van-tabs animated>
-            <van-tab v-for="(tab,index) in tabs" :key="index" :title="tab.name">
-              <keep-alive>
-                <component :is="tab.component"></component>
-              </keep-alive>
-            </van-tab>
-          </van-tabs>
+        <cube-sticky-ele>
+          <cube-tab-bar
+            v-model="currentTab"
+            show-slider
+            inline
+            @change="changeHandler"
+            class="text-medium"
+          >
+            <cube-tab v-for="item in tabs" :label="item.name" :key="item.name">{{item.name}}</cube-tab>
+          </cube-tab-bar>
+        </cube-sticky-ele>
+
+        <cube-tab-panels v-model="currentTab">
+          <cube-tab-panel v-for="item in tabs" :label="item.name" :key="item.name">
+            <component :is="item.is"></component>
+          </cube-tab-panel>
+        </cube-tab-panels>
       </cube-scroll>
     </cube-sticky>
   </div>
-  </cube-page>
 </template>
 
-<script type="text/ecmascript-6">
+
+<script>
 import { allCategoryAndGoods, getShopInfo } from "../../common/serve";
 import shopTab from "./children/shop";
+import evaluate from "./children/evaluate";
+import shopInfo from "./children/shopInfo";
+
 import goodsData from "../../data";
 
 const goods = goodsData.goods;
 
 export default {
   components: {
-    shopTab
+    shopTab,
+    evaluate,
+    shopInfo
   },
   data() {
     return {
       scrollY: 0,
       scrollEvents: ["scroll"],
+      checkTop: false,
       data: goods,
-      current: 0, //当前导航 active 项的 key 值
+
       shopId: 0,
       shopInfo: {},
+      currentTab: "点餐", //当前导航 active 项的 key 值
+      currentTabIndex: 1,
       tabs: [
-        { name: "点餐", component: 'shopTab' },
-        { name: "评价", component: 'shopTab' },
-        { name: "商家", component: 'shopTab' }
-      ]
+        { name: "点餐", is: "shopTab" },
+        { name: "评价", is: "evaluate" },
+        { name: "商家", is: "shopInfo" }
+      ],
+      labels: ["点餐", "评价", "商家"]
+      // components: ["shopTab", "evaluate", "shopInfo"]
     };
   },
   created() {
     this.shopId = this.$route.params.id;
     this.initData();
   },
+  computed: {
+    component() {
+      return "shopTab";
+    }
+  },
   methods: {
-    scrollHandler() {},
+    scrollHandler({ y }) {
+      this.scrollY = -y;
+    },
+    changeHandler(label) {
+      this.currentTab = label;
+      console.log("changed to:", label);
+    },
     async initData() {
       let res = await allCategoryAndGoods(this.shopId);
       if (res.code == 0) {
@@ -68,9 +98,7 @@ export default {
         this.shopInfo = msg.data;
       }
     },
-    changeHandler(label) {
-      console.log("changed to:", label);
-    },
+
     stickyChangeHandler(current) {
       console.log("sticky-change", current);
     },
@@ -89,46 +117,7 @@ export default {
 </script>
 
 <style lang="stylus">
-@import '~common/stylus/variable.styl';
-@import '~common/stylus/mixin.styl';
-
-.view-wrapper {
-  background: url('https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3340225592,2502432116&fm=26&gp=0.jpg') no-repeat; // ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3340225592,2502432116&fm=26&gp=0.jpg) no-repeat;
-  background-size: cover;
-}
-
-.container.scroll-nav-side {
-  .cube-scroll-nav-bar {
-    width: 80px;
-    background-color: transparent;
-
-    .cube-scroll-wrapper {
-      width: 100%;
-    }
-
-    span {
-      font-size: $fontsize-small;
-    }
-  }
-
-  .cube-scroll-nav-panel-title {
-    scw($fontsize-small, #6e6e6e, 600);
-  }
-}
-.van-tabs__content{
-  height:600px;}
-.scroll-nav-side {
-  background-color: #fff;
-
-  .view-wrapper {
-    position: fixed;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    width: 100%;
-  }
-
-  .page-header {
+.page-header {
   text-align: center;
   font-size: 20px;
 
@@ -140,6 +129,11 @@ export default {
       padding: 10px;
     }
   }
+}
+
+.cube-tab-bar {
+  background-color: #fff;
+  .cube-tab-bar-slider{
   }
 }
 </style>
\ No newline at end of file