|
Before Width: | Height: | Size: 4.9 KiB After Width: | Height: | Size: 4.9 KiB |
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 4.6 KiB |
|
Before Width: | Height: | Size: 9.7 KiB After Width: | Height: | Size: 9.7 KiB |
|
Before Width: | Height: | Size: 4.8 KiB After Width: | Height: | Size: 4.8 KiB |
|
Before Width: | Height: | Size: 9.9 KiB After Width: | Height: | Size: 9.9 KiB |
|
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 4.5 KiB |
|
Before Width: | Height: | Size: 9.7 KiB After Width: | Height: | Size: 9.7 KiB |
@ -0,0 +1,304 @@ |
||||
<template> |
||||
<div> |
||||
<h6 class="pl-3 mb-4 text-lg font-semibold text-[#333] border-l-[5px] border-l-[#006BFF]">银行市场</h6> |
||||
<div class="filter block"> |
||||
<dl> |
||||
<dt>担保方式：</dt> |
||||
<div class="vals"> |
||||
<dd v-for="(item, i) in productTypes" |
||||
:key="i" |
||||
:class="{ active: params.productType === item.id }" |
||||
@click="filterClick(item, 'productType')">{{ item.name }}</dd> |
||||
</div> |
||||
</dl> |
||||
<dl> |
||||
<dt>担保方式：</dt> |
||||
<div class="vals"> |
||||
<dd v-for="(item, i) in guarantees" |
||||
:key="i" |
||||
:class="{ active: params.guarantyStyleId === item.id }" |
||||
@click="filterClick(item, 'guarantyStyleId')">{{ item.name }}</dd> |
||||
</div> |
||||
</dl> |
||||
<dl> |
||||
<dt>贷款期限：</dt> |
||||
<div class="vals"> |
||||
<dd v-for="(item, i) in times" |
||||
:key="i" |
||||
:class="{ active: params.time === item.id }" |
||||
@click="filterClick(item, 'time')">{{ item.name }}</dd> |
||||
</div> |
||||
</dl> |
||||
<dl> |
||||
<dt>贷款额度：</dt> |
||||
<div class="vals"> |
||||
<dd v-for="(item, i) in moneys" |
||||
:key="i" |
||||
:class="{ active: params.money === item.id }" |
||||
@click="filterClick(item, 'time')">{{ item.name }}</dd> |
||||
</div> |
||||
</dl> |
||||
</div> |
||||
<div class="block mt-3"> |
||||
<div class="search mb-2"> |
||||
<input type="text" |
||||
placeholder="搜索" |
||||
maxlength="20" /> |
||||
<img src="@/assets/images/search.png" |
||||
alt="" |
||||
class="icon" /> |
||||
</div> |
||||
<el-table ref="table" |
||||
v-loading="loading" |
||||
:data="list"> |
||||
<el-table-column prop="productName" |
||||
label="贷款名称" |
||||
min-width="110"></el-table-column> |
||||
<el-table-column prop="loanCeiling" |
||||
label="贷款对象" |
||||
min-width="80"> |
||||
<template #default="{ row }"> |
||||
{{ row.productType ? '企业' : '个人' }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="guarantyStyle" |
||||
label="担保方式" |
||||
min-width="80"></el-table-column> |
||||
<el-table-column prop="guarantyStyle" |
||||
label="贷款期限" |
||||
min-width="80"></el-table-column> |
||||
<el-table-column prop="guarantyStyle" |
||||
label="贷款额度" |
||||
min-width="80"></el-table-column> |
||||
<el-table-column prop="guarantyStyle" |
||||
label="参考利率范围" |
||||
min-width="80"></el-table-column> |
||||
<el-table-column prop="operationTime" |
||||
label="发布日期" |
||||
min-width="80"></el-table-column> |
||||
<el-table-column prop="id" |
||||
label="操作" |
||||
width="100"> |
||||
<template #default="{ row }"> |
||||
<el-button type="text" |
||||
size="small" |
||||
@click="toDetail(row)">查看详情</el-button> |
||||
</template></el-table-column> |
||||
</el-table> |
||||
<el-pagination v-model:currentPage="currentPage" |
||||
v-model:pageSize="pageSize" |
||||
:total="total" |
||||
:page-sizes="pageSizes" |
||||
:layout="pageLayout" |
||||
@size-change="getList()" |
||||
@current-change="getList()" |
||||
small |
||||
background |
||||
class="px-3 py-2 justify-end"></el-pagination> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { computed, onMounted, ref, reactive, watch } from 'vue'; |
||||
import { ElMessage } from 'element-plus'; |
||||
import { pageSizes, pageLayout, toParams, resetParams } from '@/utils/common'; |
||||
import { getProcessInformationBasedOnRoles } from '@/api/judgment'; |
||||
import { bankingProductsList, batchDeletion } from '@/api/bank'; |
||||
import Search from '@/components/Search.vue'; |
||||
import { useRouter, useRoute } from 'vue-router'; |
||||
import Cookies from 'js-cookie'; |
||||
import { productState, getExpertStatus, getStatus } from '@/store/useProduct'; |
||||
|
||||
const router = useRouter(); |
||||
const route = useRoute(); |
||||
const productTypes = ref<Record<string, any>[]>([ |
||||
{ |
||||
id: '', |
||||
name: '不限', |
||||
}, |
||||
{ |
||||
id: 0, |
||||
name: '个人', |
||||
}, |
||||
{ |
||||
id: 1, |
||||
name: '企业', |
||||
}, |
||||
]); |
||||
const times = ref<Record<string, any>[]>([ |
||||
{ |
||||
id: '', |
||||
name: '不限', |
||||
}, |
||||
{ |
||||
id: 1, |
||||
name: '<=6个月', |
||||
}, |
||||
{ |
||||
id: 2, |
||||
name: '6-12个月', |
||||
}, |
||||
{ |
||||
id: 3, |
||||
name: '12-36个月', |
||||
}, |
||||
{ |
||||
id: 4, |
||||
name: '>36个月', |
||||
}, |
||||
]); |
||||
const moneys = ref<Record<string, any>[]>([ |
||||
{ |
||||
id: '', |
||||
name: '不限', |
||||
}, |
||||
{ |
||||
id: 1, |
||||
name: '<=100万', |
||||
}, |
||||
{ |
||||
id: 2, |
||||
name: '100-200万', |
||||
}, |
||||
{ |
||||
id: 3, |
||||
name: '200-500万', |
||||
}, |
||||
{ |
||||
id: 4, |
||||
name: '500-1000万', |
||||
}, |
||||
{ |
||||
id: 5, |
||||
name: '>1000万', |
||||
}, |
||||
]); |
||||
const projectId = +Cookies.get('sand-projectId'); |
||||
const levelId = +Cookies.get('sand-level'); |
||||
const params = reactive({ |
||||
createDateSort: '', |
||||
guarantyStyleId: '', |
||||
keyWord: '', |
||||
productType: '', |
||||
status: '', |
||||
time: '', |
||||
money: '', |
||||
roleId: computed(() => +route.query.role || 41), |
||||
checkPointId: levelId, |
||||
projectId, |
||||
}); |
||||
const currentPage = ref<number>(1); |
||||
const pageSize = ref<number>(10); |
||||
const total = ref<number>(0); |
||||
const table = ref<any>(); |
||||
const guarantees = ref<Array<any>>([]); |
||||
const list = ref<Array<any>>([]); |
||||
const loading = ref<boolean>(false); |
||||
// 担保方式 |
||||
const getGuarantee = async () => { |
||||
try { |
||||
const { process } = await getProcessInformationBasedOnRoles(44); |
||||
guarantees.value = [ |
||||
{ |
||||
id: '', |
||||
name: '不限', |
||||
}, |
||||
...process[5].recordChildren, |
||||
]; |
||||
} finally { |
||||
} |
||||
}; |
||||
// 列表 |
||||
const getList = async () => { |
||||
loading.value = true; |
||||
try { |
||||
const { data } = await bankingProductsList({ pageNum: currentPage.value, pageSize: pageSize.value, ...toParams(params) }); |
||||
list.value = data.message.records; |
||||
total.value = data.message.total; |
||||
} finally { |
||||
loading.value = false; |
||||
} |
||||
}; |
||||
// 重置列表 |
||||
const initList = async () => { |
||||
currentPage.value = 1; |
||||
getList(); |
||||
}; |
||||
onMounted(() => { |
||||
getGuarantee(); |
||||
getList(); |
||||
}); |
||||
|
||||
watch([params, () => route.query], initList); |
||||
|
||||
// 筛选点击 |
||||
const filterClick = (item: Record<string, any>, key: string) => { |
||||
params[key] = item.id; |
||||
}; |
||||
// 产品详情 |
||||
const toDetail = async (row: Record<string, any>) => { |
||||
router.push(`/finance/bankDetail?id=${row.id}&name=${params.keyWord}`); |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.filter { |
||||
dl { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
align-items: center; |
||||
margin-bottom: 17px; |
||||
&:last-child { |
||||
margin-bottom: 0; |
||||
} |
||||
dt, |
||||
dd { |
||||
font-size: 14px; |
||||
font-family: MiSans; |
||||
color: #333; |
||||
} |
||||
.vals { |
||||
display: inline-flex; |
||||
flex-wrap: wrap; |
||||
align-items: center; |
||||
margin-left: 10px; |
||||
} |
||||
dd { |
||||
padding: 6px 10px; |
||||
margin-right: 10px; |
||||
cursor: pointer; |
||||
} |
||||
.active { |
||||
color: #fff; |
||||
background: #006bff; |
||||
border-radius: 4px; |
||||
} |
||||
} |
||||
} |
||||
.search { |
||||
position: relative; |
||||
width: 320px; |
||||
padding: 0 12px; |
||||
background-color: #f6f8fc; |
||||
border-radius: 8px; |
||||
input { |
||||
width: 90%; |
||||
height: 36px; |
||||
font-size: 14px; |
||||
line-height: 36px; |
||||
color: #333; |
||||
border: 0; |
||||
background-color: transparent; |
||||
&:focus { |
||||
outline: none; |
||||
} |
||||
} |
||||
.icon { |
||||
position: absolute; |
||||
top: 9px; |
||||
right: 12px; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
</style> |
||||