解决弹窗滚动的问题

components/mobile/applyPurchase/SayPrice.vue

@@ -1,61 +1,63 @@
 <template>
-  <div class="mobile-modal" v-if="showSayPriceBox">
+  <div class="mobile-modal" v-show="showSayPriceBox" @touchmove.self="preventTouchMove($event)">
     <div class="mobile-modal-box">
       <div class="mobile-modal-header">编辑报价<i class="icon-guanbi iconfont" @click="cancel"></i></div>
-      <div class="say-price">
-        <div class="base-info">
-          <div class="content-line">
-            类目(产品名称)：<span>{{purchaseDetail.prodTitle || '-'}}</span>
+      <div class="say-price"  ref="mobileModalBox">
+        <div>
+          <div class="base-info">
+            <div class="content-line">
+              类目(产品名称)：<span>{{purchaseDetail.prodTitle || '-'}}</span>
+            </div>
+            <div class="content-line">
+              型号：<span>{{purchaseDetail.cmpCode || '-'}}</span>
+            </div>
+            <div class="content-line">
+              品牌：<span>{{purchaseDetail.inbrand || '-'}}</span>
+            </div>
+            <div class="content-line">
+              规格：<span>{{purchaseDetail.spec || '-'}}</span>
+            </div>
+            <div class="content-line">
+              采购数量(PCS)：<span>{{purchaseDetail.needquantity || '-'}}</span>
+            </div>
+            <!--<div class="content-line">
+              币种：<span>{{purchaseDetail.custCurrency || '不限'}}</span>
+            </div>
+            <div class="content-line">
+              生产日期：<span>{{purchaseDetail.produceDate || '-'}}</span>
+            </div>-->
+            <div class="content-line">
+              截止日期：<span>{{purchaseDetail.endDate | date}}</span>
+            </div>
           </div>
-          <div class="content-line">
-            型号：<span>{{purchaseDetail.cmpCode || '-'}}</span>
-          </div>
-          <div class="content-line">
-            品牌：<span>{{purchaseDetail.inbrand || '-'}}</span>
-          </div>
-          <div class="content-line">
-            规格：<span>{{purchaseDetail.spec || '-'}}</span>
-          </div>
-          <div class="content-line">
-            采购数量(PCS)：<span>{{purchaseDetail.needquantity || '-'}}</span>
-          </div>
-          <!--<div class="content-line">
-            币种：<span>{{purchaseDetail.custCurrency || '不限'}}</span>
-          </div>
-          <div class="content-line">
-            生产日期：<span>{{purchaseDetail.produceDate || '-'}}</span>
-          </div>-->
-          <div class="content-line">
-            截止日期：<span>{{purchaseDetail.endDate | date}}</span>
+          <div class="form-list">
+            <div class="form-title">
+              <span class="fl">价格梯度<span>(PCS)</span></span>
+              <span class="fr">
+            <!--<span v-text="sayPriceObj.currency" @click="setShowCurrencyList($event)"></span>-->
+            <span v-text="sayPriceObj.currency" @click="setShowCurrencyList($event)"></span>
+            <!--<span v-if="purchaseDetail.custCurrency" v-text="purchaseDetail.custCurrency"></span>-->
+            <img v-if="!showCurrencyList" src="/images/mobile/@2x/applyPurchase/currency-arrow-down.png" alt="">
+            <img v-if="showCurrencyList" src="/images/mobile/@2x/applyPurchase/currency-arrow-up.png" alt="">
+            <ul v-if="showCurrencyList">
+              <li @click="setCurrency('RMB')">RMB</li>
+              <li @click="setCurrency('USD')">USD</li>
+            </ul>
+          </span>
+            </div>
+            <div class="form-item" v-for="(reply, index) in sayPriceObj.replies">
+              <input type="text" placeholder="分段数量" class="fl" @blur="onReplyLapQtyBlur(index)" @input="onReplyLapQtyInput(index)" v-model="reply.lapQty">
+              <input type="text" placeholder="分段单价" class="fr" @input="onReplyPriceInput(index)" @blur="onReplyPriceBlur(index)" v-model="reply.price">
+              <i class="iconfont icon-minus" v-if="index > 0" @click="setReplies('sub', index)"></i>
+              <i class="iconfont icon-add" v-if="index == 0 && sayPriceObj.replies.length < 5" @click="setReplies('add', index)"></i>
+            </div>
+            <div class="date">
+              <span>交期(天)</span>
+              <input type="text" placeholder="最大值" @input="onLeadtimeInput" @blur="onLeadtimeBlur" v-model="sayPriceObj.leadtime" class="fr">
+            </div>
+            <a class="say-price-btn" @click="commitSayPrice">确定</a>
           </div>
         </div>
