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

<template>
	<view class="bg">
		<view class="title_wrap"><text class="title">车辆信息</text></view>
		<u-form label-width="230" :model="state.msg" ref="uForm" :label-style='labelStyle'>
				<u-form-item label="卡号" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'>
						<u-input v-model="state.msg['cardId']" input-align='right'/>
				</u-form-item>
				<u-form-item label="签号" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'>
						<u-input v-model="state.msg['obuId']" input-align='right'/>
				</u-form-item>
				<u-form-item label="车辆所有人信息" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'>
						<u-input v-model="state.msg['info']['ownerName']" input-align='right'/>
				</u-form-item>
				<u-form-item label="车辆所有人证件类型" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' v-if="state.msg.info.ownerIdType">
						<text>{{getCodeName('CERTIFICATE_TYPE', state.msg.info.ownerIdType)}}</text>
				</u-form-item>
				<!-- <u-form-item label="车辆所有人证件号码" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
					borderBottom>
						<u-input v-model="state.msg.info.ownerIdNum" input-align='right'/>
				</u-form-item> -->
				<!-- <u-form-item label="车辆所有号码" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
					borderBottom>
						<u-input v-model="state.msg.info.ownerName" input-align='right'/>
				</u-form-item> -->
				<u-form-item label="车辆号码" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
					borderBottom>
					<u-input  v-model="state.msg.info.vehiclePlate" inputAlign="right" />
				</u-form-item>
				<u-form-item label="行驶证车辆类型" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
					borderBottom>
					<u-input v-model="state.msg.info.vehicleType" inputAlign="right"/>
				</u-form-item>
				<u-form-item label="车辆识别代号" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'>
					<u-input inputAlign="right" placeholder="请输入车辆识别代号" v-model="state.msg.info.vin"/>
				</u-form-item>
				<u-form-item label="发动机号码" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'>
					<u-input inputAlign="right" placeholder="请输入发动机号码" v-model="state.msg.info.engineNum"/>
				</u-form-item>
				<u-form-item label="车辆收费车型" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'>
					<u-input inputAlign="right" placeholder="请输入发动机号码" v-model="state.msg.info.engineNum"/>
				</u-form-item>
				<u-form-item label="核定载人数" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'>
					<u-input inputAlign="right" placeholder="请输入核定载人数" v-model="state.msg.info.approvedCount" />
				</u-form-item>
				<u-form-item label="总质量" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'>
					<u-input inputAlign="right" placeholder="请输入总质量" v-model="state.msg.info.totalMass"/>
				</u-form-item>
				<u-form-item label="整备质量" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'>
					<u-input inputAlign="right" placeholder="请输入整备质量" v-model="state.msg.info.maintenanceMass"/>
				</u-form-item>
				<u-form-item label="核定载质量" v-if="state.msg.info.permittedWeight" :left-icon='`${$imgUrl}issuance/point-form.png`'
					:left-icon-style='leftIcon'>
					<u-input inputAlign="right" placeholder="核定载质量" v-model="state.msg.info.permittedWeight"/>
				</u-form-item>
				<u-form-item label="外廓尺寸" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'>
					<u-input inputAlign="right" placeholder="外廓尺寸" v-model="state.msg.info.vehicleDimensions"/>
				</u-form-item>
				<u-form-item label="准牵引总质量" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'>
					<u-input inputAlign="right" placeholder="准牵引总质量" v-model="state.msg.info.permittedTowWeight"/>
				</u-form-item>
				<u-form-item label="车轮数" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'>
					<u-input inputAlign="right" placeholder="请输入车轮数" v-model="state.msg.info.wheelCount"/>
				</u-form-item>
				<u-form-item label="车轴数" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'>
					<u-input inputAlign="right" placeholder="请输入车轴数" v-model="state.msg.info.axleCount"/>
				</u-form-item>
				<u-form-item label="车辆使用性质" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'>
					<u-input inputAlign="right" placeholder="请输入车辆使用性质" v-model="state.msg.info.useCharacter" />
				</u-form-item>
			</u-form>
			<view class="picture-wrapper" @click="see(strReplace(state.msg.info.vehPosImgUrl))">
				<view class="bg1">
					<view class="">
						<view class="name"> 行驶证主页 </view>
						<view class="value"> 上传行驶证的主页 </view>
						<view class="tip">
							<view class="tip-value"> 拍摄规范 </view>
						</view>
					</view>
					<image v-if="!state.msg.info.vehPosImgUrl" class="icon" :src="`${$imgUrl}issuance/xz.png`"
						:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
					</image>
					<image v-else class="icon" :src="strReplace(state.msg.info.vehPosImgUrl)"
						:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}"></image>
				</view>
			</view>
			<view class="picture-wrapper" @click="see(strReplace(state.msg.info.vehNegImgUrl))">
				<view class="bg1">
					<view class="">
						<view class="name"> 行驶证副页 </view>
						<view class="value"> 上传行驶证的副页 </view>
						<view class="tip">
							<view class="tip-value"> 拍摄规范 </view>
						</view>
					</view>
					<image v-if="!state.msg.info.vehNegImgUrl" class="icon" :src="`${$imgUrl}issuance/xf.png`"
						:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
					</image>
					<image v-else class="icon" :src="strReplace(state.msg.info.vehNegImgUrl)"
						:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}"></image>
				</view>
			</view>
			<view class="picture-wrapper" @click="see(state.msg.info.vehBodyUrl)">
				<view class="bg1">
					<view class="">
						<view class="name"> 车头照 </view>
						<view class="value"> 上传汽车的45度车头照片 </view>
						<view class="tip">
							<view class="tip-value"> 拍摄规范 </view>
						</view>
					</view>
					<image v-if="!state.msg.info.vehBodyUrl" class="icon" :src="`${$imgUrl}issuance/chetou.png`"
						:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
					</image>
					<image v-else class="icon" :src="strReplace(state.msg.info.vehBodyUrl)"
						:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}"></image>
				</view>
			</view>
			<button type="default" class="ui-btn" @click="carChange(state.msg.info.vehicleId)" style="width: 638rpx;margin-top: 40rpx;">车辆信息变更</button>
	</view>

