|
|
<template>
|
|
|
<view class="claims-detail">
|
|
|
<u-navbar title="理赔详情" titleStyle="{'font-weight':'500','font-size':'32rpx'}" height="108rpx"></u-navbar>
|
|
|
<view class="claims-body">
|
|
|
<view class="claims-top" v-if="type==1">
|
|
|
<view class="top-title" >
|
|
|
<image src="../../static/img/title-img1.png"></image>
|
|
|
<text> 验蟹师审核中</text>
|
|
|
</view>
|
|
|
<view class="card-tips">
|
|
|
等待验蟹师审核，<text>{{restTime}}</text>后将自动理赔
|
|
|
</view>
|
|
|
<view class="card-info">
|
|
|
<view class="card-time">
|
|
|
2024.06.01 12:24
|
|
|
</view>
|
|
|
<view class="card-price">
|
|
|
预计理赔<text>23.67</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="claims-top" v-if="type==2">
|
|
|
<view class="top-title" >
|
|
|
<image src="../../static/img/title-img2.png"></image>
|
|
|
<text> 理赔完成</text>
|
|
|
</view>
|
|
|
<view class="card-tips">
|
|
|
理赔款已赔付至您的钱包余额，请您查收
|
|
|
</view>
|
|
|
<view class="card-info">
|
|
|
<view class="card-time">
|
|
|
2024.06.01 12:24
|
|
|
</view>
|
|
|
<view class="card-price">
|
|
|
预计理赔<text>23.67</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="claims-top disagree" v-if="type==3">
|
|
|
<view class="top-title" >
|
|
|
<image src="../../static/img/title-img3.png"></image>
|
|
|
<text> 验蟹师驳回</text>
|
|
|
</view>
|
|
|
<view class="card-tips">
|
|
|
未提交 3 只死蟹在一张照片中的合影
|
|
|
</view>
|
|
|
<view class="card-info">
|
|
|
<view class="card-time">
|
|
|
2024.06.01 12:24
|
|
|
</view>
|
|
|
<view class="card-price">
|
|
|
预计理赔<text>23.67</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="claims-process">
|
|
|
<view class="title">理赔进度</view>
|
|
|
<view class="body">
|
|
|
<!-- 验蟹师通过申请 -->
|
|
|
<view class="process-item" v-if="type==2">
|
|
|
<view class="process-title" >
|
|
|
<view :class="['process-title-circle',{act: process==3}]"></view>
|
|
|
<view :class="['process-title-text',{act: process==3}]">验蟹师通过申请</view>
|
|
|
</view>
|
|
|
<view class="process-line"></view>
|
|
|
<view class="process-text">
|
|
|
验蟹师已确认并通过理赔申请
|
|
|
</view>
|
|
|
<view class="process-date">
|
|
|
2024-06-03 8:37
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 验蟹师驳回申请 -->
|
|
|
<view class="process-item" v-if="type==3">
|
|
|
<view class="process-title" >
|
|
|
<view :class="['process-title-circle',{act: process==3}]"></view>
|
|
|
<view :class="['process-title-text',{act: process==3}]">验蟹师驳回申请</view>
|
|
|
</view>
|
|
|
<view class="process-line"></view>
|
|
|
<view class="process-text">
|
|
|
未提交 3 只死蟹在一张照片中的合影
|
|
|
</view>
|
|
|
<view class="process-date">
|
|
|
2024-06-03 8:37
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 等待验蟹师处理 -->
|
|
|
<view class="process-item">
|
|
|
<view class="process-title">
|
|
|
<view :class="['process-title-circle',{act: process==2}]"></view>
|
|
|
<view :class="['process-title-text',{act: process==2}]">等待验蟹师处理</view>
|
|
|
</view>
|
|
|
<view class="process-line"></view>
|
|
|
<view class="process-text">
|
|
|
验蟹师同意后将理赔到您的微信钱包。如验蟹师超过3天未处理，系统将自动为您理赔。
|
|
|
</view>
|
|
|
<view class="process-date">
|
|
|
2024-06-02 19:37
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 理赔信息已提交 -->
|
|
|
<view class="process-item">
|
|
|
<view class="process-title">
|
|
|
<view :class="['process-title-circle',{act: process==1}]"></view>
|
|
|
<view :class="['process-title-text',{act: process==1}]">理赔信息已提交</view>
|
|
|
</view>
|
|
|
<view class="process-text">
|
|
|
2 两 公蟹
|
|
|
</view>
|
|
|
<view class="process-img-box">
|
|
|
<view class="img-item">
|
|
|
<image src="https://wx3.sinaimg.cn/large/0060qb9Xgy1hsby36rqrxj335s35snpd.jpg"></image>
|
|
|
</view>
|
|
|
<view class="img-item">
|
|
|
<image src="https://wx3.sinaimg.cn/large/0060qb9Xgy1hsby36rqrxj335s35snpd.jpg"></image>
|
|
|
</view>
|
|
|
<view class="img-item">
|
|
|
<image src="https://wx3.sinaimg.cn/large/0060qb9Xgy1hsby36rqrxj335s35snpd.jpg"></image>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="process-date">
|
|
|
2024-06-01 12:24
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="claims-btn" v-if="type!=2">
|
|
|
<view class="btn-border" v-if="type==1">
|
|
|
<button>撤销理赔</button>
|
|
|
</view>
|
|
|
<view class="left-btn" v-if="type==3">
|
|
|
<button>补充材料</button>
|
|
|
</view>
|
|
|
<view class="right-btn" v-if="type==3">申请蟹联网介入</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
data(){
|
|
|
return{
|
|
|
type:1,
|
|
|
restTime:"12:23:21",
|
|
|
process:3
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
.claims-body{
|
|
|
width: 750rpx;
|
|
|
min-height: 100vh;
|
|
|
background: #F3F4F5;
|
|
|
margin-top: 220rpx;
|
|
|
padding: 24rpx 36rpx;
|
|
|
box-sizing: border-box;
|
|
|
// 理赔状态
|
|
|
.claims-top{
|
|
|
width: 678rpx;
|
|
|
height: 210rpx;
|
|
|
background: #FFFFFF;
|
|
|
border-radius: 16rpx;
|
|
|
padding: 24rpx;
|
|
|
box-sizing: border-box;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: space-between;
|
|
|
.top-title{
|
|
|
width: 260rpx;
|
|
|
height: 50rpx;
|
|
|
display: flex;
|
|
|
box-sizing: border-box;
|
|
|
>image{
|
|
|
height: 40rpx;
|
|
|
width: 40rpx;
|
|
|
margin-top: 4rpx;
|
|
|
}
|
|
|
>text{
|
|
|
font-weight: 600;
|
|
|
font-size: 36rpx;
|
|
|
color: #2388FF;
|
|
|
margin-left: 4rpx;
|
|
|
text-align: center;
|
|
|
}
|
|
|
}
|
|
|
.card-tips{
|
|
|
font-weight: 400;
|
|
|
font-size: 24rpx;
|
|
|
color: #555555;
|
|
|
line-height: 34rpx;
|
|
|
text-align: left;
|
|
|
>text{
|
|
|
color: #FF2D46 ;
|
|
|
}
|
|
|
}
|
|
|
.card-info{
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
font-weight: 400;
|
|
|
font-size: 24rpx;
|
|
|
color: #999999;
|
|
|
line-height: 34rpx;
|
|
|
height: 67rpx;
|
|
|
.card-price{
|
|
|
>text{
|
|
|
margin-left: 12rpx;
|
|
|
font-weight: 600;
|
|
|
font-size: 48rpx;
|
|
|
color: #FF2D46;
|
|
|
line-height: 67rpx;
|
|
|
&::before{
|
|
|
content: '¥';
|
|
|
font-size: 24rpx;
|
|
|
margin-right: 6rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
&.disagree{
|
|
|
.top-title{
|
|
|
>text{
|
|
|
color: #FF2D46;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
// 理赔进度
|
|
|
.claims-process{
|
|
|
margin-top: 12rpx;
|
|
|
width: 678rpx;
|
|
|
background: #FFFFFF;
|
|
|
border-radius: 16rpx;
|
|
|
padding: 24rpx;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: space-between;
|
|
|
box-sizing: border-box;
|
|
|
// 理赔进度标题
|
|
|
.title{
|
|
|
font-weight: 500;
|
|
|
font-size: 32rpx;
|
|
|
color: #000000;
|
|
|
line-height: 45rpx;
|
|
|
}
|
|
|
// 理赔进度内容
|
|
|
.body{
|
|
|
// 进度
|
|
|
.process-item{
|
|
|
//background-color: antiquewhite;
|
|
|
position: relative;
|
|
|
//保证line跟随每个item移动
|
|
|
}
|
|
|
.process-title{
|
|
|
display: flex;
|
|
|
height: 40rpx;
|
|
|
margin-top: 20rpx;
|
|
|
.process-title-circle{
|
|
|
width: 32rpx;
|
|
|
height: 32rpx;
|
|
|
background: #BFBFBF;
|
|
|
border-radius: 100rpx;
|
|
|
margin-top: 4rpx;
|
|
|
z-index: 10;
|
|
|
&.act{
|
|
|
background: #2388FF;
|
|
|
}
|
|
|
}
|
|
|
.process-title-text{
|
|
|
font-weight: 500;
|
|
|
font-size: 28rpx;
|
|
|
color: rgba(34,34,34,0.6);
|
|
|
margin-left: 16rpx;
|
|
|
&.act{
|
|
|
color: #2388FF;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.process-line{
|
|
|
width: 0rpx;
|
|
|
height: 170rpx;
|
|
|
border: 3rpx dashed #C8CACB;
|
|
|
position: absolute;
|
|
|
z-index: 5;
|
|
|
top: 16rpx;
|
|
|
left: 14rpx;
|
|
|
}
|
|
|
//进度详情
|
|
|
.process-text{
|
|
|
font-weight: 400;
|
|
|
font-size: 24rpx;
|
|
|
color: rgba(34,34,34,0.6);
|
|
|
line-height: 34rpx;
|
|
|
margin-top: 12rpx;
|
|
|
margin-left: 48rpx;
|
|
|
}
|
|
|
.process-date{
|
|
|
font-weight: 400;
|
|
|
font-size: 24rpx;
|
|
|
color: rgba(0,0,0,0.3);
|
|
|
line-height: 34rpx;
|
|
|
margin-top: 12rpx;
|
|
|
margin-left: 48rpx;
|
|
|
}
|
|
|
.process-img-box{
|
|
|
margin-top: 12rpx;
|
|
|
margin-left: 48rpx;
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
justify-content: left;
|
|
|
.img-item{
|
|
|
width: 194rpx;
|
|
|
height: 210rpx;
|
|
|
background: #F9F9F9;
|
|
|
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
|
|
border: 2rpx solid rgba(0,0,0,0.1);
|
|
|
margin-right: 8rpx;
|
|
|
box-sizing: border-box;
|
|
|
>image{
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.claims-btn{
|
|
|
width: 750rpx;
|
|
|
height: 184rpx;
|
|
|
background: #FFFFFF;
|
|
|
position: fixed;
|
|
|
bottom: 0;
|
|
|
display: flex;
|
|
|
justify-content: space-around;
|
|
|
padding: 24rpx;
|
|
|
box-sizing: border-box;
|
|
|
.btn-border{
|
|
|
width: 678rpx;
|
|
|
height: 92rpx;
|
|
|
background-image: linear-gradient(91deg, rgba(67, 161, 255, 1), rgba(47, 128, 249, 1));
|
|
|
border-radius: 24rpx;
|
|
|
padding: 2rpx;
|
|
|
box-sizing: border-box;
|
|
|
>button{
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
border-radius: 24rpx;
|
|
|
background: #FFFFFF;
|
|
|
font-weight: 500;
|
|
|
font-size: 28rpx;
|
|
|
color: #2388FF;
|
|
|
line-height: 39rpx;
|
|
|
padding-top: 26rpx;
|
|
|
}
|
|
|
}
|
|
|
.left-btn{
|
|
|
width: 344rpx;
|
|
|
height: 92rpx;
|
|
|
border-radius: 24rpx;
|
|
|
padding: 2rpx;
|
|
|
background-image: linear-gradient(91deg, rgba(67, 161, 255, 1), rgba(47, 128, 249, 1));
|
|
|
box-sizing: border-box;
|
|
|
>button{
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
border-radius: 24rpx;
|
|
|
background: #FFFFFF;
|
|
|
font-weight: 500;
|
|
|
font-size: 28rpx;
|
|
|
color: #2388FF;
|
|
|
line-height: 39rpx;
|
|
|
padding-top: 26rpx;
|
|
|
}
|
|
|
}
|
|
|
.right-btn{
|
|
|
width: 344rpx;
|
|
|
height: 92rpx;
|
|
|
background: linear-gradient( 91deg, #43A1FF 0%, #2F80F9 100%);
|
|
|
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
|
|
font-weight: 500;
|
|
|
font-size: 28rpx;
|
|
|
color: #FFFFFF;
|
|
|
line-height: 39rpx;
|
|
|
text-align: center;
|
|
|
padding-top: 26rpx;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
}
|
|
|
</style> |