<template>
|
<div class="bank-loan-page">
|
<!--职业分类-->
|
<div class="job-type">
|
<div class="type-item" v-for="(item, index) in bankTypeList" @click="jobFilterJump(item)" :key="index">
|
<span :style="{background: `linear-gradient(${item.leftColor}, ${item.rightColor})`}">
|
<svg class="icon" aria-hidden="true">
|
<use :xlink:href="'#'+item.icon"></use>
|
</svg>
|
</span>
|
<p>{{ item.name }}</p>
|
</div>
|
</div>
|
<FSpace type="small"></FSpace>
|
<!--筛选-->
|
<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 v-show="showFilterMoney" class="money-filter-list">
|
<group gutter="0">
|
<p v-bind:class="[{ 'active-money': activeMoney }, 'any-money']" @click="unlimitedAmount">不限金额</p>
|
<div class="money-box">
|
<x-input placeholder="请输入贷款金额" @input.native="handleInputMoney" :max="5" :novalidate="true" :min="1" :show-clear="false" v-model.trim="money">
|
<FButton slot="right" size="mini" text="确定" @click.native="handleAmount"></FButton>
|
</x-input>
|
<span class="unit">万元</span>
|
</div>
|
<p class="filter-tip">可输入贷款范围0.1-1000万元</p>
|
</group>
|
</div>
|
</div>
|
<div class="weui-mask" @click="handleClickMask" v-show="showFilterList || showFilterMoney"></div>
|
<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 FButton from '../../components/common/FButton.vue';
|
import FProdList from '../../components/common/FProdList.vue';
|
import validator from '../../tool/validator';
|
import systemApi from '../../api/api';
|
import statusCodeManage from '../../api/statusCodeManage';
|
import { Group, Cell, XInput, throttle } from 'vux';
|
import { callbackify } from 'util';
|
|
export default {
|
name: 'f-bank-loan',
|
data() {
|
return {
|
showFilterList: false, // 显示筛选下拉
|
showFilterMoney: false, // 显示金额输入的下拉
|
scrolledTop: 0,
|
money: '', // 输入的金额
|
bankTypeList: [], // 职业的tab对应的code
|
filterFixed: false, // 是否固定
|
activeMoney: false, // 金额的选择
|
filterTab: [
|
{
|
isPullDown: true,
|
content: '不限金额',
|
pullDownActive: false,
|
activeTriangle: false
|
},
|
{
|
isPullDown: true,
|
content: '不限期限',
|
pullDownActive: false,
|
activeTriangle: false
|
},
|
{ isPullDown: false, content: '热门', pullDownActive: false },
|
{ isPullDown: false, content: '利息低', pullDownActive: false }
|
],
|
filterList: [
|
{ content: '不限期限', value: '', active: true },
|
{ content: '3个月', value: 3, active: false },
|
{ content: '6个月', value: 6, active: false },
|
{ content: '12个月', value: 12, active: false },
|
{ content: '2年', value: 24, active: false },
|
{ content: '3年', value: 36, active: false },
|
{ content: '5年', value: 60, active: false },
|
{ content: '10年', value: 120, active: false }
|
],
|
prodList: [], // 产品列表
|
showNone: false //产品列表空白页
|
};
|
},
|
methods: {
|
// 用户只能输入点与数字
|
handleInputMoney() {
|
let _this = this;
|
setTimeout(function() {
|
if (_this.money) {
|
// 未超过字符的话，可以其他非要求字符转换为空字符串
|
if (_this.money.length > 5) {
|
_this.money = _this.money.substring(0, 5);
|
} else {
|
_this.money = _this.money.replace(/[^\d.]/g, '');
|
}
|
}
|
}, 50);
|
},
|
// 点击遮罩
|
handleClickMask() {
|
// 如果下拉存在的话
|
if (this.showFilterList || this.showFilterMoney) {
|
this.filterFixed = false;
|
this.showFilterList = false;
|
this.showFilterMoney = false;
|
this.filterTab[0].activeTriangle = false;
|
this.filterTab[1].activeTriangle = false;
|
this.money = '';
|
}
|
},
|
// 获取bank贷款下，四个tab的code
|
getBankLoanType() {
|
let _this = this;
|
systemApi.fetchQuestionAndTypeList().then(
|
response => {
|
_this.bankTypeList = response.bankLoanType;
|
},
|
error => {
|
statusCodeManage.showTipOfStatusCode(error, _this);
|
}
|
);
|
},
|
// 不限金额的点击
|
unlimitedAmount() {
|
// 如果有期限的话，
|
for (let i = 0; i < this.filterList.length; i++) {
|
if (this.filterList[i].active) {
|
if (this.filterList[i].content === '不限期限') {
|
this.init(null, this.callBack);
|
} else {
|
this.init(
|
{ limit: this.filterList[i].value },
|
this.callBack
|
);
|
}
|
}
|
}
|
this.filterTab[0].activeTriangle = false;
|
this.showFilterMoney = false;
|
this.filterFixed = false;
|
this.money = '';
|
if (this.filterTab[0].content === '不限金额') {
|
return false;
|
}
|
// 选中tab
|
this.filterTab[0].content = '不限金额';
|
},
|
// 输入金额点击确定
|
handleAmount() {
|
let reg = /(^[1-9]\d{0,4}$)|(^\d\.\d{1,3}$)|(^[1-9]\d\.\d{1,2}$)|(^[1-9]\d{2}\.\d{1}$)/;
|
if (
|
!reg.test(this.money) ||
|
this.money > 1000 ||
|
this.money < 0.1
|
) {
|
this.$vux.toast.text('请输入有效的金额', 'middle');
|
return;
|
}
|
// 如果通过话的
|
this.filterTab[0].content = this.money + '万元';
|
for (let i = 0; i < this.filterList.length; i++) {
|
if (this.filterList[i].active) {
|
if (this.filterList[i].content === '不限期限') {
|
this.init({ money: this.money * 10000 }, this.callBack);
|
} else {
|
this.init(
|
{
|
money: this.money * 10000,
|
limit: this.filterList[i].value
|
},
|
this.callBack
|
);
|
}
|
}
|
}
|
this.filterTab[0].activeTriangle = false;
|
this.showFilterMoney = false;
|
this.filterFixed = false;
|
},
|
// 处理产品跳转
|
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
|
}
|
});
|
}
|
},
|
// 职业选择的跳转列表
|
jobFilterJump(item) {
|
this.$router.push({
|
path: '/f-job-loan',
|
query: {
|
type: item.code
|
}
|
});
|
},
|
// 处理滚动
|
handleScroll() {
|
let _this = this;
|
if (this.showFilterList || this.showFilterMoney) {
|
return false;
|
} else {
|
window.scrollY > 108
|
? (_this.filterFixed = true)
|
: (_this.filterFixed = false);
|
}
|
},
|
// 切换的tab
|
handleFilterTab(item, index) {
|
// 点击有下拉的话，那么就是进行定位，如果不是有下列的话，那么直接
|
// 调接口，进行数据渲染
|
if (item.isPullDown) {
|
// 当点击selectTab的时候，如果距离顶部的距离是小于152的话，大于44的话，那么
|
// 那么就会，定位到tab的切换的下面.其他的情况下，不进行定位。
|
if (index === 0) {
|
// 如果选择的是金额的话
|
this.showFilterMoney = true;
|
this.showFilterList = false;
|
if (item.content === '不限金额') {
|
this.activeMoney = true;
|
}
|
} else {
|
// 不限期限的
|
this.showFilterMoney = false;
|
this.showFilterList = true;
|
}
|
if (!item.pullDownActive) {
|
item.pullDownActive = true;
|
}
|
this.filterFixed = true;
|
this.filterTab[index].activeTriangle = true;
|
} else {
|
// 热门即综合排序
|
if (item.content === '热门') {
|
// 判断期限与金额是否选择了
|
let submitInfo = {};
|
if (this.filterTab[0].content !== '不限金额') {
|
submitInfo.money = this.money * 10000;
|
}
|
if (this.filterTab[1].content !== '不限期限') {
|
for (let i = 0; i < this.filterList.length; i++) {
|
if (this.filterList[i].active) {
|
submitInfo.limit = this.filterList[i].value;
|
}
|
}
|
}
|
this.init(submitInfo, this.callBack);
|
} else if (item.content === '利息低') {
|
let submitInfo = {};
|
if (this.filterTab[0].content !== '不限金额') {
|
submitInfo.money = this.money * 10000;
|
}
|
if (this.filterTab[1].content !== '不限期限') {
|
for (let i = 0; i < this.filterList.length; i++) {
|
if (this.filterList[i].active) {
|
submitInfo.limit = this.filterList[i].value;
|
}
|
}
|
}
|
submitInfo.compareField = 'loanRate';
|
this.init(submitInfo, this.callBack);
|
}
|
this.showFilterList = false;
|
this.showFilterMoney = false;
|
if (this.filterFixed) {
|
// 取消定位，以及下拉弹窗
|
this.filterFixed = false;
|
}
|
this.filterTab[0].activeTriangle = false;
|
this.filterTab[1].activeTriangle = false;
|
// 如果是从点击有下拉的选项的话，并且滑动一定距离的话，再点击没有下拉的tab
|
// 会出现滑动到底部，此时需要把页面滑动顶部
|
window.scrollTo(0, 0);
|
}
|
},
|
// 点击期限传递的都是以月为单位
|
handleFilterCellClick(filterItem) {
|
// 更新filter的值
|
this.filterTab[1].content = filterItem.content;
|
// 进行筛选
|
if (filterItem.content === '不限期限') {
|
if (this.filterTab[0].content !== '不限金额') {
|
this.init({ money: this.money * 10000 }, this.callBack);
|
} else {
|
this.init(null, this.callBack);
|
}
|
} else if (filterItem.content.indexOf('月') !== -1) {
|
let limitMonth = parseInt(filterItem.content.slice(0, -2));
|
if (this.filterTab[0].content !== '不限金额') {
|
this.init(
|
{ money: this.money * 10000, limit: limitMonth },
|
this.callBack
|
);
|
} else {
|
this.init({ limit: limitMonth }, this.callBack);
|
}
|
} else if (filterItem.content.indexOf('年') !== -1) {
|
let limitYear = parseInt(filterItem.content.slice(0, -1)) * 12;
|
if (this.filterTab[0].content !== '不限金额') {
|
this.init(
|
{ money: this.money * 10000, limit: limitYear },
|
this.callBack
|
);
|
} else {
|
this.init({ limit: limitYear }, this.callBack);
|
}
|
}
|
// 并更改其选中状态，并把其他的选择的状态清空
|
this.filterList.forEach(function(item) {
|
item.content === filterItem.content
|
? (item.active = true)
|
: (item.active = false);
|
});
|
// 取消定位，以及下拉弹窗
|
this.filterTab[1].activeTriangle = false;
|
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;
|
},
|
callBack() {
|
let dom = this.$refs.point;
|
let scrollTop = dom.offsetTop;
|
this.$nextTick(function () {
|
window.scrollTo(0, scrollTop - 44);
|
});
|
},
|
init(filterCond = null, callBack) {
|
let _this = this;
|
let submitInfo = {
|
prodType: 40000006 // 银行贷款
|
};
|
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);
|
}
|
);
|
}
|
},
|
components: {
|
FilterTab,
|
FSpace,
|
FProdList,
|
Group,
|
Cell,
|
XInput,
|
FButton
|
},
|
activated() {
|
this.showFilterList = false;
|
this.showFilterMoney = false;
|
this.scrolledTop = 0;
|
this.money = '';
|
this.bankTypeList = []; // 职业的tab对应的code
|
this.filterFixed = false; // 是否固定
|
this.activeMoney = false; // 金额的选择
|
this.filterTab = [
|
{
|
isPullDown: true,
|
content: '不限金额',
|
pullDownActive: false,
|
activeTriangle: false
|
},
|
{
|
isPullDown: true,
|
content: '不限期限',
|
pullDownActive: false,
|
activeTriangle: false
|
},
|
{ isPullDown: false, content: '热门', pullDownActive: false },
|
{ isPullDown: false, content: '利息低', pullDownActive: false }
|
];
|
this.filterList = [
|
{ content: '不限期限', value: '', active: true },
|
{ content: '3个月', value: 3, active: false },
|
{ content: '6个月', value: 6, active: false },
|
{ content: '12个月', value: 12, active: false },
|
{ content: '2年', value: 24, active: false },
|
{ content: '3年', value: 36, active: false },
|
{ content: '5年', value: 60, active: false },
|
{ content: '10年', value: 120, active: false }
|
];
|
this.prodList = [];
|
this.showNone = false;
|
this.$store.commit('UPDATE_ACTIVE_TAB', { loanActiveTab: 1 });
|
this.getBankLoanType();
|
this.init(null, null);
|
window.addEventListener(
|
'scroll',
|
throttle(this.handleScroll, 50),
|
false
|
);
|
}
|
};
|
</script>
|
|
<style lang="less">
|
@import '../../style/mixin';
|
.filter-fixed {
|
position: fixed !important;
|
left: 0 !important;
|
top: 44px !important;
|
z-index: 1002 !important;
|
}
|
.bank-loan-page {
|
.filter-fixed-space {
|
height: 32px;
|
}
|
.weui-cells {
|
&:before {
|
height: 0;
|
border-top: 0;
|
}
|
}
|
.vux-x-input {
|
&:before {
|
height: 0;
|
border-top: 0;
|
}
|
}
|
.vux-label {
|
font-size: @font-size-base;
|
}
|
.money-box {
|
position: relative;
|
.unit {
|
position: absolute;
|
left: 64%;
|
top: 0;
|
height: 30px;
|
line-height: 30px;
|
font-size: @font-size-medium;
|
}
|
}
|
.speed-sticky-box {
|
height: 44px;
|
}
|
.speed-filter {
|
width: 100%;
|
height: 32px;
|
}
|
.weui-mask {
|
z-index: 1001;
|
}
|
.money-filter-list {
|
width: 100%;
|
background: @color-white;
|
.weui-cell__bd {
|
border: 1px solid @color-divider-regular;
|
border-radius: @border-radius-normal-size;
|
}
|
.weui-input {
|
padding-left: 14px;
|
font-size: @font-size-medium;
|
height: 30px;
|
line-height: 30px;
|
}
|
.vux-x-input {
|
padding: 0 15px;
|
}
|
.f-button {
|
margin-left: 10px;
|
}
|
.any-money {
|
padding: 10px 15px;
|
font-size: @font-size-base;
|
color: @color-text-primary;
|
}
|
.active-money {
|
color: @color-primary;
|
}
|
.filter-tip {
|
padding: 10px 15px;
|
font-size: @font-size-small;
|
color: @color-text-third;
|
}
|
}
|
.filter-list {
|
width: 100%;
|
background: @color-white;
|
.filter-active {
|
color: @color-primary;
|
}
|
}
|
.job-type {
|
.flexLayout();
|
box-sizing: border-box;
|
padding: 20px 0 10px;
|
.type-item {
|
flex: 1;
|
text-align: center;
|
span {
|
display: inline-block;
|
width: 44px;
|
height: 44px;
|
line-height: 44px;
|
color: #fff;
|
border-radius: 50%;
|
overflow: hidden;
|
.icon {
|
width: 44px;
|
height: 50px;
|
}
|
}
|
}
|
.iconfont {
|
font-size: 20px;
|
}
|
}
|
}
|
</style>
|
