chuangte_bike_newxcx/components/order/VehicleCard.vue

<template>
	<view class="jieshao">
		<view class="lt">
			<view class="vehicle-info">
				<view class="vehicle-name">
					{{bikeobj.vehicleNum == null ? '--' : bikeobj.vehicleNum}}
				</view>
			</view>
			<view class="serial-number">
				SN：{{bikeobj.sn == null ? '--' : bikeobj.sn}}
			</view>
			<view class="range-progress-wrapper">
				<view class="range-progress-bar">
					<view class="range-progress-fill" :style="{ width: Math.min(bikeobj.remainingPower || 0) + '%' }"></view>
				</view>
			</view>
			<view class="battery-section">
				<view class="battery-info">
					<image style="width: 40rpx;height: 40rpx;" :src="getBatteryImage(bikeobj.remainingPower)" mode=""></image>
					<text class="battery-value">{{bikeobj.remainingPower == null ? '--' : bikeobj.remainingPower}}</text>
					<text class="battery-unit" v-if="bikeobj.remainingPower != null">%</text>
				</view>
				<view class="divider"></view>
				<view class="range-info">
					<image style="width: 40rpx;height: 40rpx;" src="https://api.ccttiot.com/smartmeter/img/static/u795rqCiMURN3ZluLIpD" mode=""></image>
					<text class="range-value">{{bikeobj.remainEndurance == null ? '--' : bikeobj.remainEndurance}}</text>
					<text class="range-unit" v-if="bikeobj.remainEndurance != null">KM</text>
					<text class="range-label">预估</text>
				</view>
			</view>
		</view>
		<view class="rt">
			<view class="vehicle-image-container">
				<image v-if="bikeobj.modelPicture" :src="bikeobj.modelPicture" mode="aspectFit" class="vehicle-image"></image>
				<image v-else :src="iconobj.xiadanimg" mode="aspectFit" class="vehicle-image"></image>
			</view>
			<view class="model-name">
				{{bikeobj.modelName == null ? '--' : bikeobj.modelName}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'VehicleCard',
		props: {
			bikeobj: {
				type: Object,
				default: () => ({})
			},
			iconobj: {
				type: Object,
				default: () => ({})
			}
		},
		methods: {
			getBatteryImage(power) {
				if (power == null || power === undefined) return '/static/image/0-20.png'
				const v = parseFloat(power)
				if (v >= 0 && v < 20) return '/static/image/0-20.png'
				if (v >= 20 && v < 40) return '/static/image/20-40.png'
				if (v >= 40 && v < 60) return '/static/image/40-60.png'
				if (v >= 60 && v < 80) return '/static/image/60-80.png'
				if (v >= 80 && v <= 100) return '/static/image/80-100.png'
				return '/static/image/0-20.png'
			}
		}
	}
</script>

<style lang="scss">
	.jieshao {
		width: 698rpx;
		min-height: 220rpx;
		background: #fff;
		border-radius: 24rpx;
		margin: auto;
		padding: 28rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-top: 20rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
		border: 1rpx solid #F3F4F6;

		.rt {
			width: 200rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.vehicle-image-container {
				width: 180rpx;
				height: 130rpx;
				background: #F3F4F6;
				border-radius: 12rpx;
				overflow: hidden;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 12rpx;

				.vehicle-image {
					width: 140rpx;
					height: 100rpx;
					border-radius: 12rpx !important;
				}
			}

			.model-name {
				font-size: 24rpx;
				color: #9CA3AF;
				text-align: center;
			}
		}

		.lt {
			flex: 1;
			margin-right: 20rpx;

			.vehicle-info {
				display: flex;
				align-items: center;
				margin-bottom: 16rpx;

				.vehicle-name {
					font-weight: 700;
					font-size: 40rpx;
					color: #111827;
					margin-right: 12rpx;
					letter-spacing: 0.5rpx;
				}
			}

			.serial-number {
				font-size: 26rpx;
				font-weight: 500;
				color: #6B7280;
				margin-bottom: 16rpx;
				line-height: 1.5;
			}

			.range-progress-wrapper {
				margin-bottom: 20rpx;

				.range-progress-bar {
					width: 95%;
					height: 14rpx;
					background: #E5E7EB;
					border-radius: 7rpx;
					overflow: hidden;
					position: relative;
					box-shadow: inset 0 2rpx 4rpx rgba(0, 0, 0, 0.06);

					.range-progress-fill {
						height: 100%;
						background: linear-gradient(90deg, #4297F3 0%, #60A5FA 100%);
						border-radius: 7rpx;
						transition: width 0.4s ease;
						box-shadow: 0 2rpx 8rpx rgba(66, 151, 243, 0.4);
					}
				}
			}

			.battery-section {
				display: flex;
				align-items: center;
				gap: 24rpx;

				.battery-info {
					display: flex;
					align-items: center;
					gap: 12rpx;

					.battery-value {
						font-size: 32rpx;
						font-weight: 700;
						color: #111827;
						line-height: 1.3;
						white-space: nowrap;
					}

					.battery-unit {
						font-size: 26rpx;
						font-weight: 400;
						color: #999;
						line-height: 1.3;
						white-space: nowrap;
					}
				}

				.divider {
					width: 2rpx;
					height: 40rpx;
					background: #E5E7EB;
					flex-shrink: 0;
					border-radius: 1rpx;
				}

				.range-info {
					display: flex;
					align-items: center;
					gap: 12rpx;

					.range-value {
						font-size: 28rpx;
						font-weight: 700;
						color: #111827;
						line-height: 1.3;
						white-space: nowrap;
					}

					.range-unit {
						font-size: 24rpx;
						color: #999;
						line-height: 1.3;
						white-space: nowrap;
					}

					.range-label {
						font-size: 24rpx;
						font-weight: 500;
						color: #6B7280;
						line-height: 1.3;
						white-space: nowrap;
					}
				}
			}
		}
	}
</style>