处理手机弹出窗后脚部内容影响问题

components/store/common/StoreTitle.vue

@@ -58,7 +58,7 @@ export default {
 	#title-fragment .shop-banner {
 		float: left;
 		position: relative;
-		width: 970px;
+		width: 960px;
 		height: 220px;
 		border: 1px solid #e8e8e8;
 		border-left: none;
@@ -66,7 +66,7 @@ export default {
 	}
 
 	#title-fragment .shop-banner img {
-		width: 970px;
+		width: 960px;
 		height: 220px;
 	}
 

layouts/mobile.vue

@@ -2,7 +2,7 @@
   <div id="mobile">
     <mobile-header></mobile-header>
     <nuxt/>
-    <mobile-footer></mobile-footer>
+    <mobile-footer v-show="showMobileFooter"></mobile-footer>
   </div>
 </template>
 <script>
@@ -14,6 +14,11 @@
       MobileFooter
     },
 //    middleware: 'authenticated',
+    computed: {
+      showMobileFooter () {
+        return this.$store.state.option.showMobileFooter
+      }
+    },
     head () {
       return {
         meta: [

pages/mobile/center/user/cart.vue

@@ -30,7 +30,7 @@
                   <p class="param"><span class="title">数量(PCS)：</span>
                     <span class="input-line inline-block">
                     <span class="inline-block" @click="setGoods('sub', goods)" :class="{disab: !goods.goods.canSub}">-</span>
-                    <input type="number" v-model="goods.goods.purchaseNumber" @blur="setGoods('set', goods)">
+                    <input type="number" v-model="goods.goods.purchaseNumber" @blur="blurEvent('set', goods)" @focus="focusEvent()">
                     <span class="inline-block" @click="setGoods('add', goods)" :class="{disab: !goods.goods.canAdd}">+</span>
                   </span>
                   </p>
@@ -44,7 +44,7 @@
           </ul>
         </li>
       </ul>
-      <div class="buy-wrap">
+      <div class="buy-wrap" ref="buyWrap">
         <div class="wrap-select line">
           <label class="mobile-cart-check" :class="{'active': isAllChecked}">
             <input type="checkbox" @change="setActive('all')">
@@ -172,6 +172,17 @@
       }
     },
     methods: {
+      // 失去焦点事件
+      blurEvent (type, obj) {
+        this.$refs.buyWrap.hidden = false
+        this.$store.commit('option/SET_SHOW_MOBILE_FOOTER', true)
+        this.setGoods(type, obj)
+      },
+      // 获得焦点事件
+      focusEvent () {
+        this.$refs.buyWrap.hidden = true
+        this.$store.commit('option/SET_SHOW_MOBILE_FOOTER', false)
+      },
       getStoreTypeColor: function (type) {
         let tmp = null
         switch (type) {

pages/mobile/center/user/pay/_orderId.vue

@@ -38,7 +38,7 @@
                   <div class="ps-goods-item"><span>数量(PCS)：</span>
                     <span class="input-line inline-block">
                     <span class="inline-block" @click="setGoods('sub', goods)" :class="{disab: !goods.goods.canSub}">-</span>
-                    <input type="number" v-model="goods.goods.purchaseNumber" @blur="setGoods('set', goods)">
+                    <input type="number" v-model="goods.goods.purchaseNumber" @blur="blurEvent('set', goods)" @focus="focusEvent()">
                     <span class="inline-block" @click="setGoods('add', goods)" :class="{disab: !goods.goods.canAdd}">+</span>
                   </span>
                   </div>
@@ -146,7 +146,7 @@
         <!--<i class="iconfont icon-xiangyou"></i>-->
       </div>
     </div>
-    <div class="buy-wrap">
+    <div class="buy-wrap" ref="buyWrap">
       <div class="fr">
         <span class="title">总计：</span><span class="ol-price price inline-block text-ellipse"><span>{{payData.currency | currencyFilter}}</span>
         {{allPriceNew | priceFilter}}</span>
@@ -528,6 +528,17 @@
       this.initOrderData()
     },
     methods: {
+      // 失去焦点事件
+      blurEvent (type, obj) {
+        this.$refs.buyWrap.hidden = false
+        this.$store.commit('option/SET_SHOW_MOBILE_FOOTER', true)
+        this.setGoods(type, obj)
+      },
+      // 获得焦点事件
+      focusEvent () {
+        this.$refs.buyWrap.hidden = true
+        this.$store.commit('option/SET_SHOW_MOBILE_FOOTER', false)
+      },
       initOrderData () {
         this.payData.orderDetails.forEach(item => {
           item.goods = item.goodsHistory

pages/mobile/order/details.vue

@@ -4,11 +4,7 @@
       <div class="order-details-top">
         <div class="orderNumber clearfix">
           <div class="pull-left">订单号：<span>{{orderList.orderid}}</span></div>
-          <div class="pull-right">{{orderList.createtime || orderList.creattime | time}}</div>
-        </div>
-        <div class="orderStatus clearfix">
-          <div class="clearfix">
-            <span style="color: #666">订单状态：</span>
+          <div class="pull-right">
             <template v-if="vendorType === 'buyer'">
               <span v-if="orderList.status === 404">待收货</span>
               <span v-if="orderList.status === 404" style="color: #666">{{restTime()}}</span>
@@ -1032,28 +1028,6 @@
             }
           }
         }
-        .orderStatus {
-          background: #fff;
-          padding: 0 0.2rem;
-          height: 0.88rem;
-          line-height: 0.88rem;
-          margin-bottom: 0.2rem;
-          .clearfix {
-            font-size: 0.28rem;
-            color: #333;
-            span {
-              float: left;
-              color: #333;
-            }
-            img {
-              width: 0.18rem;
-              height: 0.32rem;
-              vertical-align: top;
-              margin-top: 0.18rem;
-              margin-left: 0.1rem;
-            }
-          }
-        }
         .sendGoods_buyer {
           background: #fff;
           padding: 0.3rem 0.2rem;

store/option.js

@@ -36,7 +36,8 @@ export const state = () => ({
     fetching: false,
     data: {}
   },
-  messageType: ''
+  messageType: '',
+  showMobileFooter: true
 })
 
 export const mutations = {
@@ -119,5 +120,8 @@ export const mutations = {
   },
   GET_MESSAGETYPE (state, result) {
     state.messageType = result || ''
+  },
+  SET_SHOW_MOBILE_FOOTER (state, result) {
+    state.showMobileFooter = result
   }
 }