parent
4385cfab8c
commit
2350694630
21 changed files with 658 additions and 75 deletions
@ -0,0 +1,6 @@ |
||||
import axios from '@/utils/request'; |
||||
// 金融市场
|
||||
export const queryStorage = async (id: number): Promise<any> => (await axios.get(`/backend/core/storage/${id}`)).data; |
||||
export const bankingProductMarketsList = async (data: Record<string, any>): Promise<any> => |
||||
(await axios.post('/product/product/bank/products/market/bankingProductMarketsList', data)).data; |
||||
export const insuranceMarketList = async (data: Record<string, any>): Promise<any> => (await axios.post('/product/insurance/products/market/insuranceMarketList', data)).data; |
||||
@ -0,0 +1,294 @@ |
||||
<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 rates" |
||||
:key="i" |
||||
:class="{ active: params.insuranceType === item.id }" |
||||
@click="filterClick(item, 'insuranceType')">{{ item.name }}</dd> |
||||
</div> |
||||
</dl> |
||||
<dl> |
||||
<dt>成立年限：</dt> |
||||
<div class="vals"> |
||||
<dd v-for="(item, i) in times" |
||||
: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 scales" |
||||
:key="i" |
||||
:class="{ active: params.loanPeriod === item.name }" |
||||
@click="filterClick(item, 'loanPeriod')">{{ 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="80"></el-table-column> |
||||
<el-table-column prop="productTypeText" |
||||
label="基金名称" |
||||
min-width="110"></el-table-column> |
||||
<el-table-column prop="guarantyStyle" |
||||
label="现净值" |
||||
min-width="80"></el-table-column> |
||||
<el-table-column prop="loanPeriod" |
||||
label="日增长率(%)" |
||||
min-width="80"></el-table-column> |
||||
<el-table-column prop="loanLimit" |
||||
label="近1周(%)" |
||||
min-width="80"></el-table-column> |
||||
<el-table-column prop="userName" |
||||
label="近1月(%)" |
||||
min-width="80"></el-table-column> |
||||
<el-table-column prop="userName" |
||||
label="近3月(%)" |
||||
min-width="80"></el-table-column> |
||||
<el-table-column prop="userName" |
||||
label="成立来(%)" |
||||
min-width="80"></el-table-column> |
||||
<el-table-column prop="userName" |
||||
label="基金规模(万元)" |
||||
min-width="80"></el-table-column> |
||||
<el-table-column prop="operationTime" |
||||
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 { onMounted, ref, reactive, watch } from 'vue'; |
||||
import { ElMessage } from 'element-plus'; |
||||
import { pageSizes, pageLayout, toParams } from '@/utils/common'; |
||||
import { fundProductList, batchDeletion } from '@/api/fund'; |
||||
import { useRouter, useRoute } from 'vue-router'; |
||||
import Cookies from 'js-cookie'; |
||||
|
||||
const router = useRouter(); |
||||
const route = useRoute(); |
||||
const projectId = +Cookies.get('sand-projectId'); |
||||
const levelId = +Cookies.get('sand-level'); |
||||
const params = reactive({ |
||||
createDateSort: '', |
||||
fundName: '', |
||||
checkPointId: levelId, |
||||
projectId, |
||||
}); |
||||
const currentPage = ref<number>(1); |
||||
const pageSize = ref<number>(10); |
||||
const total = ref<number>(0); |
||||
const table = ref<any>(); |
||||
const rates = ref<Record<string, any>[]>([ |
||||
{ |
||||
id: '', |
||||
name: '不限', |
||||
}, |
||||
{ |
||||
id: 1, |
||||
name: '0', |
||||
}, |
||||
{ |
||||
id: 2, |
||||
name: '0-0.5%', |
||||
}, |
||||
{ |
||||
id: 3, |
||||
name: '>0.5%', |
||||
}, |
||||
]); |
||||
const times = ref<Record<string, any>[]>([ |
||||
{ |
||||
id: '', |
||||
name: '不限', |
||||
}, |
||||
{ |
||||
id: 1, |
||||
name: '<=1个月', |
||||
}, |
||||
{ |
||||
id: 2, |
||||
name: '1-6个月', |
||||
}, |
||||
{ |
||||
id: 3, |
||||
name: '6个月-1年', |
||||
}, |
||||
{ |
||||
id: 4, |
||||
name: '>1年', |
||||
}, |
||||
]); |
||||
const scales = ref<Record<string, any>[]>([ |
||||
{ |
||||
id: '', |
||||
name: '不限', |
||||
}, |
||||
{ |
||||
id: 1, |
||||
name: '<=300万', |
||||
}, |
||||
{ |
||||
id: 2, |
||||
name: '300-500万', |
||||
}, |
||||
{ |
||||
id: 3, |
||||
name: '500-1000万', |
||||
}, |
||||
{ |
||||
id: 4, |
||||
name: '>1000万', |
||||
}, |
||||
]); |
||||
|
||||
const list = ref<Record<string, any>[]>([]); |
||||
const loading = ref<boolean>(false); |
||||
const stop = () => {}; |
||||
// 列表 |
||||
const getList = async () => { |
||||
loading.value = true; |
||||
try { |
||||
const { data } = await fundProductList({ pageNum: currentPage.value, pageSize: pageSize.value, ...toParams(params) }); |
||||
list.value = data.data.records; |
||||
total.value = data.data.total; |
||||
} finally { |
||||
loading.value = false; |
||||
} |
||||
}; |
||||
// 重置列表 |
||||
const initList = async () => { |
||||
currentPage.value = 1; |
||||
getList(); |
||||
}; |
||||
onMounted(() => { |
||||
getList(); |
||||
}); |
||||
|
||||
watch([params, () => route.query], initList); |
||||
const handleSort = ({ column, prop, order }: { column: any; prop: string; order: string }) => { |
||||
params.createDateSort = order === 'descending' ? 'desc' : order === 'ascending' ? 'asc' : ''; |
||||
getList(); |
||||
}; |
||||
// 新增 |
||||
const toAdd = () => { |
||||
router.push({ |
||||
path: `/product/fund/add`, |
||||
}); |
||||
}; |
||||
// 产品详情 |
||||
const toDetail = async (path: string, id: number) => { |
||||
router.push(`${path}?id=${id}&name=${params.fundName}`); |
||||
}; |
||||
// 卡片模式 |
||||
const toCardList = () => { |
||||
router.push(`/product/fund/${list.value.length ? `detail?id=${list.value[0].id}&name=${params.fundName}` : `add?name=${params.fundName}`}`); |
||||
}; |
||||
|
||||
const handleDelete = async (id: number) => { |
||||
await batchDeletion([id]); |
||||
getList(); |
||||
ElMessage.success('删除成功！'); |
||||
}; |
||||
</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> |
||||
@ -0,0 +1,261 @@ |
||||
<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 insuranceTypes" |
||||
:key="i" |
||||
:class="{ active: params.insuranceType === item.id }" |
||||
@click="filterClick(item, 'insuranceType')">{{ item.name }}</dd> |
||||
</div> |
||||
</dl> |
||||
<dl v-if="params.insuranceType !== 311"> |
||||
<dt>承保年龄：</dt> |
||||
<div class="vals"> |
||||
<dd v-for="(item, i) in ages" |
||||
:key="i" |
||||
:class="{ active: params.coverageAge === item.id }" |
||||
@click="filterClick(item, 'coverageAge')">{{ item.id }}</dd> |
||||
</div> |
||||
</dl> |
||||
<dl> |
||||
<dt>保障期限：</dt> |
||||
<div class="vals"> |
||||
<dd v-for="(item, i) in times" |
||||
:key="i" |
||||
:class="{ active: params.protectionPeriod === item.id }" |
||||
@click="filterClick(item, 'protectionPeriod')">{{ item.id }}</dd> |
||||
</div> |
||||
</dl> |
||||
</div> |
||||
<div class="block mt-3"> |
||||
<div class="search mb-2"> |
||||
<input type="text" |
||||
v-model="params.insuranceName" |
||||
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="insuranceName" |
||||
label="保险名称" |
||||
min-width="110"></el-table-column> |
||||
<el-table-column prop="insuranceTypeName" |
||||
label="险种分类" |
||||
min-width="80"></el-table-column> |
||||
<el-table-column v-if="params.insuranceType !== 311" |
||||
prop="guarantyStyle" |
||||
label="承保年龄" |
||||
min-width="80"> |
||||
|
||||
<template #default="{ row }"> |
||||
{{ row.minimumAge + '-' + row.maximumAge + '周岁' }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="insuranceDeadline" |
||||
label="保险期限" |
||||
min-width="80"></el-table-column> |
||||
<el-table-column prop="premiumAmount" |
||||
label="保费（元）" |
||||
min-width="80"></el-table-column> |
||||
<el-table-column prop="userName" |
||||
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 { onMounted, ref, reactive, watch } from 'vue'; |
||||
import { pageSizes, pageLayout, toParams } from '@/utils/common'; |
||||
import { insuranceMarketList } from '@/api/finance'; |
||||
import { useRouter, useRoute } from 'vue-router'; |
||||
import Cookies from 'js-cookie'; |
||||
|
||||
const router = useRouter(); |
||||
const route = useRoute(); |
||||
const projectId = +Cookies.get('sand-projectId'); |
||||
const levelId = +Cookies.get('sand-level'); |
||||
const params = reactive({ |
||||
insuranceName: '', |
||||
insuranceType: '', |
||||
coverageAge: '不限', |
||||
protectionPeriod: '不限', |
||||
checkPointId: levelId, |
||||
projectId, |
||||
}); |
||||
const currentPage = ref<number>(1); |
||||
const pageSize = ref<number>(10); |
||||
const total = ref<number>(0); |
||||
const table = ref<any>(); |
||||
const insuranceTypes = ref<Record<string, any>[]>([ |
||||
{ |
||||
id: '', |
||||
name: '不限', |
||||
}, |
||||
{ |
||||
id: 310, |
||||
name: '意外险', |
||||
}, |
||||
{ |
||||
id: 311, |
||||
name: '财产险', |
||||
}, |
||||
]); |
||||
const ages = ref<Record<string, any>[]>([ |
||||
{ |
||||
id: '不限', |
||||
}, |
||||
{ |
||||
id: '中年', |
||||
}, |
||||
{ |
||||
id: '少儿', |
||||
}, |
||||
{ |
||||
id: '老人', |
||||
}, |
||||
]); |
||||
const times = ref<Record<string, any>[]>([ |
||||
{ |
||||
id: '不限', |
||||
}, |
||||
{ |
||||
id: '<=1个月', |
||||
}, |
||||
{ |
||||
id: '1-6个月', |
||||
}, |
||||
{ |
||||
id: '6个月-1年', |
||||
}, |
||||
{ |
||||
id: '>1年', |
||||
}, |
||||
]); |
||||
const list = ref<Record<string, any>[]>([]); |
||||
const loading = ref<boolean>(false); |
||||
// 列表 |
||||
const getList = async () => { |
||||
loading.value = true; |
||||
try { |
||||
const { data } = await insuranceMarketList({ pageNum: currentPage.value, pageSize: pageSize.value, ...toParams(params) }); |
||||
list.value = data.records; |
||||
total.value = data.total; |
||||
} finally { |
||||
loading.value = false; |
||||
} |
||||
}; |
||||
// 重置列表 |
||||
const initList = async () => { |
||||
currentPage.value = 1; |
||||
getList(); |
||||
}; |
||||
onMounted(() => { |
||||
getList(); |
||||
}); |
||||
|
||||
watch([params, () => route.query], initList); |
||||
// 筛选点击 |
||||
const filterClick = (item: Record<string, any>, key: string) => { |
||||
params[key] = item.id; |
||||
}; |
||||
// 新增 |
||||
const toAdd = () => { |
||||
router.push({ |
||||
path: `/product/insurance/add`, |
||||
}); |
||||
}; |
||||
// 产品详情 |
||||
const toDetail = async (row: Record<string, any>) => { |
||||
router.push(`/product/insurance/detail?id=${row.id}&name=${params.insuranceName}`); |
||||
}; |
||||
</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> |
||||
Loading…
Reference in new issue