692 lines
26 KiB
HTML
692 lines
26 KiB
HTML
<!doctype html>
|
||
<!-- 文档说明：票据理赔自动化报告渲染模板
|
||
版本：1.0
|
||
-->
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta
|
||
name="rendered_html_by_template"
|
||
content="width=device-width, initial-scale=1.0"
|
||
/>
|
||
<title>票据理赔自动化</title>
|
||
<style>
|
||
:root {
|
||
/* Arcoblue 极致蓝，参考Palatte色彩配置 https://arco.design/palette/list */
|
||
--arcoblue-1: #e8f3ff;
|
||
--arcoblue-2: #bedaff;
|
||
--arcoblue-3: #94bfff;
|
||
--arcoblue-4: #6aa1ff;
|
||
--arcoblue-5: #4080ff;
|
||
--arcoblue-6: #165dff; /* 主题颜色 */
|
||
--arcoblue-7: #0e42d2;
|
||
--arcoblue-8: #072ca6;
|
||
--arcoblue-9: #031a79;
|
||
--arcoblue-10: #000d4d;
|
||
/* Green 仙野绿 */
|
||
--green-1: #e8ffea;
|
||
--green-2: #aff0b5;
|
||
--green-3: #7be188;
|
||
--green-4: #4cd263;
|
||
--green-5: #23c343;
|
||
--green-6: #00b42a;
|
||
--green-7: #009a29;
|
||
--green-8: #008026;
|
||
--green-9: #006622;
|
||
--green-10: #004d1c;
|
||
/* Orange 活力橙 */
|
||
--orange-1: #fff7e8;
|
||
--orange-2: #ffe4ba;
|
||
--orange-3: #ffcf8b;
|
||
--orange-4: #ffb65d;
|
||
--orange-5: #ff9a2e;
|
||
--orange-6: #ff7d00;
|
||
--orange-7: #d25f00;
|
||
--orange-8: #a64500;
|
||
--orange-9: #792e00;
|
||
--orange-10: #4d1b00;
|
||
/* Red 浪漫红 */
|
||
--red-1: #ffece8;
|
||
--red-2: #fdcdc5;
|
||
--red-3: #fbaca3;
|
||
--red-4: #f98981;
|
||
--red-5: #f76560;
|
||
--red-6: #f53f3f;
|
||
--red-7: #cb272d;
|
||
--red-8: #a1151e;
|
||
--red-9: #770611;
|
||
--red-10: #4d000a;
|
||
/* Gray 中性灰 */
|
||
--gray-1: #f7f8fa;
|
||
--gray-2: #f2f3f5;
|
||
--gray-3: #e5e6eb;
|
||
--gray-4: #c9cdd4;
|
||
--gray-5: #a9aeb8;
|
||
--gray-6: #86909c;
|
||
--gray-7: #6b7785;
|
||
--gray-8: #4e5969;
|
||
--gray-9: #272e3b;
|
||
--gray-10: #1d2129;
|
||
/* 白 */
|
||
--white: #ffffff;
|
||
|
||
/* 样式配置 */
|
||
--color-text: var(--gray-8); /* 文本颜色 */
|
||
--color-text-secondary: var(--gray-6); /* 二级文本颜色 */
|
||
--color-text-emphasise: var(--arcoblue-6); /* 强调文本颜色 */
|
||
--color-text-contrast: var(--gray-1); /* 对比文本颜色 */
|
||
--color-background: var(--gray-1); /* 背景颜色 */
|
||
--color-background-secondary: var(--arcoblue-1); /* 二级背景颜色 */
|
||
--color-background-emphasise: var(--arcoblue-6); /* 强调背景颜色 */
|
||
--color-border: var(--gray-3); /* 边框颜色 */
|
||
--color-border-secondary: var(--gray-3); /* 二级边框颜色 */
|
||
--border-radius-small: 4px;
|
||
--border-radius-medium: 8px;
|
||
--border-radius-large: 8px;
|
||
--border-radius-round: 50px;
|
||
--font-family:
|
||
"Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
|
||
"Helvetica Neue", Arial, "Noto Sans", sans-serif;
|
||
--font-size-small: 12px;
|
||
--font-size-medium: 14px;
|
||
--font-size-large: 20px;
|
||
--font-weight-medium: 400;
|
||
--font-weight-large: 600;
|
||
--box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
|
||
--box-shadow-hover: 0 8px 20px rgba(0, 0, 0, 0.08);
|
||
--spacing-extra-small: 4px;
|
||
--spacing-small: 8px;
|
||
--spacing-medium: 16px;
|
||
--spacing-large: 24px;
|
||
--line-height: 1.6; /* 行高 */
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box; /* 重置盒模型 */
|
||
padding: 0; /* 重置内边距 */
|
||
margin: 0; /* 重置外边距 */
|
||
font-family: var(--font-family); /* 字体 */
|
||
}
|
||
|
||
body {
|
||
min-height: 100vh; /* 最小高度，满屏 */
|
||
background-color: var(--color-background); /* 背景颜色 */
|
||
padding: var(--spacing-large); /* 内边距 */
|
||
line-height: var(--line-height); /* 行高 */
|
||
color: var(--color-text); /* 文本颜色 */
|
||
}
|
||
|
||
/* 主容器 */
|
||
.container {
|
||
max-width: 1200px; /* 最大宽度 */
|
||
margin: 0 auto; /* 上下外边距为0，左右外边距自动平分(水平居中) */
|
||
background: var(--color-background-secondary); /* 背景颜色 */
|
||
border: 1px solid var(--color-border); /* 边框 */
|
||
border-radius: var(--border-radius-medium); /* 圆角 */
|
||
box-shadow: var(--box-shadow); /* 阴影 */
|
||
overflow: hidden; /* 隐藏溢出 */
|
||
}
|
||
|
||
/* 标题块 */
|
||
.header {
|
||
position: relative; /* 相对定位 */
|
||
display: flex; /* 弹性布局 */
|
||
justify-content: space-between; /* 内容两端对齐 */
|
||
padding: var(--spacing-large); /* 内边距 */
|
||
background: var(--color-background-emphasise); /* 背景颜色 */
|
||
align-items: center; /* 垂直居中 */
|
||
flex-wrap: wrap; /* 换行 */
|
||
}
|
||
|
||
.header-title {
|
||
flex-basis: 100%; /* 独占一行 */
|
||
margin-bottom: var(--spacing-small); /* 外边距 */
|
||
color: var(--color-text-contrast); /* 文字颜色 */
|
||
font-size: var(--font-size-large); /* 文字字号 */
|
||
font-weight: var(--font-weight-large); /* 文字粗细 */
|
||
}
|
||
|
||
.header-content {
|
||
color: var(--color-text-contrast); /* 文字颜色 */
|
||
font-size: var(--font-size-medium); /* 文字字号 */
|
||
font-weight: var(--font-weight-medium); /* 文字粗细 */
|
||
opacity: 0.8; /* 文字透明度 */
|
||
}
|
||
|
||
/* 内容块 */
|
||
.section {
|
||
padding: var(--spacing-large); /* 内边距 */
|
||
border-bottom: 1px solid var(--color-border); /* 边框 */
|
||
background: var(--color-background); /* 背景颜色 */
|
||
}
|
||
|
||
.section:last-child {
|
||
border-bottom: none;
|
||
} /* 最后一个内容块不显示下边框 */
|
||
|
||
/* 内容块标题 */
|
||
.section-title {
|
||
display: flex; /* 弹性布局 */
|
||
align-items: center; /* 垂直居中 */
|
||
padding-bottom: var(--spacing-small); /* 下内边距 */
|
||
margin-bottom: var(--spacing-large); /* 下外边距 */
|
||
border-bottom: 1px solid var(--color-border-secondary); /* 下边框 */
|
||
color: var(--color-text-emphasise); /* 文字颜色 */
|
||
font-size: var(--font-size-medium); /* 文字字号 */
|
||
font-weight: var(--font-weight-large); /* 文字粗细 */
|
||
}
|
||
|
||
.section-title:before {
|
||
content: ""; /* 伪元素内容 */
|
||
width: 3px; /* 宽度 */
|
||
height: 1.2em; /* 高度 */
|
||
background: var(--color-background-emphasise); /* 背景颜色 */
|
||
border-radius: var(--border-radius-small); /* 圆角 */
|
||
margin-right: var(--spacing-small); /* 右外边距 */
|
||
} /* 标题修饰 */
|
||
|
||
/* 内容块内容 */
|
||
.section-content {
|
||
padding: var(--spacing-small) 0; /* 上下内边距 */
|
||
margin-bottom: var(--spacing-medium); /* 下外边距 */
|
||
line-height: var(--line-height); /* 文字行高 */
|
||
color: var(--color-text); /* 文字颜色 */
|
||
font-size: var(--font-size-medium); /* 文字字号 */
|
||
font-weight: var(--font-weight-large); /* 文字粗细 */
|
||
}
|
||
|
||
/* 内容块内部块 */
|
||
.section-block {
|
||
display: grid; /* 网格布局 */
|
||
grid-template-columns: 1fr; /* 1列 */
|
||
gap: var(--spacing-medium); /* 间距 */
|
||
}
|
||
|
||
/* 卡片 */
|
||
.card {
|
||
background: var(--color-background); /* 背景颜色 */
|
||
padding: var(--spacing-medium); /* 内边距 */
|
||
margin-bottom: var(--spacing-large); /* 下外边距 */
|
||
border-radius: var(--border-radius-medium); /* 圆角 */
|
||
border: 1px solid var(--color-border); /* 边框 */
|
||
box-shadow: var(--box-shadow); /* 阴影 */
|
||
transition:
|
||
transform 0.2s ease,
|
||
box-shadow 0.2s ease; /* 过渡 */
|
||
}
|
||
|
||
/* 卡片标题 */
|
||
.card-title {
|
||
display: flex; /* 弹性布局 */
|
||
justify-content: space-between; /* 内容两端对齐 */
|
||
align-items: flex-start; /* 垂直顶部对齐 */
|
||
padding-bottom: var(--spacing-small); /* 下内边距 */
|
||
margin-bottom: var(--spacing-medium); /* 下外边距 */
|
||
border-bottom: 1px dashed var(--color-border); /* 下边框 */
|
||
color: var(--color-text-emphasise); /* 文字颜色 */
|
||
font-size: var(--font-size-medium); /* 文字字号 */
|
||
font-weight: var(--font-weight-large); /* 文字粗细 */
|
||
}
|
||
|
||
.card-title-content {
|
||
font-size: var(--font-size-small);
|
||
} /* 卡片标题内容 */
|
||
|
||
.card-title-content a {
|
||
color: inherit;
|
||
text-decoration: none; /* 去掉下划线 */
|
||
} /* 卡片标题内容链接 */
|
||
|
||
/* 卡片标题标签 */
|
||
.card-title-tag {
|
||
display: inline-block; /* 内联块元素 */
|
||
align-items: center; /* 垂直居中 */
|
||
padding: var(--spacing-small) var(--spacing-medium); /* 内边距 */
|
||
border-radius: var(--border-radius-round); /* 圆角 */
|
||
font-size: var(--font-size-small); /* 文字字号 */
|
||
font-weight: var(--font-weight-medium); /* 文字粗细 */
|
||
}
|
||
|
||
.card-title-tag.green {
|
||
background: var(--green-1); /* 背景颜色 */
|
||
border: 1px solid var(--green-3); /* 边框 */
|
||
color: var(--green-6); /* 文字颜色 */
|
||
}
|
||
|
||
.card-title-tag.yellow {
|
||
background: var(--orange-1); /* 背景颜色 */
|
||
border: 1px solid var(--orange-3); /* 边框 */
|
||
color: var(--orange-6); /* 文字颜色 */
|
||
}
|
||
|
||
.card-title-tag.red {
|
||
background: var(--red-1); /* 背景颜色 */
|
||
border: 1px solid var(--red-3); /* 边框 */
|
||
color: var(--red-6); /* 文字颜色 */
|
||
}
|
||
|
||
/* 字段布局 */
|
||
.card-grid {
|
||
display: grid; /* 网格布局 */
|
||
grid-template-columns: repeat(3, 1fr); /* 3列 */
|
||
gap: var(--spacing-medium) var(--spacing-large); /* 间距 */
|
||
font-size: var(--font-size-medium); /* 文字字号 */
|
||
}
|
||
|
||
.card-item {
|
||
display: flex; /* 弹性布局 */
|
||
flex-direction: column; /* 垂直方向 */
|
||
margin-bottom: var(--spacing-medium); /* 下外边距 */
|
||
}
|
||
|
||
.card-item-label {
|
||
color: var(--color-text-secondary); /* 文字颜色 */
|
||
font-size: var(--font-size-small); /* 文字字号 */
|
||
font-weight: var(--font-weight-medium); /* 文字粗细 */
|
||
margin-bottom: var(--spacing-extra-small); /* 下外边距 */
|
||
}
|
||
|
||
.card-item-value {
|
||
color: var(--color-text); /* 文字颜色 */
|
||
font-size: var(--font-size-small); /* 文字字号 */
|
||
font-weight: var(--font-weight-medium); /* 文字粗细 */
|
||
word-break: break-word; /* 自动换行 */
|
||
padding: 4px 0; /* 上下内边距 */
|
||
}
|
||
|
||
.table {
|
||
margin-bottom: var(--spacing-medium);
|
||
}
|
||
|
||
.table-title {
|
||
font-size: var(--font-size-medium);
|
||
font-weight: var(--font-weight-large);
|
||
color: var(--color-text-emphasise);
|
||
margin-bottom: var(--spacing-medium);
|
||
}
|
||
|
||
/* 表格样式 */
|
||
table {
|
||
background-color: var(--color-background); /* 背景颜色 */
|
||
width: 100%; /* 宽度100% */
|
||
table-layout: fixed; /* 固定表格布局，加速渲染 */
|
||
overflow: hidden; /* 隐藏超出容器的内容 */
|
||
margin-top: var(--spacing-medium); /* 上外边距 */
|
||
border: 1px solid var(--color-border); /* 边框 */
|
||
border-collapse: separate; /* 边框分离，支持圆角 */
|
||
border-spacing: 0; /* 边框间距为0 */
|
||
border-radius: var(--border-radius-medium); /* 圆角 */
|
||
box-shadow: var(--box-shadow); /* 阴影效果 */
|
||
}
|
||
|
||
/* 表格标题 */
|
||
th {
|
||
background-color: var(--color-background-secondary);
|
||
color: var(--color-text-emphasise);
|
||
font-size: var(--font-size-small);
|
||
font-weight: var(--font-weight-medium);
|
||
padding: var(--spacing-medium); /* 内边距 */
|
||
text-align: left; /* 左对齐 */
|
||
width: 20%; /* 宽度 */
|
||
word-break: break-word; /* 自动换行 */
|
||
}
|
||
|
||
td {
|
||
padding: var(--spacing-medium); /* 内边距 */
|
||
border-bottom: 1px solid var(--color-border); /* 下边框 */
|
||
color: var(--color-text); /* 文本颜色 */
|
||
font-size: var(--font-size-small); /* 字体大小 */
|
||
font-weight: var(--font-weight-medium); /* 字体粗细 */
|
||
word-break: break-word; /* 自动换行，适配小屏幕 */
|
||
}
|
||
|
||
tr.total-total-row td {
|
||
background-color: var(
|
||
--color-background-secondary
|
||
) !important; /* 背景颜色 */
|
||
color: var(--color-text-emphasise) !important; /* 文本颜色 */
|
||
font-weight: var(--font-weight-medium) !important; /* 字体粗细 */
|
||
} /* 总计行 */
|
||
|
||
footer {
|
||
text-align: center;
|
||
padding: var(--spacing-medium);
|
||
color: var(--color-text-secondary);
|
||
font-size: 12px;
|
||
background: var(--color-background);
|
||
border-top: 1px solid var(--color-border);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<div class="header">
|
||
<div class="header-title">理赔报告</div>
|
||
<div class="header-content">
|
||
<span>{{ obj["report_layer"]["insurer_company"] }}</span>
|
||
<span>|</span>
|
||
<span>{{ obj["report_layer"]["report_time"] }}</span>
|
||
<span>|</span>
|
||
<span>{{ obj["report_layer"]["case_number"] }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="section">
|
||
<div class="section-title">结论层</div>
|
||
<div class="section-content">
|
||
<span>经理赔流程初步审核，本案结论为</span>
|
||
<span>{{ obj["adjustment_layer"]["conclusion"] }}</span>
|
||
<span>，理赔金额为</span>
|
||
<span>{{ obj["adjustment_layer"]["adjustment_amount"] }}</span>
|
||
<span>元，其依据为</span>
|
||
<span>{{ obj["adjustment_layer"]["explanation"] }}</span>
|
||
<span>。</span>
|
||
</div>
|
||
</div>
|
||
<div class="section">
|
||
<div class="section-title">影像件层</div>
|
||
<div class="section-content">
|
||
<span>本案签收</span>
|
||
<span>{{ obj["report_layer"]["images_counts"] }}</span>
|
||
<span>张影像件，其中已分类</span>
|
||
<span>{{ obj["classified_images_counts"] }}</span>
|
||
<span>张，已识别</span>
|
||
<span>{{ obj["recognized_images_counts"] }}</span>
|
||
<span>张。具体情况如下：</span>
|
||
</div>
|
||
<div class="table">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>影像件编号</th>
|
||
<th>影像件名称</th>
|
||
<th>影像件类型</th>
|
||
<th>已分类</th>
|
||
<th>已识别</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{% for image_index, image in obj["images_layer"].items() %}
|
||
<tr>
|
||
<td>{{ image_index }}</td>
|
||
<td>{{ image["image_name"] }}</td>
|
||
<td>{{ image["image_type"] }}</td>
|
||
<td>{{ image["image_classified"] }}</td>
|
||
<td>{{ image["image_recognized"] }}</td>
|
||
</tr>
|
||
{% endfor %}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<div class="section">
|
||
<div class="section-title">赔案层</div>
|
||
<div class="section-block">
|
||
<div class="card">
|
||
<div class="card-title">出险人（亦被保险人）信息</div>
|
||
<div class="card-grid">
|
||
<div class="card-item">
|
||
<div class="card-item-label">姓名</div>
|
||
<div class="card-item-value">
|
||
{{ obj["insured_person_layer"]["insured_person"] }}
|
||
</div>
|
||
</div>
|
||
<div class="card-item">
|
||
<div class="card-item-label">出生</div>
|
||
<div class="card-item-value">
|
||
<span>{{ obj["insured_person_layer"]["birth_date"] }}</span>
|
||
<span>|</span>
|
||
<span>{{ obj["insured_person_layer"]["age"] }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="card-item">
|
||
<div class="card-item-label">性别</div>
|
||
<div class="card-item-value">
|
||
{{ obj["insured_person_layer"]["gender"] }}
|
||
</div>
|
||
</div>
|
||
<div class="card-item">
|
||
<div class="card-item-label">证件类型</div>
|
||
<div class="card-item-value">
|
||
{{ obj["insured_person_layer"]["identity_type"] }}
|
||
</div>
|
||
</div>
|
||
<div class="card-item">
|
||
<div class="card-item-label">证件号码</div>
|
||
<div class="card-item-value">
|
||
{{ obj["insured_person_layer"]["identity_number"] }}
|
||
</div>
|
||
</div>
|
||
<div class="card-item">
|
||
<div class="card-item-label">证件有效期至</div>
|
||
<div class="card-item-value">
|
||
{{ obj["insured_person_layer"]["termination_date"] }}
|
||
</div>
|
||
</div>
|
||
<div class="card-item">
|
||
<div class="card-item-label">手机号</div>
|
||
<div class="card-item-value">
|
||
{{ obj["insured_person_layer"]["phone_number"] }}
|
||
</div>
|
||
</div>
|
||
<div class="card-item">
|
||
<div class="card-item-label">住址</div>
|
||
<div class="card-item-value">
|
||
<div>
|
||
<span>{{ obj["insured_person_layer"]["province"] }}</span>
|
||
<span>|</span>
|
||
<span>{{ obj["insured_person_layer"]["city"] }}</span>
|
||
<span>|</span>
|
||
<span>{{ obj["insured_person_layer"]["district"] }}</span>
|
||
</div>
|
||
<div>
|
||
{{ obj["insured_person_layer"]["detailed_address"] }}
|
||
</div>
|
||
</div>
|
||
<div class="card-item-value"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-title">领款信息</div>
|
||
<div class="card-grid">
|
||
<div class="card-item">
|
||
<div class="card-item-label">开户银行</div>
|
||
<div class="card-item-value">
|
||
{{ obj["insured_person_layer"]["account_bank"] }}
|
||
</div>
|
||
</div>
|
||
<div class="card-item">
|
||
<div class="card-item-label">户名</div>
|
||
<div class="card-item-value">
|
||
{{ obj["insured_person_layer"]["account"] }}
|
||
</div>
|
||
</div>
|
||
<div class="card-item">
|
||
<div class="card-item-label">户号</div>
|
||
<div class="card-item-value">
|
||
{{ obj["insured_person_layer"]["account_number"] }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-title">可理赔责任</div>
|
||
<div class="table">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>团单号</th>
|
||
<th>理赔责任</th>
|
||
<th>保期</th>
|
||
<th>主被保险人</th>
|
||
<th>被保险人</th>
|
||
<th>与主被保险人关系</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{% for liability in obj["liabilities_layer"] %}
|
||
<tr>
|
||
<td>{{ liability["group_policy"] }}</td>
|
||
<td>{{ liability["liability"] }}</td>
|
||
<td>
|
||
<span>{{ liability["commencement_date"] }}</span
|
||
><span>~</span
|
||
><span>{{ liability["termination_date"] }}</span>
|
||
</td>
|
||
<td>{{ liability["master_insured_person"] }}</td>
|
||
<td>{{ liability["insured_person"] }}</td>
|
||
<td>{{ liability["relationship"] }}</td>
|
||
</tr>
|
||
{% endfor %}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="section">
|
||
<div class="section-title">票据层</div>
|
||
{% for receipt in obj["receipts_layer"] %}
|
||
<div class="card">
|
||
<div class="card-title">
|
||
<div>
|
||
<div>{{ receipt["number"] }}</div>
|
||
<div class="card-title-content">
|
||
关联影像件编号：
|
||
<a
|
||
href="file:///{{ receipt['image_path'] | replace('\\', '/') }}"
|
||
target="_blank"
|
||
>{{ receipt["image_index"] }}</a
|
||
>
|
||
</div>
|
||
</div>
|
||
<div class="card-title-tag">
|
||
{% if receipt["verification"] == '真票' %}
|
||
<span class="card-title-tag green"
|
||
>{{ receipt["verification"] }}</span
|
||
>
|
||
{% elif receipt["verification"] == '无法查验' %}
|
||
<span class="card-title-tag yellow"
|
||
>{{ receipt["verification"] }}</span
|
||
>
|
||
{% else %}
|
||
<span class="card-title-tag red"
|
||
>{{ receipt["verification"] }}</span
|
||
>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
<div class="card-grid">
|
||
<div class="card-item">
|
||
<div class="card-item-label">出险人</div>
|
||
<!-- 出险人为空值 -->
|
||
<div class="card-item-value">{{ receipt["payer"] }}</div>
|
||
</div>
|
||
<div class="card-item">
|
||
<div class="card-item-label">票据代码</div>
|
||
<!-- 票据代码可为空值 -->
|
||
<div class="card-item-value">{{ receipt["code"] }}</div>
|
||
</div>
|
||
<div class="card-item">
|
||
<div class="card-item-label">校验码</div>
|
||
<div class="card-item-value">{{ receipt["check_code"] }}</div>
|
||
</div>
|
||
<div class="card-item">
|
||
<div class="card-item-label">开票日期</div>
|
||
<div class="card-item-value">{{ receipt["date"] }}</div>
|
||
</div>
|
||
<div class="card-item">
|
||
<div class="card-item-label">开票金额</div>
|
||
<div class="card-item-value">{{ receipt["amount"] }}元</div>
|
||
</div>
|
||
<div class="card-item">
|
||
<div class="card-item-label">医疗诊断</div>
|
||
<div class="card-item-value">{{ receipt["diagnosis"] }}</div>
|
||
</div>
|
||
<div class="card-item">
|
||
<div class="card-item-label">购药及就医机构</div>
|
||
<div class="card-item-value">
|
||
{{ receipt["institution_type"] }} | {{ receipt["institution"] }}
|
||
</div>
|
||
</div>
|
||
<div class="card-item">
|
||
<div class="card-item-label">理赔类型</div>
|
||
<div class="card-item-value">{{ receipt["accident"] }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="table">
|
||
<div class="table-title">药品/医疗服务层</div>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>药品/医疗服务</th>
|
||
<th>金额</th>
|
||
<th>个人自费项（元）</th>
|
||
<th>个人自付项（元）</th>
|
||
<th>合理项（元）</th>
|
||
<th>合计（元）</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{% for item in receipt["items"] %}
|
||
<tr>
|
||
<td>{{ item["category"] }} | {{ item["medicine"] }}</td>
|
||
<td>{{ item["amount"] }}</td>
|
||
<td>{{ item["personal_self_payment"] }}</td>
|
||
<td>{{ item["non_medical_payment"] }}</td>
|
||
<td>{{ item["reasonable_amount"] }}</td>
|
||
<td>{{ item["total"] }}</td>
|
||
</tr>
|
||
{% endfor %}
|
||
<tr class="total-total-row">
|
||
<td>合计</td>
|
||
<td>{{ receipt["amount"] }}</td>
|
||
<td>{{ receipt["personal_self_payment"] }}</td>
|
||
<td>{{ receipt["non_medical_payment"] }}</td>
|
||
<td>{{ receipt["reasonable_amount"] }}</td>
|
||
<td>{{ receipt["total"] }}</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div>
|
||
<div class="table-title">理算层</div>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>票据剩余金额</th>
|
||
<th>个单号</th>
|
||
<th>个单剩余保额（元）</th>
|
||
<th>理赔责任</th>
|
||
<th>可理算金额</th>
|
||
<th>理算金额</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{% for adjustment in receipt["adjustments"] %}
|
||
<tr>
|
||
<td>{{ adjustment["remaining_amount"] }}</td>
|
||
<td>{{ adjustment["person_policy"] }}</td>
|
||
<td>{{ adjustment["remaining_coverage_amount"] }}</td>
|
||
<td>{{ adjustment["liability"] }}</td>
|
||
<td>{{ adjustment["adjustable_amount"] }}</td>
|
||
<td>{{ adjustment["adjustment_amount"] }}</td>
|
||
</tr>
|
||
{% endfor %}
|
||
<tr class="total-total-row">
|
||
<td colspan="5">合计</td>
|
||
<td>{{ receipt["adjustment_amount"] }}</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
<footer>
|
||
<p>@liubiren.cloud</p>
|
||
</footer>
|
||
</div>
|
||
</body>
|
||
</html>
|