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>
			<button class="submit" @click="carChange(state.tableData['vehicleId'])">车辆信息变更</button>
		</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)
	})
	const carChange = (vehicleId) => {
		uni.navigateTo({
			url: `/subpackage/personal-center/car-message-change?vehicleId=${vehicleId}`
		})
	}
</script>

<style scoped>
	.allContent {
		background-color: #EEF7F7;
		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;
		margin: 20rpx auto;
	}

	.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;
	}

	.submit {
		margin-top: 100rpx;
		width: 670rpx;
		height: 80rpx;
		background: linear-gradient(-90deg, #43A1E0 0%, #13E7C1 100%);
		border-radius: 40rpx;
		font-size: 32rpx;
		font-family: Noto Sans S Chinese;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 80rpx;
	}
</style>