'scroll修改、经销商还款计划页面升级、我的收藏列表升级'

src/pages/contractInquire/contract-records.vue

 <!--
  * @Author: your name
  * @Date: 2019-10-31 09:49:57
- * @LastEditTime: 2019-10-31 16:58:23
+ * @LastEditTime: 2019-11-08 15:16:00
  * @LastEditors: Please set LastEditors
  * @Description: 合同查询--记录
  * @FilePath:
@@ -30,7 +30,10 @@
     </div>
 
     <h-content v-if="data!==null" class="pay-content">
-      <scroll ref="scrollList">
+      <scroll ref="scroll"
+        :updateData="[lists]"
+        :pullUp="true"
+      >
 
         <div v-for="(item,index) in lists" :key="index" class="contract-item">
           <div class="header">
@@ -116,6 +119,9 @@ export default {
             vm.data = 1
           }
           vm.lists = res.lists
+          if (res.lists.length > 0 && res.lists.length < 10) {
+            vm.$refs.scroll.update(true)
+          }
         } else {
           hlsPopup.showLongCenter(res.message)
         }

src/pages/contractSigning/contract-signing.vue

 <!--
  * @Author: your name
  * @Date: 2019-09-29 10:02:11
- * @LastEditTime: 2019-11-08 10:42:48
+ * @LastEditTime: 2019-11-08 14:49:14
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  -->
@@ -26,7 +26,9 @@
 
     <h-content v-if="num === 1">
       <scroll
-        ref="scrollList"
+        ref="scroll"
+        :updateData="[submitLists]"
+        :pullUp="true"
       >
         <div class="wrap">
           <div v-for="(item,index) in submitLists" :key="index" class="contract-lists" >
@@ -51,6 +53,8 @@
     <h-content v-if="num === 2">
       <scroll
         ref="scrollList"
+        :updateData="[approvedLists]"
+        :pullUp="true"
       >
         <div class="wrap">
           <div v-for="(item,index) in approvedLists" :key="index" class="contract-lists" >
@@ -125,6 +129,12 @@ export default {
         if (res.result === 'S') {
           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.$refs.scroll.update(true)
+          }
+          if (vm.approvedLists.length > 0 && vm.approvedLists.length < 10) {
+            vm.$refs.scrollList.update(true)
+          }
         } else {
           hlsPopup.showLongCenter(res.message)
         }

src/pages/distributorSign/contract-list.vue

@@ -21,7 +21,9 @@
     </div>
     <h-content v-if="tabNum === 0">
       <scroll
-        ref="scrollList"
+        ref="scroll"
+        :updateData="[submitLists]"
+        :pullUp="true"
       >
         <div class="wrap">
           <div v-for="(item,index) in submitLists" :key="index" class="contract-lists" >
@@ -46,6 +48,8 @@
     <h-content v-if="tabNum === 1">
       <scroll
         ref="scrollList"
+        :updateData="[approvedLists]"
+        :pullUp="true"
       >
         <div class="wrap">
           <div v-for="(item,index) in approvedLists" :key="index" class="contract-lists" >
