notarization_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._id||'暂无'}}
					</view>
				</view>
				<view class="table_column">
					<view class="left">
						商品名称
					</view>
					<view class="right">
						{{info.series||'暂无'}} {{info.year||'暂无'}}款
						{{info.style||'暂无'}}
					</view>
				</view>
				<view class="table_column">
					<view class="left">
						车辆识别号(VIN)
					</view>
					<view class="right">
						{{info.vin? '已上传' : '未上传'}}
					</view>
				</view>
			</view>
			<view class="text">档案手续</view>
			<view class="two_2">
				<view class="table_column">
					<view class="left">
						表显里程
					</view>
					<view class="right">
						{{info.mileage||'暂无'}}万公里
					</view>
				</view>
				<view class="table_column">
					<view class="left">
						排放标准
					</view>
					<view class="right">
						{{getDict(info.emission, 'emission')}}
					</view>
				</view>
				<view class="table_column">
					<view class="left">
						首次上牌
					</view>
					<view class="right">
						{{moment(info.f_time).format('YYYY-MM')||'暂无日期'}}
					</view>
				</view>
				<view class="table_column">
					<view class="left">
						过户次数
					</view>
					<view class="right">
						{{info.number||'0'}}次
					</view>
				</view>
				<view class="table_column">
					<view class="left">
						车源地
					</view>
					<view class="right">
						{{info.place||'暂无'}}
					</view>
				</view>
				<view class="table_column">
					<view class="left">
						车牌地
					</view>
					<view class="right">
						{{info.license||'暂无'}}
					</view>
				</view>
				<view class="table_column">
					<view class="left">
						外观颜色
					</view>
					<view class="right">
						{{info.out_color||'暂无'}}
					</view>
				</view>
				<view class="table_column">
					<view class="left">
						内饰颜色
					</view>
					<view class="right">
						{{info.in_color||'暂无'}}
					</view>
				</view>
				<view class="table_column">
					<view class="left">
						车辆使用性质
					</view>
					<view class="right">
						{{getDict(info.use_type, 'use_type')}}
					</view>
				</view>
			</view>
			<view class="text">功能配置</view>
			<view class="two_2">
				<view class="table_column">
					<view class="left">
						能源类型
					</view>
					<view class="right">
						{{getDict(info.energy, 'energy')}}
					</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">
						{{getDict(info.level, 'level')}}
					</view>
				</view>
				<view class="table_column">
					<view class="left">
						变速箱
					</view>
					<view class="right">
						{{getDict(info.type, 'type')}}
					</view>
				</view>
				<view class="table_column">
					<view class="left">
						驱动方式
					</view>
					<view class="right">
						{{getDict(info.drive, 'drive')}}
					</view>
				</view>
				<view class="table_column">
					<view class="left">
						座位数
					</view>
					<view class="right">
						{{getDict(info.set, 'set')}}
					</view>
				</view>
			</view>
			<u-divider text="以上为全部内容"></u-divider>
		</view>
	</view>
</template>

<script setup lang="ts">
	import moment from 'moment';
	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({});
	// 字典表
	const useTypeList = ref([]);
	const boxTypeList = ref([]);
	const structureList = ref([]);
	const emissionList = ref([]);
	const energyList = ref([]);
	const setList = ref([]);
	const levelList = ref([]);
	const driveList = ref([]);
	onLoad(async (options) => {
		id.value = options && options.id
		await searchConfig();
		await searchOther();
		await search();
	})
	// 查询其他信息
	const searchOther = async () => {
		let res;
		// 车辆使用性质
		res = await $api(`dictData`, 'GET', { code: 'useType', is_use: '0' });
		if (res.errcode === 0) useTypeList.value = res.data;
		// 变速箱
		res = await $api(`dictData`, 'GET', { code: 'boxType', is_use: '0' });
		if (res.errcode === 0) boxTypeList.value = res.data;
		// 车身结构
		res = await $api(`dictData`, 'GET', { code: 'structure', is_use: '0' });
		if (res.errcode === 0) structureList.value = res.data;
		// 排放标准
		res = await $api(`dictData`, 'GET', { code: 'emission', is_use: '0' });
		if (res.errcode === 0) emissionList.value = res.data;
		// 能源类型
		res = await $api(`dictData`, 'GET', { code: 'energy', is_use: '0' });
		if (res.errcode === 0) energyList.value = res.data;
		// 座椅
		res = await $api(`dictData`, 'GET', { code: 'set', is_use: '0' });
		if (res.errcode === 0) setList.value = res.data;
		// 车辆级别
		res = await $api(`dictData`, 'GET', { code: 'level', is_use: '0' });
		if (res.errcode === 0) levelList.value = res.data;
		// 驱动方式
		res = await $api(`dictData`, 'GET', { code: 'drive', is_use: '0' });
		if (res.errcode === 0) driveList.value = res.data;
	};
	// config信息
	const searchConfig = async () => {
		config.value = uni.getStorageSync('config');
	};
	// 查询
	const search = async () => {
		if (id.value) {
			const res = await $api(`car/${id.value}`, 'GET', {});
			if (res.errcode === 0) {
				info.value = res.data
			} else {
				uni.showToast({
					title: res.errmsg || '',
					icon: 'error',
				});
			}
		}
	};
	// 数据处理
	const getDict = (data, model) => {
		let list;
		switch (model) {
			case 'use_type':
				list = useTypeList.value;
				break;
			case 'type':
				list = boxTypeList.value;
				break;
			case 'structure':
				list = structureList.value;
				break;
			case 'emission':
				list = emissionList.value;
				break;
			case 'energy':
				list = energyList.value;
				break;
			case 'set':
				list = setList.value;
				break;
			case 'level':
				list = levelList.value;
				break;
			case 'drive':
				list = driveList.value;
				break;
			default:
				break;
		}
		if (!list) return;
		const res = list.find((f) => f.value == data);
		return res?.label || '暂无';
	};
</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>