'合同记录状态判断'

src/pages/contractInquire/contract-records.vue

 <!--
  * @Author: your name
  * @Date: 2019-10-31 09:49:57
- * @LastEditTime: 2019-11-08 15:16:00
+ * @LastEditTime: 2019-11-11 15:59:08
  * @LastEditors: Please set LastEditors
  * @Description: 合同查询--记录
  * @FilePath:
@@ -29,18 +29,23 @@
       </div>
     </div>
 
-    <h-content v-if="data!==null" class="pay-content">
-      <scroll ref="scroll"
+<!-- 全部合同记录 -->
+      <scroll 
+        v-if="selected === 'all'"
+        ref="scroll"
         :updateData="[lists]"
         :pullUp="true"
       >
-
+<div class="pay-content">
   <div v-for="(item,index) in lists" :key="index" class="contract-item">
           <div class="header">
             <img src="@/assets/contractRepayment/contract.png" alt="">
             <h2>{{ item.project_number }}</h2>
             <!-- 状态用类名控制  待还款orange,待签约blue,还款中green,已结清black -->
-            <p class="green">待还款</p>
+            <p class="green" v-if="item.contract_status_n === '待首付'">待签约</p>
+            <p class="orange" v-if="item.contract_status_n === '首付还款中'">代还款</p>
+            <p class="blue" v-if="item.contract_status_n === '还款中'">还款中</p>
+            <p class="black" v-if="item.contract_status_n === '已结清'">已结清</p>
           </div>
           <div class="center">
             <div><span>承租人</span><p>{{ item.bp_name }}</p></div>
@@ -54,8 +59,129 @@
             </section>
           </div>
         </div>
