ebike-ui/ebike-maintenance/pages/warehouse/ebikehouse/ebikehouse_view.vue

<template>
	<view class="container"> 
		<uni-card>
			<uni-section title="整车仓库详情" type="line">
				<view class="example">
					<uni-forms>
						<uni-forms-item label="车辆型号" >
							<view class="deepBlackBoldText">
								{{baseFormData.bikeModel}}
							</view> 
						</uni-forms-item>
						<uni-forms-item label="车辆编号" >
							<view class="deepBlackBoldText">
								{{baseFormData.bikeCode}}
							</view>  
						</uni-forms-item>
						<uni-forms-item label="IMEI编号" >
							<view class="deepBlackBoldText">
								{{baseFormData.imeiCode}}
							</view>  
						</uni-forms-item>
						<uni-forms-item label="SN编号"  >
							<view class="deepBlackBoldText">
								{{baseFormData.snCode}}
							</view>  
						</uni-forms-item>
						<uni-forms-item label="中控品牌"  >
							<view class="deepBlackBoldText">
								{{baseFormData.ecuBrand}}
							</view>  
						</uni-forms-item>
						<uni-forms-item label="车牌号"  >
							<view class="deepBlackBoldText">
								{{baseFormData.licensePlateNumber}}
							</view>  
						</uni-forms-item>
						<uni-forms-item label="创建人"  >
							<view class="deepBlackBoldText">
								{{baseFormData.createdUser}}
							</view>  
						</uni-forms-item>
						<uni-forms-item label="创建时间"  >
							<view class="deepBlackBoldText">
								{{baseFormData.createdAt}}
							</view>  
						</uni-forms-item>
						<uni-forms-item label="车辆位置"  >
							<view class="deepBlackBoldText">
								{{baseFormData.carPosition}}
							</view>  
						</uni-forms-item>
						<uni-forms-item label="使用次数"  >
							<view class="deepBlackBoldText">
								{{baseFormData.useCount}}
							</view>  
						</uni-forms-item>
						<uni-forms-item label="扫码失败次数"  >
							<view class="deepBlackBoldText">
								{{baseFormData.scanTheCodeLoseCount}}
							</view>  
						</uni-forms-item>
						<uni-forms-item label="当前站点"  >
							<view class="deepBlackBoldText">
								{{baseFormData.currentSite}}
							</view>  
						</uni-forms-item>
						<uni-forms-item label="挪车距离(米)"  >
							<view class="deepBlackBoldText">
								{{baseFormData.movingDistance}}
							</view>  
						</uni-forms-item>
						<uni-forms-item label="最新骑行时间" >
							<view class="deepBlackBoldText">
								{{baseFormData.latestRideAt}}
							</view>  
						</uni-forms-item>
					</uni-forms>
				</view>
			</uni-section> 
		</uni-card>
	</view>
</template>
<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import * as api from '@/utils/api.js';
	import {onLoad} from '@dcloudio/uni-app';

	const bikeId = ref("");
	// 基础表单数据
	const baseFormData = ref({
		"bikeId": "",
		"bikeNumber": "",
		"bikeModel": "",
		"enterTime": "",
		"signForUser": "",
		"imeiCode": "",
		"snCode": "",
		"batteryCode": "",
		"batteryPower": "",
		"ecuBrand": "",
		"licensePlateNumber": "",
		"createdUser": "",
		"createdAt": "",
		"carPosition": "",
		"useCount": 0,
		"scanTheCodeLoseCount": 0,
		"currentSite": "",
		"movingDistance": 0,
		"latestRideAt": "",
		"qrCode": ""
	});
	// 假设这是从接口加载的数据
	const loadData = () => {
		api.callEbikeInfo("getInventoryBikeDetails?bikeId=" + bikeId.value).then((res) => {
			if (res.code === 200) {
				baseFormData.value = res.data;
			}
		})
	};
	// 在组件挂载完成后加载数据
	onMounted(() => { 
		loadData();
	});
	onLoad((options)=>{
		bikeId.value=options.ebikeId_zcck;;
	})
	
</script>

<style lang="scss">
	.example {
		padding: 15px;
		background-color: #fff;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}

	.uni-forms .uni-forms-item__label {
		width: 80px !important;
		/* 或者使用其他单位 */
	}
	.deepBlackBoldText {
		/* color: #000000; */
		font-weight: bold;
	}
	.uni-forms-item {
		position: relative;
		display: flex;
		flex-direction: row;
		margin-bottom: 10px !important
	}
	
	.uni-forms-item__content {
		position: relative;
		font-size: 14px;
		flex: 1;
		box-sizing: border-box;
		flex-direction: row;
		line-height: 36px;
	}
	.uni-section .uni-section-header { 
	    padding: 12px 0px; 
	}
</style>