Csqqqqq
/
1
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
main
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '010aa026db'
${ noResults }
1/pages/customerCS/claimsDetail.vue

392 lines
9.4 KiB
Vue
Raw Normal View History Unescape Escape

理赔详情
1 month ago
<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{
订单查询
1 month ago
type:3,
理赔详情
1 month ago
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>