'拉取scroll样式'

src/pages/distributorSign/contract-list.vue

@@ -15,18 +15,18 @@
     <Tab @getTabNum="getTabNum"/>
     <div class="hinput">
       <div class="search-box">
-        <input type="text" placeholder="请输入合同号/承租人名称">
+        <input v-model="searchInput" type="text" placeholder="请输入合同号/承租人名称">
         <img src="@/assets/distributorSign/search.png" alt="">
       </div>
     </div>
     <scroll
-      v-if="tabNum === 0"
       ref="scroll"
-      :updateData="[submitLists]"
+      :updateData="[showLists]"
       :pullUp="true"
+      @pullingUp="loadMore"
     >
       <div class="wrap">
-        <div v-for="(item,index) in submitLists" :key="index" class="contract-lists" >
+        <div v-for="(item,index) in showLists" :key="index" class="contract-lists" >
           <div class="pro-code" @click="goDetails(item)">
             <img src="@/assets/distributorSign/fileIcon.png" alt="" class="file-icon">
             <p>
@@ -43,32 +43,6 @@
         </div>
       </div>
     </scroll>
-
-    <scroll
-      v-if="tabNum === 1"
-      ref="scrollList"
-      :updateData="[approvedLists]"
-      :pullUp="true"
-    >
-      <div class="wrap">
-        <div v-for="(item,index) in approvedLists" :key="index" class="contract-lists" >
-          <div class="pro-code" @click="goDetails(item)">
-            <img src="@/assets/distributorSign/fileIcon.png" alt="" class="file-icon">
-            <p>
-              <span>合同号</span>
-              <span>{{ item.project_number }}</span>
-            </p>
-            <img src="@/assets/distributorSign/goDetails.png" alt="" class="arrow">
-          </div>
-          <div class="box">
-            <div><p>承租人</p><p>{{ item.bp_name }}</p></div>
-            <div><p>合同租金</p><p class="money">{{ item.total_price|currency }}</p></div>
-            <div><p>申请时间</p><p>{{ dateConverse(item.confirm_start_date) }}</p></div>
-          </div>
-        </div>
-      </div>
-    </scroll>
-
   </h-view>
 </template>
 
@@ -81,13 +55,38 @@ export default {
   },
   data () {
     return {
-      tabNum: 0,
+      tabNum: null,
+      pagenum: 1,
+      searchInput: '',
       lists: [],
+      showLists: [],
       submitLists: [],
       approvedLists: [],
     }
   },
