hls_crm/pagesA/crm/statisticalFrom/achieveRank.vue

68 lines
1.8 KiB
Vue

<template>
<view class="">
<view class="tab_list">
<view class="tabli" :class="typeIndex == 0 ? 'tabliactive' : ''" @click="changeFirTab(0)">回款排名</view>
<view class="tabli" :class="typeIndex == 1 ? 'tabliactive' : ''" @click="changeFirTab(1)">成交排名</view>
<view class="tabli" :class="typeIndex == 2 ? 'tabliactive' : ''" @click="changeFirTab(2)">客户新增量</view>
<view class="tabli" :class="typeIndex == 3 ? 'tabliactive' : ''" @click="changeFirTab(3)">客户跟进量</view>
</view>
<!-- 回款排名 -->
<payment-rank v-if="typeIndex == 0"></payment-rank>
<!-- 成交排名 -->
<deal-rank v-if="typeIndex == 1"></deal-rank>
<!-- 客户新增量 -->
<customer-add-rank v-if="typeIndex == 2"></customer-add-rank>
<!-- 客户跟进量 -->
<customer-follow-rank v-if="typeIndex == 3"></customer-follow-rank>
</view>
</template>
<script>
import paymentRank from '@/pagesA/crm/statisticalFrom/paymentRank/paymentRank.vue'
import dealRank from '@/pagesA/crm/statisticalFrom/personRank/personRank'
import customerAddRank from '@/pagesA/crm/statisticalFrom/customerAddRank/customerAddRank.vue'
import customerFollowRank from '@/pagesA/crm/statisticalFrom/customerFollowRank/customerFollowRank.vue'
export default{
components:{
paymentRank,
dealRank,
customerAddRank,
customerFollowRank
},
data() {
return{
typeIndex:0,
}
},
methods:{
changeFirTab(index){
this.typeIndex = index
}
}
}
</script>
<style lang="scss" scoped>
.tab_list{
width:750rpx;
height:80rpx;
display: flex;
justify-content: space-around;
align-items: center;
background:#fff;
.tabli{
font-size:24rpx;
color:#333;
line-height: 75rpx;
text-align: center;
border-bottom:4rpx solid #fff;
}
.tabliactive{
border-bottom:4rpx solid $uni-text-color;
}
}
</style>