@@ -86,6 +90,11 @@ export default {
     }
   },
   created () {
+    this.getLists()
+  },
+  methods: {
+    // 查询签约列表
+    getLists () {
       let vm = this
       let url = $config.basePath + 'prj_confirm_list_query'
       let param = {
@@ -97,11 +106,17 @@ export default {
       if (res.result === 'S') {
         vm.submitLists = res.lists.filter(item => item.confirm_status === 'SUBMIT')
         vm.approvedLists = res.lists.filter(item => item.confirm_status === 'APPROVED')
-        // vm.lists = res.lists
+        if (vm.submitLists.length > 0 && vm.submitLists.length < 10) {
+            vm.$refs.scroll.update(true)
+          }
+          if (vm.approvedLists.length > 0 && vm.approvedLists.length < 10) {
+            vm.$refs.scrollList.update(true)
+          }
+      }else {
+        hlsPopup.showLongCenter(res.message)
       }
     })
     },
-  methods: {
     goDetails (item) {
       window.sessionStorage.setItem('bp_class', item.bp_class)
       window.sessionStorage.setItem('project_id', item.project_id)

src/pages/distributorSign/financ-details.vue

 <!--
- * @Description: In User Settings Edit
  * @Author: your name
- * @Date: 2019-09-27 18:07:12
- * @LastEditTime: 2019-11-08 09:10:43
+ * @Date: 2019-10-30 19:29:24
+ * @LastEditTime: 2019-11-08 15:44:27
  * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
  -->
 <template>
-  <h-view id="refund" class="public-style" title="还款计划">
-    <div class="top">
-      <h-header :proportion="[5,1,1]" class="header">
-        <div slot="left" class="h-header-btn" @click="goBase">
-          <img src="@/assets/intoApproval/arrow.png" >
-          <span>还款计划</span>
+  <h-view id="repay-plan-agent" class="public-style">
+    <h-header :proportion="[5,1,1]" class="bar-custom">
+      <div slot="left" class="h-header-btn">
+        <img src="@/assets/userBind/arrow.png" @click="$routeGo()">
+        <span>融资明细</span>
       </div>
     </h-header>
-      <div class="top-content">
-        <span class="top-tittle">总租金</span>
-        <span class="num">{{ info.total_rental_sum|currency }}</span>
-        <div class="top-detail">
-          <div class="left">
-            <span class="line">保证金</span>
-            <span>￥{{ info.deposit * product_num |currency }}</span>
+    <div class="center">
+
+      <div class="total">
+        <div class="sum">
+          <div>融资额</div>
+          <p>{{info.total_rental_sum | currency}}</p>
+          <img src="@/assets/contractInquire/num.png" alt="">
+          <h3><span>{{ info.lease_times }}期</span></h3>
+        </div>
+        <div class="single">
+          <div><h4>保证金</h4><p>￥{{ parseFloat(info.deposit*product_num).toFixed(2) | currency }}</p></div>
+          <div><h4>首付款</h4><p>￥{{ parseFloat(info.down_payment*product_num).toFixed(2) | currency }}</p></div>
+          <div><h4>手续费</h4><p>￥{{ parseFloat(info.lease_charge*product_num).toFixed(2) | currency }}</p></div>
         </div>
-          <div class="right">
-            <span class="line">首付款</span>
-            <span>￥{{ info.down_payment * product_num |currency }}</span>
       </div>
+      <div class="plan-name">
+        <div class="header">还款计划</div>
+        <img :class="{'rotate':show}" src="@/assets/contractInquire/top.png" alt="" @click="showDetails">
       </div>
-        <div class="clear" />
-        <div class="top-detail">
-          <div class="left">
-            <span class="line">手续费</span>
-            <span>￥{{ parseFloat(info.lease_charge * product_num).toFixed(2) |currency }}</span>
     </div>
-          <div class="right">
-            <span class="line">合同期数</span>
-            <span>{{ info.lease_times }}</span>
+    <h-content id="content" class="plan-content">
+      <!-- 已结清 black , 逾期 orange , 还款中 blue , 未还款 green -->
+      <div v-for="(item,index) in repayLists" :key="index" :class="{'plan-list':true,'or':statu==='orange','bl':statu==='blue','gr':statu==='green'}">
+        <div :class="{'period':true,'orange':statu==='orange','blue':statu==='blue','green':statu==='green'}">{{ index + 1 }}期</div>
+        <img v-if="statu === 'black'" src="@/assets/contractInquire/black.png" alt="" class="left">
+        <img v-if="statu === 'orange'" src="@/assets/contractInquire/orange.png" alt="" class="left">
+        <img v-if="statu === 'blue'" src="@/assets/contractInquire/blue.png" alt="" class="left">
+        <img v-if="statu === 'green'" src="@/assets/contractInquire/green.png" alt="" class="left">
+        <div class="time">
+          <p>{{ item.due_date.substr(0,4) }}</p>
+            <span>{{ dateConverse(item.due_date).substr(5,10) }}</span>
         </div>
+        <div class="name">
+          <p>款项</p>
+          <p>应还金额</p>
         </div>
+        <div class="number">
+          <p>租金</p>
+          <span :class="{'orang':statu==='orange','blu':statu==='blue','gree':statu==='green'}">{{ item.rental*product_num |currency }}</span>
         </div>
+        <img v-if="statu === 'black'" src="@/assets/contractInquire/done.png" alt="" class="status">
+        <img v-if="statu === 'orange'" src="@/assets/contractInquire/prompt.png" alt="" class="status">
       </div>
-    <h-content>
-      <table>
-        <tr>
-          <th />
-          <th class="table-top">日期</th>
-          <th class="table-top">现金流项目</th>
-          <th class="table-top">应还金额</th>
-        </tr>
-        <tr v-for="(item,index) in lists" :key="index">
-          <td>{{ index+1 }}</td>
-          <td>{{ dateConverse(item.due_date) }}</td>
-          <td>租金</td>
-          <td>{{ item.rental * product_num |currency }}</td>
-        </tr>
-      </table>
     </h-content>
+
   </h-view>
 </template>
+
 <script>
+
 export default {
   name: 'FinancDetails',
+  components: {
+  },
   data () {
     return {
-      confirm_status: this.$route.params.confirm_status,
+      //  已结清 black , 逾期 orange , 还款中 blue , 未还款 green
+      statu: 'orange',
+      info: {},
+      show: false,
+      height: 0,
+      oldHeight: 0,
+      newHeight: 0,
+      repayLists: [], // 每期还款
        product_num: this.$route.params.product_num,
-      info: {
-        finance_amount: '',
-        lease_charge: '',
-        down_payment: '',
-        lease_times: '',
-        deposit: '',
-      },
-      lists: [],
     }
   },
-  created () {
-    this.getInfo()
+  computed: {},
+  watch: {},
+  beforeRouteEnter (to, from, next) {
+    next(vm => {
+      if (from.name === 'ContractDetails') {
+        vm.repayQuery()
+      }
+    })
+    next()
   },
   methods: {
-    getInfo () {
+    dateConverse (date) {
+      return date.replace(/\//g, '-')
+    },
+    // 根据还款期排序
+    arrSort (property) {
+      return function (a, b) {
+        var value1 = a[property]
+        var value2 = b[property]
+        return value1 - value2
+      }
+    },
+    showDetails () {
+      if (!this.flag) {
+        this.flag = true
+        this.height = document.getElementsByClassName('total')[0].clientHeight
+        this.oldHeight = document.getElementById('content').clientHeight
+        this.newHeight = this.height + this.oldHeight
+      }
+      if (!this.show) {
+        this.show = !this.show
+        document.getElementById('content').style.height = this.newHeight + 'px'
+        document.getElementsByClassName('center')[0].style.transition = 'all .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s'
+        document.getElementsByClassName('center')[0].style.transform = 'translate(0px, -' + this.height + 'px) scale(1) translateZ(0px)'
+        document.getElementById('content').style.transition = 'all .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s'
+        document.getElementById('content').style.transform = 'translate(0px, -' + this.height + 'px) scale(1) translateZ(0px)'
+      } else {
+        this.show = !this.show
+        document.getElementById('content').style.height = this.oldHeight + 'px'
+        document.getElementsByClassName('center')[0].style.transition = 'all .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s'
+        document.getElementsByClassName('center')[0].style.transform = 'translate(0px, -' + 0 + 'px) scale(1) translateZ(0px)'
+        document.getElementById('content').style.transition = 'all .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s'
+        document.getElementById('content').style.transform = 'translate(0px, -' + 0 + 'px) scale(1) translateZ(0px)'
+      }
+    },
+    // 还款计划查询
+    repayQuery () {
       let vm = this
-      let url = process.env.basePath + 'prj_cashflow_query'
+      let url = $config.basePath + 'prj_cashflow_query'
       let param = {
-        project_id: this.$route.params.project_id,
+        project_id: vm.$route.params.project_id,
       }
       vm.hlsPopup.showLoading('数据加载中')
       vm.hlsHttp.post(url, param).then(function (res) {
         vm.hlsPopup.hideLoading()
         if (res.result === 'S') {
-          vm.lists = res.lists
-          Object.assign(vm.info, res.info)
-        }
-      })
-    },
-    // 根据试算信息查询
-    getTrial () {
+          vm.info = res.info
+          vm.repayLists = res.lists.sort(vm.arrSort('times')) // 根据还款期排序
           
-    },
-    dateConverse (date) {
-      return date.replace(/\//g, '-')
-    },
-    goBase () {
-      let confirmStatus
-      if (this.confirm_status !== 'APPROVED') {
-        confirmStatus = true
         } else {
-        confirmStatus = false
-      }
-      window.localStorage.setItem('hasButtom', confirmStatus)
-      this.$router.replace({
-        name: 'ContractDetails',
-        params: {
-          isConfirm: true,
-          hasButtom: confirmStatus,
-          confirm_status: this.confirm_status,
-        },
+          hlsPopup.showLongCenter(res.message)
+        }
       })
-      // this.$router.go(-1)
     },
   },
+
 }
 </script>
-<style lang="less" scoped>
-#refund {
-  .clear {
-    clear: both;
+<style lang='less'>
+#repay-plan-agent {
+
+  .total {
+    position: relative;
+    background-color: #1D3FFF;
+    height: 138px;
+    color: #fff;
+    background-image: url(../../assets/contractInquire/background.png);
+    background-size: cover;
+
+    .sum {
+    padding: 0 20px;
+      div {
+        font-family: PingFangSC-Semibold;
+        font-size: 14px;
+        padding-top: 12px;
+        padding-bottom: 10px;
       }
-  .header {
-    background-color: rgba(0, 0, 0, 0);
-    .h-header-btn {
+
+      p {
+        font-family: Verdana-BoldItalic;
+        font-size: 20px;
+        font-weight: 700;
+        font-style: italic;
+        margin-left: -4px;
+      }
+
       img {
-        width: 16px;
-        height: 16px;
+        width: 75px;
+        position: absolute;
+        right: 20px;
+        top: 25px;
       }
-      span {
-        margin-left: 16px;
+
+      h3 {
+        position: absolute;
+        font-weight: 700;
+        margin: 0;
+        right: 42px;
+        top: 32px;
+        color: #1D3FFF;
         font-family: PingFangSC-Semibold;
-        font-size: 17px;
-        color: #ffffff;
-        letter-spacing: 0.61px;
+        font-size: 14px;
+
+        span {
+          font-style: italic;
+          margin-right: 5px;
         }
       }
     }
-  .top {
-    width: 100%;
-    height: 260px;
-    background: url("../../assets/intoApproval/backtop.png") no-repeat;
-    background-size: 100% 285px;
-    .top-detail {
-      margin-top: 12px;
-      width: 260px;
-      .line {
+
+    .single {
+      display: flex;
+      margin-top: 28px;
+
+      div {
+        flex: auto;
+        text-align: center;
+
+        h4 {
+          opacity: 0.8;
+          margin: 0;
           font-family: PingFangSC-Regular;
           font-size: 12px;
-        height: 12px;
-        color: rgba(255, 255, 255, 0.6);
-        margin-right: 40px;
+          color: #FFFFFF;
+          margin-bottom: 8px;
         }
-      .line::before {
-        content: "";
-        display:inline-block;
-        width:2px;
-        height:12px;
-        background-color: #ffffff;
+
+        p {
+          font-family: Verdana;
+          font-size: 14px;
+          color: #FFFFFF;
+          font-weight: 700;
+        }
+      }
+    }
+
+  }
+
+  .plan-name {
     position: relative;
-        left: -5px;
-        top:2px;
+    background-color: #1D3FFF;
+    margin-top: -2px;
+
+    img {
+      position: absolute;
+      right: 30px;
+      top: 12px;
+      height: 20px;
+      transition: 0s;
     }
-      .left {
-        float: left;
-        span:last-child {
-          display: block;
+
+    .rotate {
+      transform: rotate(180deg);
+    }
+
+    .header {
+      position: relative;
+      height: 48px;
+      line-height: 48px;
+      background-color: #fff;
       font-family: PingFangSC-Semibold;
-          font-size: 16px;
-          color: #ffffff;
-          letter-spacing: 0;
-          margin-top: 8px;
+      font-size: 14px;
+      color: #21254C;
+      font-weight: 700;
+      text-indent: 2em;
+      border-radius: 24px 0 0 0 ;
+
+      &:before {
+        content: "";
+        position: absolute;
+        top: 16px;
+        left: 15px;
+        width: 4px;
+        height: 16px;
+        background: #1D3FFF;
       }
     }
-      .right {
-        float: right;
-        span:last-child {
-          display: block;
-          font-family: PingFangSC-Semibold;
-          font-size: 16px;
-          color: #ffffff;
-          letter-spacing: 0;
-          margin-top: 8px;
   }
+
+  .plan-content {
+    background-color: #fff;
+    padding: 0px 11px;
+
+    .plan-list {
+      position:relative;
+      background-color: #f7f7f7;
+      height: 78px;
+      display: flex;
+      padding-right: 20px;
+      padding-left: 10px;
+      padding-top: 20px;
+      margin-bottom: 10px;
+
+      .left {
+        height: 30px;
+        position: absolute;
+        left: -8px;
+        top: 24px;
       }
+
+      .status {
+        position: absolute;
+        width:18px;
+        right: -3px;
+        top: -5px;
       }
-    .top-content {
-      width: 300px;
-      margin: 0 auto;
-      .top-tittle {
-        font-family: PingFangSC-Regular;
+
+      .period {
+        position: absolute;
+        top: 0;
+        left: 0;
+        background: rgba(75,74,75,.5);
+        border-radius: 4px 0 4px 0;
+        // width: 30px;
+        padding: 1px 2px;
+        height: 20px;
+        color: #fff;
+        font-family: PingFangSC-Semibold;
         font-size: 12px;
-        color: rgba(255, 255, 255, 0.6);
-        letter-spacing: 0;
+        letter-spacing: 1.09px;
+        line-height: 20px;
+        text-align: center;
       }
-      .num {
-        display: block;
-        font-family: PingFangSC-Semibold;
-        font-size: 32px;
-        color: #ffffff;
-        line-height: 44px;
-        height: 44px;
-        margin-bottom: 24px;
-        margin-top: 8px;
+
+      .orange {
+        background: rgba(253, 182, 47,.5);
       }
+
+      .blue {
+        background-color: rgba(29, 63, 255,.5);
       }
+
+      .green {
+        background-color: rgba(27, 162, 97,.5);
       }
-  table {
-    width: 100%;
-    text-align: center;
-    .table-top {
-      font-weight: bold
+
+      .time {
+        flex: 5;
+
+        p {
+          font-family: DIN-Regular;
+          font-size: 12px;
+          color: rgba(56,63,69,0.60);
+          margin-bottom: 4px;
+          margin-top: 8px;
         }
-    th {
-      height: 40px;
-      line-height: 40px;
-      border-bottom: 1px solid #d9dbdf;
-      font-family: PingFangSC-Semibold;
+
+        span {
+          font-family: DIN-Bold;
+          font-weight: 700;
           font-size: 14px;
-      color: #383f45;
-      letter-spacing: 0;
+          color: #21254C;
         }
-    th:first-child {
-      width: 15%;
       }
-    td:first-child {
-      font-family: PingFangSC-Semibold;
-      font-size: 20px;
-      color: #326aaf;
+
+      .name {
+        flex: 9;
+        opacity: 0.6;
+        font-family: PingFangSC-Regular;
+        font-size: 13px;
+        color: #4B4A4B;
+
+        p {
+          margin-bottom: 17px;
+        }
       }
-    td:not(:first-child) {
-      border-bottom: 1px solid #d9dbdf;
+
+      .number {
+        flex: 9;
+        text-align: right;
+        font-family: PingFangSC-Regular;
+        font-size: 13px;
+        color: #4B4A4B;
+
+        p {
+          margin-bottom: 17px;
         }
-    td:last-child {
+
+        span.orang {
+          color: rgb(253, 182, 47);
+          font-weight: 700;
           font-family: PingFangSC-Semibold;
-      font-size: 17px;
-      color: #336bb0;
-      letter-spacing: 0;
         }
-    td {
-      height: 40px;
-      line-height: 40px;
-      text-align: center;
-      font-family: PingFangSC-Regular;
-      font-size: 14px;
-      color: #383f45;
-      letter-spacing: 0;
+        span.blu {
+          color: #1D3FFF;
+          font-weight: 700;
+          font-family: PingFangSC-Semibold;
+        }
+        span.gree {
+          color: #1BA261;
+        }
       }
     }
+
+    .or {
+        background-color:rgba(253, 182, 47,.05);
+    }
+
+    .bl,.gr {
+      background: #FFFFFF;
+      box-shadow: 0 1px 5px 0 rgba(219,219,219,0.69);
+    }
+
+  }
+
 }
 </style>

src/pages/financingTrial/financing-trial.vue

@@ -2,7 +2,7 @@
  * @Descrip 融资试算
  * @Author: your name
  * @Date: 2019-09-29 17:09:49
- * @LastEditTime: 2019-11-07 17:02:01
+ * @LastEditTime: 2019-11-08 14:42:12
  * @LastEditors: Please set LastEditors
    -->
 <template>
@@ -20,9 +20,10 @@
       <input type="text" placeholder="请输入产品名称">
     </div>
       <scroll
-        ref="scrollList"
+        ref="scroll"
+        :updateData="[lists]"
+        :pullUp="true"
       >
-
         <section v-for="(item,index) in lists" :key="index">
           <div class="descript" @click="goDetails(item.product_plan_id)">
             <img src="@/assets/trial/product.png" alt="">
@@ -114,6 +115,9 @@ export default {
          vm.hlsPopup.hideLoading()
          if (res.result === 'S') {
            vm.lists = res.lists
+           if (res.lists.length > 0 && res.lists.length < 10) {
+            vm.$refs.scroll.update(true)
+          }
          } else {
            hlsPopup.showLongCenter(res.message)
          }
@@ -126,6 +130,9 @@ export default {
          vm.hlsPopup.hideLoading()
          if (res.result === 'S') {
            vm.lists = res.lists
+           if (res.lists.length > 0 && res.lists.length < 10) {
+            vm.$refs.scroll.update(true)
+          }
          } else {
            hlsPopup.showLongCenter(res.message)
          }

src/pages/myProductCollection/my-product-list.Vue

-<!--
- * @Author: your name
- * @Date: 2019-10-22 20:26:28
- * @LastEditTime: 2019-10-29 10:08:31
- * @LastEditors: Please set LastEditors
- * @Description: In User Settings Edit
- * @FilePath: \hls-xcmg-vue-app\src\pages\myProductCollection\my-product-list.Vue
- -->
 
 /**
 * @Author Sean
@@ -26,30 +18,36 @@
           <img src="@/assets/distributorSign/search.png" alt="">
         </div>
       </div>
-      <list-item v-for="item in productList" :key="item.product_id">
+      <scroll
+        ref="scroll"
+        :updateData="[productList]"
+        :pullUp="true"
+      >
+      <div class="division-box">
+
+      <list-item v-for="(item,index) in productList" :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="@/assets/homePage/WechatIMG2 Copy@2x.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">经销商</p>
+              <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">产品名称</p>
-              <p class="seconds1">{{ item.product_name }}</p>
-            </div>
-          </div>
-          <div slot="right-icon">
-            <img class="arrow" src="@/assets/productQuery/getIn.png" alt="" >
           </div>
         </item>
       </list-item>
+      </div>
+      </scroll>
     </h-content>
   </h-view>
 </template>
@@ -89,6 +87,9 @@ export default {
         hlsPopup.hideLoading()
         if (res.result === 'S') {
           vm.productList = res.lists
+          if (res.lists.length > 0 && res.lists.length < 10) {
+            vm.$refs.scroll.update(true)
+          }
         } else {
           hlsPopup.showLongCenter(res.message)
         }
@@ -144,11 +145,11 @@ export default {
       }
     }
   }
-  .arrow {
-    width: 16px;
-    height: 16px;
-    // margin-left: 30px;
-    margin-top: 16px;
+ .division-box {
+      padding: 8px;
+    }
+    .hls-list-item {
+      border-radius: 4px;
     }
     .item-pic {
           width: 100px;
@@ -159,28 +160,39 @@ export default {
           }
     }
     .item-content {
-    // height: 102px;
           width: 100%;
           margin-left: 20px;
-    .centers:nth-of-type(1) {
-      margin-top: 16px;
+          .pro-name {
+            height: 42px;
+            width: 100%;
+            position: relative;
+            border-bottom: 1px solid #F3F3F7;
+            .arrow {
+              position: absolute;
+              width: 16px;
+              height: 16px;
+              right: 0;
+              top: 13px;
             }
-    .centers:nth-of-type(2) {
-      margin-top: 6px;
+            p {
+              height: 42px;
+              line-height: 42px;
+            font-family: PingFangSC-Semibold;
+            font-size: 15px;
+            color: #4B4A4B;
+            letter-spacing: 0;
+            font-weight: 600;
             }
-    .centers:nth-of-type(3) {
-      margin-top: 6px;
           }
+
           .centers {
-      //   margin-top: 6px;
-      // white-space: nowrap;
-      // width: 100%;
               font-family: PingFangSC-Semibold;
               font-size: 13px;
               color: rgba(56,63,69,0.60);
               letter-spacing: 0.5px;
               display: flex;
               flex-direction: row;
+              margin-top: 8px;
               .firsts1 {
                   width: 60px;
                   height: 17px;
@@ -194,8 +206,10 @@ export default {
                   height: auto;
                   font-family: PingFangSC-Regular;
                   font-size: 13px;
-        color: #383F45;
+                  color: #4B4A4B;
               }
           }
+
     }
+
 </style>

src/pages/productQuery/product-list.vue

@@ -18,6 +18,12 @@
           <img src="@/assets/distributorSign/search.png" alt="">
         </div>
       </div>
+      <scroll 
+       ref="scroll"
+       :updateData="[lists]"
+       :pullUp="true"
+      >
+      
       <div class="division-box">
 
         <list-item v-for="(item,index) in lists" :key="index">
@@ -39,10 +45,10 @@
                 <p class="seconds1">{{ item.product_code }}</p>
               </div>
             </div>
-            <div slot="right-icon"/>
           </item>
         </list-item>
       </div>
+      </scroll>
     </h-content>
   </h-view>
 </template>
@@ -78,6 +84,9 @@ export default {
          res.lists.forEach(item => {
                 item['url'] = process.env.filePath + 'attachment_id=' + item.product_attachment_id + '&access_token=' + window.localStorage.access_token
               })
+              if (res.lists.length > 0 && res.lists.length < 10) {
+            vm.$refs.scroll.update(true)
+          }
               // vm.picLists = res.lists
               // console.log('........',vm.picLists)
        } else {
@@ -137,8 +146,7 @@ export default {
     .division-box {
       padding: 8px;
     }
-    .hls-list-item 
-    {
+    .hls-list-item {
       border-radius: 4px;
     }
     .item-pic {