+  watch: {
+    'tabNum': {
+      handler (newVal, oldVal) {
+        if (newVal === 0) {
+          this.showLists = this.submitLists
+        } else if (newVal === 1) {
+          this.showLists = this.approvedLists
+        }
+      },
+      immediate: true,
+    },
+    searchInput () {
+      let vm = this
+      if (vm.timeout) {
+        clearTimeout(vm.timeout)
+      }
+      vm.timeout = setTimeout(() => {
+        vm.search()
+      }, 1000)
+    },
+  },
   created () {
+    this.tabNum = 0
     this.getLists()
   },
   methods: {
@@ -96,25 +95,99 @@ export default {
       let vm = this
       let url = $config.basePath + 'prj_confirm_list_query'
       let param = {
+        pagesize: 10,
+        pagenum: vm.pagenum,
+        searchInput: vm.searchInput,
         user_phone: window.localStorage.user_phone,
       }
       vm.hlsPopup.showLoading('数据加载中')
       vm.hlsHttp.post(url, param).then(function (res) {
         vm.hlsPopup.hideLoading()
         if (res.result === 'S') {
+          vm.lists = res.lists
           vm.submitLists = res.lists.filter(item => item.confirm_status === 'SUBMIT')
           vm.approvedLists = res.lists.filter(item => item.confirm_status === 'APPROVED')
-          if (vm.submitLists.length > 0 && vm.submitLists.length < 10) {
+          vm.showLists = vm.submitLists
+          if (res.lists.length > 0 && res.lists.length < 10) {
             vm.$refs.scroll.update(true)
+          } else if (res.lists.length === 10) {
+            vm.$refs.scroll.update(false)
           }
-          if (vm.approvedLists.length > 0 && vm.approvedLists.length < 10) {
-            vm.$refs.scrollList.update(true)
+        } else {
+          hlsPopup.showLongCenter(res.message)
+        }
+      })
+    },
+    loadMore () {
+      let vm = this
+      vm.pagenum++
+      let url = $config.basePath + 'prj_confirm_list_query'
+      let param = {
+        user_phone: window.localStorage.user_phone,
+        pagesize: 10,
+        pagenum: vm.pagenum,
+        searchInput: vm.searchInput,
+      }
+      vm.hlsPopup.showLoading('数据加载中')
+      vm.hlsHttp.post(url, param).then(function (res) {
+        vm.hlsPopup.hideLoading()
+        let returnData = []
+        if (res.result === 'S') {
+          returnData = res.lists
+          if (returnData.length === 0) {
+            vm.$refs.scroll.update(true)
+          } else if (returnData.length > 0 && returnData.length < 10) {
+            returnData.forEach((data, index, array) => {
+              vm.lists.push(array[index])
+            })
+            vm.$refs.scroll.update(true)
+          } else if (returnData.length === 10) {
+            returnData.forEach((data, index, array) => {
+              vm.lists.push(array[index])
+            })
+            vm.$refs.scroll.update(false)
+          }
+          vm.submitLists = vm.lists.filter(item => item.confirm_status === 'SUBMIT')
+          vm.approvedLists = vm.lists.filter(item => item.confirm_status === 'APPROVED')
+          if (vm.tabNum === 0) {
+            vm.showLists = vm.submitLists
+          } else {
+            vm.showLists = vm.approvedLists
           }
         } else {
           hlsPopup.showLongCenter(res.message)
         }
       })
     },
+    search () {
+      let vm = this
+      vm.pagenum = 1
+      let url = $config.basePath + 'prj_confirm_list_query'
+      let param = {
+        user_phone: window.localStorage.user_phone,
+        pagesize: 10,
+        pagenum: vm.pagenum,
+        searchInput: vm.searchInput,
+      }
+      vm.hlsPopup.showLoading('数据加载中')
+      vm.hlsHttp.post(url, param).then(function (res) {
+        vm.hlsPopup.hideLoading()
+        vm.lists = res.lists
+        vm.submitLists = vm.lists.filter(item => item.confirm_status === 'SUBMIT')
+        vm.approvedLists = vm.lists.filter(item => item.confirm_status === 'APPROVED')
+        if (vm.tabNum === 0) {
+          vm.showLists = vm.submitLists
+        } else {
+          vm.showLists = vm.approvedLists
+        }
+        if (vm.lists.length >= 0 && vm.lists.length < 10) {
+          vm.$refs.scroll.update(true)
+        } else if (vm.lists.length === 10) {
+          vm.$refs.scroll.update(false)
+        }
+      })
+    },
+
     goDetails (item) {
       window.sessionStorage.setItem('confirm_id', item.confirm_id)
       window.sessionStorage.setItem('bp_class', item.bp_class)

src/pages/productQuery/product-detailed.vue

@@ -2,7 +2,7 @@
  * @Descrip: 产品明细
  * @Author: your name
  * @Date: 2019-10-15 14:30:00
- * @LastEditTime: 2019-11-14 15:19:39
+ * @LastEditTime: 2019-11-20 14:44:52
  * @LastEditors: Please set LastEditors
    -->
 <template>
@@ -22,62 +22,64 @@
     </div>
 
     <!-- 基本信息 -->
-    <h-content v-swipeup="(e)=>vueTouch('上滑',e)" v-swipedown="(e)=>vueTouch('下滑',e)" class="hcontent">
-      <scroll ref="scrolls" :listenScroll="true" class="scrolls" @scroll="startScroll">
-        <!-- 基本信息 -->
-        <div id="baseInfo" class="base">
-          <swipe :interval="5000" class="hls-swipe">
-            <swipe-item v-for="(item,index) in picLists" :key="index" class="hls-swipe">
-              <img :src="item.url" alt="">
-            </swipe-item>
-          </swipe>
-          <div class="base-content">
-            <div class="top-code">
-              <div>参数项 &nbsp;{{ baseInfo.product_code }}</div>
-              <div>{{ baseInfo.division_n }}</div>
+    <!-- <h-content v-swipeup="(e)=>vueTouch('上滑',e)" v-swipedown="(e)=>vueTouch('下滑',e)" class="hcontent"> -->
+    <scroll
+      v-swipeup="(e)=>vueTouch('上滑',e)" v-swipedown="(e)=>vueTouch('下滑',e)" ref="scrolls" :listenScroll="true"
+      class="scrolls" @scroll="startScroll">
+      <!-- 基本信息 -->
+      <div id="baseInfo" class="base">
+        <swipe :interval="5000" class="hls-swipe">
+          <swipe-item v-for="(item,index) in picLists" :key="index" class="hls-swipe">
+            <img :src="item.url" alt="">
+          </swipe-item>
+        </swipe>
+        <div class="base-content">
+          <div class="top-code">
+            <div>参数项 &nbsp;{{ baseInfo.product_code }}</div>
+            <div>{{ baseInfo.division_n }}</div>
+          </div>
+          <div class="pro-name">{{ baseInfo.product_name }}</div>
+          <div class="pro-price">
+            <p>参考价 <span class="prices">￥{{ baseInfo.plan_price | currency }}</span></p>
+            <p class="dates">价格有效期 &nbsp;{{ baseInfo.price_date_to | dateFormat }}</p>
+          </div>
+          <div class="agent">
+            <div class="items">
+              <img src="@/assets/productQuery/agent.png" alt="">
+              <p>{{ baseInfo.agent_bp_name }}</p>
+            </div>
+            <div class="items">
+              <img src="@/assets/productQuery/address.png" alt="">
+              <p>{{ baseInfo.business_address }} .{{ baseInfo.province_name }}</p>
             </div>
-            <div class="pro-name">{{ baseInfo.product_name }}</div>
-            <div class="pro-price">
-              <p>参考价 <span class="prices">￥{{ baseInfo.plan_price | currency }}</span></p>
-              <p class="dates">价格有效期 &nbsp;{{ baseInfo.price_date_to | dateFormat }}</p>
+            <div class="items">
+              <img src="@/assets/productQuery/call.png" alt="">
+              <p>{{ baseInfo.phone }}</p>
             </div>
-            <div class="agent">
-              <div class="items">
-                <img src="@/assets/productQuery/agent.png" alt="">
-                <p>{{ baseInfo.agent_bp_name }}</p>
-              </div>
-              <div class="items">
-                <img src="@/assets/productQuery/address.png" alt="">
-                <p>{{ baseInfo.business_address }} .{{ baseInfo.province_name }}</p>
-              </div>
-              <div class="items">
-                <img src="@/assets/productQuery/call.png" alt="">
-                <p>{{ baseInfo.phone }}</p>
-              </div>
-              <div class="items">
-                <img src="@/assets/productQuery/house.png" alt="">
-                <p>{{ baseInfo.factory_bp_name }}</p>
-              </div>
+            <div class="items">
+              <img src="@/assets/productQuery/house.png" alt="">
+              <p>{{ baseInfo.factory_bp_name }}</p>
             </div>
           </div>
         </div>
+      </div>
 
-        <!-- 商品详情 -->
-        <div id="prodetail" ref="detail" class="pro-details prodetail">
-          <div class="equipment-list">商品详情</div>
+      <!-- 商品详情 -->
+      <div id="prodetail" ref="detail" class="pro-details prodetail">
+        <div class="equipment-list">商品详情</div>
 
-          <div v-for="item in picLists" :key="item.product_attachment_id" class="proPic">
-            <img :src="item.url" alt="">
-          </div>
-
-        </div>
-        <!-- 产品配置 -->
-        <div id="procfg" class="pro-details procnf">
-          <div class="equipment-list">产品配置</div>
-          <div class="table-wrap" v-html="confgInfo.product_properties"/>
+        <div v-for="item in picLists" :key="item.product_attachment_id" class="proPic">
+          <img :src="item.url" alt="">
         </div>
-      </scroll>
-    </h-content>
+
+      </div>
+      <!-- 产品配置 -->
+      <div id="procfg" class="pro-details procnf">
+        <div class="equipment-list">产品配置</div>
+        <div class="table-wrap" v-html="confgInfo.product_properties"/>
+      </div>
+    </scroll>
+    <!-- </h-content> -->
     <bottom-tab class="footer-button">
       <tab-button
         :class="{bgcolor: bgc_flag}" class="butt"
@@ -131,14 +133,14 @@ export default {
 
   },
   beforeRouteEnter (to, from, next) {
-    debugger
+    // debugger
     if (from.name === 'ProductList' || from.name === 'MyProductList' || from.name === 'HomePage') {
       next(vm => {
         vm.baseInfo = {}
         vm.confgInfo = {}
         vm.detailInfo = {}
         vm.picLists = []
-        vm.tabNum = 0
+        vm.num = 0
         vm.slide = false
         vm.product_id = vm.$route.params.product_id
         vm.bp_id = vm.$route.params.bp_id
@@ -187,9 +189,9 @@ export default {
           let baseGather = document.getElementsByClassName('base')[0].getBoundingClientRect() // 基本信息元素集合
           if (clientHeight - procnfGather.top >= procnfGather.height) {
             this.num = 2
-          } else if (clientHeight - detailGather.top >= detailGather.height) {
+          } else if (detailGather.top <= clientHeight / 2) {
             this.num = 1
-          } else if (-(baseGather.top) <= baseGather.height / 2) {
+          } else if (-(baseGather.top) <= baseGather.height / 2 || detailGather.top > clientHeight / 2) {
             this.num = 0
           }
         },
@@ -319,6 +321,9 @@ export default {
 </script>
 <style lang='less'>
   #detailed {
+    .scrollContent {
+      padding-bottom: 90px;
+    }
     .hls-swipe {
       background: #fff;
       img {

src/pages/productQuery/product-list.vue

@@ -11,46 +11,44 @@
         <span>产品列表</span>
       </div>
     </h-header>
-    <h-content>
-      <div class="hinput">
-        <div class="search-box">
-          <input v-model="searchInput" type="text" placeholder="请输入经销商/产品名称/参数项">
-          <img src="@/assets/distributorSign/search.png" alt="">
-        </div>
+    <div class="hinput">
+      <div class="search-box">
+        <input v-model="searchInput" type="text" placeholder="请输入经销商/产品名称/参数项">
+        <img src="@/assets/distributorSign/search.png" alt="">
       </div>
-      <scroll
-        ref="scroll"
-        :updateData="[lists]"
-        :pullUp="true"
-        @pullingUp="loadMore"
-      >
+    </div>
+    <scroll
+      ref="scroll"
+      :updateData="[lists]"
+      :pullUp="true"
+      @pullingUp="loadMore"
+    >
 
-        <div class="division-box">
+      <div class="division-box">
 
-          <list-item v-for="(item,index) in lists" :key="index">
-            <item :proportion="[1,4]" @click.native="goDetailed(item.product_id,item.collect_status,item.bp_id)">
-              <div slot="name" class="item-pic">
-                <img :src="item.url" alt="">
+        <list-item v-for="(item,index) in lists" :key="index">
+          <item :proportion="[1,4]" @click.native="goDetailed(item.product_id,item.collect_status,item.bp_id)">
+            <div slot="name" class="item-pic">
+              <img :src="item.url" alt="">
+            </div>
+            <div slot="content" class="item-content">
+              <div class="pro-name">
+                <p>{{ item.product_name }}</p>
+                <img class="arrow" src="@/assets/productQuery/getIn.png" alt="" >
               </div>
-              <div slot="content" class="item-content">
-                <div class="pro-name">
-                  <p>{{ item.product_name }}</p>
-                  <img class="arrow" src="@/assets/productQuery/getIn.png" alt="" >
-                </div>
-                <div class="centers">
-                  <p class="firsts1">{{ item.bp_type_n }}</p>
-                  <p class="seconds1">{{ item.bp_name }}</p>
-                </div>
-                <div class="centers">
-                  <p class="firsts1">参数项</p>
-                  <p class="seconds1">{{ item.product_code }}</p>
-                </div>
+              <div class="centers">
+                <p class="firsts1">{{ item.bp_type_n }}</p>
+                <p class="seconds1">{{ item.bp_name }}</p>
               </div>
-            </item>
-          </list-item>
-        </div>
-      </scroll>
-    </h-content>
+              <div class="centers">
+                <p class="firsts1">参数项</p>
+                <p class="seconds1">{{ item.product_code }}</p>
+              </div>
+            </div>
+          </item>
+        </list-item>
+      </div>
+    </scroll>
   </h-view>
 </template>
 <script>