commit

src/view/shopVersion/form/liabilities/index.vue

@@ -2,9 +2,9 @@
     @import url('../../../../styles/common.less');
     #Liabilities{
         background: #f6f5f9;
-        // height:100%;
-        // display: flex;
-        // flex-direction: column;
+        height:100%;
+        display: flex;
+        flex-direction: column;
         .HEADER{
             display:flex;
             padding:10px;
@@ -26,15 +26,15 @@
         
         .Content{
             height:100%;
-            // height:1px;
-            // flex-grow: 1;
-            // overflow: auto;
-            // -webkit-overflow-scrolling: touch;
+            height:1px;
+            flex-grow: 1;
+            overflow: auto;
+            -webkit-overflow-scrolling: touch;
             margin-bottom:8px;
             >div{
                 display:flex;
                 align-items: center;
-                &:not(:last-child){
+                &{
                     >div{
                         border-bottom:1px solid #ddd;
                     }
@@ -57,7 +57,8 @@
                 >a{
                     flex-shrink: 0;
                     padding: 18px 13px;
-                    &.iconfont{border-bottom: 1px solid #ddd;
+                    &.iconfont{
+                        border-bottom: 1px solid #ddd;
                         display: flex;
                         align-items: center;
                         color: #FF7601;
@@ -66,11 +67,27 @@
                 }
             }
         }
+        .img{
+            width:100%;
+            display: flex;
+            justify-content: center;
+            img{
+                width:100%;
+                height:300px;
+            }
+        }
     }
 </style>
 
 <template>
   <div id="Liabilities">
+    <div class="tabs">
+        <tab :animate="false" active-color="#708bf6">
+            <tab-item :selected='Liabilities.activeTab == "0"' @on-item-click="changeLiabilitiesTab">客户欠款</tab-item>
+            <tab-item :selected='Liabilities.activeTab == "1"' @on-item-click="changeLiabilitiesTab">欠供应商款</tab-item>
+        </tab>
+    </div>
+    
     <div class="HEADER iCard">
         <span style="color:#777;margin-right:10rpx;">总负债额</span>
         <div :style="{'width':rate+'%','background':color}"></div>
@@ -83,7 +100,10 @@
                 <div style="margin-bottom:10rpx;">{{item.sCustomerName}}</div>
                 <div style="font-size:28rpx;color:#777;">欠款: {{item.nAmount}}元</div>
             </div>
-            <a class="iconfont icon-dianhua" :href="'tel:' + item.sTelephone01"></a>
+            <a class="iconfont icon-dianhua" :href="'tel:' + item.sTelephone01" v-if='Liabilities.activeTab == "0"'></a>
+        </div>
+        <div class="img" v-if="list.length <= 0">
+            <img src="@/assets/noData.jpg" class="_img" alt="">
         </div>
     </div>
   </div>
@@ -92,7 +112,7 @@
 <script>
 import Util from '@/libs/util.js';
 import {mapState} from 'vuex';
-import { XProgress } from 'vux'
+import { XProgress,Tab, TabItem } from 'vux'
 
 export default {
   name: 'Liabilities',
@@ -102,10 +122,13 @@ export default {
         total:0,
         rate:1110,
         color:'',
+        Liabilities:{
+            activeTab:'0'
+        }
     }
   },
   components:{
-      XProgress
+      XProgress,Tab, TabItem
   },
   computed:{
     ...mapState({
@@ -122,7 +145,9 @@ export default {
   methods:{
     async getData(){
         let value = await this.request('getCipLiabilities',{
-            data:{}
+            data:{
+                sCustomerType:this.Liabilities.activeTab == 0 ? '客户' : '供应商'
+            }
         },'加载中',{iProjectId:this.iProjectId});
         this.list = value;
         this.total=0;
@@ -140,6 +165,11 @@ export default {
             this.rate>=90&&(this.color="red")
         }
     },
+    changeLiabilitiesTab(index){
+        if(this.Liabilities.activeTab == index) return false;
+        this.Liabilities.activeTab = index;
+        this.getData();
+    },
     routerToDetail(item){
         this.$router.push({name:'LiabilitiesDetail',params:{iCustomerId:item.iIden}})
     }