-        <div class="form-list">
-          <div class="form-title">
-            <span class="fl">价格梯度<span>(PCS)</span></span>
-            <span class="fr">
-          <!--<span v-text="sayPriceObj.currency" @click="setShowCurrencyList($event)"></span>-->
-          <span v-text="sayPriceObj.currency" @click="setShowCurrencyList($event)"></span>
-          <!--<span v-if="purchaseDetail.custCurrency" v-text="purchaseDetail.custCurrency"></span>-->
-          <img v-if="!showCurrencyList" src="/images/mobile/@2x/applyPurchase/currency-arrow-down.png" alt="">
-          <img v-if="showCurrencyList" src="/images/mobile/@2x/applyPurchase/currency-arrow-up.png" alt="">
-          <ul v-if="showCurrencyList">
-            <li @click="setCurrency('RMB')">RMB</li>
-            <li @click="setCurrency('USD')">USD</li>
-          </ul>
-        </span>
-          </div>
-          <div class="form-item" v-for="(reply, index) in sayPriceObj.replies">
-            <input type="text" placeholder="分段数量" class="fl" @blur="onReplyLapQtyBlur(index)" @input="onReplyLapQtyInput(index)" v-model="reply.lapQty">
-            <input type="text" placeholder="分段单价" class="fr" @input="onReplyPriceInput(index)" @blur="onReplyPriceBlur(index)" v-model="reply.price">
-            <i class="iconfont icon-minus" v-if="index > 0" @click="setReplies('sub', index)"></i>
-            <i class="iconfont icon-add" v-if="index == 0 && sayPriceObj.replies.length < 5" @click="setReplies('add', index)"></i>
-          </div>
-          <div class="date">
-            <span>交期(天)</span>
-            <input type="text" placeholder="最大值" @input="onLeadtimeInput" @blur="onLeadtimeBlur" v-model="sayPriceObj.leadtime" class="fr">
-          </div>
-          <a class="say-price-btn" @click="commitSayPrice">确定</a>
-        </div>
         <remind-box :title="remindText" :timeoutCount="timeoutCount"></remind-box>
       </div>
     </div>
@@ -112,6 +114,7 @@
     mounted () {
       this.$nextTick(() => {
         document.addEventListener('click', this.checkCurrencySelect)
+        this._initscroll()
       })
     },
     filters: {
@@ -137,6 +140,9 @@
       }
     },
     methods: {
+      touchmove(e) {
+        e.preventDefault()
+      },
       cancel: function () {
         this.$emit('cancelSayPriceAction', false)
       },
@@ -172,6 +178,7 @@
         } else if (type === 'sub' && this.sayPriceObj.replies.length > 1) {
           this.sayPriceObj.replies.splice(index, 1)
         }
