249 lines
9.2 KiB
Vue
249 lines
9.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 class="sort" @click="sortFunction(0)">线下审批<img :src="getAssetsFile('images/finance/default.png')" alt="" /></div>
|
|
<div class="sort" @click="sortFunction(1)">贷款额度<img :src="getAssetsFile('images/finance/default.png')" alt="" /></div>
|
|
<div class="sort" @click="sortFunction(2)">贷款利率<img :src="getAssetsFile('images/finance/default.png')" alt="" /></div>
|
|
<div class="sort" @click="sortFunction(3)">贷款期限<img :src="getAssetsFile('images/finance/default.png')" alt="" /></div>
|
|
</div>
|
|
</el-card>
|
|
<el-card v-for="(item, index) in dataList" :key="index" :body-style="{ padding: '0' }" style="border-radius: 16px; margin-top: 20px">
|
|
<div style="display: flex; justify-content: space-between; padding: 20px">
|
|
<div>
|
|
<img :src="getAssetsFile(item.imgPath)" alt="" style="width: 160px" />
|
|
</div>
|
|
<div style="display: flex; flex-direction: column; justify-content: space-between; padding: 40px 20px">
|
|
<div style="font-size: 20px; font-weight: bold; text-align: left">{{ item.name }}</div>
|
|
<div style="display: flex" class="tags">
|
|
<div>额度高</div>
|
|
<div>政策扶持</div>
|
|
</div>
|
|
</div>
|
|
<div style="display: flex" class="bankInfo">
|
|
<div style="display: flex">
|
|
<div class="infoTitle">最快放款</div>
|
|
<div class="infoValue">{{ item.fast }}</div>
|
|
</div>
|
|
<div style="display: flex">
|
|
<div class="infoTitle">申请额度</div>
|
|
<div>{{ item.maxMoney }}</div>
|
|
</div>
|
|
<div style="display: flex">
|
|
<div class="infoTitle">最长期限</div>
|
|
<div>{{ item.maxDate }}</div>
|
|
</div>
|
|
<div style="display: flex">
|
|
<div class="infoTitle">年利率</div>
|
|
<div>{{ item.rate }}</div>
|
|
</div>
|
|
<div style="display: flex">
|
|
<div class="infoTitle">投保方式</div>
|
|
<div>{{ item.ways }}</div>
|
|
</div>
|
|
</div>
|
|
<div style="margin: auto 0">
|
|
<el-button style="background-color: #25bf82; color: #ffffff; border-radius: 11px; padding: 20px; font-size: 18px"> 查看详情 </el-button>
|
|
</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: 2,
|
|
size: 20,
|
|
page: 1,
|
|
});
|
|
|
|
const dataList = ref([
|
|
{
|
|
id: 1,
|
|
name: '惠农e贷',
|
|
fast: '1周',
|
|
maxMoney: '最高100万',
|
|
maxDate: '最长60个月',
|
|
rate: '4.05%起',
|
|
ways: '信用',
|
|
imgPath: 'images/finance/nyyh.png',
|
|
},
|
|
{
|
|
id: 2,
|
|
name: '农贷通',
|
|
fast: '2周',
|
|
maxMoney: '最高50万',
|
|
maxDate: '最长60个月',
|
|
rate: '4.15%起',
|
|
ways: '信用',
|
|
imgPath: 'images/finance/yzcx.png',
|
|
},
|
|
]);
|
|
|
|
// #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 sortMap = ref({
|
|
currentSorting: '',
|
|
currentStatus: '',
|
|
});
|
|
|
|
const sortFunction = (type) => {};
|
|
|
|
const getList = () => {
|
|
console.log('刷新数据');
|
|
};
|
|
// #endregion
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.bankInfo {
|
|
width: calc(100% - 460px);
|
|
justify-content: space-around;
|
|
padding: 45px 20px;
|
|
.infoValue {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
}
|
|
div {
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
}
|
|
.infoTitle {
|
|
color: #999999;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
.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;
|
|
}
|
|
.tags {
|
|
font-size: 14px;
|
|
color: #25bf82;
|
|
div {
|
|
margin-right: 10px;
|
|
padding: 5px;
|
|
border: 1px solid #25bf82;
|
|
background-color: rgba(37, 191, 130, 0.1);
|
|
border-radius: 8px;
|
|
}
|
|
}
|
|
.sort {
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
img {
|
|
width: 15px;
|
|
height: 15px;
|
|
}
|
|
}
|
|
</style>
|