<template>
|
<GlobalWindow
|
:title="title"
|
width="100%"
|
:withFooter="false"
|
:visible.sync="visible"
|
:confirm-working="isWorking"
|
@confirm="confirm"
|
>
|
<div class="box">
|
<div class="box_status">
|
<div class="box_status_row" v-for="(item, index) in statusList" :key="index">
|
<div v-if="statusList.length - 1 !== index" :class="item.date ? 'box_status_row_xian statusColor2' : 'box_status_row_xian'"></div>
|
<div :class="item.date ? 'box_status_row_icon statusColor1' : statusList[index - 1].date ? 'box_status_row_icon statusColor2 statusColor3' : 'box_status_row_icon'">
|
<span v-if="!item.date">{{index + 1}}</span>
|
<i class="el-icon-check" v-else></i>
|
</div>
|
<div class="box_status_row_info">
|
<div class="title">{{item.name}}</div>
|
<div class="info" v-if="item.info">{{item.info}}</div>
|
<div class="info" v-if="item.date">{{item.date}}</div>
|
</div>
|
</div>
|
</div>
|
<div class="box_desc">
|
<div class="box_desc_head">
|
<div class="box_desc_title">
|
<span class="box_desc_title_val">报案详情</span>
|
</div>
|
<div class="box_desc_btns">
|
<el-button type="danger" @click="show = true">退回</el-button>
|
<el-button type="primary">立案</el-button>
|
<el-button icon="el-icon-refresh-left" type="primary" circle></el-button>
|
<div class="box_desc_btns_operate">
|
<i class="el-icon-arrow-down"></i>
|
<span>收起</span>
|
</div>
|
</div>
|
</div>
|
<div class="box_desc_list">
|
<div class="box_desc_list_row">
|
报案时间：2024-09-12 03:50
|
</div>
|
<div class="box_desc_list_row">
|
报案号：YYBLP-2025010101
|
</div>
|
<div class="box_desc_list_row">
|
所属保单：2984719842130 <el-button type="text">下载保单</el-button>
|
</div>
|
<div class="box_desc_list_row">
|
报案人：尹晓凤
|
</div>
|
<div class="box_desc_list_row">
|
报案人联系方式：15556970338
|
</div>
|
<div class="box_desc_list_row">
|
保司报案号：-
|
</div>
|
</div>
|
</div>
|
<div class="box_fx">
|
<div class="box_fx_left">
|
<i class="el-icon-warning"></i>
|
<span class="box_fx_left_a">注意，该案件有5条风险信息</span>
|
<span class="box_fx_left_b">查看详情</span>
|
</div>
|
<i class="el-icon-close"></i>
|
</div>
|
<div class="box_desc">
|
<div class="box_desc_head">
|
<div class="box_desc_title">
|
<span class="box_desc_title_val">出险人信息</span>
|
</div>
|
<div class="box_desc_btns">
|
<div class="box_desc_btns_operate">
|
<i class="el-icon-arrow-down"></i>
|
<span>收起</span>
|
</div>
|
</div>
|
</div>
|
<div class="box_desc_list">
|
<div class="box_desc_list_row">
|
出险人姓名：李静
|
</div>
|
<div class="box_desc_list_row">
|
出险人身份证号：340122200603251924
|
</div>
|
<div style="width: 33%; height: 0;"></div>
|
</div>
|
<div class="box_desc_head">
|
<div class="box_desc_title">
|
<span class="box_desc_title_val">保险方案</span>
|
</div>
|
</div>
|
<div class="box_desc_f">
|
<div class="box_desc_fa">
|
<div class="box_desc_fa_title">工伤意外险-B类</div>
|
<div class="box_desc_fa_row">保单号：20241225133229</div>
|
<div class="box_desc_fa_row">保障期限：2025-01-01～2025-12-31</div>
|
<div class="box_desc_fa_row">投保单位：XXX信息科技有限公司</div>
|
<div class="box_desc_fa_row">派遣单位：XXX信息科技有限公司</div>
|
<div class="box_desc_fa_row">所属工种：电子器械制造工</div>
|
</div>
|
<div class="box_desc_fa">
|
<div class="box_desc_fa_title">工伤意外险-B类</div>
|
<div class="box_desc_fa_row">保单号：20241225133229</div>
|
<div class="box_desc_fa_row">保障期限：2025-01-01～2025-12-31</div>
|
<div class="box_desc_fa_row">投保单位：XXX信息科技有限公司</div>
|
<div class="box_desc_fa_row">派遣单位：XXX信息科技有限公司</div>
|
<div class="box_desc_fa_row">所属工种：电子器械制造工</div>
|
</div>
|
<div style="width: 32%; height: 0;"></div>
|
</div>
|
<div class="box_desc_head">
|
<div class="box_desc_title">
|
<span class="box_desc_title_val">出险信息</span>
|
</div>
|
</div>
|
<div class="box_desc_list">
|
<div class="box_desc_list_row">
|
出险时间：2024-06-13 07:40:00
|
</div>
|
<div class="box_desc_list_row">
|
就诊医疗机构：合肥第二人民医院
|
</div>
|
<div class="box_desc_list_row">
|
出现地区：安徽省合肥市肥东县
|
</div>
|
<div class="box_desc_list_row" style="width: 100%;">
|
出险经过：上班时间骑车被撞。头部遭到撞击CT还没出来， 脚踝还有左边大腿外侧严重擦伤。
|
</div>
|
<div class="box_desc_list_row">
|
事故类型：上下班途中受伤
|
</div>
|
<div class="box_desc_list_row">
|
是否住院：是
|
</div>
|
<div class="box_desc_list_row">
|
是否有医疗保险：是
|
</div>
|
<div class="box_desc_list_row" style="width: 100%;">
|
就诊类型：住院
|
</div>
|
<div class="box_desc_list_img">
|
<span>事故视频/照片：</span>
|
<div class="box_desc_list_img_files">
|
<div class="box_desc_list_img_files_row">
|
<img src="" alt="" />
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="box_desc">
|
<div class="box_desc_head">
|
<div class="box_desc_title">
|
<span class="box_desc_title_val">理赔材料</span>
|
</div>
|
<div class="box_desc_btns">
|
<div class="box_desc_btns_operate">
|
<i class="el-icon-arrow-down"></i>
|
<span>收起</span>
|
</div>
|
</div>
|
</div>
|
<div class="box_desc_cailiao">
|
<div class="box_desc_cailiao_title">
|
<div class="box_desc_cailiao_title_x"></div>
|
<span>员工关系证明材料</span>
|
</div>
|
<div class="box_desc_cailiao_list">
|
<div class="box_desc_cailiao_list_img" v-for="(item, index) in 3" :key="index">
|
<img src="" alt="" />
|
</div>
|
</div>
|
</div>
|
<div class="box_desc_cailiao">
|
<div class="box_desc_cailiao_title">
|
<div class="box_desc_cailiao_title_x"></div>
|
<span>门诊</span>
|
</div>
|
<div class="box_desc_cailiao_list">
|
<div class="box_desc_cailiao_list_img" v-for="(item, index) in 3" :key="index">
|
<img src="" alt="" />
|
</div>
|
</div>
|
</div>
|
<div class="box_desc_cailiao">
|
<div class="box_desc_cailiao_title">
|
<div class="box_desc_cailiao_title_x"></div>
|
<span>住院</span>
|
</div>
|
<div class="box_desc_cailiao_list">
|
<div class="box_desc_cailiao_list_img" v-for="(item, index) in 3" :key="index">
|
<img src="" alt="" />
|
</div>
|
</div>
|
</div>
|
<div class="box_desc_cailiao">
|
<div class="box_desc_cailiao_title">
|
<div class="box_desc_cailiao_title_x"></div>
|
<span>伤残</span>
|
</div>
|
<div class="box_desc_cailiao_list">
|
<div class="box_desc_cailiao_list_img" v-for="(item, index) in 3" :key="index">
|
<img src="" alt="" />
|
</div>
|
</div>
|
</div>
|
<div class="box_desc_cailiao">
|
<div class="box_desc_cailiao_title">
|
<div class="box_desc_cailiao_title_x"></div>
|
<span>其他材料</span>
|
</div>
|
<div class="box_desc_cailiao_list">
|
<div class="box_desc_cailiao_list_img" v-for="(item, index) in 3" :key="index">
|
<img src="" alt="" />
|
</div>
|
</div>
|
</div>
|
<div class="box_desc_cailiao">
|
<div class="box_desc_cailiao_title">
|
<div class="box_desc_cailiao_title_x"></div>
|
<span>补充材料</span>
|
</div>
|
<div class="box_desc_cailiao_list">
|
<div class="box_desc_cailiao_list_img" v-for="(item, index) in 3" :key="index">
|
<img src="" alt="" />
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- 退回 -->
|
<el-dialog
|
title="退回"
|
:visible.sync="show"
|
width="500px">
|
<span>这是一段信息</span>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="show = false">取消</el-button>
|
<el-button type="primary" @click="show = false">确定退回</el-button>
|
</span>
|
</el-dialog>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
|
import BaseOpera from '@/components/base/BaseOpera'
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import { mapState } from 'vuex'
|
export default {
|
name: 'OperaSettleClaimsWindow',
|
extends: BaseOpera,
|
components: { GlobalWindow },
|
data () {
|
return {
|
show: false,
|
statusList: [
|
{
|
name: '报案',
|
info: '已报案',
|
date: '2025-03-03 12:31'
|
},
|
{
|
name: '立案',
|
info: '待立案',
|
date: ''
|
},
|
{
|
name: '受理',
|
info: '',
|
date: ''
|
},
|
{
|
name: '理算',
|
info: '',
|
date: ''
|
},
|
{
|
name: '核赔',
|
info: '',
|
date: ''
|
},
|
{
|
name: '结案',
|
info: '',
|
date: ''
|
}
|
]
|
}
|
},
|
computed: {
|
...mapState(['userInfo'])
|
},
|
created () {
|
this.config({
|
api: '/business/settleClaims',
|
'field.id': 'id'
|
})
|
},
|
methods: {
|
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.box {
|
width: 100%;
|
.box_status {
|
width: 100%;
|
padding: 30px 0;
|
box-sizing: border-box;
|
display: flex;
|
align-items: start;
|
justify-content: center;
|
margin-bottom: 30px;
|
.box_status_row {
|
width: 200px;
|
display: flex;
|
align-items: start;
|
position: relative;
|
.box_status_row_xian {
|
position: absolute;
|
right: 30px;
|
top: 10px;
|
width: calc(100% - 110px);
|
height: 1px;
|
background-color: #BEBEBE;
|
}
|
.statusColor1 {
|
background-color: #E8F4FF !important;
|
}
|
.statusColor2 {
|
background-color: #165DFF !important;
|
}
|
.statusColor3 {
|
span {
|
color: #ffffff !important;
|
}
|
}
|
.box_status_row_icon {
|
width: 28px;
|
height: 28px;
|
background-color: rgba(242,243,245,1);
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
border-radius: 50%;
|
margin-right: 10px;
|
span {
|
color: rgba(78,89,105,1);
|
font-size: 14px;
|
}
|
i {
|
color: #165DFF;
|
}
|
}
|
.box_status_row_info {
|
display: flex;
|
flex-direction: column;
|
.title {
|
color: rgba(78,89,105,1);
|
font-size: 16px;
|
font-weight: bold;
|
}
|
.info {
|
color: rgba(154,154,154,1);
|
font-size: 14px;
|
margin-top: 5px;
|
}
|
}
|
}
|
}
|
.box_desc {
|
width: 100%;
|
margin-bottom: 15px;
|
.box_desc_cailiao {
|
width: 100%;
|
margin-bottom: 18px;
|
.box_desc_cailiao_title {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
margin-bottom: 15px;
|
.box_desc_cailiao_title_x {
|
width: 5px;
|
height: 14px;
|
background-color: #165DFF;
|
}
|
span {
|
color: rgba(16,16,16,1);
|
font-size: 14px;
|
margin-left: 5px;
|
}
|
}
|
.box_desc_cailiao_list {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
flex-wrap: wrap;
|
.box_desc_cailiao_list_img {
|
width: 100px;
|
height: 100px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
overflow: hidden;
|
margin-right: 15px;
|
background-color: #E5E5E5;
|
&:last-child {
|
margin: 0;
|
}
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
}
|
.box_desc_head {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-bottom: 26px;
|
.box_desc_title {
|
display: flex;
|
align-items: center;
|
.box_desc_title_val {
|
color: rgba(16,16,16,1);
|
font-size: 18px;
|
margin-right: 20px;
|
}
|
.box_desc_title_zt {
|
height: 25px;
|
padding: 0 15px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
box-sizing: border-box;
|
border-radius: 15px;
|
background-color: rgba(239,239,239,1);
|
color: rgba(16,16,16,1);
|
font-size: 12px;
|
margin-right: 20px;
|
}
|
.box_desc_title_tips {
|
width: 84px;
|
height: 25px;
|
border-radius: 15px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
background-color: rgba(254,226,225,1);
|
span {
|
color: #FF4D4F;
|
font-size: 12px;
|
}
|
}
|
}
|
.box_desc_btns {
|
display: flex;
|
align-items: center;
|
.box_desc_btns_operate {
|
display: flex;
|
align-items: center;
|
margin-left: 10px;
|
cursor: pointer;
|
i {
|
color: #515151;
|
}
|
span {
|
color: rgba(16,16,16,1);
|
font-size: 14px;
|
margin-left: 4px;
|
}
|
}
|
}
|
}
|
.box_desc_list {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
flex-wrap: wrap;
|
.box_desc_list_row {
|
width: 33%;
|
color: rgba(16,16,16,1);
|
font-size: 14px;
|
margin-bottom: 24px;
|
}
|
.box_desc_list_img {
|
width: 100%;
|
display: flex;
|
align-items: start;
|
span {
|
color: rgba(16,16,16,1);
|
font-size: 14px;
|
}
|
.box_desc_list_img_files {
|
flex-shrink: 0;
|
display: flex;
|
align-items: center;
|
flex-wrap: wrap;
|
.box_desc_list_img_files_row {
|
width: 94px;
|
height: 94px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
overflow: hidden;
|
margin-right: 25px;
|
&:last-child {
|
margin: 0;
|
}
|
background-color: #E5E5E5;
|
img {
|
width: 100%;
|
}
|
}
|
}
|
}
|
}
|
.box_desc_f {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
flex-wrap: wrap;
|
margin-bottom: 30px;
|
justify-content: space-between;
|
.box_desc_fa {
|
width: 32%;
|
padding: 22px 25px;
|
box-sizing: border-box;
|
border-radius: 4px;
|
background-color: rgba(239,239,239,1);
|
.box_desc_fa_title {
|
color: rgba(16,16,16,1);
|
font-size: 18px;
|
font-weight: bold;
|
text-decoration: underline;
|
margin-bottom: 10px;
|
}
|
.box_desc_fa_row {
|
color: rgba(16,16,16,1);
|
font-size: 14px;
|
margin-bottom: 10px;
|
&:last-child {
|
margin: 0;
|
}
|
}
|
}
|
}
|
}
|
.box_fx {
|
width: 100%;
|
height: 49px;
|
display: flex;
|
padding: 0 17px;
|
margin-bottom: 30px;
|
box-sizing: border-box;
|
align-items: center;
|
justify-content: space-between;
|
background-color: rgba(254,226,225,1);
|
.box_fx_left {
|
display: flex;
|
align-items: center;
|
i {
|
color: #FF4D4F;
|
font-size: 18px;
|
}
|
.box_fx_left_a {
|
color: rgba(255,77,79,1);
|
font-size: 14px;
|
margin: 0 10px;
|
}
|
.box_fx_left_b {
|
color: rgba(255,77,79,1);
|
font-size: 14px;
|
text-decoration: underline;
|
cursor: pointer;
|
}
|
}
|
.el-icon-close {
|
color: #101010;
|
cursor: pointer;
|
font-size: 18px;
|
}
|
}
|
}
|
</style>
|
