184 lines
3.7 KiB
Vue
184 lines
3.7 KiB
Vue
<template>
|
|
<GiPageLayout>
|
|
<div class="policy-files-container">
|
|
<!-- 页面标题 -->
|
|
<div class="page-header">
|
|
<h2 class="page-title">保单文件</h2>
|
|
</div>
|
|
|
|
<!-- 文件列表 -->
|
|
<div class="file-list">
|
|
<div
|
|
v-for="file in fileList"
|
|
:key="file.id"
|
|
class="file-item"
|
|
>
|
|
<div class="file-info">
|
|
<div class="file-icon">
|
|
<icon-file-pdf v-if="file.type === 'pdf'" />
|
|
<icon-file v-else />
|
|
</div>
|
|
<div class="file-details">
|
|
<div class="file-name">{{ file.name }}</div>
|
|
<div class="file-meta">上传于 {{ file.uploadDate }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="file-actions">
|
|
<a-button
|
|
type="primary"
|
|
size="small"
|
|
@click="handleView(file)"
|
|
>
|
|
查看
|
|
</a-button>
|
|
<a-button
|
|
type="outline"
|
|
size="small"
|
|
status="success"
|
|
@click="handleDownload(file)"
|
|
>
|
|
下载
|
|
</a-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</GiPageLayout>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import { Message } from '@arco-design/web-vue'
|
|
import { IconFilePdf, IconFile } from '@arco-design/web-vue/es/icon'
|
|
|
|
// 文件列表数据
|
|
const fileList = ref([
|
|
{
|
|
id: 1,
|
|
name: '中国人寿-医疗保险-保单.pdf',
|
|
type: 'pdf',
|
|
uploadDate: '2023-01-05',
|
|
size: '2.5MB',
|
|
url: '/files/insurance/medical-insurance-policy.pdf'
|
|
},
|
|
{
|
|
id: 2,
|
|
name: '平安保险-意外险-保单.pdf',
|
|
type: 'pdf',
|
|
uploadDate: '2023-01-05',
|
|
size: '1.8MB',
|
|
url: '/files/insurance/accident-insurance-policy.pdf'
|
|
},
|
|
{
|
|
id: 3,
|
|
name: '泰康保险-养老保险-保单.pdf',
|
|
type: 'pdf',
|
|
uploadDate: '2022-01-05',
|
|
size: '3.2MB',
|
|
url: '/files/insurance/pension-insurance-policy.pdf'
|
|
},
|
|
{
|
|
id: 4,
|
|
name: '保险条款说明.docx',
|
|
type: 'docx',
|
|
uploadDate: '2022-01-10',
|
|
size: '1.5MB',
|
|
url: '/files/insurance/insurance-terms.docx'
|
|
}
|
|
])
|
|
|
|
// 查看文件
|
|
const handleView = (file: any) => {
|
|
Message.info(`查看文件：${file.name}`)
|
|
// 这里可以实现文件预览功能
|
|
}
|
|
|
|
// 下载文件
|
|
const handleDownload = (file: any) => {
|
|
Message.success(`下载文件：${file.name}`)
|
|
// 这里可以实现文件下载功能
|
|
// 创建隐藏的下载链接
|
|
const link = document.createElement('a')
|
|
link.href = file.url
|
|
link.download = file.name
|
|
link.click()
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.policy-files-container {
|
|
padding: 20px;
|
|
}
|
|
|
|
.page-header {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
color: #1d2129;
|
|
margin: 0;
|
|
}
|
|
|
|
.file-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.file-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 16px 20px;
|
|
background: white;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
transition: transform 0.2s;
|
|
}
|
|
|
|
.file-item:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.file-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
}
|
|
|
|
.file-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #f0f9ff;
|
|
border-radius: 8px;
|
|
color: #1890ff;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.file-details {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.file-name {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #1d2129;
|
|
}
|
|
|
|
.file-meta {
|
|
font-size: 12px;
|
|
color: #4e5969;
|
|
}
|
|
|
|
.file-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
</style> |