+</div>
+        
+      </scroll>
+<!-- 待签约 -->
+    <scroll 
+        v-if="selected === 'one'"
+        ref="scroll"
+        :updateData="[unSignedLists]"
+        :pullUp="true"
+      >
+<div class="pay-content">
+
+        <div v-for="(item,index) in unSignedLists" :key="index" class="contract-item">
+          <div class="header">
+            <img src="@/assets/contractRepayment/contract.png" alt="">
+            <h2>{{ item.project_number }}</h2>
+            <!-- 状态用类名控制  待还款orange,待签约blue,还款中green,已结清black -->
+            <p class="green">待签约</p>
+          </div>
+          <div class="center">
+            <div><span>承租人</span><p>{{ item.bp_name }}</p></div>
+            <div><span>年利率</span><p>{{ item.int_rate_n }}</p></div>
+            <div><span>期限</span><p>{{ item.lease_times }}期</p></div>
+            <div><span>融资金额</span><p class="bold">{{ item.finance_amount | currency }}</p></div>
+            <span class="red">逾期一周</span>
+            <section @click="toRepayDetail(item.project_id)">
+              <img src="@/assets/contractRepayment/view.png" alt="">
+              <span>查看合同明细</span>
+            </section>
+          </div>
+        </div>
+</div>
+      </scroll>
+<!-- 待还款 -->
+      <scroll 
+        v-if="selected === 'two'"
+        ref="scroll"
+        :updateData="[unRepayLists]"
+        :pullUp="true"
+      >
+          <div class="pay-content">
+
+        <div v-for="(item,index) in unRepayLists" :key="index" class="contract-item">
+          <div class="header">
+            <img src="@/assets/contractRepayment/contract.png" alt="">
+            <h2>{{ item.project_number }}</h2>
+            <!-- 状态用类名控制  待还款orange,待签约blue,还款中green,已结清black -->
+            <p class="orange">待还款</p>
+          </div>
+          <div class="center">
+            <div><span>承租人</span><p>{{ item.bp_name }}</p></div>
+            <div><span>年利率</span><p>{{ item.int_rate_n }}</p></div>
+            <div><span>期限</span><p>{{ item.lease_times }}期</p></div>
+            <div><span>融资金额</span><p class="bold">{{ item.finance_amount | currency }}</p></div>
+            <span class="red">逾期一周</span>
+            <section @click="toRepayDetail(item.project_id)">
+              <img src="@/assets/contractRepayment/view.png" alt="">
+              <span>查看合同明细</span>
+            </section>
+          </div>
+        </div>
+          </div>
+      </scroll>
+<!-- 还款中 -->
+      <scroll 
+        v-if="selected === 'three'"
+        ref="scroll"
+        :updateData="[repayingLists]"
+        :pullUp="true"
+      >
+        <div class="pay-content">
+
+        <div v-for="(item,index) in repayingLists" :key="index" class="contract-item">
+          <div class="header">
+            <img src="@/assets/contractRepayment/contract.png" alt="">
+            <h2>{{ item.project_number }}</h2>
+            <!-- 状态用类名控制  待还款orange,待签约blue,还款中green,已结清black -->
+            <p class="blue">还款中</p>
+          </div>
+          <div class="center">
+            <div><span>承租人</span><p>{{ item.bp_name }}</p></div>
+            <div><span>年利率</span><p>{{ item.int_rate_n }}</p></div>
+            <div><span>期限</span><p>{{ item.lease_times }}期</p></div>
+            <div><span>融资金额</span><p class="bold">{{ item.finance_amount | currency }}</p></div>
+            <span class="red">逾期一周</span>
+            <section @click="toRepayDetail(item.project_id)">
+              <img src="@/assets/contractRepayment/view.png" alt="">
+              <span>查看合同明细</span>
+            </section>
+          </div>
+        </div>
+        </div>
+      </scroll>
+<!-- 已结清 -->
+      <scroll 
+        v-if="selected === 'four'"
+        ref="scroll"
+        :updateData="[repayedLists]"
+        :pullUp="true"
+      >
+        <div class="pay-content">
+
+        <div v-for="(item,index) in repayedLists" :key="index" class="contract-item">
+          <div class="header">
+            <img src="@/assets/contractRepayment/contract.png" alt="">
+            <h2>{{ item.project_number }}</h2>
+            <!-- 状态用类名控制  待还款orange,待签约blue,还款中green,已结清black -->
+            <p class="black">已结清</p>
+          </div>
+          <div class="center">
+            <div><span>承租人</span><p>{{ item.bp_name }}</p></div>
+            <div><span>年利率</span><p>{{ item.int_rate_n }}</p></div>
+            <div><span>期限</span><p>{{ item.lease_times }}期</p></div>
+            <div><span>融资金额</span><p class="bold">{{ item.finance_amount | currency }}</p></div>
+            <span class="red">逾期一周</span>
+            <section @click="toRepayDetail(item.project_id)">
+              <img src="@/assets/contractRepayment/view.png" alt="">
+              <span>查看合同明细</span>
+            </section>
+          </div>
+        </div>
+        </div>
       </scroll>
-    </h-content>
     <h-content v-if="data===null" class="null">
       <div class="display">
         <img src="@/assets/contractRepayment/null.png" alt="">
@@ -76,8 +202,13 @@ export default {
     return {
       // data: null, // 无记录时
       data: 1,
-      lists: [],
+      lists: [], // 全部记录
       selected: 'all',
+      unSignedLists: [], // 待签约
+      unRepayLists: [], // 待还款
+      repayingLists: [], // 还款中
+      repayedLists: [], // 已结清
+
     }
   },
   computed: {},
@@ -119,6 +250,10 @@ export default {
             vm.data = 1
           }
           vm.lists = res.lists
+          vm.unSignedLists = res.lists.filter(item => item.contract_status_n === '待首付') // 待签约
+          vm.unRepayLists = res.lists.filter(item => item.contract_status_n === '首付还款中') // 待还款
+          vm.repayingLists = res.lists.filter(item => item.contract_status_n === '还款中') // 还款中
+          vm.repayedLists = res.lists.filter(item => item.contract_status_n === '已结清') // 已结清
           if (res.lists.length > 0 && res.lists.length < 10) {
             vm.$refs.scroll.update(true)
           }
