zk-driver-wechat-applet/pages/ucenter/car_show.vue

<template>
	<view>
		<view class="picture"><image src="../../static/car.jpg"></image></view>
		<view class="car_info">
			<view class="category">车辆信息</view>
			<view class="show">
				<view>车牌号</view>
				<view class="plate-number">
					<view>{{item.vehDataVo.plate || '-'}}</view>
				</view>
				<view class="batter_vin">
					<view>
						<view>{{item.vehDataVo.vehModel || '-'}}</view>
						<view class="title">车型</view>
					</view>
					<view>
						<view>{{item.vehDataVo.vin || '-'}}</view>
						<view class="title">车辆VIN码</view>
					</view>
				</view>
				<view class="battery-info">
					<view>
						<view>{{item.vehDataVo.battDistance || '-'}}CM</view>
						<view>前端电池距离</view>
					</view>
					<view>
						<view>{{item.vehDataVo.totalMileage || '-'}}km</view>
						<view>累计里程</view>
					</view>
					<view>
						<view>{{item.vehDataVo.totalExchangeCnt || '-'}}次</view>
						<view>累计换电次数</view>
					</view>
					<view>
						<view>{{item.vehDataVo.totalExchangePower || '-'}}kW/h</view>
						<view>累计换电量</view>
					</view>
				</view>
			</view>
			<view class="category">车辆状态</view>
			<view class="show">
				<view>电池编号</view>
				<view class="plate-number">
					<view>{{item.vehStatusVo.sn || '-'}}</view>
				</view>
				<view class="battery-soc">
					<view>电池SOC</view>
					<view>
						<view class="strip"> 
							<!-- 第二层进度条的颜色 -->
							<view class="blue" :style="'width:'+item.vehStatusVo.soc+'%'"> 
								<!-- （进度条显示的图片  样式：根据父元素进行相对定位 ，本身绝对定位 ） -->
								<text class="protext" :style="'left:'+item.vehStatusVo.soc+'%'"></text>
								<view class="pronumber" :style="'left:'+(item.vehStatusVo.soc-6)+'%'">{{item.vehStatusVo.soc}}%</view>
							</view>
						</view>
					</view>
				</view>
				<view class="battery-info">
					<view>
						<view>{{item.vehStatusVo.drivingMileage || '-'}}KM</view>
						<view>已行驶里程</view>
					</view>
					<view>
						<view>{{item.vehStatusVo.remainderMileage || '-'}}km</view>
						<view>预计剩余里程</view>
					</view>
					<view>
						<view>{{item.vehStatusVo.voltage || '-'}}V</view>
						<view>电压</view>
					</view>
					<view>
						<view>{{item.vehStatusVo.current || '-'}}A</view>
						<view>电流</view>
					</view>
				</view>
			</view>
			<view class="records">
				<view class="top">
					<view>车辆换电记录</view>
					<view><navigator :url="'record?plate='+item.vehDataVo.plate">更多</navigator></view>
				</view>
				<view class="title">
					<view><text>{{item.exchangeList.month || '-'}}</text>月/{{item.exchangeList.year || '-'}}</view>
					<view class="money">
						<view>换电量 {{item.exchangeList.exchangePower || '-'}}(kW/h)</view>
						<view>换电费用 {{item.exchangeList.powerFee || '-'}}元</view>
					</view>
				</view>
				<view class="list">
					<view class="info" v-for="(data ,index) in item.exchangeList.list"
						:key="data.id">
						<view class="first">
							<view>{{data.plate || '-'}}</view><view>¥{{data.powerFee || '-'}}</view>
						</view>
						<view class="second">
							<view>{{data.createTime || '-'}}</view><view>{{data.exchangePower || '-'}}(kW.h)</view>
						</view>
					</view>
					<view class="info norecord" v-if="!item.exchangeList.list">暂无记录</view>
				</view>
			</view>
		</view>
		<tab-bar></tab-bar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				plate:null,
				item:{},
			}
		},
		onLoad(option) {
			if(option.plate){
				this.plate=option.plate
			}else{
				this.$utils.msg('丢失车牌号参数')
			}
		},
		mounted() {
			this.getexchangeCarDetail()
		},
		methods: {
			getexchangeCarDetail(){
				if(this.plate){
					this.$http.exchangeCarDetail(this.plate).then(rs=>{
						console.log(rs.data)
						if(rs.code === 0){
							this.item=rs.data
						}else{
							this.$utils.msg(rs.msg);
						}
					})
					.catch(error=>{
						this.$utils.msg(error);
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.picture{
		width: 750rpx;
		height: 570rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.car_info{
		width: 750rpx;
		min-height: 1000rpx;
		border-top-left-radius: 35rpx;
		border-top-right-radius: 35rpx;
		position: relative;
		top: -40rpx;
		background-color: #f8f9fb;
		padding: 0 23rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		.category{
			font-weight: bold;
			font-size: 32rpx;
			margin: 28rpx 0rpx;
			text-indent: 1em;
		}
		.show{
			width: 704rpx;
			height: 375rpx;
			padding: 32rpx;
			box-sizing: border-box;
			background-image: url(~@/static/ibg.png);
			background-size: 100% 100%;
			display: flex;
			flex-direction:column;
			.plate-number{
				display: flex;
				margin-top: 12rpx;
				image{
					width: 26rpx;
					height: 26rpx;
					vertical-align: middle;
				}
				view:first-child{
					font-weight: 600;
					font-size: 32rpx;
					padding-right: 15rpx;
				}
				
			}
			.batter_vin{
				display: flex;
				justify-content: space-between;
				font-weight: bold;
				font-size: 32rpx;
				margin: 30rpx 0;
				.title{
					text-align: center;
					color: #86909c;
					font-size: 28rpx;
					font-weight: normal;
				}
			}
			.battery-soc{
				display: flex;
				margin-top: 30rpx;
				margin-bottom: 60rpx;
				view:first-child{
					width: 138rpx;
				}
				view:last-child{
					flex: 1;
					.strip {
						/* 父元素相对定位 */
						position: relative;
						width: 480rpx;
						height: 18rpx;
						background-color: #fff;
						top: 10rpx;
					}
					.blue {
						height: 18rpx;
						background-color: #ff7d00;
						font-size: 28rpx;
					}
					.protext{
						width:2rpx;
						height:32rpx;
						background: #86909c;
						/* 子元素绝对定位   */
						position: absolute;
						/* 定位方向：属性值 */
						top:-9rpx
					}
					.pronumber{
						font-size: 26rpx;
						font-weight: bold;
						position: absolute;
						/* 定位方向：属性值 */
						top:30rpx;
					}
				}
			}
			.battery-info{
				display: flex;
				justify-content: space-between;
				margin-top: 20rpx;
				text-align: center;
				line-height: 36rpx;
				view > view:first-child{
					font-weight: bold;
				}
				view > view:last-child{
					color: #939da7;
					font-size: 28rpx;
					margin-top: 8rpx;
				}
			}
		}
		.records{
			width: 690rpx;
			padding: 0 7rpx;
			display: flex;
			flex-direction: column;
			.top{
				display: flex;
				flex-direction: row;
				padding: 0 5rpx;
				margin: 28rpx 0rpx;
				justify-content: space-between;
				font-size: 32rpx;
				font-weight: bold;
				text-indent: 12rpx;
				navigator{
					color: #58be6b;
				}
			}
			.title{
				width: 690rpx;
				height: 184rpx;
				background-image:url('https://xcx.xnymzx.com/zkstation/bgr.png');
				background-size: 100% 100%;
				display: flex;
				padding: 20rpx 30rpx;
				box-sizing: border-box;
				font-size: 30rpx;
				font-weight: bold;
				flex-direction: column;
				justify-content: space-around;
				.money{
					display: flex;
					justify-content: space-between;
				}
				text{
					font-size: 45rpx;
				}
			}
			.list{
				display: flex;
				background-color: #fff;
				width: 690rpx;
				border-bottom-left-radius: 35rpx;
				border-bottom-right-radius: 35rpx;
				margin-bottom: 100rpx;
				padding:0 35rpx;
				box-sizing: border-box;
				flex-direction: column;
				.info{
					width: 100%;
					margin-top: 30rpx;
					margin-bottom: 20rpx;
				}
				.norecord{
					text-align: center;
					color: #86909c;
				}
				.first{
					display: flex;
					justify-content: space-between;
					font-size: 30rpx;
					view:last-child{
						font-size: 32rpx;
						font-weight: bold;
					}
				}
				.second{
					color: #86909c;
					font-size: 28rpx;
					display: flex;
					justify-content: space-between;
					margin-top: 2rpx;
				}
			}
		}
	}
</style>