+        this._initscroll()
       },
       commitSayPrice: function () {
         if (this.checkValid()) {
@@ -315,7 +322,7 @@
         background: #f3f3f3;
         padding: .18rem 0;
         width: 100%;
-        overflow-y: auto;
+        overflow: hidden;
         height: 90%;
         .form-list {
           height: 7.53rem;

components/mobile/applyPurchase/SayPriceInfo.vue

@@ -1,75 +1,76 @@
 <template>
-  <div class="mobile-modal" @touchmove="preventTouchMove($event)">
+  <div class="mobile-modal" @touchmove.self="preventTouchMove($event)">
     <div class="mobile-modal-box">
       <div class="mobile-modal-header">{{purchaseDetail.agreed == 1 || agreed == 1 ? '已采纳' : '已报价'}}<i class="icon-guanbi iconfont" @click="cancel"></i></div>
-      <div class="say-price-info">
-        <div v-if="isBuyer">
-          <div class="base-info">
-            <div class="content-line">
-              类目(产品名称)：<span>{{purchaseDetail.prodTitle || '-'}}</span>
-            </div>
-            <div class="content-line">
-              型号：<span>{{purchaseDetail.cmpCode || '-'}}</span>
-            </div>
-            <div class="content-line">
-              品牌：<span>{{purchaseDetail.inbrand || '-'}}</span>
-            </div>
-            <div class="content-line">
-              规格：<span>{{purchaseDetail.spec || '-'}}</span>
-            </div>
-            <div class="content-line">
-              采购数量(PCS)：<span>{{purchaseDetail.needquantity || '-'}}</span>
-            </div>
-            <!--<div class="content-line">
-              币种：<span>{{purchaseDetail.custCurrency || '不限'}}</span>
-            </div>
-            <div class="content-line">
-              生产日期：<span>{{purchaseDetail.produceDate || '-'}}</span>
-            </div>-->
-            <div class="content-line">
-              截止日期：<span>{{purchaseDetail.endDate | date}}</span>
-            </div>
-          </div>
-          <div class="base-info">
-            <div class="content-line">
-              买家：<span>{{purchaseDetail.inquiry && purchaseDetail.inquiry.enterprise ? purchaseDetail.inquiry.enterprise.enName : purchaseDetail.userName}}</span>
+      <div class="say-price-info" ref="mobileModalBox">
+        <div>
+          <div v-if="isBuyer">
+            <div class="base-info">
+              <div class="content-line">
+                类目(产品名称)：<span>{{purchaseDetail.prodTitle || '-'}}</span>
+              </div>
+              <div class="content-line">
+                型号：<span>{{purchaseDetail.cmpCode || '-'}}</span>
+              </div>
+              <div class="content-line">
+                品牌：<span>{{purchaseDetail.inbrand || '-'}}</span>
+              </div>
+              <div class="content-line">
+                规格：<span>{{purchaseDetail.spec || '-'}}</span>
+              </div>
+              <div class="content-line">
+                采购数量(PCS)：<span>{{purchaseDetail.needquantity || '-'}}</span>
+              </div>
+              <!--<div class="content-line">
+                币种：<span>{{purchaseDetail.custCurrency || '不限'}}</span>
+              </div>
+              <div class="content-line">
+                生产日期：<span>{{purchaseDetail.produceDate || '-'}}</span>
+              </div>-->
+              <div class="content-line">
+                截止日期：<span>{{purchaseDetail.endDate | date}}</span>
+              </div>
             </div>
-            <div class="content-line">
-              联系电话：<span>{{purchaseDetail.userTel || '-'}}</span>
+            <div class="base-info">
+              <div class="content-line">
+                买家：<span>{{purchaseDetail.inquiry && purchaseDetail.inquiry.enterprise ? purchaseDetail.inquiry.enterprise.enName : purchaseDetail.userName}}</span>
+              </div>
+              <div class="content-line">
+                联系电话：<span>{{purchaseDetail.userTel || '-'}}</span>
+              </div>
             </div>
-          </div>
-          <div class="base-info say-info" v-for="(item, index) in purchaseDetail.qutations" @click="selectQutation(index)">
-            <img v-if="agreed != 1 && (!item.agreed || item.agreed !== 1) && activeIndex == index" src="/images/mobile/@2x/applyPurchase/say-price-check.png" alt="">
-            <img v-if="agreed != 1 && (!item.agreed || item.agreed !== 1) && activeIndex != index" src="/images/mobile/@2x/applyPurchase/say-price-default.png" alt="">
-            <img v-if="item.agreed == 1" src="/images/mobile/@2x/applyPurchase/say-price-accept.png" alt="">
-            <div class="content-line">
-              {{item.vendName}}
-            </div>
-            <div class="content-line">
-              报价人：<span v-if="item.user">{{item.user.userName}}</span>
-              <span v-else>-</span>
-            </div>
-            <div class="content-line">
-              电话：<span v-if="item.user">{{item.user.userTel}}</span>
-              <span v-else>-</span>
-            </div>
-            <div class="content-line date">
-              交期(天)：<span>{{item.leadtime}}</span>
-            </div>
-            <p>{{item.offerTime | date}}</p>
-            <div class="price-level">
-              <p>价格梯度：<span>(pcs)</span></p>
-              <ul>
-                <li v-for="replie in item.replies">
-                  <span>{{replie.lapQty ? replie.lapQty + '+' : '-'}}</span>
-                  <span>{{replie.price ? (item.currency == 'USD' ? '$' : '¥') + replie.price : '-'}}</span>
-                </li>
-              </ul>
+            <div class="base-info say-info" v-for="(item, index) in purchaseDetail.qutations" @click="selectQutation(index)">
+              <img v-if="agreed != 1 && (!item.agreed || item.agreed !== 1) && activeIndex == index" src="/images/mobile/@2x/applyPurchase/say-price-check.png" alt="">
+              <img v-if="agreed != 1 && (!item.agreed || item.agreed !== 1) && activeIndex != index" src="/images/mobile/@2x/applyPurchase/say-price-default.png" alt="">
+              <img v-if="item.agreed == 1" src="/images/mobile/@2x/applyPurchase/say-price-accept.png" alt="">
+              <div class="content-line">
+                {{item.vendName}}
+              </div>
+              <div class="content-line">
+                报价人：<span v-if="item.user">{{item.user.userName}}</span>
+                <span v-else>-</span>
+              </div>
+              <div class="content-line">
+                电话：<span v-if="item.user">{{item.user.userTel}}</span>
+                <span v-else>-</span>
+              </div>
+              <div class="content-line date">
+                交期(天)：<span>{{item.leadtime}}</span>
+              </div>
+              <p>{{item.offerTime | date}}</p>
+              <div class="price-level">
+                <p>价格梯度：<span>(pcs)</span></p>
+                <ul>
+                  <li v-for="replie in item.replies">
+                    <span>{{replie.lapQty ? replie.lapQty + '+' : '-'}}</span>
+                    <span>{{replie.price ? (item.currency == 'USD' ? '$' : '¥') + replie.price : '-'}}</span>
+                  </li>
+                </ul>
+              </div>
             </div>
+            <a class="say-price-btn" v-if="purchaseDetail.agreed != 1" @click="acceptQutation">采纳报价</a>
           </div>
-          <a class="say-price-btn" v-if="purchaseDetail.agreed != 1" @click="acceptQutation">采纳报价</a>
-        </div>
-        <div v-if="!isBuyer">
+          <div v-if="!isBuyer">
           <div class="base-info">
             <div class="content-line">
               类目(产品名称)：<span>{{purchaseDetail.prodTitle || '-'}}</span>
@@ -128,6 +129,7 @@
             </div>
           </div>
         </div>
+        </div>
         <remind-box :title="remindText" :timeoutCount="timeoutCount"></remind-box>
       </div>
     </div>
@@ -205,6 +207,11 @@
         this.remindText = str
         this.timeoutCount ++
       }
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this._initscroll()
+      })
     }
   }
 </script>

components/mobile/search/MainSearch.vue

@@ -121,7 +121,7 @@
         this.$emit('cancelSearchAction')
       },
       cancelFocus: function () {
-        document.getElementById('search-box').blur()
+        // document.getElementById('search-box').blur()
       },
       deleteHistory () {
         this.$http.delete('/search/searchHistory').then(response => {

plugins/mixin.js

@@ -2,6 +2,7 @@
    如果nuxt框架为 1.0.0以上，vuex属性状态这里可以优化
 
 */
+import BScroll from 'better-scroll'
 import Vue from 'vue'
 // import { mapState } from 'vuex'
 
@@ -35,6 +36,15 @@ Vue.mixin({
       if (e) {
         e.stopPropagation()
       }
+    },
+    _initscroll() {
+      if (!this.initSctoll) {
+        this.initSctoll = new BScroll(this.$refs.mobileModalBox, {
+          click: true
+        })
+      } else {
+        this.initSctoll.refresh()
+      }
     }
   }
 })