修改移动端全局搜索

components/common/buyOrCar/buyComponent.vue

@@ -6,6 +6,7 @@
             :class="{'disabled': disabledFlag}"
             @click="buyNow(true, $event)">
       <span class="watch">立即购买</span>
+
     </button>
     <button style="z-index: 1000;"
             ref="addCartBtn"
@@ -17,6 +18,7 @@
             @click="buyNow(false, $event)">
       <span class="watch">加入购物车</span>
     </button>
+
   </div>
 </template>
 
@@ -24,88 +26,104 @@
   export default {
     props: ['item', 'disabledFlag', 'btnColor'],
     methods: {
+      drop(el) {
+        this.$store.commit('option/SET_BALLSLIST_SUCCESS', el)
+      },
       buyNow: function (isBuy, event) {
+        this.drop(event.target)
+        // let $el = this.$refs.ballCard
+        // let transform = whichTransitionEvent()
+        // let _shopCar = document.getElementById('shopCar')
+        // let _eltop = event.currentTarget.getBoundingClientRect().top - 22
+        // let _elleft = event.currentTarget.getBoundingClientRect().left - 278
+        // // $el.style = `left: ${_elleft}px;top:${_eltop}px`
+        // $el.style[transform] = `translate3d(${_elleft}px,${_eltop}px,0)`
+        // $el.style.transition = 'all 0.5s'
+        // let _shopCarTop = _shopCar.getBoundingClientRect().top
+        // let _shopCarLeft = _shopCar.getBoundingClientRect().left
+        // $el.style[transform] = `translate3d(${_shopCarLeft}px,${_shopCarTop}px,0)`
         event.stopPropagation()
-        if (!this.$store.state.option.user.logged) {
-          this.$http.get('/login/page', {params: {returnUrl: window.location.href}}).then(response => {
-            if (response.data) {
-              window.location.href = response.data.content + '&baseUrl=' + encodeURIComponent(window.location.protocol + '//' + window.location.host + response.data.baseUrl)
-            }
-          })
-        } else {
-          if (this.item && !this.disabledFlag) {
-            if (isBuy) {
-              this.$http.post('/trade/order/buyNow', [{
-                uuid: this.item.uuid,
-                batchCode: this.item.batchCode,
-                number: this.item.minBuyQty,
-                storeid: this.item.storeid ? this.item.storeid : this.item.storeId,
-                storeUuid: this.item.storeid ? this.item.storeid : this.item.storeId,
-                currencyName: this.item.currencyName,
-                minPackQty: this.item.minPackQty
-              }])
-                .then(response => {
-                  if (response.data.success) {
-                    if (response.data.message) {
-                      this.$message({
-                        message: response.data.message,
-                        type: 'success'
-                      })
-                      window.setTimeout(function () {
-                        window.location.href = '/user#/order/pay/' + this.baseUtils.enidfilter(response.data.data.orderid)
-                      }, 1000)
-                    } else {
-                      window.location.href = '/user#/order/pay/' + this.baseUtils.enidfilter(response.data.data.orderid)
-                    }
-                  } else {
-                    if (response.data.data && response.data.data.unvailable === 1) {
-                      this.$message.error('产品信息已失效，请刷新页面')
-                    } else {
-                      this.$message.error(response.data.message)
-                    }
-                  }
-                }, err => {
-                  console.log(err)
-                  if (this.item.minBuyQty > this.item.reserve) {
-                    this.$message.error('商品' + this.item.code + '的库存已经不满足最小起订量')
-                  }
-                })
-            } else {
-              this.$http.post('/trade/cart/add', {
-                uuid: this.item.uuid,
-                batchCode: this.item.batchCode,
-                number: this.item.minBuyQty,
-                storeid: this.item.storeid ? this.item.storeid : this.item.storeId,
-                storeUuid: this.item.storeid ? this.item.storeid : this.item.storeId,
-                currencyName: this.item.currencyName,
-                minPackQty: this.item.minPackQty
-              })
-                .then(response => {
-                  if (response.data.success) {
-                    if (response.data.message) {
-                      this.$message({
-                        message: '添加购物车成功，但商品信息有更新',
-                        type: 'success'
-                      })
-                    } else {
-                      this.$message({
-                        message: '添加购物车成功',
-                        type: 'success'
-                      })
-                    }
-                  } else {
-                    if (response.data.code === 2) {
-                      this.$message.error('库存已不满足最小起订量')
-                    } else if (response.data.message === '该产品已失效') {
-                      this.$message.error(response.data.message + '，请刷新页面')
-                    } else {
-                      this.$message.error(response.data.message)
-                    }
-                  }
-                })
-            }
-          }
-        }
+        return
+        // if (!this.$store.state.option.user.logged) {
+        //   this.$http.get('/login/page', {params: {returnUrl: window.location.href}}).then(response => {
+        //     if (response.data) {
+        //       window.location.href = response.data.content + '&baseUrl=' + encodeURIComponent(window.location.protocol + '//' + window.location.host + response.data.baseUrl)
+        //     }
+        //   })
+        // } else {
+        //   if (this.item && !this.disabledFlag) {
+        //     if (isBuy) {
+        //       this.$http.post('/trade/order/buyNow', [{
+        //         uuid: this.item.uuid,
+        //         batchCode: this.item.batchCode,
+        //         number: this.item.minBuyQty,
+        //         storeid: this.item.storeid ? this.item.storeid : this.item.storeId,
+        //         storeUuid: this.item.storeid ? this.item.storeid : this.item.storeId,
+        //         currencyName: this.item.currencyName,
+        //         minPackQty: this.item.minPackQty
+        //       }])
+        //         .then(response => {
+        //           if (response.data.success) {
+        //             if (response.data.message) {
+        //               this.$message({
+        //                 message: response.data.message,
+        //                 type: 'success'
+        //               })
+        //               window.setTimeout(function () {
+        //                 window.location.href = '/user#/order/pay/' + this.baseUtils.enidfilter(response.data.data.orderid)
+        //               }, 1000)
+        //             } else {
+        //               window.location.href = '/user#/order/pay/' + this.baseUtils.enidfilter(response.data.data.orderid)
+        //             }
+        //           } else {
+        //             if (response.data.data && response.data.data.unvailable === 1) {
+        //               this.$message.error('产品信息已失效，请刷新页面')
+        //             } else {
+        //               this.$message.error(response.data.message)
+        //             }
+        //           }
+        //         }, err => {
+        //           console.log(err)
+        //           if (this.item.minBuyQty > this.item.reserve) {
+        //             this.$message.error('商品' + this.item.code + '的库存已经不满足最小起订量')
+        //           }
+        //         })
+        //     } else {
+        //       this.$http.post('/trade/cart/add', {
+        //         uuid: this.item.uuid,
+        //         batchCode: this.item.batchCode,
+        //         number: this.item.minBuyQty,
+        //         storeid: this.item.storeid ? this.item.storeid : this.item.storeId,
+        //         storeUuid: this.item.storeid ? this.item.storeid : this.item.storeId,
+        //         currencyName: this.item.currencyName,
+        //         minPackQty: this.item.minPackQty
+        //       })
+        //         .then(response => {
+        //           if (response.data.success) {
+        //             if (response.data.message) {
+        //               this.$message({
+        //                 message: '添加购物车成功，但商品信息有更新',
+        //                 type: 'success'
+        //               })
+        //             } else {
+        //               this.$message({
+        //                 message: '添加购物车成功',
+        //                 type: 'success'
+        //               })
+        //             }
+        //           } else {
+        //             if (response.data.code === 2) {
+        //               this.$message.error('库存已不满足最小起订量')
+        //             } else if (response.data.message === '该产品已失效') {
+        //               this.$message.error(response.data.message + '，请刷新页面')
+        //             } else {
+        //               this.$message.error(response.data.message)
+        //             }
+        //           }
+        //         })
+        //     }
+        //   }
+        // }
       },
       setHoverStyle: function (isShow) {
         if (this.btnColor) {
@@ -126,8 +144,8 @@
     height: 30px;
     font-size: 12px;
     border: 1px solid #5078cb;
+    position: relative;
   }
-
   .btn-add-cart {
     margin-top: 10px;
     color: #214797;

components/default/RightBar.vue

@@ -8,7 +8,7 @@
           </a>
           <div class="sidebar-menu"><a @click="goShop" title="我的店铺" target="_blank">我的店铺</a></div>
         </li>
-        <li class="right-bar-item" @mouseenter="loadCarCount()">
+        <li class="right-bar-item" @mouseenter="loadCarCount()" id="shopCar">
           <a @click="goCart" class="title" target="_blank">
             <i class="iconfont icon-shopping-cart icon-xlg"></i>
           </a>
@@ -77,6 +77,14 @@
       size="tiny">
       <message-board @pageEvent="listenPage" @openBoardEvent="listenOpen"/>
     </el-dialog>
+
+    <div v-for="(ball, index) in balls" v-bind:key="index">
+      <transition name="drop" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
+        <div class="ball" v-show="ball.show">
+          <div class="inner inner-hook"></div>
+        </div>
+      </transition>
+    </div>
   </div>
 </template>
 <script>
@@ -92,13 +100,18 @@
         count: 3,
         currentPage: 1,
         chatCount: 0,
-        showMyshop: false
+        showMyshop: false,
+        // balls: [],
+        dropBalls: []
       }
     },
     components: {
       MessageBoard
     },
     computed: {
+      balls() {
+        return this.$store.state.option.ballsList
+      },
       user () {
         // console.log(this.$store.state.option)
         return this.$store.state.option.user
@@ -126,6 +139,37 @@
       }
     },
     methods: {
+      beforeEnter(el) {
+        let count = this.balls.length
+        while (count--) {
+          let ball = this.balls[count]
+          if (ball.show) {
+            let rect = ball.el.getBoundingClientRect()
+            let x = -(rect.right - rect.left + 56)
+            let y = -(rect.top + window.innerHeight * 0.6)
+            el.style.webkitTransform = `translate3d(0, ${y}px,0)`
+            el.style.transform = `translate3d(0, ${y}px,0)`
+            el.style.display = ''
+            let inner = el.getElementsByClassName("inner-hook")[0]
+            inner.style.webkitTransform = `translate3d(${x}px, 0, 0)`
+            inner.style.transform = `translate3d(${x}px,0,0)`
+          }
+        }
+      },
+      enter(el, done) {
+        let rf = el.offestHeight
+        this.$nextTick(() => {
+          el.style.webkitTransform = 'translate3d(0, 0, 0)'
+          el.style.transform = 'translate3d(0, 0, 0)'
+          let inner = el.getElementsByClassName('inner-hook')[0]
+          inner.style.webkitTransform = 'translate3d(0, 0, 0)'
+          inner.style.transform = 'translate3d(0, 0, 0)'
+          el.addEventListener('transitionend', done)
+        })
+      },
+      afterEnter(el) {
+        this.$store.commit('option/SET_BALLSLIST_SUCCESS_DROP', el)
+      },
       listenPage: function (p) {
         this.page = p
         this.$store.dispatch('getMessageBoardInformation', {page: this.page, count: 3})
@@ -254,6 +298,16 @@
             })
         }
       }
