You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
257 lines
6.3 KiB
257 lines
6.3 KiB
<template> |
|
<view class="assess_card_container"> |
|
<view @click="isShowDetailsFn(item,index)" v-for="(item,index) in interiorCardData" :key='index' class="'assess_card"> |
|
<view class="flex assess_card_content" :class="item.isShowDetails? 'assess_card_content_select' : ''"> |
|
<image v-if="item.isShowDetails" class="assess_card_content_select_img" :src="hotImg"></image> |
|
<view class="assess_card_content_left flex"> |
|
<view class="assess_card_content_left_icon"> |
|
<image style="width: 70rpx;height: 70rpx;" :src="imgURL+item.icon" ></image> |
|
</view> |
|
<view class="assess_card_content_left_content"> |
|
<view class="assess_card_content_left_content_label">{{item.label}}</view> |
|
<view class="assess_card_content_left_content_tip">{{item.tip}}</view> |
|
</view> |
|
</view> |
|
<view class="assess_card_content_right"> |
|
<view class="assess_card_content_right_price"> |
|
￥{{Number(item.price).toFixed(2)}} |
|
</view> |
|
<view class="assess_card_content_right_oldPrice"> |
|
￥{{Number(item.oldPrice).toFixed(2)}} |
|
</view> |
|
</view> |
|
</view> |
|
<view :style="{maxHeight:item.isShowDetails?'100vh':'0px'}" class="assess_card_details"> |
|
<view class="assess_card_details_item" v-for="(detailsItem,detailsIndex) in item.details" :key='detailsIndex'> |
|
{{detailsItem}} |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
export default { |
|
props:{ |
|
assessCardData:{ |
|
type:Array, |
|
default:()=>[] |
|
} |
|
}, |
|
data() { |
|
return { |
|
setTimeouts:null, |
|
imgURL:this.global.newImgURL, |
|
hotImg:require('../static/img/hot.png'), |
|
interiorCardData: [ |
|
// { |
|
// label: '评分 + 改善建议', |
|
// tip: '组合评估', |
|
// icon: '', |
|
// price: '8.88', |
|
// oldPrice: '12.88', |
|
// details: ['驾驶员车主随时随地查询', '驾驶员车主提前获得改善时间', '知晓详细的评分影响因素及针对性改善建议'], |
|
// isShowDetails: true |
|
// }, |
|
// { |
|
// label: '评分', |
|
// tip: '单独评估', |
|
// icon: '', |
|
// price: '8.88', |
|
// oldPrice: '12.88', |
|
// details: ['驾驶员车主随时随地查询', '驾驶员车主提前获得改善时间', '知晓详细的评分影响因素及针对性改善建议'], |
|
// isShowDetails: false |
|
// }, |
|
// { |
|
// label: '改善建议', |
|
// tip: '单独评估', |
|
// icon: '', |
|
// price: '8.88', |
|
// oldPrice: '12.88', |
|
// details: ['驾驶员车主随时随地查询', '驾驶员车主提前获得改善时间', '知晓详细的评分影响因素及针对性改善建议'], |
|
// isShowDetails: false |
|
// } |
|
] |
|
} |
|
}, |
|
created() { |
|
this.initData(); |
|
this.$emit('productSelect',this.interiorCardData[0]); |
|
console.log(this.interiorCardData,'this.interiorCardData') |
|
}, |
|
methods: { |
|
initData(){ |
|
if(this.assessCardData){ |
|
const productTypefilter = function(e){ |
|
switch(e){ |
|
case 'SA': |
|
return { |
|
label:'评分+改善建议', |
|
tip:'组合评估', |
|
icon:'zjplay1.png' |
|
} |
|
case 'S': |
|
return { |
|
label:'综合分数', |
|
tip:'单独评估', |
|
icon:'zjplay2.png' |
|
} |
|
case 'A': |
|
return { |
|
label:'改善建议', |
|
tip:'单独评估', |
|
icon:'zjplay3.png' |
|
} |
|
default : |
|
return '----' |
|
} |
|
} |
|
this.assessCardData.forEach((item,index)=>{ |
|
const productType = productTypefilter(item.productType) |
|
this.interiorCardData.push({ |
|
isShowDetails: index==0?true:false, |
|
...productType, |
|
price:item.productRealPrice||'--', |
|
oldPrice:item.productOldPrice||'--', |
|
details:item.productIntroduces||[], |
|
...item |
|
}) |
|
}) |
|
} |
|
}, |
|
isShowDetailsFn(item,index){ |
|
console.log(this.setTimeouts) |
|
if(!this.setTimeouts){ |
|
this.interiorCardData.forEach((assessCardDataItem,assessCardDataIndex)=>{ |
|
if(index!==assessCardDataIndex){ |
|
assessCardDataItem.isShowDetails = false; |
|
}else{ |
|
this.setTimeouts = setTimeout(()=>{ |
|
this.$emit('productSelect',this.interiorCardData[index]); |
|
this.interiorCardData[index].isShowDetails = true; |
|
this.setTimeouts = null |
|
},500) |
|
} |
|
}); |
|
} |
|
|
|
|
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style> |
|
.assess_card_content_left_icon{ |
|
height: 100%; |
|
display: flex; |
|
align-items: center; |
|
margin-right: 20rpx; |
|
} |
|
.assess_card_details_item:last-child{ |
|
margin-bottom: 20rpx; |
|
} |
|
.assess_card_details_item:first-child{ |
|
margin-top: 20rpx; |
|
} |
|
.assess_card_details_item{ |
|
font-size: 32rpx; |
|
line-height: 50rpx; |
|
|
|
} |
|
.assess_card_content_right_price{ |
|
font-size: 40rpx; |
|
font-weight: 600; |
|
margin-bottom: 5rpx; |
|
color: #EC4545; |
|
} |
|
.assess_card_content_right_oldPrice{ |
|
color: #BBBBBB; |
|
font-size: 32rpx; |
|
text-decoration: line-through; |
|
} |
|
.assess_card_content_left_content_tip{ |
|
font-size: 32rpx; |
|
} |
|
.assess_card_content_left_content_label{ |
|
font-size: 40rpx; |
|
font-weight: 600; |
|
margin-bottom: 5rpx; |
|
} |
|
.assess_card_content_select_img{ |
|
position: absolute; |
|
width: 68rpx; |
|
height: 76rpx; |
|
left: -34rpx; |
|
top: -38rpx; |
|
} |
|
.assess_card_content_left{ |
|
/* background-color: #007AFF; */ |
|
} |
|
.flexShrink{ |
|
flex-shrink: 1; |
|
} |
|
/* .flexGrow{ |
|
flex: 1; |
|
} */ |
|
.assess_card_details{ |
|
/* box-sizing: border-box; */ |
|
margin: 0 68rpx; |
|
max-height: 0px; |
|
transition: max-height .5s; |
|
overflow: hidden !important; |
|
} |
|
.assess_card_content_right{ |
|
width: 30%; |
|
height: 100%; |
|
text-align: right; |
|
} |
|
.assess_card_content_left{ |
|
width: 70%; |
|
height: 100%; |
|
} |
|
.assess_card_content_select{ |
|
border: 10rpx solid rgba(255, 103, 0, 0.5); |
|
padding: 30rpx 30rpx !important; |
|
} |
|
.assess_card_content{ |
|
width: 100%; |
|
height: 190rpx; |
|
border-radius: 20px; |
|
top: 0; |
|
left: 0; |
|
right: 0; |
|
padding: 40rpx 40rpx; |
|
box-sizing: border-box; |
|
background-color: #FFFFFF; |
|
position: relative; |
|
} |
|
.assess_card_container{ |
|
width: 100%; |
|
} |
|
.assess_card:last-child{ |
|
margin-bottom: 0px; |
|
} |
|
.select_assess_card{ |
|
max-height: 100vh; |
|
min-height: 190rpx; |
|
border-radius: 20px; |
|
background: #FFFFFF; |
|
margin-bottom: 40rpx; |
|
position: relative; |
|
color: #FF6700; |
|
/* transition: max-height 2s; */ |
|
/* overflow: hidden; */ |
|
} |
|
.assess_card { |
|
min-height: 190rpx; |
|
/* max-height: 190rpx; */ |
|
width: 100%; |
|
border-radius: 20px; |
|
background: #FFFFFF; |
|
margin-bottom: 40rpx; |
|
position: relative; |
|
transition: min-height .5s; |
|
color: #FF6700; |
|
} |
|
</style>
|
|
|