cart

xianxianzhuyi · Jul 14, 2017 · aec85b0 · aec85b0
1 parent bcac606
commit aec85b0
Show file tree

Hide file tree

Showing 7 changed files with 158 additions and 35 deletions.
diff --git a/src/common/header.vue b/src/common/header.vue
@@ -54,11 +54,12 @@
                   </div>
                 </div>
               </div>
-              <div class="shop pr" @mouseover="cartShowState(true)" @mouseout="cartShowState(false)">
+              <div class="shop pr" @mouseover="cartShowState(true)" @mouseout="cartShowState(false)" ref="positionMsg">
                 <router-link to="shop"></router-link>
-                <span class="cart-num"><i :class="{no:cartList.length === 0}">{{totalNum}}</i></span>
+                <span class="cart-num"><i
+                  :class="{no:cartList.length === 0,move_in_cart:receiveInCart}">{{totalNum}}</i></span>
                 <!--购物车显示块-->
-                <div class="nav-user-wrapper pa" :class="{active:cartShow}">
+                <div class="nav-user-wrapper pa active" v-show="showCart">
                   <div class="nav-user-list">
                     <div class="full" v-show="cartList.length">
                       <!--购物列表-->
@@ -92,7 +93,7 @@
                         class="price-num">{{totalPrice}}</span></h5>
                         <h6>
                           <y-button classStyle="main-btn"
-                                    style="height: 40px;width: 100%;margin: 0;color: #fff;font-size: 14px"
+                                    style="height: 40px;width: 100%;margin: 0;color: #fff;font-size: 14px;line-height: 38px"
                                     text="去购物车"></y-button>
                         </h6>
                       </div>
@@ -134,12 +135,15 @@
         // 查询数据库的商品
         st: false,
         // 头部购物车显示
