zhywpt-sp/subpackage/personal-center/car-details.vue

<template>
	<view class="allContent">
		<view class="list-item">
			<view><text>车牌号：</text><text>{{state.tableData['vehiclePlate']}}</text></view>
			<view><text>车牌颜色：</text><text>{{state.tableData['color']}}</text></view>
			<view><text>所有人：</text><text>{{state.tableData['ownerName']}}</text></view>
			<view><text>车辆类型：</text><text>{{state.tableData['vehicleType']}}</text></view>
			<view><text>车辆识别代号：</text><text>{{state.tableData['vin']}}</text></view>
			<view><text>发动机号码：</text><text>{{state.tableData['engineNum']}}</text></view>
			<view><text>核定载人数：</text><text>{{state.tableData['approvedCount']}}人</text></view>
			<view><text>整备质量：</text><text>{{state.tableData['maintenaceMass']}}kg</text></view>
			<view><text>外廊尺寸：</text><text>{{state.tableData['vehicleDimensions']}}</text></view>
			<view><text>总质量：</text><text>{{state.tableData['totalMass']}}Kg</text></view>
			<view><text>车轴数：</text><text>{{state.tableData['axleCount']}}轴</text></view>
			<view><text>状态：</text><text>{{state.tableData['status']}}</text></view>
			<view><text>行驶证主页：</text><image mode="widthFix" :src="state.tableData['vehPosImgUrl']"></image></view>
			<view><text>行驶证副业：</text><image mode="widthFix" :src="state.tableData['vehNegImgUrl']"></image></view>
			<view><text>车头照：</text><image  mode="widthFix" :src="state.tableData['vehBodyUrl']"></image></view>
			
		</view>
	</view>

</template>

<script setup lang="ts">
	import { reactive } from "vue";
	import { onLoad } from "@dcloudio/uni-app";
	const state = reactive({
		tableData: {},  //上一个页面传递过来的参数
	});
	onLoad((options) => {
		state.tableData = JSON.parse(decodeURIComponent(options.params))
		console.log("options.promoteId", 1111, state.tableData)
	})
	
</script>

<style scoped>
	.allContent {
		background-color: #EEF7F7;
		margin-top: 20rpx;
		overflow: hidden;
	}

	.list-item {
		width: 95%;
		border-radius: 10rpx;
		font-size: 28rpx;
		border: 1rpx solid #ccc;
		padding: 12rpx;
		box-sizing: border-box;
		background-color: white;

	}

	.list-item>view {
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
	}

	.list-item>view>text:first-child {
		width: 30%;
		display: inline-block;
	}

	.list-item>view>text:last-child {
		width: 70%;
		display: inline-block;
		word-break: break-all;
	}
	image{
		width: 220rpx;
	}
</style>