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.
|
|
|
|
<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>
|