187 lines
7.2 KiB
Vue
187 lines
7.2 KiB
Vue
<template>
|
|
<div>
|
|
<common>
|
|
<template #main>
|
|
<el-card style="border-radius: 16px">
|
|
<div class="choose">
|
|
<div class="searchType">贷款金额</div>
|
|
<div :class="{ active: chooseMoney === 0 }" class="chooseAll" @click="changeChoose('money', 0)">不限</div>
|
|
<div :class="{ active: chooseMoney === 1 }" class="chooseItem" @click="changeChoose('money', 1)">50万元及以下</div>
|
|
<div :class="{ active: chooseMoney === 2 }" class="chooseItem" @click="changeChoose('money', 2)">50~100万元</div>
|
|
<div :class="{ active: chooseMoney === 3 }" class="chooseItem" @click="changeChoose('money', 3)">100~300万元</div>
|
|
<div :class="{ active: chooseMoney === 4 }" class="chooseItem" @click="changeChoose('money', 4)">300~500万元</div>
|
|
<div :class="{ active: chooseMoney === 5 }" class="chooseItem" @click="changeChoose('money', 5)">500万元及以下</div>
|
|
</div>
|
|
<div class="choose">
|
|
<div class="searchType">贷款期限</div>
|
|
<div :class="{ active: chooseDate === 0 }" class="chooseAll" @click="changeChoose('date', 0)">不限</div>
|
|
<div :class="{ active: chooseDate === 1 }" class="chooseItem" @click="changeChoose('date', 1)">6个月及以下</div>
|
|
<div :class="{ active: chooseDate === 2 }" class="chooseItem" @click="changeChoose('date', 2)">6~12个月</div>
|
|
<div :class="{ active: chooseDate === 3 }" class="chooseItem" @click="changeChoose('date', 3)">12~24个月</div>
|
|
<div :class="{ active: chooseDate === 4 }" class="chooseItem" @click="changeChoose('date', 4)">24~36个月</div>
|
|
<div :class="{ active: chooseDate === 5 }" class="chooseItem" @click="changeChoose('date', 5)">36个月及以下</div>
|
|
</div>
|
|
<div class="choose">
|
|
<div class="searchType">投保方式</div>
|
|
<div :class="{ active: chooseWay === 0 }" class="chooseAll" @click="changeChoose('way', 0)">不限</div>
|
|
<div :class="{ active: chooseWay === 1 }" class="chooseItem" @click="changeChoose('way', 1)">信用</div>
|
|
<div :class="{ active: chooseWay === 2 }" class="chooseItem" @click="changeChoose('way', 2)">抵押</div>
|
|
<div :class="{ active: chooseWay === 3 }" class="chooseItem" @click="changeChoose('way', 3)">质保</div>
|
|
<div :class="{ active: chooseWay === 4 }" class="chooseItem" @click="changeChoose('way', 4)">保证</div>
|
|
<div :class="{ active: chooseWay === 5 }" class="chooseItem" @click="changeChoose('way', 5)">其他</div>
|
|
</div>
|
|
<div class="choose">
|
|
<div class="searchType">消费主体</div>
|
|
<div :class="{ active: chooseUse === 0 }" class="chooseAll" @click="changeChoose('use', 0)">不限</div>
|
|
<div :class="{ active: chooseUse === 1 }" class="chooseItem" @click="changeChoose('use', 1)">种植</div>
|
|
<div :class="{ active: chooseUse === 2 }" class="chooseItem" @click="changeChoose('use', 2)">养殖</div>
|
|
<div :class="{ active: chooseUse === 3 }" class="chooseItem" @click="changeChoose('use', 3)">加工</div>
|
|
<div :class="{ active: chooseUse === 4 }" class="chooseItem" @click="changeChoose('use', 4)">仓储</div>
|
|
<div :class="{ active: chooseUse === 5 }" class="chooseItem" @click="changeChoose('use', 5)">流通</div>
|
|
</div>
|
|
<div class="choose">
|
|
<div class="searchType">产品类型</div>
|
|
<div :class="{ active: chooseType === 0 }" class="chooseAll" @click="changeChoose('type', 0)">不限</div>
|
|
<div :class="{ active: chooseType === 1 }" class="chooseItem" @click="changeChoose('type', 1)">线上审批</div>
|
|
<div :class="{ active: chooseType === 2 }" class="chooseItem" @click="changeChoose('type', 2)">线下审批</div>
|
|
<div :class="{ active: chooseType === 3 }" class="chooseItem" @click="changeChoose('type', 3)">秒批秒贷</div>
|
|
</div>
|
|
|
|
<div style="margin-top: 20px; display: flex; justify-content: space-between; font-size: 18px">
|
|
<div>
|
|
共匹配到 <span style="color: #25bf82">{{ pagination.total }}</span> 个结果
|
|
</div>
|
|
<div>线下审批</div>
|
|
<div>贷款额度</div>
|
|
<div>贷款利率</div>
|
|
<div>贷款期限</div>
|
|
</div>
|
|
</el-card>
|
|
<el-card style="border-radius: 16px; margin-top: 20px">
|
|
<div style="display: flex; justify-content: space-between">
|
|
<div>
|
|
<img :src="getAssetsFile('images/finance/nyyh.png')" alt="" style="width: 160px" />
|
|
</div>
|
|
<div style="display: flex; flex-direction: column; justify-content: space-between; padding: 20px">
|
|
<div>惠农e贷</div>
|
|
<div style="display: flex">
|
|
<div>额度高</div>
|
|
<div>政策扶持</div>
|
|
</div>
|
|
</div>
|
|
<div style="display: flex">
|
|
<div style="display: flex">
|
|
<div>最快放款</div>
|
|
<div>2周</div>
|
|
</div>
|
|
<div style="display: flex">
|
|
<div>申请额度</div>
|
|
<div>最高50万</div>
|
|
</div>
|
|
<div style="display: flex">
|
|
<div>最快放款</div>
|
|
<div>最长60个月</div>
|
|
</div>
|
|
<div style="display: flex">
|
|
<div>年利率</div>
|
|
<div>4.15%起</div>
|
|
</div>
|
|
<div style="display: flex">
|
|
<div>投保方式</div>
|
|
<div>信用</div>
|
|
</div>
|
|
</div>
|
|
<div></div>
|
|
</div>
|
|
</el-card>
|
|
</template>
|
|
</common>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
import common from '../components/common.vue';
|
|
import { getAssetsFile } from '../../../utils/index.js';
|
|
|
|
/* --------------- data --------------- */
|
|
// #region
|
|
const chooseMoney = ref(0);
|
|
const chooseDate = ref(0);
|
|
const chooseWay = ref(0);
|
|
const chooseUse = ref(0);
|
|
const chooseType = ref(0);
|
|
|
|
const pagination = ref({
|
|
total: 0,
|
|
size: 20,
|
|
page: 1,
|
|
});
|
|
|
|
const dataList = ref([
|
|
{
|
|
id: 1,
|
|
fast: '2周',
|
|
maxMoney: '最高50万',
|
|
},
|
|
]);
|
|
|
|
// #endregion
|
|
|
|
/* --------------- methods --------------- */
|
|
// #region
|
|
const changeChoose = (type, index) => {
|
|
switch (type) {
|
|
case 'money':
|
|
chooseMoney.value = index;
|
|
break;
|
|
case 'date':
|
|
chooseDate.value = index;
|
|
break;
|
|
case 'way':
|
|
chooseWay.value = index;
|
|
break;
|
|
case 'use':
|
|
chooseUse.value = index;
|
|
break;
|
|
case 'type':
|
|
chooseType.value = index;
|
|
break;
|
|
}
|
|
getList();
|
|
};
|
|
|
|
const getList = () => {
|
|
console.log('刷新数据');
|
|
};
|
|
// #endregion
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.choose {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
font-size: 18px;
|
|
font-weight: 400;
|
|
margin-bottom: 20px;
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
.searchType {
|
|
color: #999999;
|
|
}
|
|
.chooseAll {
|
|
margin: 0 30px;
|
|
cursor: pointer;
|
|
}
|
|
.chooseItem {
|
|
cursor: pointer;
|
|
margin-right: 20px;
|
|
}
|
|
}
|
|
.active {
|
|
color: #25bf82;
|
|
font-weight: bold;
|
|
}
|
|
</style>
|