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

<template>
	<view>
		<power-change-header></power-change-header>
		<view class="ban"><image src="../../static/battery-info.png"></image></view>
		<view class="info-box">
			<view class="list">
				<view>车辆电池编号：</view><view>{{swapInfoDTO.vehSn || '-'}}</view>
			</view>
			<view class="list">
				<view>车辆电池SOC：</view><view>{{swapInfoDTO.vehSoc || '-'}}%</view>
			</view>
			<view class="list">
				<view>换电电池编号：</view><view>{{swapInfoDTO.swapSn || '-'}}</view>
			</view>
			<view class="list">
				<view>换电电池SOC：</view><view>{{swapInfoDTO.swapSoc || '-'}}%</view>
			</view>
			<view class="list">
				<view>换电量：</view><view>{{swapInfoDTO.swapCapacity || '-'}}(kW/h)</view>
			</view>
			<view class="list">
				<view>累计里程：</view><view>{{swapInfoDTO.mileage || '-'}}km</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swapInfoDTO:this.$scan.swapInfoDTO,
				swapConfirmDTO:this.$scan.swapConfirmDTO
			}
		},
		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: 95rpx;
		justify-content: space-between;
		font-size: 30rpx;
		view:first-child{
			color: #86909c;
		}
		view:last-child{
			color: #1d2129;
			
		}
	}
}
</style>