</template>

<script setup lang="ts">
import { getCodeName } from "@/datas/queryKey.js";
	import { reactive } from "vue";
	import { onLoad } from "@dcloudio/uni-app";
	import {navTo,strReplace} from "@/utils/utils";
	import { source } from "@/utils/network/difference";
	import {vehicleInformationChange} from "@/utils/network/api.js";
	import {requestNew} from "@/utils/network/request.js";
		const labelStyle = {
			color: "#004576",
			fontSize: "28rpx",
		}
		const leftIcon = {
			height: '100%',
			width: '8rpx',
			display: 'flex',
			'align-items': 'center',
			'margin-right': '4rpx',
		}
	const state = reactive({
		form: {
			customerName: "",
			customerTel: "",
			vehiclePlate: "",
			vehiclePlateColor: "",
			vehiclePlateColorStr:"",//车牌颜色中文
			questionType:"",
			questionTypeStr:"",
			etcUser:"",
			etcUserStr:"",
			eventOccurrenceDate:"",//2016-09-01 00:00:00
			supportingMaterialsUrlShow:[],
			insertTime:"",
			vehicleImagesUrl1:"",
			vehicleImagesUrl2:"",
			name:"",
			part:"",
			customerIdNum:"",
			customerIdNum1:"",
			userImagesUrl1:"",
			userImagesUrl2:"",
			vin:"",
			engineNum:"",
			vehBodyUrl:"",
			
		},
		vehicleId:"",
		msg:{},//所有数据
	});
	onLoad((options) => {
		state.vehicleId=options.vehicleId
		getCarDetails()
	})
	const getCarDetails = () => {
		const options = {
			type: 2,
			data: {
				vehicleId:state.vehicleId
			},
			method: "POST",
			showLoading: true,
		};
		//调用方式
		requestNew(vehicleInformationChange, options)
			.then((res) => {
				console.log('车辆信息', res)
				state.msg=res
			})
			.catch((err) => {
				console.log(err);
			});
	}
	const carChange = (vehicleId) => {
			navTo(`/pages/bluetooth/bluetooth?routeType=10&vehicleId=${vehicleId}`)
	}
	const see=(item)=>{
		uni.previewImage({
			urls:[item],
			longPressActions: {
				itemList: ['发送给朋友', '保存图片', '收藏'],
				success: function(data) {
					console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
				},
				fail: function(err) {
					console.log(err.errMsg);
				}
			}
		});
	}
</script>

<style scoped lang="scss">
	.bg {
		background-color: white;
		width: 90%;
		margin: 0 auto;
		margin-top: 20rpx;
		border-radius: 12px;
		border: 1px solid #FFFFFF;
		padding: 30rpx 20rpx;
		overflow: hidden;
		box-sizing: border-box;
	
		.title_wrap {
			display: flex;
			font-weight: 400;
	        justify-content: space-between;
			.title {
				font-size: 30rpx;
				color: #01243A;
			}
		}
	}
	.picture-wrapper {
		margin-top: 30rpx;
	
		.bg1 {
			background: #F5F9FB;
			border-radius: 10rpx;
			padding: 40rpx 30rpx;
			display: flex;
			width: 100%;
			justify-content: space-between;
	        box-sizing: border-box;
			.name {
				padding-top: 30rpx;
				font-size: 32rpx;
				font-family: SourceHanSansSC, SourceHanSansSC;
				font-weight: 500;
				color: #111;
				line-height: 34rpx;
			}
	
			.value {
				margin-top: 20rpx;
				font-size: 22rpx;
				font-family: SourceHanSansSC, SourceHanSansSC;
				font-weight: 400;
				color: #999999;
				line-height: 24rpx;
			}
	
			.tip {
				margin-top: 20rpx;
				text-align: center;
				width: 100rpx;
				height: 30rpx;
				// background: rgba(204, 179, 117);
				border-radius: 6rpx;
				border: 1rpx solid #CCB375;
	
				.tip-value {
					font-size: 20rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #CCB375;
					line-height: 30rpx;
					opacity: 1;
				}
			}
		}
	
		.icon {
			width: 304rpx;
			height: 190rpx;
			background-image: var(--bgimg);
			background-size: 100% 100%;
			background-repeat: no-repeat;
		}
	}
	
</style>