car_applet/pagesHome/record/index.vue

<template>
	<view class="content">
		<view class="one">
			<u-notice-bar :text="text"></u-notice-bar>
		</view>
		<view class="two">
			<view class="two_1">
				<view class="table_column">
					<view class="left">
						商品编号
					</view>
					<view class="right">
						{{info.num||'暂无'}}
					</view>
				</view>
				<view class="table_column">
					<view class="left">
						商品名称
					</view>
					<view class="right">
						{{info.name||'暂无'}}
					</view>
				</view>
				<view class="table_column">
					<view class="left">
						车辆识别号(VIN)
					</view>
					<view class="right">
						{{info.feel||'暂无'}}
					</view>
				</view>
			</view>
			<view class="text">档案手续</view>
			<view class="two_2">
				<view class="table_column">
					<view class="left">
						表显里程
					</view>
					<view class="right">
						{{info.km||'暂无'}}
					</view>
				</view>
				<view class="table_column">
					<view class="left">
						排放标准
					</view>
					<view class="right">
						{{info.emission||'暂无'}}
					</view>
				</view>
				<view class="table_column">
					<view class="left">
						首次上牌
					</view>
					<view class="right">
						{{info.first||'暂无'}}
					</view>
				</view>
				<view class="table_column">
					<view class="left">
						过户次数
					</view>
					<view class="right">
						{{info.number||'暂无'}}
					</view>
				</view>
				<view class="table_column">
					<view class="left">
						车源地
					</view>
					<view class="right">
						{{info.city||'暂无'}}
					</view>
				</view>
				<view class="table_column">
					<view class="left">
						车牌地
					</view>
					<view class="right">
						{{info.address||'暂无'}}
					</view>
				</view>
				<view class="table_column">
					<view class="left">
						外观颜色
					</view>
					<view class="right">
						{{info.color||'暂无'}}
					</view>
				</view>
				<view class="table_column">
					<view class="left">
						内饰颜色
					</view>
					<view class="right">
						{{info.colorn||'暂无'}}
					</view>
				</view>
				<view class="table_column">
					<view class="left">
						车辆使用性质
					</view>
					<view class="right">
						{{info.nature||'暂无'}}
					</view>
				</view>
			</view>
			<view class="text">功能配置</view>
			<view class="two_2">
				<view class="table_column">
					<view class="left">
						能源类型
					</view>
					<view class="right">
						{{info.type||'暂无'}}
					</view>
				</view>
				<view class="table_column">
					<view class="left">
						排量
					</view>
					<view class="right">
						{{info.displacement||'暂无'}}
					</view>
				</view>
				<view class="table_column">
					<view class="left">
						级别
					</view>
					<view class="right">
						{{info.level||'暂无'}}
					</view>
				</view>
				<view class="table_column">
					<view class="left">
						变速箱
					</view>
					<view class="right">
						{{info.gearbox||'暂无'}}
					</view>
				</view>
				<view class="table_column">
					<view class="left">
						驱动方式
					</view>
					<view class="right">
						{{info.way||'暂无'}}
					</view>
				</view>
				<view class="table_column">
					<view class="left">
						座位数
					</view>
					<view class="right">
						{{info.seat||'暂无'}}
					</view>
				</view>
			</view>
			<u-divider text="以上为全部内容"></u-divider>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { getCurrentInstance, computed, ref } from 'vue';
	//该依赖已内置不需要单独安装
	import { onLoad } from "@dcloudio/uni-app";
	// 请求接口
	const $api = getCurrentInstance()?.appContext.config.globalProperties.$api;
	// openid
	const openid = computed(() => {
		return uni.getStorageSync('openid');
	})
	// 基本信息
	const config = ref({});
	const id = ref('');
	const text = ref('以下内容为商家填写 购车前请谨慎核对，以实际情况为准');
	const info = ref({

		num: '13238468', name: '雅阁 2015款 2.0L LX 舒适版', feel: '车辆识别号(VIN)', km: '8.70万公里', emission: '国V', first: "2016-03",
		number: '0次', city: '长春', address: '长春', color: '黑色', colorn: '深色', nature: '非营运', type: '汽油', displacement: '2.0L', level: '中型车', gearbox: '自动', way: '前驱', seat: '5座'

	});
	onLoad(async (options) => {
		id.value = options && options.id
		await searchConfig();
		await searchOther();
		await search();
	})
	// 查询其他信息
	const searchOther = async () => {
		let res;
	};
	// config信息
	const searchConfig = async () => {
		config.value = uni.getStorageSync('config');
	};
	// 查询
	const search = async () => { };
</script>
<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;

		.two {
			padding: 2vw;

			.two_1 {
				margin: 2vw;

				.table_column {
					display: flex;
					font-size: var(--font12Size);

					.left {
						width: 25vw;
						text-align: center;
						padding: 2vw;
						border: 1px solid #e7e6e4;
					}

					.right {
						width: 65vw;
						padding: 2vw;
						border: 1px solid #e7e6e4;
						background-color: #f4f4f5;
					}
				}
			}

			.text {
				margin: 2vw;
				font-size: var(--font16Size);
				font-weight: bold;
			}

			.two_2 {
				margin: 2vw;
				display: flex;
				flex-wrap: wrap;

				.table_column {
					display: flex;
					font-size: var(--font12Size);
					width: 46vw;

					.left {
						display: flex;
						align-items: center;
						justify-content: center;
						padding: 2vw;
						border: 1px solid #e7e6e4;
						width: 20vw;
					}

					.right {
						padding: 2vw;
						border: 1px solid #e7e6e4;
						background-color: #f4f4f5;
						width: 24vw;
					}
				}
			}
		}
	}
</style>