zk-driver-wechat-applet/pages/carinfo/index.vue

<template>
	<view>
		<power-change-header></power-change-header>
		<view class="ban">
			<image src="../../static/car-info.png"></image>
		</view>
		<view class="info-box">
			<view class="list">
				<view>车牌：</view>
				<view>{{swapInfoDTO.plate || '-'}}</view>
			</view>
			<view class="list">
				<view>VIN码：</view>
				<view>{{swapInfoDTO.vin || '-'}}</view>
			</view>
			<view class="list">
				<view>累计里程：</view>
				<view>{{swapInfoDTO.mileage || '-'}}km</view>
			</view>
			<view class="list">
				<view>累计换电：</view>
				<view>{{swapInfoDTO.swapNum || '-'}}次</view>
			</view>
			<view class="list">
				<view>解锁状态：</view>
				<view>{{swapInfoDTO.lockState?'已解锁':'未解锁'}}</view>
			</view>
			<view class="list">
				<view>上电状态：</view>
				<view>{{swapInfoDTO.powerOnState?'已下电':'未下电'}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swapInfoDTO:this.$scan.swapInfoDTO
			}
		},
		methods: {
			InitWs(){
				this.$scan.InitWs()
				setTimeout(()=>{
					this.swapInfoDTO=this.$scan.swapInfoDTO
				},1000)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ban {
		width: 547rpx;
		height: 298rpx;
		margin: 70rpx auto;

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

	.info-box {
		width: 587rpx;
		margin: 0 auto;
		display: flex;
		flex-direction: column;

		.list {
			width: 100%;
			display: flex;
			height: 100rpx;
			justify-content: space-between;
			font-size: 30rpx;

			view:first-child {
				color: #86909c;
			}

			view:last-child {
				color: #1d2129;

			}
		}
	}
</style>