6

src/components/scroll/scroll-nav.vue

@@ -12,7 +12,7 @@
       >
         <slot name="prepend"></slot>
         <div class="cube-scroll-nav-main">
-          <cube-sticky-ele ref="navBarEle" ele-key="cube-scroll-nav-bar">
+          <cube-sticky-ele ref="navBarEle">
             <slot name="bar" :txts="barTxts" :labels="labels" :current="active">
               <cube-scroll-nav-bar
                 :direction="barDirection"
@@ -53,6 +53,7 @@
 
 <script type="text/ecmascript-6">
 import scrollMixin from "../../common/mixins/srcoll";
+import { setTimeout } from "timers";
 
 const DIRECTION_H = "horizontal";
 const DIRECTION_V = "vertical";
@@ -137,7 +138,8 @@ export default {
     this.stickyCurrent = this.current;
   },
   mounted() {
-    this.$nextTick(() => {
+    setTimeout(() => {
+      //   this.$nextTick(() => {
       if (this.side) {
         const fixedEle = this.$refs.pageSticky.$refs.fixedEle;
         this.$refs.scroll.$el.appendChild(fixedEle);
@@ -148,7 +150,8 @@ export default {
       this.refresh();
       this.jumpTo(this.current);
       this.disableFn();
-    });
+      //   });
+    }, 200);
   },
   methods: {
     scrollTo() {
@@ -227,18 +230,17 @@ export default {
     },
     scrollHandler(pos) {
       this.scrollY = -pos.y;
-
-      if (this.scrollY == 0) {
-        this.$emit("scroll0");
-      }
       if (!this._jumping) {
         this.active = this.stickyCurrent;
       }
-      if (this.disable) {
+      if (this.scrollY <= 0) {
+        this.$emit("scroll0");
+      }
+      /* if (this.disable) {
         this.disableFn();
       } else {
         this.enableFn();
-      }
+      } */
     },
     scrollEndHandler() {
       this._jumping = false;

src/components/shopCart/shop-cart-list.vue

@@ -11,7 +11,7 @@
       <transition name="move" appear @after-leave="afterLeave">
         <div v-if="visible">
           <div class="list-header">
-            <h1 class="title">购物车</h1>
+            <h1 class="title">已选商品</h1>
             <span class="empty" @click="empty">清空</span>
           </div>
           <cube-scroll class="list-content" ref="listContent">

src/components/shopCart/shop-cart-sticky.vue

 <template>
-  <div class="shop-cart-sticky" v-show="visible">
-    <shop-cart
-      ref="shopCart"
-      :shopId="shopId"
-      :selectFoods="selectFoods"
-      :fullReduction="fullReduction"
-      :deliveryPrice="deliveryPrice"
-      :minPrice="minPrice"
-      :fold="fold"
-      :sticky="true"
-      :toggle='toggle'
-    ></shop-cart>
-  </div>
+
+  <transition :name="fadeClass">
+    <div class="shop-cart-sticky" v-show="visible">
+      <shop-cart
+        ref="shopCart"
+        :shopId="shopId"
+        :selectFoods="selectFoods"
+        :fullReduction="fullReduction"
+        :deliveryPrice="deliveryPrice"
+        :minPrice="minPrice"
+        :fold="fold"
+        :sticky="true"
+        :toggle="toggle"
+      ></shop-cart>
+    </div>
+  </transition>
 </template>
 
 <script>
@@ -27,6 +30,8 @@ export default {
     };
   },
   created() {
+
+    console.log(this.isFoodTab)
   },
   props: {
     fullReduction: {
@@ -52,9 +57,10 @@ export default {
       type: Boolean,
       default: true
     },
-    toggle: {// 是否主动展示列表
+    toggle: {
+      // 是否主动展示列表
       type: Boolean,
-      // default: false
+      default: false
     },
     list: {
       type: Object,
@@ -65,6 +71,15 @@ export default {
     shopId: {
       type: String
     },
+    isFoodTab: {
+      // type: Boolean,
+      default: 0
+    }
+  },
+  computed: {
+    fadeClass() {
+      return this.isFood==0 ? "fade" : "";
+    }
   },
   methods: {
     drop(el) {
@@ -86,4 +101,12 @@ export default {
   width: 100%;
   height: 48px;
 }
+
+.fade-enter, .fade-leave-active {
+  transform: translate(-100%, 0);
+}
+
+.fade-enter-active, .fade-leave-active {
+  transition: all 0.5s ease-in-out;
+}
 </style>

src/components/shopCart/shop-cart.vue

 <template>
   <div>
     <section class="van-submit-bar">
-      <div v-show="totalCount>0&&tip!==''" class="van-submit-bar__tip">{{tip}}</div>
+      <div v-show="totalCount>0&&tip!==''&&listFold" class="van-submit-bar__tip">{{tip}}</div>
       <section class="van-submit-bar__bar" @click="toggleList">
         <div style="flex:1">
           <div
@@ -151,7 +151,7 @@ export default {
         total += food.price * food.num;
       });
       if (total == 0) return;
-      
+
       let r = this.fullReduction[0],
         c = parseInt(r.condition), // 满减条件
         a = parseInt(r.amount); // 满减金额
@@ -280,6 +280,7 @@ export default {
         this.shopCartStickyComp ||
         this.$createShopCartSticky({
           $props: {
+            fullReduction: "fullReduction",
             selectFoods: "selectFoods",
             deliveryPrice: "deliveryPrice",
             minPrice: "minPrice",
@@ -342,6 +343,10 @@ export default {
       left: 2%;
       wh(56px, 56px);
 
+      &.cart_icon_activity .van-icon {
+        color: #1296fa !important;
+      }
+
       .icon-box {
         height: 100%;
         border-radius: 50%;
@@ -369,10 +374,6 @@ export default {
       }
     }
 
-    .cart_icon_activity {
-      color: #1296fa;
-    }
-
     .cart_num {
       padding-left: 80px;
 

src/store/index.js

@@ -26,6 +26,7 @@ const state = {
 	coupon:{},
 
 	remarkText: '',//输入备注内容
+	/* showCart:true, // 是否展示底部导航 */
 }
 export default new Vuex.Store({
 	state,

src/store/mutations.js

@@ -150,5 +150,9 @@ export default {
     // 首页已拒绝登录，则不再显示提示登录弹框
     REJECT_LOGIN(state){
         state.rejectLogin = true;
-    }
+    },
+    /* SHOW_CART(state,info){
+        state.showCart = info;
+        console.log(info)
+    } */
 }
\ No newline at end of file

src/views/login/login.vue

@@ -139,7 +139,7 @@ export default {
       _timer.interValObj = setInterval(() => {
         if (_timer.second > 1) {
           _timer.second--;
-          this.disabled = true;
+          // this.disabled = true;
         } else {
           clearInterval(timerObj);
           this.disabled = false;

src/views/mine/index.vue

@@ -134,7 +134,7 @@ export default {
   methods: {
     async initData() {
       //防止刷新页面时，vuex状态丢失，用户信息需要重新获取，并存入vuex
-      if (this.login) {
+      // if (this.login) {
         getUser().then(res => {
           if (res.code == 0) {
             let resData = res.data;
@@ -142,8 +142,8 @@ export default {
             this.$store.commit("RECORD_USERINFO", resData.user_info);
           }
         });
-      }
-      this.getBalanceFn();
+      // }
+      // this.getBalanceFn();
     },
     async getBalanceFn() {
       let res = await getBalance();

src/views/order/index.vue

@@ -77,11 +77,12 @@ export default {
     footGuide
   },
   created() {
-    if (this.login) {
+   
+    // if (this.login) {
       this.initData();
-    }else{
-      this.pageLoading= false
-    }
+    // }else{
+    //   this.pageLoading= false
+    // }
   },
   methods: {
     initData() {

src/views/shopItem/children/shop.vue

@@ -53,14 +53,14 @@
     </scroll-nav>
 
     <!-- 底部功能条 -->
-    <!--  <section class="shop-cart-wrapper">
+     <!-- <section class="shop-cart-wrapper">
       <cube-shop-cart
         ref="shopCart"
         :select-foods="cartFoodList"
         :delivery-price="seller.deliveryPrice"
         :min-price="seller.minPrice"
       ></cube-shop-cart>
-    </section>-->
+    </section> -->
   </div>
 </template>
 
@@ -77,7 +77,6 @@ export default {
     return {
       current: 0, //当前导航 active 项的 key 值
       shopId: this.$route.params.id,
-
       position: "bottom",
 
       showMoveDot: [], //控制下落的小圆点显示隐藏
@@ -144,9 +143,8 @@ export default {
     this.initData();
   },
   mounted() {
-    this._showShopCartSticky();
+    // this._showShopCartSticky();
   },
-
   methods: {
     async initData() {
       let res = await allCategoryAndGoods(this.shopId);
@@ -338,7 +336,7 @@ export default {
   }
 
   .cube-scroll-nav-panel-title {
-    padding: 15px;
+    padding: 6px 15px;
     line-height: 24px;
     background-color: #fff;
     scw($fontsize-small, #6e6e6e, 600);

src/views/shopItem/index.vue

 <template>
   <div class="scroll-list-wrap" :class="{'view-wrapper':!pageLoading}">
     <cube-loading v-if="pageLoading" :size="40"></cube-loading>
+
     <cube-sticky
       :pos="scrollY"
       :check-top="checkTop"
       @diff-change="diffChangeHandler"
       fixed-show-ani="sticky-fixed-show"
     >
-      <!-- <header class="sticky-header cube-sticky-fixed">
-        <div class="icons-box" :style="{opacity:1-opacity}">
-          <i class="van-icon van-icon-search"></i>
-        </div>
-        <van-search :style="{opacity:opacity}" shape="round" placeholder="请输入搜索关键词" />
-      </header>-->
       <cube-scroll
         ref="scroll"
         :scroll-events="scrollEvents"
@@ -22,7 +17,9 @@
         <section ref="header" class="page-hd">
           <van-image width="76" height="76" :src="$globalUrlFile+shopInfo.icon"></van-image>
           <div class="prepend-content">
-            <h1><strong>{{shopInfo.name}}</strong> </h1>
+            <h1>
+              <strong>{{shopInfo.name}}</strong>
+            </h1>
             <p class="text-light-grey text-extra-small">评价4.2 月售 等描述</p>
             <!-- 优惠内容 -->
             <div class="tags" @click="showHeaderDetail">
@@ -50,7 +47,9 @@
               @change="changeHandler"
               class="text-medium"
             >
-              <cube-tab v-for="item in tabs" :label="item.name" :key="item.name"><span>{{item.name}}</span> </cube-tab>
+              <cube-tab v-for="item in tabs" :label="item.name" :key="item.name">
+                <span>{{item.name}}</span>
+              </cube-tab>
             </cube-tab-bar>
           </cube-sticky-ele>
 
@@ -59,6 +58,7 @@
               <component
                 :is="item.is"
                 :disable="disable"
+                :isFoodTab="isFoodTab"
                 @scroll0="scrollTop"
                 :style="{height:contentH}"
               ></component>
@@ -94,10 +94,11 @@ export default {
       scrollY: 0,
       scrollEvents: ["scroll"],
       checkTop: true,
-      headerH: 0, // 头部高度
+      // headerH: 0, // 头部高度
       tabBarH: 0, //tabbar高度
-      data: goods,
 
+      isFoodTab: true, // 控制底部导航的动画效果
+      data: goods,
       pageLoading: true,
       shopId: 0,
       shopInfo: {},
@@ -139,24 +140,25 @@ export default {
     }
   },
   methods: {
+    
     scrollHandler({ y }) {
       this.scrollY = -y;
-      if (this.scrollY >= this.headerH) {
-        // this.disable = false;
+    /*   if (this.scrollY >= this.headerH) {
+        this.disable = false;
       } else {
-        // this.disable = true;
-      }
+        this.disable = true;
+      } */
     },
     changeHandler(label) {
       this.currentTab = label;
+      this.isFoodTab = label == "点餐" ? true : false;
+     // this.$store.commit('SHOW_CART',this.isFoodTab);
       console.log("changed to:", label);
     },
+    // 当tab吸附在顶部时,开启内部的滑动
     diffChangeHandler(diff) {
       if (diff && diff >= 1) {
-        console.log(diff);
         this.disable = false;
-      } else {
-        // this.disable = false;
       }
     },
     scrollTop() {
@@ -217,7 +219,7 @@ export default {
   pageLoading: function(value) {
     if (!value) {
       this.$nextTick(() => {
-        this.headerH = this.$refs.header.offsetHeight; // 包含tabbar 在内的头部高度
+        // this.headerH = this.$refs.header.offsetHeight; // 包含tabbar 在内的头部高度
         this.tabBarH = this.$refs.tabBar.offsetHeight; // tabbar 高度
       });
     }
@@ -256,6 +258,7 @@ export default {
       position: relative;
       text-align: left;
       padding: 0 40px;
+
       .van-tag {
         margin-right: 6px;
         vertical-align: middle;
@@ -289,10 +292,12 @@ export default {
 
   .cube-tab {
     padding: 0;
-    span{
+
+    span {
       padding: 8px 0;
     }
-    &_active span{
+
+    &_active span {
       color: #323232;
       font-weight: 700;
       border-bottom: 3px solid $color-primary;
@@ -304,7 +309,7 @@ export default {
   background-color: #f8f8f8;
 }
 
-.sticky-header {
+/* .sticky-header {
   z-index: 999;
 
   .icons-box {
@@ -328,5 +333,5 @@ export default {
       flex: auto;
     }
   }
-}
+} */
 </style>
\ No newline at end of file