106 lines
2.6 KiB
Vue
106 lines
2.6 KiB
Vue
<template>
|
|
<div class="container">
|
|
<div class="tab-box">
|
|
<div class="f-box" v-for="(item,index) in tablist" :key="index" @click="activeindex=index" :class="{ 'active' :activeindex==index}">{{item.name}}</div>
|
|
</div>
|
|
<reconciliation-trading v-if="activeindex == '0' "></reconciliation-trading>
|
|
<reconciliation-ref v-if="activeindex == '1' "></reconciliation-ref>
|
|
<reconciliation-favourable v-if="activeindex == '2' "></reconciliation-favourable>
|
|
</div>
|
|
<!-- <reconciliation-time v-if="radio1 == '按时间统计手续费' "></reconciliation-time>-->
|
|
<!-- <reconciliation-store v-if="radio1 == '按门店统计手续费' "></reconciliation-store>-->
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import ReconciliationTrading from "@/views/financialStatement/reconciliation/tab/trading.vue";
|
|
import ReconciliationRef from "@/views/financialStatement/reconciliation/tab/ref.vue";
|
|
import ReconciliationTime from "@/views/financialStatement/reconciliation/tab/time.vue";
|
|
import ReconciliationStore from "@/views/financialStatement/reconciliation/tab/store.vue";
|
|
import ReconciliationFavourable from "@/views/financialStatement/reconciliation/tab/favourable.vue";
|
|
import Oilqiang from "@/views/oilConfig/oilGun/list.vue";
|
|
import OilPrice from "@/views/oilConfig/oilPrice/index.vue";
|
|
import OilTank from "@/views/oilConfig/oilTank/list.vue";
|
|
|
|
export default {
|
|
name: "reconciliation-list",
|
|
data(){
|
|
return{
|
|
radio1:'交易明细',
|
|
activeindex:0,
|
|
tablist:[
|
|
{
|
|
name:'交易明细',
|
|
},
|
|
{
|
|
name:'退款明细',
|
|
},
|
|
{
|
|
name:'优惠统计',
|
|
},
|
|
]
|
|
}
|
|
},
|
|
components:{
|
|
OilTank, OilPrice, Oilqiang,
|
|
ReconciliationFavourable,
|
|
ReconciliationStore,
|
|
ReconciliationTime,
|
|
ReconciliationRef,
|
|
ReconciliationTrading
|
|
},
|
|
methods: {
|
|
handleClick(tab, event) {
|
|
console.log(tab, event);
|
|
}
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.app-center{
|
|
width: 100%;
|
|
|
|
box-sizing: border-box;
|
|
padding: 10px;
|
|
}
|
|
.app-top{
|
|
width: 100%;
|
|
margin-bottom: 20px;
|
|
height: 60px;
|
|
box-sizing: border-box;
|
|
|
|
}
|
|
.tab-box{
|
|
width: 100%;
|
|
background: #fff;
|
|
display: flex;
|
|
box-sizing: border-box;
|
|
padding: 0px 50px;
|
|
border-top: 1px solid #eceff1;
|
|
}
|
|
|
|
.f-box{
|
|
height: 40px;
|
|
color: #999999;
|
|
margin-right: 50px;
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
|
|
}
|
|
.active{
|
|
color: #FF9655 !important;
|
|
border-bottom: 2px solid #FF9655 !important;
|
|
}
|
|
.container{
|
|
background: #F4F5F9;
|
|
box-sizing: border-box;
|
|
//padding: 20px;
|
|
}
|
|
.tabder-box{
|
|
width: 85%;
|
|
}
|
|
</style>
|