parent
aed69ad7f7
commit
3e9e1dac1e
24 changed files with 823 additions and 236 deletions
|
After Width: | Height: | Size: 37 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 6.7 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
@ -0,0 +1,157 @@ |
|||||||
|
<template> |
||||||
|
<ul class="switch px-7 mt-5"> |
||||||
|
<template v-if="isProduct"> |
||||||
|
<li :class="{ active: active == 1 }" |
||||||
|
@click="toPage('/product?type=0&i=1')"> |
||||||
|
<img class="icon" |
||||||
|
src="@/assets/images/icon5.png" |
||||||
|
alt="" /> |
||||||
|
<img class="icon-1" |
||||||
|
src="@/assets/images/icon5-1.png" |
||||||
|
alt="" /> |
||||||
|
<p class="text">个人产品</p> |
||||||
|
</li> |
||||||
|
<li :class="{ active: active == 2 }" |
||||||
|
@click="toPage('/product?type=1&i=2')"> |
||||||
|
<img class="icon" |
||||||
|
src="@/assets/images/icon6.png" |
||||||
|
alt="" /> |
||||||
|
<img class="icon-1" |
||||||
|
src="@/assets/images/icon6-1.png" |
||||||
|
alt="" /> |
||||||
|
<p class="text">企业产品</p> |
||||||
|
</li> |
||||||
|
</template> |
||||||
|
<template v-else> |
||||||
|
<li> |
||||||
|
<img class="icon" |
||||||
|
src="@/assets/images/icon1.png" |
||||||
|
alt="" /> |
||||||
|
<img class="icon-1" |
||||||
|
src="@/assets/images/icon1-1.png" |
||||||
|
alt="" /> |
||||||
|
<p class="text">产品风控配置</p> |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
<img class="icon" |
||||||
|
src="@/assets/images/icon2.png" |
||||||
|
alt="" /> |
||||||
|
<img class="icon-1" |
||||||
|
src="@/assets/images/icon2-1.png" |
||||||
|
alt="" /> |
||||||
|
<p class="text">准入模型</p> |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
<img class="icon" |
||||||
|
src="@/assets/images/icon3.png" |
||||||
|
alt="" /> |
||||||
|
<img class="icon-1" |
||||||
|
src="@/assets/images/icon3-1.png" |
||||||
|
alt="" /> |
||||||
|
<p class="text">利率定价模型</p> |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
<img class="icon" |
||||||
|
src="@/assets/images/icon4.png" |
||||||
|
alt="" /> |
||||||
|
<img class="icon-1" |
||||||
|
src="@/assets/images/icon4-1.png" |
||||||
|
alt="" /> |
||||||
|
<p class="text">贷后管理模型</p> |
||||||
|
</li> |
||||||
|
</template> |
||||||
|
</ul> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script setup lang="ts"> |
||||||
|
import { computed, defineProps, ref, toRefs } from 'vue'; |
||||||
|
import { useRouter, useRoute } from 'vue-router'; |
||||||
|
import { isShowMenu } from '@/store/useCurrentUser'; |
||||||
|
|
||||||
|
const router = useRouter(); |
||||||
|
const route = useRoute(); |
||||||
|
const active = computed(() => route.query.i); |
||||||
|
const isProduct = ref<any>(true); |
||||||
|
|
||||||
|
// 跳转 |
||||||
|
const toPage = (path: string) => { |
||||||
|
router.push(path); |
||||||
|
}; |
||||||
|
|
||||||
|
function isExternal(path: string): boolean { |
||||||
|
return /^(https?:|mailto:|tel:)/.test(path); |
||||||
|
} |
||||||
|
|
||||||
|
// const props = defineProps({ route: { type: Object, required: true }, basePath: { type: String, default: '' } }); |
||||||
|
// const { route, basePath } = toRefs(props); |
||||||
|
// const router = useRouter(); |
||||||
|
|
||||||
|
// // 是否显示。非隐藏路由即显示 |
||||||
|
// const isShow = computed(() => !route.value.meta?.hidden); |
||||||
|
// // 是否子菜单。有标题且有子元素即为子菜单 |
||||||
|
// const subMenu = computed(() => route.value.meta?.title && route.value.children); |
||||||
|
// // 目标路由。如果自己没有title，且有子元素，则子元素为目标路由 |
||||||
|
// const targetRoute = computed(() => (!route.value.meta?.title && route.value.children?.length > 0 ? route.value.children[0] : route.value)); |
||||||
|
// const icon = computed(() => targetRoute.value.meta?.icon); |
||||||
|
// const title = computed(() => targetRoute.value.meta?.title); |
||||||
|
// // 路由路径。如果targetItem是子元素，则使用子元素路由；使用自己的路由，则为空串，因为在basePath中已经指定了自己的路由 |
||||||
|
// const path = computed(() => (route.value !== targetRoute.value ? targetRoute.value.path : '')); |
||||||
|
|
||||||
|
// const resolvePath = (routePath: string) => { |
||||||
|
// if (isExternal(routePath)) { |
||||||
|
// return routePath; |
||||||
|
// } |
||||||
|
// return `${basePath.value}/${routePath}`; |
||||||
|
// }; |
||||||
|
// const handleClick = () => { |
||||||
|
// const fullPath = resolvePath(path.value); |
||||||
|
// if (isExternal(fullPath)) { |
||||||
|
// window.open(fullPath, '_blank'); |
||||||
|
// } else { |
||||||
|
// router.push(resolvePath(path.value)); |
||||||
|
// } |
||||||
|
// }; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.switch { |
||||||
|
li { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
width: 122px; |
||||||
|
height: 102px; |
||||||
|
margin-bottom: 20px; |
||||||
|
background: #ffffff; |
||||||
|
box-shadow: 0px 0px 8px 0px rgba(162, 199, 246, 0.16); |
||||||
|
border-radius: 10px; |
||||||
|
cursor: pointer; |
||||||
|
&:hover, |
||||||
|
&.active { |
||||||
|
background: linear-gradient(-36deg, #3c65ff, #33d1ff); |
||||||
|
box-shadow: 0px 6px 16px 0px rgba(96, 155, 255, 0.56); |
||||||
|
.icon { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.icon-1 { |
||||||
|
display: inline-block; |
||||||
|
} |
||||||
|
.text { |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
img { |
||||||
|
margin: 0 auto; |
||||||
|
} |
||||||
|
.icon-1 { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.text { |
||||||
|
margin-top: 10px; |
||||||
|
font-family: MiSans; |
||||||
|
font-weight: 600; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -1,57 +0,0 @@ |
|||||||
<template> |
|
||||||
<template v-if="isShow"> |
|
||||||
<el-sub-menu v-if="subMenu" :index="resolvePath(path)" popper-append-to-body> |
|
||||||
<template #title> |
|
||||||
<el-icon v-if="icon"><component :is="icon"></component></el-icon> |
|
||||||
<span>{{ $t(title) }}</span> |
|
||||||
</template> |
|
||||||
<menu-item v-for="item in route.children.filter((item:any) => isShowMenu(item))" :key="item.path" :route="item" :base-path="resolvePath(item.path)" /> |
|
||||||
</el-sub-menu> |
|
||||||
<el-menu-item v-else :index="resolvePath(path)" @click="handleClick"> |
|
||||||
<el-icon v-if="icon"><component :is="icon"></component></el-icon> |
|
||||||
<template #title> |
|
||||||
<span>{{ $t(title) }}</span> |
|
||||||
</template> |
|
||||||
</el-menu-item> |
|
||||||
</template> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script setup lang="ts"> |
|
||||||
import { computed, defineProps, toRefs } from 'vue'; |
|
||||||
import { useRouter } from 'vue-router'; |
|
||||||
import { isShowMenu } from '@/store/useCurrentUser'; |
|
||||||
|
|
||||||
function isExternal(path: string): boolean { |
|
||||||
return /^(https?:|mailto:|tel:)/.test(path); |
|
||||||
} |
|
||||||
|
|
||||||
const props = defineProps({ route: { type: Object, required: true }, basePath: { type: String, default: '' } }); |
|
||||||
const { route, basePath } = toRefs(props); |
|
||||||
const router = useRouter(); |
|
||||||
|
|
||||||
// 是否显示。非隐藏路由即显示 |
|
||||||
const isShow = computed(() => !route.value.meta?.hidden); |
|
||||||
// 是否子菜单。有标题且有子元素即为子菜单 |
|
||||||
const subMenu = computed(() => route.value.meta?.title && route.value.children); |
|
||||||
// 目标路由。如果自己没有title，且有子元素，则子元素为目标路由 |
|
||||||
const targetRoute = computed(() => (!route.value.meta?.title && route.value.children?.length > 0 ? route.value.children[0] : route.value)); |
|
||||||
const icon = computed(() => targetRoute.value.meta?.icon); |
|
||||||
const title = computed(() => targetRoute.value.meta?.title); |
|
||||||
// 路由路径。如果targetItem是子元素，则使用子元素路由；使用自己的路由，则为空串，因为在basePath中已经指定了自己的路由 |
|
||||||
const path = computed(() => (route.value !== targetRoute.value ? targetRoute.value.path : '')); |
|
||||||
|
|
||||||
const resolvePath = (routePath: string) => { |
|
||||||
if (isExternal(routePath)) { |
|
||||||
return routePath; |
|
||||||
} |
|
||||||
return `${basePath.value}/${routePath}`; |
|
||||||
}; |
|
||||||
const handleClick = () => { |
|
||||||
const fullPath = resolvePath(path.value); |
|
||||||
if (isExternal(fullPath)) { |
|
||||||
window.open(fullPath, '_blank'); |
|
||||||
} else { |
|
||||||
router.push(resolvePath(path.value)); |
|
||||||
} |
|
||||||
}; |
|
||||||
</script> |
|
||||||
@ -0,0 +1,40 @@ |
|||||||
|
import { reactive, readonly } from 'vue'; |
||||||
|
import Cookies from 'js-cookie'; |
||||||
|
|
||||||
|
export interface Product { |
||||||
|
status?: Record<string, any>; |
||||||
|
} |
||||||
|
|
||||||
|
const state = reactive<Product>({ |
||||||
|
// 产品进度
|
||||||
|
status: [ |
||||||
|
{ |
||||||
|
id: '', |
||||||
|
name: '产品进度', |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 1, |
||||||
|
name: '配置风控', |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 2, |
||||||
|
name: '待审批', |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 3, |
||||||
|
name: '审批通过', |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 4, |
||||||
|
name: '审批不通过', |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 5, |
||||||
|
name: '审批打回', |
||||||
|
}, |
||||||
|
], |
||||||
|
}); |
||||||
|
|
||||||
|
export const getStatus = (id: number | string): string => { |
||||||
|
return state.status.find((e) => e.id === id).name; |
||||||
|
}; |
||||||
@ -0,0 +1,170 @@ |
|||||||
|
<template> |
||||||
|
<h6 class="title">城市人口及年龄参数</h6> |
||||||
|
<el-table class="c-table" |
||||||
|
ref="table" |
||||||
|
v-loading="loading" |
||||||
|
:data="list" |
||||||
|
border |
||||||
|
@sort-change="handleSort"> |
||||||
|
<el-table-column prop="productName" |
||||||
|
label="城市总人口 (人)" |
||||||
|
align="center"> |
||||||
|
<el-input maxlength="20"></el-input> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="productNumber" |
||||||
|
label="年龄 (岁)" |
||||||
|
align="center"></el-table-column> |
||||||
|
<el-table-column prop="parentIds" |
||||||
|
label="年龄占比 (%)" |
||||||
|
align="center"> |
||||||
|
<el-input maxlength="3"></el-input> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
|
||||||
|
<h6 class="title mt-7">学历参数</h6> |
||||||
|
<el-table class="c-table" |
||||||
|
ref="table" |
||||||
|
v-loading="loading" |
||||||
|
:data="list" |
||||||
|
border |
||||||
|
@sort-change="handleSort"> |
||||||
|
<el-table-column prop="productName" |
||||||
|
label="年龄 (岁)" |
||||||
|
align="center"> </el-table-column> |
||||||
|
<el-table-column prop="productNumber" |
||||||
|
label="学历" |
||||||
|
align="center"></el-table-column> |
||||||
|
<el-table-column prop="parentIds" |
||||||
|
label="学历占比 (%)" |
||||||
|
align="center"> |
||||||
|
<el-input maxlength="3"></el-input> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
|
||||||
|
<h6 class="title mt-7">企业数量配置</h6> |
||||||
|
<el-table class="c-table" |
||||||
|
ref="table" |
||||||
|
v-loading="loading" |
||||||
|
:data="list" |
||||||
|
border |
||||||
|
@sort-change="handleSort"> |
||||||
|
<el-table-column prop="productName" |
||||||
|
label="城市总人口 (人)" |
||||||
|
align="center"> </el-table-column> |
||||||
|
<el-table-column prop="parentIds" |
||||||
|
label="城市总人口 (人)" |
||||||
|
align="center"> |
||||||
|
<el-input maxlength="3"></el-input> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
|
||||||
|
<h6 class="title mt-7">单个商品每日需求量</h6> |
||||||
|
<el-table class="c-table" |
||||||
|
ref="table" |
||||||
|
v-loading="loading" |
||||||
|
:data="list" |
||||||
|
border |
||||||
|
@sort-change="handleSort"> |
||||||
|
<el-table-column prop="productName" |
||||||
|
label="买家类型" |
||||||
|
align="center"> </el-table-column> |
||||||
|
<el-table-column prop="parentIds" |
||||||
|
label="买家总占比 (%)" |
||||||
|
align="center"> |
||||||
|
<el-input maxlength="3"></el-input> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="parentIds" |
||||||
|
label="每次需求人数占比 (%)" |
||||||
|
align="center"> |
||||||
|
<el-input maxlength="3"></el-input> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="parentIds" |
||||||
|
label="单个买家单次需求" |
||||||
|
align="center"> |
||||||
|
<el-input maxlength="3"></el-input> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
|
||||||
|
<h6 class="title mt-7">系统账户起始金额</h6> |
||||||
|
<el-form class="w-[300px]" |
||||||
|
:model="form" |
||||||
|
label-width="120px" |
||||||
|
label-suffix="："> |
||||||
|
<el-form-item label="银行账户"> |
||||||
|
<el-input v-model="form.name"> |
||||||
|
<template #suffix> 万元 </template> |
||||||
|
</el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="保险账户"> |
||||||
|
<el-input v-model="form.name"> |
||||||
|
<template #suffix> 万元 </template> |
||||||
|
</el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="基金账户"> |
||||||
|
<el-input v-model="form.name"> |
||||||
|
<template #suffix> 万元 </template> |
||||||
|
</el-input> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
|
||||||
|
<div class="flex justify-end"> |
||||||
|
<div class="submit">保存修改</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script setup lang="ts"> |
||||||
|
import { ref, onMounted } from 'vue'; |
||||||
|
import { ElMessage } from 'element-plus'; |
||||||
|
import { primaryTypeOfGuarantee, bankingProductsList } from '@/api/bank'; |
||||||
|
|
||||||
|
defineProps({ modelValue: { type: Object, required: true } }); |
||||||
|
defineEmits({ 'update:form': null }); |
||||||
|
|
||||||
|
const list = ref<Array<any>>([]); |
||||||
|
const form = ref<Object>({}); |
||||||
|
|
||||||
|
// 担保方式 |
||||||
|
const getGuarantee = async () => { |
||||||
|
try { |
||||||
|
const { data } = await primaryTypeOfGuarantee(); |
||||||
|
guarantees.value = data; |
||||||
|
} finally { |
||||||
|
} |
||||||
|
}; |
||||||
|
onMounted(() => { |
||||||
|
// getGuarantee(); |
||||||
|
// fetchData(); |
||||||
|
}); |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
@import url(../../styles/form.scss); |
||||||
|
.title { |
||||||
|
@apply flex items-center mb-5 text-base text-[#222D42] font-semibold; |
||||||
|
&:before { |
||||||
|
content: ''; |
||||||
|
@apply w-1 h-4 mr-2 bg-[#006BFF] rounded-sm; |
||||||
|
} |
||||||
|
} |
||||||
|
.c-table { |
||||||
|
@apply rounded-[10px]; |
||||||
|
:deep(th.el-table__cell) { |
||||||
|
@apply bg-[#F8FBFC]; |
||||||
|
} |
||||||
|
:deep(.cell) { |
||||||
|
@apply text-[#006BFF]; |
||||||
|
} |
||||||
|
} |
||||||
|
.submit { |
||||||
|
padding: 15px 22px; |
||||||
|
font-size: 14px; |
||||||
|
line-height: 1; |
||||||
|
color: #fff; |
||||||
|
background: #006bff; |
||||||
|
border-radius: 12px; |
||||||
|
cursor: pointer; |
||||||
|
&:hover { |
||||||
|
opacity: 0.9; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,44 @@ |
|||||||
|
<template> |
||||||
|
<div class="block"> |
||||||
|
<el-tabs v-model="curTab" @tab-click="tabChange"> |
||||||
|
<el-tab-pane label="系统买方" name="tab1"> |
||||||
|
<buyer></buyer> |
||||||
|
</el-tab-pane> |
||||||
|
<el-tab-pane label="金融市场" name="tab2"> </el-tab-pane> |
||||||
|
<el-tab-pane label="扫单配置" name="tab3"> </el-tab-pane> |
||||||
|
<el-tab-pane label="渠道广告" name="tab4"> </el-tab-pane> |
||||||
|
</el-tabs> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script setup lang="ts"> |
||||||
|
import { ref, onMounted } from 'vue'; |
||||||
|
import { ElMessage } from 'element-plus'; |
||||||
|
import type { TabsPaneContext } from 'element-plus'; |
||||||
|
import { primaryTypeOfGuarantee, bankingProductsList } from '@/api/bank'; |
||||||
|
import Buyer from './Buyer.vue'; |
||||||
|
|
||||||
|
defineProps({ modelValue: { type: Object, required: true } }); |
||||||
|
defineEmits({ 'update:form': null }); |
||||||
|
|
||||||
|
const curTab = ref<string>('tab1'); |
||||||
|
|
||||||
|
// tab切换回调 |
||||||
|
const tabChange = (tab: TabsPaneContext, event: Event) => { |
||||||
|
console.log(tab, event); |
||||||
|
}; |
||||||
|
// 担保方式 |
||||||
|
const getGuarantee = async () => { |
||||||
|
try { |
||||||
|
const { data } = await primaryTypeOfGuarantee(); |
||||||
|
guarantees.value = data; |
||||||
|
} finally { |
||||||
|
} |
||||||
|
}; |
||||||
|
onMounted(() => { |
||||||
|
// getGuarantee(); |
||||||
|
// fetchData(); |
||||||
|
}); |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped></style> |
||||||
@ -0,0 +1,119 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<back name="产品详情"></back> |
||||||
|
<div class="flex"> |
||||||
|
<div class="item mr-[18px]"> |
||||||
|
<h6 class="text-lg font-semibold text-[#053C6A]">智信女神贷</h6> |
||||||
|
<div class="flex justify-between mt-3 text-center"> |
||||||
|
<div> |
||||||
|
<p class="mb-1 text-lg font-semibold text-[#00347C]">3.5-4.01%</p> |
||||||
|
<p class="text-sm text-[#00327C]">参考利率</p> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<p class="mb-1 text-lg font-semibold text-[#00347C]">3.5-4.01%</p> |
||||||
|
<p class="text-sm text-[#00327C]">贷款额度</p> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<p class="mb-1 text-lg font-semibold text-[#00347C]">3.5-4.01%</p> |
||||||
|
<p class="text-sm text-[#00327C]">贷款期限</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="item mr-[18px]"> |
||||||
|
<h6 class="text-lg font-semibold text-[#333]">产品定义</h6> |
||||||
|
<div class="mt-3 text-sm text-[#333] leading-6">根据个人客户的信用状况，为其提供的一种短期融资便利产品，借款人在我行核定的额度金额内可循环周转使用贷款。</div> |
||||||
|
</div> |
||||||
|
<div class="item"> |
||||||
|
<h6 class="text-lg font-semibold text-[#053C6A]">本产品排行</h6> |
||||||
|
<div class="flex justify-between mt-3 text-center"> |
||||||
|
<div> |
||||||
|
<p class="mb-1 text-lg font-semibold text-[#00347C]">3.5-4.01%</p> |
||||||
|
<p class="text-sm text-[#00327C]">今日成交金额</p> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<p class="mb-1 text-lg font-semibold text-[#00347C]">3.5-4.01%</p> |
||||||
|
<p class="text-sm text-[#00327C]">今日收益</p> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<p class="mb-1 text-lg font-semibold text-[#00347C]">3.5-4.01%</p> |
||||||
|
<p class="text-sm text-[#00327C]">累计收益</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="block flex justify-between mt-5"> |
||||||
|
<div> |
||||||
|
<div class="line"> |
||||||
|
<span class="label">担保方式：</span> |
||||||
|
<div class="val">担保方式：</div> |
||||||
|
</div> |
||||||
|
<div class="line"> |
||||||
|
<span class="label">贷款用途：</span> |
||||||
|
<div class="val">担保方式：</div> |
||||||
|
</div> |
||||||
|
<div class="line"> |
||||||
|
<span class="label">担保方式：</span> |
||||||
|
<div class="val">担保方式：</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="user m-4"> |
||||||
|
<h6 class="mb-4 text-lg font-semibold text-[#01305B]">产品经理</h6> |
||||||
|
<div class="text-center"> |
||||||
|
<img src="@/assets/images/bankDetail/4.png" |
||||||
|
alt="" |
||||||
|
class="mx-auto" /> |
||||||
|
<p class="mt-2 font-semibold text-[#114575]">刘秀</p> |
||||||
|
</div> |
||||||
|
<p class="mt-2 text-[#114575]">财经学院 金融2班</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script setup lang="ts"> |
||||||
|
import { ref, onMounted } from 'vue'; |
||||||
|
import { ElMessage } from 'element-plus'; |
||||||
|
import { Plus } from '@element-plus/icons-vue'; |
||||||
|
import { primaryTypeOfGuarantee, bankingProductsList } from '@/api/bank'; |
||||||
|
import Search from '@/components/Search.vue'; |
||||||
|
import Back from '@/components/Back.vue'; |
||||||
|
|
||||||
|
const form = ref<Object>({}); |
||||||
|
|
||||||
|
// 担保方式 |
||||||
|
const getGuarantee = async () => { |
||||||
|
try { |
||||||
|
const { data } = await primaryTypeOfGuarantee(); |
||||||
|
guarantees.value = data; |
||||||
|
} finally { |
||||||
|
} |
||||||
|
}; |
||||||
|
onMounted(() => { |
||||||
|
// getGuarantee(); |
||||||
|
// fetchData(); |
||||||
|
}); |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.item { |
||||||
|
@apply p-5; |
||||||
|
width: calc((100% - 36px) / 3); |
||||||
|
background: url(../../assets/images/bankDetail/2.png) 0 0/100% 100% no-repeat; |
||||||
|
&:first-child { |
||||||
|
background-image: url(../../assets/images/bankDetail/1.png); |
||||||
|
} |
||||||
|
} |
||||||
|
.line { |
||||||
|
@apply flex mb-3; |
||||||
|
.label { |
||||||
|
@apply text-sm text-[#333] font-semibold; |
||||||
|
} |
||||||
|
.val { |
||||||
|
@apply text-sm text-[#333]; |
||||||
|
} |
||||||
|
} |
||||||
|
.user { |
||||||
|
@apply p-4; |
||||||
|
background: url(../../assets/images/bankDetail/3.png) 0 0/100% 100% no-repeat; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,80 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<el-tabs v-model="curTab" |
||||||
|
@tab-click="tabChange"> |
||||||
|
<el-tab-pane label="产品要素" |
||||||
|
name="tab1"> |
||||||
|
<div class="forms"> |
||||||
|
<h6 class="step-name mb-4">办理账户</h6> |
||||||
|
<p class="text">根据个人客户的信用状况，为其提供的一种短期融资便利产品，借款人在我行核定的额度金额内可循环周转使用贷款。</p> |
||||||
|
<h6 class="step-name mt-5">产品要素</h6> |
||||||
|
<div class="line"> |
||||||
|
<label class="label">产品名称：</label> |
||||||
|
<p class="text">根据个人客户的信用状况，为其提供的一种短期融资便利产品，借款人在我行核定的额度金额内可循环周转使用贷款。</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-tab-pane> |
||||||
|
</el-tabs> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script setup lang="ts"> |
||||||
|
import { ref, computed, watch, onMounted } from 'vue'; |
||||||
|
import { ElMessage } from 'element-plus'; |
||||||
|
import type { TabsPaneContext } from 'element-plus'; |
||||||
|
import { findById } from '@/api/bank'; |
||||||
|
import { useRouter, useRoute } from 'vue-router'; |
||||||
|
|
||||||
|
defineProps({ modelValue: { type: Object, required: true } }); |
||||||
|
defineEmits({ 'update:form': null }); |
||||||
|
|
||||||
|
const router = useRouter(); |
||||||
|
const route = useRoute(); |
||||||
|
const id = computed(() => +route.query.id); |
||||||
|
const curTab = ref<string>('tab1'); |
||||||
|
const data = ref<any>(); |
||||||
|
|
||||||
|
// tab切换回调 |
||||||
|
const tabChange = (tab: TabsPaneContext, event: Event) => { |
||||||
|
console.log(tab, event); |
||||||
|
}; |
||||||
|
// 详情 |
||||||
|
const getDetail = async () => { |
||||||
|
if (id.value) { |
||||||
|
try { |
||||||
|
const { data } = await findById(id.value); |
||||||
|
data.value = data; |
||||||
|
} finally { |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
watch( |
||||||
|
() => route.query, |
||||||
|
() => { |
||||||
|
getDetail(); |
||||||
|
}, |
||||||
|
{ |
||||||
|
immediate: true, |
||||||
|
}, |
||||||
|
); |
||||||
|
onMounted(() => {}); |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
@import url(../../styles/form.scss); |
||||||
|
.audit { |
||||||
|
padding: 20px 16px; |
||||||
|
margin-bottom: 30px; |
||||||
|
background: #f9fafc; |
||||||
|
border-radius: 10px; |
||||||
|
.line { |
||||||
|
margin-bottom: 18px; |
||||||
|
font-size: 14px; |
||||||
|
line-height: 1.6; |
||||||
|
} |
||||||
|
.field { |
||||||
|
font-size: 14px; |
||||||
|
font-weight: 600; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue