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

<template>
	<view>
		<view class="picture"><image :src="item.vehDataVo.url"></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 || '-'}}</view>
						<view>前端电池距离cm</view>
					</view>
					<view>
						<view>{{item.vehDataVo.totalMileage || '-'}}</view>
						<view>里程km</view>
					</view>
					<view>
						<view>{{item.vehDataVo.totalExchangeCnt || '-'}}</view>
						<view>换电次数</view>
					</view>
					<view>
						<view>{{item.vehDataVo.totalExchangePower || '-'}}</view>
						<view>换电量kW/h</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-3)+'%'">{{item.vehStatusVo.soc}}%</view>
							</view>
						</view>
					</view>
				</view>
				<view class="battery-info">
					<view>
						<view>{{item.vehStatusVo.drivingMileage || '-'}}</view>
						<view>已行驶里程km</view>
					</view>
					<view>
						<view>{{item.vehStatusVo.remainderMileage || '-'}}</view>
						<view>预计剩余里程km</view>
					</view>
					<view>
						<view>{{item.vehStatusVo.voltage || '-'}}</view>
						<view>电压V</view>
					</view>
					<view>
						<view>{{item.vehStatusVo.current || '-'}}</view>
						<view>电流A</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 class="left">{{item.exchangeList.month || '-'}}</text><text class="right">月/{{item.exchangeList.year || '-'}}</text></view>
					<view class="money">
						<view class="Exchangelist"><view class="unit">换电量</view> <view class="value">{{item.exchangeList.exchangePower || '-'}}(kW/h)</view></view>
						<view class="Exchangelist"><view class="unit">换电费用</view> <view class="value">{{item.exchangeList.powerFee || '-'}}元</view></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=>{
						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: #FBFDFF;
		padding: 0 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		.category{
			font-weight: bold;
			font-size: 32rpx;
			margin: 20rpx 0rpx;
			text-indent: 1em;
		}
		.show{
			width: 690rpx;
			height: 375rpx;
			background: #F2F4F7;
			box-shadow: 0rpx 0rpx 10rpx 0rpx #DAE1EC;
			border-radius: 24rpx;
			opacity: 1;
			padding: 32rpx 26rpx;
			box-sizing: border-box;
			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: 36rpx;
					padding-right: 15rpx;
				}
				
			}
			.batter_vin{
				display: flex;
				justify-content: space-between;
				font-weight: bold;
				font-size: 26rpx;
				margin: 20rpx 0;
				.title{
					text-align: center;
					color: #86909c;
					font-weight: normal;
				}
			}
			.battery-soc{
				display: flex;
				margin-top: 30rpx;
				margin-bottom: 60rpx;
				view:first-child{
					width: 105rpx;
					font-size: 22rpx;
				}
				view:last-child{
					flex: 1;
					.strip {
						/* 父元素相对定位 */
						position: relative;
						width: 525rpx;
						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: 24rpx;
					margin-top: 3rpx;
				}
			}
		}
		.records{
			width: 690rpx;
			display: flex;
			flex-direction: column;
			.top{
				display: flex;
				flex-direction: row;
				padding: 0 5rpx;
				margin: 20rpx 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: 0rpx 30rpx;
				box-sizing: border-box;
				font-size: 30rpx;
				font-weight: bold;
				flex-direction: column;
				.money{
					display: flex;
					justify-content: space-between;
					line-height: 60rpx;
					.Exchangelist{
						display: flex;
						.unit{
							font-size: 24rpx;
							font-weight: 600;
						}
						.value{
							font-size: 30rpx;
							font-weight: 600;
							padding-left: 8rpx;
						}
					}
				}
				.left{
					font-size: 80rpx;
				}
				.right{
					color: #505968;
				}
			}
			.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: 30rpx 0rpx;
				}
				.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>