MP-XiaoXing/Financial/components/assessCard.vue

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