@@ -210,6 +345,7 @@ export default {
 
   .pay-content {
     padding: 8px 8px;
+    padding-bottom: 104px;
 
     .contract-item {
       height: 208px;

src/pages/contractSigning/contract-signing.vue

 <!--
  * @Author: your name
  * @Date: 2019-09-29 10:02:11
- * @LastEditTime: 2019-11-11 14:03:58
+ * @LastEditTime: 2019-11-11 14:52:00
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  -->
@@ -24,8 +24,9 @@
       </div>
     </div>
 
-    <h-content v-if="num === 1">
+    <!-- <h-content > -->
       <scroll
+      v-if="num === 1"
         ref="scroll"
         :updateData="[submitLists]"
         :pullUp="true"
@@ -48,10 +49,11 @@
           </div>
         </div>
       </scroll>
-    </h-content>
+    <!-- </h-content> -->
 
-    <h-content v-if="num === 2">
+    <!-- <h-content > -->
       <scroll
+      v-if="num === 2"
         ref="scrollList"
         :updateData="[approvedLists]"
         :pullUp="true"
@@ -74,7 +76,7 @@
           </div>
         </div>
       </scroll>
-    </h-content>
+    <!-- </h-content> -->
   </h-view>
 </template>
 
@@ -234,6 +236,9 @@ export default {
         }
     }
   }
+  .scrollContent{
+      padding-bottom: 90px;
+    }
   .wrap {
       width: 100%;
       padding: 8px;

src/pages/distributorSign/contract-list.vue

@@ -5,7 +5,7 @@
    -->
 
 <template>
-  <h-view id="sign" class="public-style" title="经销商签约">
+  <h-view class="distribute-sign" title="经销商签约">
     <h-header :proportion="[5,1,1]" class="bar-custom">
       <div slot="left" class="h-header-btn">
         <img src="@/assets/userBind/arrow.png" @click="$routeGo()">
@@ -19,8 +19,8 @@
         <img src="@/assets/distributorSign/search.png" alt="">
       </div>
     </div>
-    <h-content v-if="tabNum === 0">
       <scroll
+        v-if="tabNum === 0"
         ref="scroll"
         :updateData="[submitLists]"
         :pullUp="true"
@@ -43,10 +43,9 @@
           </div>
         </div>
       </scroll>
-    </h-content>
 
-    <h-content v-if="tabNum === 1">
       <scroll
+        v-if="tabNum === 1"
         ref="scrollList"
         :updateData="[approvedLists]"
         :pullUp="true"
@@ -69,7 +68,6 @@
           </div>
         </div>
       </scroll>
-    </h-content>
 
   </h-view>
 </template>
@@ -139,10 +137,48 @@ export default {
 }
 </script>
 <style lang="less" scoped>
-  #sign {
+.distribute-sign {
+  .hinput {
+    width: 100%;
+    height: 68px;
+    border-bottom:1px solid #ccc;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 3px;
+    background: #fff;
+
+    .search-box {
+      position: relative;
+      z-index: 50;
+      width: 93.6%;
+      height: 36px;
+      font-size: 14px;
+      color: #B4B4B5;
+      letter-spacing: 0;
+      font-family: PingFangSC-Regular;
+      border: 1px solid rgba(56,63,69,0.60);
+      border-radius: 4px;
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+
+      input {
+          width: 90%;height: 100%;
+          opacity: 0.4;
+            border: none;
+        line-height: 34px;
+        }
+    }
+  }
+  // .scrollContent{
+  //     padding-bottom: 90px;
+  //   }
   .wrap {
       width: 100%;
       padding: 8px;
+      padding-bottom: 104px;
       .contract-lists {
         width: 100%;
         background: #fff;
@@ -212,44 +248,6 @@ export default {
         }
       }
   }
-
-    .hinput {
-      position: relative;
-      z-index: 50;
-      width: 100%;
-      height: 68px;
-      border-bottom: 1px solid #cccccc70;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      margin-top: 3px;
-      background: #fff;
-      margin-bottom: 9px;
-
-      .search-box {
-        width: 93.6%;
-        height: 36px;
-        font-size: 14px;
-        color: #B4B4B5;
-        letter-spacing: 0;
-        font-family: PingFangSC-Regular;
-        border: 1px solid rgba(56, 63, 69, 0.60);
-        border-radius: 4px;
-        display: flex;
-        flex-direction: row;
-        justify-content: center;
-        align-items: center;
-
-        input {
-          width: 90%;
-          height: 100%;
-          opacity: 0.4;
-          border: none;
-          line-height: 34px;
-        }
-      }
-    }
-
-  }
+}
 
 </style>