1/pages/customerCS/claimsDetail.vue

<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', {'disagree':type==3}]">
				<view class="top-title" >
					<image :src="typeList[type-1].imageUrl"></image>
					<text> {{typeList[type-1].title}}</text>
				</view>
				<view class="card-tips" v-if="type==1" v-html="setKeyWord(typeList[type-1].content)">
					{{typeList[type-1].content}}
				</view>
				<view class="card-tips" v-if="type!=1">
					{{typeList[type-1].content}}
				</view>
				<view class="card-info">
					<view class="card-time">
						{{typeList[type-1].date}}
					</view>
					<view class="card-price">
						预计理赔<text>{{typeList[type-1].price}}</text>
					</view>
				</view>
			</view>
			<view class="claims-process">
				<view class="title">理赔进度</view>
				<view class="body">
					<u-steps current="0" direction="column" activeColor="#2388FF" inactiveColor="rgba(34,34,34,0.6)" dot v-if="current == 'true' ">		
						<u-steps-item v-for="(item,index) in stepsList" :key="index">
							<view class="stepbox" slot="desc">
								<view class="process-title" slot="desc">
									<view :class="['process-title-text',{act:item.stat=='0'}]">{{item.title}}</view>
								</view>
								<view class="process-text">
									{{item.text}}
								</view>
								<view class="process-img-box" v-if="item.id == 2">
									<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">
									{{item.desc}}
								</view>
							</view>
						</u-steps-item>
					</u-steps>
					<!-- 错误状态 -->
					<u-steps current="0" direction="column" activeColor="#2388FF" inactiveColor="rgba(34,34,34,0.6)" dot v-if="current == 'false'">
						<u-steps-item v-for="(item,index) in stepsErrorList" :key="index">
							<view class="stepbox" slot="desc">
								<view class="process-title" slot="desc">
									<view :class="['process-title-text',{act:item.stat=='0'}]">{{item.title}}</view>
								</view>
								<view class="process-text">
									{{item.text}}
								</view>
								<view class="process-img-box" v-if="item.id == 2">
									<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">
									{{item.desc}}
								</view>
							</view>
						</u-steps-item>
					</u-steps>
					
				</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",
				current:'true',
				typeList:[{
					imageUrl:"../../static/img/title-img1.png",
					title:"验蟹师审核中",
					content:"等待验蟹师审核，a 后将自动理赔",
					date:'2024.06.01 12:24',
					price:'23.67',
				},{
					imageUrl:"../../static/img/title-img2.png",
					title:"理赔完成",
					content:'理赔款已赔付至您的钱包余额，请您查收',
					date:'2024.06.01 12:24',
					price:'23.67',
				},{
					imageUrl:"../../static/img/title-img3.png",
					title:"验蟹师驳回",
					content:'未提交 3 只死蟹在一张照片中的合影',
					date:'2024.06.01 12:24',
					price:'23.67',
				},
				],
				stepsList:[
				{
					id:"0",
					stat:"0",
					
					title:"等待验蟹师处理",
					text:"验蟹师同意后将理赔到您的微信钱包。如验蟹师超过3天未处理，系统将自动为您理赔。",
					desc:"2024-06-02 19:37"
				},
				{
					id:"2",
					stat:"2",
					title:"等待验蟹师处理",
					text:"2 两 公蟹",
					desc:"2024-06-01 12:24",
					imgSrc:[{
						src:"https://wx3.sinaimg.cn/large/0060qb9Xgy1hsby36rqrxj335s35snpd.jpg"
					},
					{
						src:"https://wx3.sinaimg.cn/large/0060qb9Xgy1hsby36rqrxj335s35snpd.jpg"
					}]
				}],
				stepsErrorList:[
				{
					id:"0",
					stat:"0",
					title:"等待验蟹师处理",
					text:"验蟹师同意后将理赔到您的微信钱包。如验蟹师超过3天未处理，系统将自动为您理赔。",
					desc:"2024-06-02 19:37"
				},
				{
					id:"2",
					stat:"2",
					title:"等待验蟹师处理",
					text:"2 两 公蟹",
					desc:"2024-06-01 12:24",
					imgSrc:[{
						src:"https://wx3.sinaimg.cn/large/0060qb9Xgy1hsby36rqrxj335s35snpd.jpg"
					},
					{
						src:"https://wx3.sinaimg.cn/large/0060qb9Xgy1hsby36rqrxj335s35snpd.jpg"
					}]
				}]
			}
		},
		methods:{
			setKeyWord(str){
				if(this.type==1){
					var reg = new RegExp('(a)','g')
					var newStr = str.replace(reg,`<span style='color:red;'>${this.restTime}</span>`)
					return newStr
				}
			}
		},
		created() {
			if(this.type == 3){
				this.current = 'false'
			}else{
				this.current = 'true'
			}
			let final_step = {
					id:"0",
					stat:"0",
					title:"验蟹师驳回申请",
					text:"未提交 3 只死蟹在一张照片中的合影",
					desc:"2024-06-02 19:37"
			}
			if(this.type != 1){
				this.stepsList.splice(0,0,final_step)
				this.stepsErrorList.splice(0,0,final_step)
				this.$set(this.stepsList[1],'stat',1)
				this.$set(this.stepsErrorList[1],'stat',1)
				console.log(this.stepsList)
			}
		},
	}
</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{
				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: 8rpx;
					text-align: center;
				}
			}
			.card-tips{
				font-weight: 400;
				font-size: 24rpx;
				color: #555555;
				line-height: 34rpx;
				text-align: left;
				
			}
			.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{	
				margin-top: 20rpx;
				.stepbox{
					.process-title{
						display: flex;
						height: 40rpx;
						.process-title-text{
							font-weight: 500;
							font-size: 28rpx;
							color: rgba(34,34,34,0.6);
							margin-left: 16rpx;
							&.act{
								color: #2388FF;
							}
						}
					}
				}
				//进度详情
				.process-text{
					font-weight: 400;
					font-size: 24rpx;
					color: rgba(34,34,34,0.6);
					line-height: 34rpx;
					margin-top: 12rpx;
					margin-left: 16rpx;
				}
				.process-date{
					font-weight: 400;
					font-size: 24rpx;
					color: rgba(0,0,0,0.3);
					line-height: 34rpx;
					margin-top: 12rpx;
					margin-left: 16rpx;
				}
				.process-img-box{
					margin-top: 12rpx;
					margin-left: 16rpx;
					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>