<template>
|
<div>
|
<!--注意这里颜色，是颜色是字符串，主题替换时，需要注意-->
|
<div class="loan-home-tab">
|
<tab class="f-loan-tab" bar-active-color="#fff000">
|
<tab-item :selected="activeItem===0" @on-item-click="onItemClick">
|
<span>极速贷款</span>
|
</tab-item>
|
<tab-item :selected="activeItem===1" @on-item-click="onItemClick">
|
<span>银行贷款</span>
|
</tab-item>
|
<tab-item :selected="activeItem===2" @on-item-click="onItemClick">
|
<span>信用卡</span>
|
</tab-item>
|
</tab>
|
</div>
|
<div class="loan-space"></div>
|
<!--贷款的tab的切换，view-->
|
<keep-alive>
|
<router-view></router-view>
|
</keep-alive>
|
<FSpace type="large"></FSpace>
|
<FFooter :index="1"></FFooter>
|
</div>
|
</template>
|
|
<script>
|
/**
|
* Created by c.y on 2018/3/22.
|
* 贷款的首页
|
*/
|
import { Tab, TabItem } from 'vux';
|
import FFooter from '../../components/common/FFooter.vue';
|
import FSpace from '../../components/common/FSpace.vue';
|
export default {
|
name: 'f-loan',
|
data() {
|
return {};
|
},
|
components: {
|
Tab,
|
TabItem,
|
FFooter,
|
FSpace
|
},
|
computed: {
|
activeItem() {
|
return this.$store.state.loanActiveTab;
|
}
|
},
|
methods: {
|
// 点击tab的切换
|
onItemClick(index) {
|
this.$store.commit('UPDATE_ACTIVE_TAB', { loanActiveTab: index });
|
if (index === 0) {
|
this.$router.push({
|
path: '/f-loan/f-speed'
|
});
|
} else if (index === 1) {
|
this.$router.push({
|
path: '/f-loan/f-bank'
|
});
|
} else if (index === 2) {
|
this.$router.push({
|
path: '/f-loan/f-credit'
|
});
|
}
|
}
|
},
|
activated: function() {
|
this.$store.commit('UPDATE_APP_STYLE', {
|
overflow: 'initial',
|
'-webkit-overflow-scrolling': 'initial'
|
});
|
this.$store.commit('UPDATE_DIRECTION', {direction: 'none'});
|
// 根据首页产品的tab的分类，选中相应的tab
|
if (this.$route.query.typeId) {
|
let activeTab = this.$route.query.typeId;
|
this.$store.commit('UPDATE_ACTIVE_TAB', {
|
loanActiveTab: activeTab
|
});
|
}
|
}
|
};
|
</script>
|
|
<style lang="less">
|
@import '../../style/mixin';
|
.loan-home-tab {
|
position: fixed;
|
left: 0;
|
top: 0;
|
width: 100%;
|
height: 44px;
|
z-index: 1002;
|
.vux-tab {
|
.color-linear-gradient(@color-gradient-darkBlue-left, @color-gradient-darkBlue-right);
|
.vux-tab-item {
|
background: transparent;
|
span {
|
color: @color-white;
|
font-size: @font-size-large;
|
}
|
}
|
.vux-tab-item.vux-tab-selected {
|
span {
|
color: @color-text-placeholder-yellow;
|
}
|
}
|
.vux-tab-ink-bar {
|
height: 1px !important;
|
}
|
}
|
}
|
.loan-space {
|
height: 44px;
|
}
|
</style>
|