+    },
+    mounted() {
+      this.$nextTick(() => {
+        let length = document.getElementsByClassName('ball')
+        let _top = parseInt(window.innerHeight * 0.6) + 36
+        for (let i = 0; i < length.length; i++) {
+          length[i].style.top = _top + 'px'
+          length[i].style.left = window.innerWidth + 'px'
+        }
+      })
     }
   }
 </script>
@@ -534,4 +588,18 @@ i {
     }
   }
 }
+.ball {
+  position: fixed;
+  right: 0;
+  z-index: 200;
+  bottom: calc(100vh * 0.4);
+  transition: all 0.4s cubic-bezier(0.49,-0.29,0.75, 0.14);
+}
+.ball .inner {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: rgb(0, 160, 220);
+  transition: all 0.4s linear
+}
 </style>

store/option.js

@@ -37,7 +37,16 @@ export const state = () => ({
     data: {}
   },
   messageType: '',
-  showMobileFooter: true
+  showMobileFooter: true,
+  // 定义小球数量为5个。如果遇到问题，这个地方需要重新处理
+  ballsList: [
+    {show: false},
+    {show: false},
+    {show: false},
+    {show: false},
+    {show: false}
+  ],
+  dropBalls: []
 })
 
 export const mutations = {
@@ -123,5 +132,23 @@ export const mutations = {
   },
   SET_SHOW_MOBILE_FOOTER (state, result) {
     state.showMobileFooter = result
+  },
+  SET_BALLSLIST_SUCCESS(state, result) {
+    for (let i = 0; i < state.ballsList.length; i++) {
+      let ball = state.ballsList[i]
+      if (!ball.show) {
+        ball.show = true
+        ball.el = result
+        state.dropBalls.push(ball)
+        return
+      }
+    }
+  },
+  SET_BALLSLIST_SUCCESS_DROP(state, result) {
+    let ball = state.dropBalls.shift()
+    if (ball) {
+      ball.show = false
+      result.style.display = 'none'
+    }
   }
 }