<template>
|
<div class="jon-type-page" v-if="jobTypeInfo">
|
<x-header :left-options.showBack="{backText: ''}" :title="jobTypeInfo.name" class="gradient-color"></x-header>
|
<!--筛选与列表板块-->
|
<div ref="stickyBox" class="filter-fixed">
|
<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"
|
: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>
|
<!--产品列表-->
|
<FProdList :lists="prodList" :showNone="showNone" @on-click-prodItem="handleProductJump"></FProdList>
|
</div>
|
</template>
|
|
<script>
|
/**
|
* Created by c.y on 2018/4/9.
|
* 银行卡贷款的--职业分类的列表
|
*/
|
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 systemApi from '../../api/api';
|
import statusCodeManage from '../../api/statusCodeManage';
|
import {XHeader, Group, Cell, XInput} from 'vux';
|
|
export default {
|
name: 'f-job-loan',
|
data() {
|
return {
|
pageTitle: '上班族',
|
showFilterList: false, // 显示筛选下拉
|
showFilterMoney: false, // 显示金额输入的下拉
|
activeMoney: false, // 金额的选择
|
jobTypeInfo: null, // 产品分类信息
|
filterFixed: false, // 是否固定
|
scrolledTop: 0,
|
money: '', // 输入的金额
|
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);
|
},
|
// 处理产品跳转
|
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: '/credit-detail',
|
query: {
|
id: item.prodId
|
}
|
});
|
}
|
},
|
// 点击遮罩
|
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 = '';
|
}
|
},
|
// 切换的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.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);
|
} 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.filterFixed = false;
|
this.showFilterList = false;
|
this.showFilterMoney = 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});
|
} else {
|
this.init();
|
}
|
} 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});
|
} else {
|
this.init({limit: limitMonth});
|
}
|
} 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});
|
} else {
|
this.init({limit: limitYear});
|
}
|
}
|
// 并更改其选中状态，并把其他的选择的状态清空
|
this.filterList.forEach(function (item) {
|
item.content === filterItem.content
|
? (item.active = true)
|
: (item.active = false);
|
});
|
// 取消定位，以及下拉弹窗
|
this.filterTab[1].activeTriangle = false;
|
this.showFilterList = false;
|
},
|
// 不限金额的点击
|
unlimitedAmount() {
|
this.init();
|
this.filterTab[0].activeTriangle = false;
|
this.showFilterMoney = false;
|
this.filterFixed = false;
|
if (this.filterTab[0].content === '不限金额') {
|
return false;
|
}
|
// 选中tab
|
this.filterTab[0].content = '不限金额';
|
// 并更改其选中状态，并把其他的选择的状态清空
|
this.filterList.forEach(function (item) {
|
item.content === '不限金额'
|
? (item.active = true)
|
: (item.active = false);
|
});
|
},
|
// 输入金额点击确定
|
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 false;
|
}
|
// 如果通过话的
|
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});
|
} else {
|
this.init({
|
money: this.money * 10000,
|
limit: this.filterList[i].value
|
});
|
}
|
}
|
}
|
this.filterTab[0].activeTriangle = false;
|
this.showFilterMoney = 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) {
|
let _this = this;
|
let submitInfo = {
|
prodType: 40000006, // 银行贷款
|
suitable: this.$route.query.type // 职业分类
|
};
|
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.showNone = true;
|
},
|
error => {
|
statusCodeManage.showTipOfStatusCode(error,_this);
|
}
|
);
|
},
|
getBankLoanType(code) {
|
let _this = this;
|
systemApi.fetchQuestionAndTypeList().then(
|
response => {
|
for (let i = 0; i < response.bankLoanType.length; i++) {
|
if (response.bankLoanType[i].code === code) {
|
_this.jobTypeInfo = response.bankLoanType[i];
|
}
|
}
|
},
|
error => {
|
statusCodeManage.showTipOfStatusCode(error,_this);
|
}
|
);
|
}
|
},
|
components: {
|
FilterTab,
|
FSpace,
|
FProdList,
|
Group,
|
Cell,
|
XInput,
|
FButton,
|
XHeader
|
},
|
activated() {
|
this.$store.commit('UPDATE_APP_STYLE', {
|
overflow: 'initial',
|
'-webkit-overflow-scrolling': 'initial'
|
});
|
this.getBankLoanType(this.$route.query.type);
|
this.init();
|
},
|
deactivated() {
|
this.jobTypeInfo = null;
|
this.prodList = [];
|
this.showFilterList = false;
|
this.showFilterMoney = false;
|
this.filterFixed = false;
|
this.activeMoney = false;
|
this.filterTab = [
|
{isPullDown: true, content: '不限金额', pullDownActive: false},
|
{isPullDown: true, content: '不限期限', pullDownActive: false},
|
{isPullDown: false, content: '热门', pullDownActive: false},
|
{isPullDown: false, content: '利息低', pullDownActive: false}
|
];
|
}
|
};
|
</script>
|
|
<style lang="less">
|
@import '../../style/mixin';
|
|
.jon-type-page {
|
.vux-header {
|
position: fixed;
|
left: 0;
|
top: 0;
|
width: 100%;
|
z-index: 1002;
|
}
|
.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;
|
}
|
}
|
}
|
.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;
|
}
|
.filter-fixed {
|
position: fixed;
|
left: 0;
|
top: 44px;
|
width: 100%;
|
z-index: 1002;
|
}
|
.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;
|
}
|
}
|
.prod-list-component {
|
padding-top: 78px;
|
}
|
}
|
</style>
|