-        cartShow: false
+        cartShow: false,
+        positionL: 0,
+        positionT: 0,
+        timerCartShow: null // 定时隐藏购物车
       }
     },
     computed: {
       ...mapState([
-        'cartList', 'login'
+        'cartList', 'login', 'receiveInCart', 'showCart'
       ]),
       // 计算价格
       totalPrice () {
@@ -163,7 +167,7 @@
       }
     },
     methods: {
-      ...mapMutations(['ADD_CART', 'INIT_BUYCART']),
+      ...mapMutations(['ADD_CART', 'INIT_BUYCART', 'ADD_ANIMATION', 'SHOW_CART']),
       getName () {
 //        var name = sessionStorage.getItem('userMsg')
 //        if (name) {
@@ -174,7 +178,7 @@
       },
       // 购物车显示
       cartShowState (state) {
-        this.cartShow = state
+        this.SHOW_CART({showCart: state})
       },
       // 获取购物车商品
       getCartList () {
@@ -187,18 +191,21 @@
 //        getCartList({goodsList: arr}).then(res => {
 //          this.goodsSartList = res.result
 //        })
-
       },
       // 控制顶部
       navFixed () {
         var st = document.body.scrollTop
         st >= 100 ? this.st = true : this.st = false
+        let shop = document.querySelector('.shop')
+        this.positionL = shop.getBoundingClientRect().left
+        this.positionT = shop.getBoundingClientRect().top
+        this.ADD_ANIMATION({cartPositionL: this.positionL, cartPositionT: this.positionT})
       }
     },
     mounted () {
-      if (this.$route.path === '/goods') {
-        window.addEventListener('scroll', this.navFixed)
-      }
+      this.navFixed()
+      window.addEventListener('scroll', this.navFixed)
+      window.addEventListener('resize', this.navFixed)
       if (this.login) {
         this.getCartList()
       } else {
@@ -214,6 +221,82 @@
   @import "../assets/style/theme";
   @import "../assets/style/mixin";
 
+  .move_in_cart {
+    animation: mymove .5s ease-in-out;
+  }
+
+  @keyframes mymove {
+    0% {
+      transform: scale(1)
+    }
+    25% {
+      transform: scale(.8)
+    }
+    50% {
+      transform: scale(1.2)
+    }
+    75% {
+      transform: scale(.9)
+    }
+    100% {
+      transform: scale(1)
+    }
+  }
+
+  @-moz-keyframes mymove {
+    0% {
+      transform: scale(1)
+    }
+    25% {
+      transform: scale(.8)
+    }
+    50% {
+      transform: scale(1.2)
+    }
+    75% {
+      transform: scale(.9)
+    }
+    100% {
+      transform: scale(1)
+    }
+  }
+
+  @-webkit-keyframes mymove {
+    0% {
+      transform: scale(1)
+    }
+    25% {
+      transform: scale(.8)
+    }
+    50% {
+      transform: scale(1.2)
+    }
+    75% {
+      transform: scale(.9)
+    }
+    100% {
+      transform: scale(1)
+    }
+  }
+
+  @-o-keyframes mymove {
+    0% {
+      transform: scale(1)
+    }
+    25% {
+      transform: scale(.8)
+    }
+    50% {
+      transform: scale(1.2)
+    }
+    75% {
+      transform: scale(.9)
+    }
+    100% {
+      transform: scale(1)
+    }
+  }
+
   .header-box {
     background: $head-bgc;
     background-image: -webkit-linear-gradient(#000, #121212);
@@ -411,6 +494,7 @@
       float: left;
       margin-left: 21px;
       width: 61px;
+      z-index: 99;
       &:hover {
         a:before {
           content: " ";

diff --git a/src/components/YButton.vue b/src/components/YButton.vue
@@ -47,6 +47,9 @@
     text-align: center;
     > span {
       user-select: none;
+      display: inline-block;
+      width: 100%;
+      height: 100%;
     }
   }
 

diff --git a/src/components/mallGoods.vue b/src/components/mallGoods.vue
@@ -32,7 +32,7 @@
       return {}
     },
     methods: {
-      ...mapMutations(['ADD_CART', 'INIT_BUYCART', 'ADD_ANIMATION']),
+      ...mapMutations(['ADD_CART', 'INIT_BUYCART', 'ADD_ANIMATION', 'SHOW_CART']),
       goodsDetails (id) {
         this.$router.push({path: 'goodsDetails/productId=' + id})
       },
@@ -45,15 +45,18 @@
           }
           var dom = event.target // 获取点击的元素
           // 获取点击的坐标
-          let elLeft = dom.getBoundingClientRect().left + 182
-          let elTop = dom.getBoundingClientRect().top - 40
+          let elLeft = dom.getBoundingClientRect().left + 50
+          let elTop = dom.getBoundingClientRect().top + 15
           // 需要触发
           this.ADD_ANIMATION({moveShow: true, elLeft: elLeft, elTop: elTop, img: img})
+          if (!this.showCart) {
+            this.SHOW_CART({showCart: true})
+          }
         }
       }
     },
     computed: {
-      ...mapState(['login', 'showMoveImg'])
+      ...mapState(['login', 'showMoveImg', 'showCart'])
     },
     mounted () {
     },

diff --git a/src/page/Goods/goods.vue b/src/page/Goods/goods.vue
@@ -26,7 +26,7 @@
     </div>
     <transition @after-enter='afterEnter' @before-enter="beforeEnter">
       <!--整张图片-->
-      <div class="move_img" v-if="showMoveImg">
+      <div class="move_img" v-if="showMoveImg" :style="{left:(cartPositionL-15) + 'px',top:(cartPositionT-15) + 'px'}">
         <div><img :src="moveImgUrl"></div>
       </div>
     </transition>
@@ -102,24 +102,34 @@
           this.busy = false
         }, 500)
       },
+      // 监听图片进入购物车
+      listenInCart () {
+        this.ADD_ANIMATION({moveShow: false, receiveInCart: true})
+//        if (!this.receiveInCart) {
+//          this.ADD_ANIMATION({})
+//        } else {
+//        this.ADD_ANIMATION({receiveInCart: false})
+//        }
+      },
       //
       beforeEnter (el) {
-        el.style.transform = `translate3d(0,${this.elTop - 30}px,0)`
-        el.children[0].style.transform = `translate3d(${-(this.windowWidth - this.elLeft)}px,0,0)`
-        el.children[0].style.opacity = 0
+        el.style.transform = `translate3d(0,${this.elTop - this.cartPositionT}px,0)`
+        el.children[0].style.transform = `translate3d(${-(this.cartPositionL - this.elLeft)}px,0,0) scale(1.2)`
+        el.style.opacity = 1
       },
       afterEnter (el) {
         el.style.transform = `translate3d(0,0,0)`
-        el.children[0].style.transform = `translate3d(0,0,0)`
-        el.style.transition = 'transform .55s cubic-bezier(.2,1.35,.99,1.07)'
+        el.children[0].style.transform = `translate3d(0,0,0) scale(.3)`
+        el.style.transition = 'transform .55s cubic-bezier(.29,.55,.51,1.08)'
         el.children[0].style.transition = 'transform .55s linear'
-        el.children[0].style.opacity = 1
+        el.style.opacity = 0.3
+//        el.children[0].style.transform = ``
         // 动画结束
         el.children[0].addEventListener('transitionend', () => {
-          this.ADD_ANIMATION({moveShow: false})
+          this.listenInCart()
         })
         el.children[0].addEventListener('webkitAnimationEnd', () => {
-          this.ADD_ANIMATION({moveShow: false})
+          this.listenInCart()
         })
       }
     },
