1/pages/customerCS/components/claimsCard.vue

<template>
	<view class="claims-card">
		<view :class="['card-item',{'disagree':type==3}]">
			<view class="top-title" >
				<image :src="list[type-1].imgUrl"></image>
				<text> {{list[type-1].title}}</text>
			</view>
			<view class="card-tips" v-if="type==1" v-html="setKeyWord(list[type-1].text)">
				{{list[type-1].text}}
			</view>
			<view class="card-tips" v-if="type!=1">
				{{list[type-1].text}}
			</view>
			<view class="card-info">
				<view class="card-time">
					{{list[type-1].date}}
				</view>
				<view class="card-price">
					预计理赔<text>{{list[type-1].price}}</text>
				</view>
			</view>
			<view class="card-btn">
				查看理赔详情
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			type:Number,
		},
		data(){
			return{		
				restTime:"12:23:21",
				list:[{
					imgUrl:"../../../static/img/title-img1.png",
					title:"验蟹师审核中",
					text:"等待验蟹师审核，a 后将自动理赔",
					date:"2024.06.01 12:24",
					price:"23.67"
				},{
					imgUrl:"../../../static/img/title-img2.png",
					title:"理赔完成",
					text:"理赔款已赔付至您的钱包余额，请您查收",
					date:"2024.06.01 12:24",
					price:"23.67"
				},{
					imgUrl:"../../../static/img/title-img3.png",
					title:"验蟹师驳回",
					text:"未提交 3 只死蟹在一张照片中的合影",
					date:"2024.06.01 12:24",
					price:"23.67"
				}]
			}
		},
		methods:{
			setKeyWord(str){
				if(this.type==1){
					console.log(str)
					var reg = new RegExp('(a)','g')
					var newStr = str.replace(reg,`<span style='color:red;'>${this.restTime}</span>`)
					return newStr
				}
			}
		},
		mounted() {
			console.log(this.type)
			console.log(this.list[this.type-1].text)
		}
	}
</script>

<style lang="scss">
	.claims-card{
		.card-item{
			height: 344rpx;
			width: 750rpx;	
			background: #FFFFFF;
			padding: 36rpx 36rpx 32rpx 36rpx;
			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;
						}
					}	
				}
			}
			.card-btn{
				width: 678rpx;
				height: 92rpx;
				background: #FFFFFF;
				border-radius: 98rpx 98rpx 98rpx 98rpx;
				border: 2rpx solid #2388FF;
				text-align: center;
				font-weight: 500;
				font-size: 28rpx;
				color: #2388FF;
				line-height: 39rpx;
				padding-top: 26rpx;
				box-sizing: border-box;
			}
			&.disagree{
				.top-title{
					>text{
						color: #FF2D46;
					}
				}
			}
		}
	}
</style>