lanan-repair-app/pages-internal/carManagement/carInfoCard.vue

<template>
	<view class="car-info-class">

		<view :class="{'car-for-class':true,'new-height':!item.showMore}" v-for='(item, index) in listData'
			:key='index'>
			<view class='line-simple-class one-line'>
				<view class='one-line-left' @click="goCarDetails(item, index)">
					<image
						src="https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/a6443b351f174eee968f9019dc0c06c6_mergeImage.png"
						mode="scaleToFill"></image>
				</view>
				<view class='one-line-middle' @click="goCarDetails(item, index)">
					<view class='one-line-top'>车牌号：{{ item.carNo }}</view>
					<view class='one-line-bottom'>{{ item.brand }} {{item.carModel}}</view>
				</view>
				<view class='one-line-right'>
					<view class='y-level one-color'>{{ item.courseType }}</view>
					<!--				  <view class='y-level two-color' v-if='index == 1'>C2</view>-->
					<!--				  <view class='y-level three-color' v-if='index == 2'>C3</view>-->
					<!--				  <view class='y-level' v-if='index > 2'>C1</view>-->
					<view class='bottom-throw-class' @click="dropDown(index)">
						<!--					  <image src="../img/xialajiantou.svg" mode="scaleToFill"></image>-->
						<image v-if="!item.showMore" src="../../indexCom/img/kuang_xiala.png" mode="scaleToFill">
						</image>
						<image v-if="item.showMore" src="../../indexCom/img/shouqi.png" mode="scaleToFill"></image>
					</view>
				</view>
			</view>
			<!--		  <view class='line-simple-class'>-->
			<!--			  <view class="simple-left">车龄</view>-->
			<!--			  <view class="simple-right">{{ item }}</view>-->
			<!--		  </view>-->
			<view class='line-simple-class' v-if="item.showMore">
				<view class="simple-left">车架号</view>
				<view class="simple-right">{{ item.frameNumber}}</view>
			</view>
			<view class='line-simple-class' v-if="item.showMore">
				<view class="simple-left">发动机号</view>
				<view class="simple-right">{{ item.engineNumber }}</view>
			</view>
			<view class='line-simple-class' v-if="item.showMore">
				<view class="simple-left">注册日期</view>
				<view class="simple-right">{{ item.carRegisterDate }}</view>
			</view>
			<view class='line-simple-class' v-if="item.showMore">
				<view class="simple-left">所属教练</view>
				<view class="simple-right">{{ item.userName }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 列表数据
			listData: {
				type: Array,
				default: [
					[],
					[],
					[],
					[],
					[],
					[],
					[],
					[],
					[],
					[],
					[]
				]
			},
		},
		data() {
			return {}
		},
		methods: {
			/**
			 * 展开收起更多字段
			 */
			dropDown(index) {
				this.$nextTick(() => {
					this.listData[index].showMore = !this.listData[index].showMore
					console.log(this.listData[index])
				})
			},
			/**
			 * @description 跳转详情页面信息
			 */
			goCarDetails(record, index) {
				this.$emit('goCarDetails', record, index)
			},
		}
	}
</script>

<style scoped lang="scss">
	.car-info-class {
		width: 100%;
		height: 100%;

		.car-for-class {
			width: 100%;
			margin-bottom: 20rpx;
			height: 444rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			padding: 32rpx 0;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
		}

		.new-height {
			height: 50px;
		}

		.one-line {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.one-line-left {
				width: 108rpx;
				height: 108rpx;
				margin-right: 16rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.one-line-middle {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				height: 108rpx;
				flex: 1;
				margin-right: 16rpx;

				.one-line-top {
					font-weight: 400;
					font-size: 32rpx;
					color: #101A3E;
					text-align: left;
				}

				.one-line-bottom {
					font-weight: 400;
					font-size: 28rpx;
					color: #8D90A6;
					text-align: left;
				}
			}

			.one-line-right {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				height: 100%;

				.bottom-throw-class {
					width: 48rpx;
					height: 44rpx;
					border-radius: 8rpx;
					//border: 2rpx solid #E0E0E0;
					display: flex;
					align-items: center;
					justify-content: center;

					image {
						width: 80%;
						height: 80%;
					}
				}

				.one-color {
					background: linear-gradient(63deg, #054DF3 0%, #55A3FF 100%) !important;
				}

				.two-color {
					background: linear-gradient(90deg, #FF7045 0%, #F7A171 100%) !important;
				}

				.three-color {
					background: linear-gradient(90deg, #39A78B 0%, #7FE1CC 100%) !important;
				}

				.y-level {
					width: 60rpx;
					height: 36rpx;
					background: linear-gradient(63deg, #054DF3 0%, #55A3FF 100%);
					border-radius: 20rpx 40rpx 0rpx 40rpx;
					font-weight: 400;
					font-size: 20rpx;
					color: #FFFFFF;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}

		.line-simple-class {
			width: 96%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.simple-left {
				width: 30%;
				font-weight: 400;
				font-size: 28rpx;
				color: #8D90A6;
				text-align: left;
			}

			.simple-right {
				width: 60%;
				font-weight: 400;
				font-size: 28rpx;
				color: #101A3E;
				text-align: right;
			}
		}
	}
</style>