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

<template>
	<view>
		<view class="show">
			<view class="head">
				<view>换电编号</view>
				<view>{{item.exchangeNo || '-'}}</view>
				<view @click="copynum">复制</view>
			</view>
			<view class="foot">
				<view class="title">
					<view>{{item.plate || '-'}}</view>
					<view class="info">
						<view class="first">
							<view>{{item.stationAddress || '-'}}</view><view>¥{{item.powerFee || '-'}}</view>
						</view>
						<view class="second">
							<view>{{item.createTime || '-'}}</view><view>换电量{{item.exchangePower || '-'}}(kWh)</view>
						</view>
					</view>
				</view>
				<view class="list">
					<view class="details">
						<view>司机</view>
						<view>{{item.driverName || '-'}}</view>
					</view>
					<view class="details">
						<view>手机号</view>
						<view>{{item.driverPhone || '-'}}</view>
					</view>
					<view class="details">
						<view>车辆电池编号</view>
						<view>{{item.sourceBatterySn || '-'}}</view>
					</view>
					<view class="details">
						<view>换电电池编号</view>
						<view>{{item.targetBatterySn || '-'}}</view>
					</view>
					<view class="details">
						<view>车辆电池SOC</view>
						<view>{{item.sourceSoc || '-'}}</view>
					</view>
					<view class="details">
						<view>换电电池SOC</view>
						<view>{{item.targetSoc || '-'}}</view>
					</view>
					<view class="details">
						<view>换电开始时间</view>
						<view>{{item.startTime || '-'}}</view>
					</view>
					<view class="details">
						<view>换电完成时间</view>
						<view>{{item.endTime || '-'}}</view>
					</view>
				</view>
			</view>
		</view>
		<tab-bar></tab-bar>	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:0,
				item:{}
			}
		},
		onLoad(option) {
			if(option.id){
				this.id=option.id
			}else{
				this.$utils.msg('id丢失')
			}
		},
		mounted() {
			this.getExchangeDetail()
		},
		methods: {
			copynum(){
				uni.setClipboardData({
					data: this.item.exchangeNo
				});
			},
			//换电记录详情
			getExchangeDetail(){
				if(this.id>0){
					this.$http.exchangeRecordShow(this.id).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>
	.show{
		width: 690rpx;
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		.head{
			display: flex;
			padding-left: 25rpx;
			view{
				margin-right: 25rpx;
			}
			view:last-child{
				color: #58be6b;
				font-weight: bold;
				font-size: 28rpx;
			}
		}
		.foot{
			width: 690rpx;
			display: flex;
			flex-direction: column;
			margin-top: 30rpx;
			.title{
				width: 690rpx;
				height: 184rpx;
				background-color: #f2f4f7;
				border-top-left-radius: 35rpx;
				border-top-right-radius: 35rpx;
				display: flex;
				padding: 20rpx 30rpx;
				box-sizing: border-box;
				font-size: 32rpx;
				font-weight: bold;
				flex-direction: column;
				justify-content: space-around;
				.info{
					width: 100%;
					margin-top: 20rpx;
					margin-bottom: 10rpx;
					font-weight: normal;
					.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;
					}
				}
			}
			.list{
				display: flex;
				background-color: #fff;
				width: 690rpx;
				border-bottom-left-radius: 35rpx;
				border-bottom-right-radius: 35rpx;
				padding:0 35rpx;
				box-sizing: border-box;
				flex-direction: column;
				padding-bottom: 25rpx;
				.details{
					display: flex;
					justify-content: space-between;
					font-size: 28rpx;
					color: #1d2129;
					margin: 30rpx 0;
					view:first-child{
						color: #86909c;
						font-weight: bold;
					}
				}
			}
		}
	}
</style>