liabilities.vue

<style lang="less">
    @import url('../../../styles/common.less');
    #liabilities{
        background: #f6f5f9;
        height:100%;
        display: flex;
        flex-direction: column;
        >.tabs{
            flex-shrink: 0;
        }
        .HEADER{
            flex-shrink: 0;
            display:flex;
            padding:10px;
            >span{
                flex-shrink: 0;
                &.number{
                    color:#3BA5EF;
                    margin-left:5px;
                    flex-grow:1;
                    text-align: right;
                }
            }
            >div{
                margin: 0 10px;
                background:#3BA5EF;
                border-radius: 5px;
            }
        }
        
        .Content{
            // height:100%;
            height:20rpx;
            flex-grow: 1;
            overflow: auto;
            -webkit-overflow-scrolling: touch;
            margin-bottom:8px;
            >div{
                display:flex;
                // align-items: center;
                &{
                    >div{
                        border-bottom:1px solid #ddd;
                    }
                }
                >div{
                    flex-grow:1;
                    padding:15px 0;
                }
                >span{
                    flex-shrink: 0;
                    padding: 0 13px;
                    &.num{
                        font-weight: bold;
                        color: #555;
                        font-size: 16px;
                        align-self: center;
                    }
                    
                }
                >a{
                    flex-shrink: 0;
                    padding: 18px 13px;
                    &.iconfont{
                        border-bottom: 1px solid #ddd;
                        display: flex;
                        align-items: center;
                        color: #FF7601;
                        font-size: 20px;
                    }
                }
            }
        }
        .img{
            width:100%;
            display: flex;
            justify-content: center;
            img{
                width:100%;
                height:300px;
            }
        }
    }
</style>
<template>
    <div id="liabilities">
        <div class="tabs">
            <tab active-color="#708bf6">
                <tab-item :selected="activeIndex=='客户'" @on-item-click="activeIndex='客户'">客户欠款</tab-item>
                <tab-item :selected="activeIndex=='供应商'" @on-item-click="activeIndex='供应商'">欠供应商款</tab-item>
            </tab>
        </div>
        
        <div class="HEADER iCard">
            <span style="color:#777;margin-right:10rpx;" v-if="activeIndex=='客户'">总应收额</span>
            <span style="color:#777;margin-right:10rpx;" v-else>总欠款额</span>
            <div :style="{'width':rate+'%','background':color}"></div>
            <span class="number">{{total}}万</span>
        </div>

        <div class="Content iCard">
            <div v-for="(v,k) in list" :key="k">
                <span class="num">{{k+1}}</span>
                <div @click="routerToDetail(v)">
                    <div style="margin-bottom:10px" v-if="activeIndex=='客户'">{{v.sCustomerName}}</div>
                    <div style="margin-bottom:10px" v-else>{{v.sProviderName}}</div>
                    <div style="font-size:12rpx;color:#777;">欠款: {{v.nAmount}}元</div>
                </div>
                <a class="iconfont icon-dianhua" :href="`tel:${v.sTelephone01}`" v-if="activeIndex=='客户' || v.sTelephone01" />
            </div>
            <div class="img" v-if="list.length<=0">
                <img src="@/assets/noData.jpg" />
            </div>
        </div>
    </div>
</template>
<script>
import Util from '@/libs/util.js';
import { Tab, TabItem } from 'vux'
export default {
    name:"liabilities",
    components:{Tab, TabItem },
    data(){
        return{
            activeIndex:"客户",
            list:[],
            rate:0,
            color:"",
            total:0,
        }
    },
    mounted(){
        this.$nextTick(()=>{
            this.getData()
        })
    },
    methods:{
        async getData(){
            var value=await this.request("getTiipLiabilities",{
                data:{
                    sCustomerType:this.activeIndex
                }
            },"加载中",{});

            this.total=0
            this.rate=0
            if(value.length>0){
                this.list=value.map(v=>{
                    this.total+=v.nAmount||0
                    this.rate+=v.nPercent||0
                    v.nAmount=(Math.round(v.nAmount*100)/100).toLocaleString()
                    return v;
                })
                this.total=(Math.round(this.total*100)/100).toLocaleString()
                this.rate=Math.round(this.rate*10000)/100
                this.rate>=30&&this.rate<60&&(this.color="yellow")
                this.rate>=90&&(this.color="red")
            }
        },
        routerToDetail(value){
            this.$router.push({name:"tipLiabilitiesDetail",params:{iCustomerId:value.uGUID,sCustomerType:this.activeIndex}})
        },
    },
    watch:{
        activeIndex(n){
            this.getData()
        }
    },
}
</script>