<template>
|
<div class="speed-loan-page">
|
<swiper height="150px" dots-position="center" :auto="true" :loop="true" v-if="swiperList.length">
|
<swiper-item v-for="(i, index) in swiperList" :key="index">
|
<img :src="i.context" @click="bannerJump(i)">
|
</swiper-item>
|
</swiper>
|
<!--筛选与列表板块-->
|
<div ref="point"></div>
|
<div ref="stickyBox" :class="[{ 'filter-fixed': filterFixed }, 'speed-filter']">
|
<FilterTab :filterTab="filterTab" @on-click-tab="handleFilterTab"></FilterTab>
|
<!--综合排序下拉列表-->
|
<div v-show="showFilterList" class="filter-list">
|
<group gutter="0">
|
<cell :title="item.content" :class="{'filter-active': item.active}" @click.native="handleFilterCellClick(item)" v-for="(item,index) in filterList" :key="index"></cell>
|
</group>
|
</div>
|
</div>
|
<div class="weui-mask" v-show="showFilterList" @click="handleClickMask"></div>
|
<!--当没有banner，filter固定不占据文档流，此时在列表页面需要一个空白-->
|
<div class="filter-fixed-space" v-if="filterFixed"></div>
|
<!--产品列表-->
|
<FProdList :lists="prodList" :showNone="showNone" @on-click-prodItem="handleProductJump"></FProdList>
|
</div>
|
</template>
|
|
<script>
|
/**
|
* Created by c.y on 2018/3/22.
|
* 贷款--极速贷款
|
*/
|
import FilterTab from '../../components/common/FilterTab.vue';
|
import FSpace from '../../components/common/FSpace.vue';
|
import FProdList from '../../components/common/FProdList.vue';
|
import { Swiper, SwiperItem, Group, Cell, throttle } from 'vux';
|
import systemApi from '../../api/api';
|
import statusCodeManage from '../../api/statusCodeManage';
|
import pageBack from '../../tool/pageBackByAndroid';
|
|
export default {
|
name: 'f-speed-loan',
|
data() {
|
return {
|
showFilterList: false, // 显示筛选下拉
|
scrolledTop: 0,
|
swiperList: [], // banner
|
filterTab: [
|
{
|
isPullDown: true,
|
content: '综合排序',
|
pullDownActive: false,
|
activeTriangle: false
|
},
|
{ isPullDown: false, content: '易通过', pullDownActive: false},
|
{ isPullDown: false, content: '利息低', pullDownActive: false}
|
],
|
filterFixed: false,
|
filterList: [
|
{ content: '综合排序', active: true },
|
{ content: '放款快', active: false },
|
{ content: '额度从高到低', active: false },
|
{ content: '额度从低到高', active: false }
|
],
|
prodList: [], // 产品列表
|
showNone: false //产品列表空白页
|
};
|
},
|
methods: {
|
bannerJump(item){
|
switch (item.type) {
|
case 1:
|
//跳转到对应的导航页面
|
this.$router.push({path: item.detailContent});
|
break;
|
case 2:
|
//跳转到对应的贷款分类
|
this.$router.push({path: item.detailContent});
|
break;
|
case 3:
|
//跳转到贷款详情，需要产品ID
|
if (item.prodTypeId === 40000005) {
|
this.$router.push({path: '/f-loan-detail', query: {id: item.detailContent}});
|
} else if (item.prodTypeId === 40000006) {
|
this.$router.push({path: '/f-loan-detail', query: {id: item.detailContent}});
|
} else if (item.prodTypeId === 40000007) {
|
this.$router.push({path: '/f-credit-detail', query: {id: item.detailContent}});
|
}
|
break;
|
case 4:
|
//第三方页面
|
window.location.href = item.detailContent;
|
break;
|
case 5:
|
//什么都不做
|
break;
|
case 6:
|
//资讯
|
this.$router.push({path: '/f-news-detail',query:{id:item.detailContent}});
|
break;
|
default:
|
break;
|
}
|
},
|
// 点击遮罩
|
handleClickMask() {
|
// 如果下拉存在的话
|
if (this.showFilterList) {
|
// 如果有banner的话，才取消定位
|
if (this.swiperList.length) {
|
this.filterFixed = false;
|
}
|
this.showFilterList = false;
|
this.filterTab[0].activeTriangle = false;
|
// 点击遮罩时候，拉取数据
|
this.handleFilterCellClick({content: this.filterTab[0].content});
|
}
|
},
|
// 处理产品跳转
|
handleProductJump(item) {
|
// 极速贷款或者银行卡
|
if (
|
item.productType === 40000005 ||
|
item.productType === 40000006
|
) {
|
this.$router.push({
|
path: '/f-loan-detail',
|
query: {
|
id: item.prodId
|
}
|
});
|
// 信用卡
|
} else if (item.productType === 40000007) {
|
this.$router.push({
|
path: '/f-credit-detail',
|
query: {
|
id: item.prodId
|
}
|
});
|
}
|
},
|
// 切换的tab
|
handleFilterTab(item) {
|
// 把显示空状态的取消掉
|
this.showNone = false;
|
// 点击有下拉的话，那么就是进行定位，如果不是有下列的话，那么直接 调接口，进行数据渲染
|
if (item.isPullDown) {
|
// 有banner的话才固定，其他时候不需要固定，因为本来就是固定的
|
if (this.swiperList.length) {
|
this.filterFixed = true;
|
}
|
// 列表展开时，才有箭头
|
this.filterTab[0].activeTriangle = true;
|
this.showFilterList = true;
|
} else {
|
if (item.content === '易通过') {
|
this.init({ compareField: 'passCoeff', desc: true }, this.callBack);
|
} else if (item.content === '利息低') {
|
this.init({ compareField: 'loanRate' }, this.callBack);
|
}
|
// 综合排序恢复原状
|
this.filterTab[0].activeTriangle = false;
|
this.filterTab[0].content = '综合排序';
|
// 并更改其选中状态，并把其他的选择的状态清空
|
this.filterList.forEach(function(item) {
|
item.content === '综合排序'
|
? (item.active = true)
|
: (item.active = false);
|
});
|
this.showFilterList = false;
|
// 如果是从点击有下拉的选项的话，并且滑动一定距离的话，再点击没有下拉的tab
|
// 会出现滑动到底部，此时需要把页面滑动顶部
|
window.scrollTo(0, 0);
|
}
|
},
|
// 点击filter弹出的下拉列表
|
handleFilterCellClick(filterItem) {
|
// 更新filter的值
|
this.filterTab[0].content = filterItem.content;
|
// 进行筛选
|
if (filterItem.content === '综合排序') {
|
this.init(null, this.callBack);
|
} else if (filterItem.content === '额度从高到低') {
|
this.init(
|
{ desc: true, compareField: 'maxLoanAmt' },
|
this.callBack
|
);
|
} else if (filterItem.content === '额度从低到高') {
|
this.init(
|
{ desc: false, compareField: 'maxLoanAmt' },
|
this.callBack
|
);
|
} else if (filterItem.content === '放款快') {
|
this.init({ compareField: 'loanDays' }, this.callBack);
|
}
|
// 并更改其选中状态，并把其他的选择的状态清空
|
this.filterList.forEach(function(item) {
|
item.content === filterItem.content
|
? (item.active = true)
|
: (item.active = false);
|
});
|
this.filterTab[0].activeTriangle = false;
|
if (this.swiperList.length) {
|
// 取消定位，以及下拉弹窗
|
this.filterFixed = false;
|
}
|
this.showFilterList = false;
|
},
|
// 获取Attr的列表, prodElements产品组件的元素列表
|
getAttrList(prodElements) {
|
// 获取用户修改的数据
|
let attrList = [];
|
if (prodElements instanceof Array) {
|
prodElements.map(function(listItem) {
|
listItem.attrs.forEach(function(item) {
|
attrList.push(item.value);
|
});
|
});
|
}
|
return attrList;
|
},
|
// 页面的初始化
|
init(filterCond = null, callBack) {
|
let _this = this;
|
let submitInfo = {
|
prodType: 40000005 // 极速贷款
|
};
|
if (filterCond) {
|
submitInfo = Object.assign(submitInfo, filterCond);
|
}
|
this.showNone = false;
|
systemApi.fetchProdTypeList(submitInfo).then(
|
res => {
|
_this.prodList = [];
|
res.body.forEach(function(item) {
|
_this.prodList.push({
|
prodId: item.unit.prodId,
|
content: _this.getAttrList(item.showEles),
|
productType: item.unit.prodType,
|
applyNumber:
|
item.unit.showNumPrefix + item.unit.showNum
|
});
|
});
|
if (_this.prodList.length && _this.prodList.length >= 1) {
|
_this.showNone = false;
|
} else {
|
_this.showNone = true;
|
}
|
if (callBack) {
|
callBack();
|
}
|
},
|
error => {
|
statusCodeManage.showTipOfStatusCode(error,_this);
|
}
|
);
|
},
|
callBack() {
|
let dom = this.$refs.point;
|
let scrollTop = dom.offsetTop;
|
this.$nextTick(function () {
|
window.scrollTo(0, scrollTop - 44);
|
});
|
},
|
// 处理滚动
|
handleScroll() {
|
let _this = this;
|
if (!this.showFilterList) {
|
window.scrollY > 182
|
? (_this.filterFixed = true)
|
: (_this.filterFixed = false);
|
}
|
},
|
// 获取banner
|
fetchBannerList() {
|
let _this = this;
|
systemApi.fetchProdBanner({ place: 3 }).then(
|
res => {
|
_this.$nextTick(() => {
|
_this.swiperList = res.body;
|
// 如果有banner的话,才执行滚动事件，不然filter本来就是固定的
|
if (_this.swiperList.length) {
|
// window的滑动事件的监听
|
window.addEventListener(
|
'scroll',
|
throttle(_this.handleScroll, 50),
|
false
|
);
|
} else {
|
_this.filterFixed = true;
|
}
|
});
|
},
|
err => {
|
statusCodeManage.showTipOfStatusCode(err,_this);
|
}
|
);
|
}
|
},
|
components: {
|
FilterTab,
|
FSpace,
|
FProdList,
|
Swiper,
|
SwiperItem,
|
Group,
|
Cell
|
},
|
activated() {
|
this.$store.commit('UPDATE_ACTIVE_TAB', { loanActiveTab: 0 });
|
this.showFilterList = false;
|
this.scrolledTop = 0;
|
this.swiperList = [];
|
this.filterTab = [
|
{
|
isPullDown: true,
|
content: '综合排序',
|
pullDownActive: false,
|
activeTriangle: false
|
},
|
{ isPullDown: false, content: '易通过', pullDownActive: false},
|
{ isPullDown: false, content: '利息低', pullDownActive: false}
|
];
|
this.filterFixed = false;
|
this.filterList = [
|
{ content: '综合排序', active: true },
|
{ content: '放款快', active: false },
|
{ content: '额度从高到低', active: false },
|
{ content: '额度从低到高', active: false }
|
];
|
this.prodList = [];
|
this.showNone = false;
|
this.init(null, null);
|
this.fetchBannerList();
|
}
|
};
|
</script>
|
|
<style lang="less">
|
.speed-loan-page {
|
@import '../../style/mixin.less';
|
.vux-header {
|
.color-linear-gradient(@color-primary-light, @color-primary, 90deg);
|
.vux-header-title {
|
font-size: 18px;
|
}
|
.vux-header-left {
|
.left-arrow:before {
|
border: solid 1px @color-white;
|
border-width: 2px 0 0 2px;
|
}
|
}
|
.vux-header-right {
|
color: @color-white !important;
|
}
|
}
|
.filter-fixed-space {
|
height: 32px;
|
}
|
.vux-label {
|
font-size: @font-size-base;
|
}
|
.speed-sticky-box {
|
height: 44px;
|
}
|
.speed-filter {
|
width: 100%;
|
height: 32px;
|
}
|
.weui-mask {
|
z-index: 1001;
|
}
|
.filter-fixed {
|
position: fixed;
|
left: 0;
|
top: 44px;
|
z-index: 1002;
|
}
|
.filter-list {
|
width: 100%;
|
background: @color-white;
|
.filter-active {
|
color: @color-primary;
|
}
|
}
|
.vux-indicator{
|
a{
|
.active{
|
background-color: #fff !important;
|
}
|
}
|
}
|
.vux-swiper-item {
|
img {
|
width: 100%;
|
height: 150px;
|
}
|
}
|
.vux-icon-dot {
|
width: 5px !important;
|
height: 5px !important;
|
border-radius: 50%;
|
}
|
}
|
</style>
|