@@ -129,9 +139,11 @@
     mounted () {
       this.windowHeight = window.innerHeight
       this.windowWidth = window.innerWidth
+//      window.addEventListener('scroll', this.setPosition)
+//      window.addEventListener('resize', this.setPosition)
     },
     computed: {
-      ...mapState(['showMoveImg', 'elLeft', 'elTop', 'moveImgUrl'])
+      ...mapState(['cartPositionT', 'cartPositionL', 'showMoveImg', 'elLeft', 'elTop', 'moveImgUrl'])
     },
     components: {
       mallGoods
@@ -144,15 +156,13 @@
 
   .move_img {
     position: fixed;
-    top: 30px;
-    right: 120px;
+    /*top: 40px;:340 px;*/
     width: 45px;
-    z-index: 99;
+    z-index: 29;
     height: 45px;
     img {
       width: 100%;
       height: 100%;
-      opacity: .6;
       display: block;
       border-style: none;
       border-width: 0;

diff --git a/src/store/index.js b/src/store/index.js
@@ -11,7 +11,11 @@ const state = {
   showMoveImg: false, // 显示飞入图片
   elLeft: 0,
   elTop: 0,
-  moveImgUrl: null
+  moveImgUrl: null,
+  cartPositionT: 0, // 购物车位置
+  cartPositionL: 0,
+  receiveInCart: false, // 是否进入购物车
+  showCart: false // 是否显示购物车
 }
 
 export default new Vuex.Store({

diff --git a/src/store/mutation-types.js b/src/store/mutation-types.js
@@ -3,3 +3,4 @@ export const ADD_CART = 'ADD_CART'
 export const GET_USERINFO = 'GET_USERINFO'
 export const RECORD_USERINFO = 'RECORD_USERINFO'
 export const ADD_ANIMATION = 'ADD_ANIMATION'
+export const SHOW_CART = 'SHOW_CART'
diff --git a/src/store/mutations.js b/src/store/mutations.js
@@ -3,7 +3,8 @@ import {
   ADD_CART,
   GET_USERINFO,
   RECORD_USERINFO,
-  ADD_ANIMATION
+  ADD_ANIMATION,
+  SHOW_CART
 } from './mutation-types'
 import {setStore, getStore} from '../utils/storage'
 export default {
@@ -68,11 +69,28 @@ export default {
     setStore('buyCart', cart)
   },
   // 加入购物车动画
-  [ADD_ANIMATION] (state, {moveShow, elLeft = 0, elTop = 0, img}) {
+  [ADD_ANIMATION] (state, {moveShow, elLeft, elTop, img, cartPositionT, cartPositionL, receiveInCart}) {
     state.showMoveImg = moveShow
-    state.elLeft = elLeft
-    state.elTop = elTop
+    if (elLeft) {
+      state.elLeft = elLeft
+      state.elTop = elTop
+    }
     state.moveImgUrl = img
+    state.receiveInCart = receiveInCart
+    if (cartPositionT) {
+      state.cartPositionT = cartPositionT
+      state.cartPositionL = cartPositionL
+    }
+  },
+  [SHOW_CART] (state, {showCart}) {
+    let timer = null
+    state.showCart = showCart
+    clearTimeout(timer)
+    if (showCart) {
+      timer = setTimeout(() => {
+        state.showCart = false
+      }, 5000)
+    }
   },
   // 记录用户信息
   [RECORD_USERINFO] (state, info) {