zhywpt-sp/subpackage/personal-center/vehicle-change/vehicle-change-cheliangmsg-write.vue

<template>
	<view class="bg">
		<view class="title_wrap"><text class="title">变更基本信息</text></view>
		<u-form label-width="230" :model="state.form" ref="uForm" :label-style='labelStyle'>
			<u-form-item label="旧车牌号码" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
				borderBottom>
					<u-input v-model="state.form.vehiclePlateColorStr" input-align='right'disabled/>
			</u-form-item>
			<u-form-item label="旧车牌颜色" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
				borderBottom>
					<u-input v-model="state.form.vehiclePlateColorStr" input-align='right'disabled/>
			</u-form-item>
			<u-form-item label="新车牌号码" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
				borderBottom>
					<u-input v-model="state.form.vehiclePlateColorStr" input-align='right'disabled/>
			</u-form-item>
			<u-form-item label="新车牌颜色" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
				borderBottom>
					<u-input v-model="state.form.vehiclePlateColorStr" input-align='right'disabled/>
			</u-form-item>
			<u-form-item label="OBU卡号" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
				borderBottom>
				<u-input  v-model="state.form.customerName" inputAlign="right" disabled/>
			</u-form-item>
			<u-form-item label="ETC卡号" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
				borderBottom>
				<u-input v-model="state.form.customerTel" inputAlign="right" disabled/>
			</u-form-item>
			<view class="picture-wrapper" @click="takePhotoMode('3')">
				<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.form.vehicleImagesUrl1" class="icon" :src="`${$imgUrl}issuance/xz.png`"
						:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
					</image>
					<image v-else class="icon" :src="strReplace(state.form.vehicleImagesUrl1)"
						:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}"></image>
				</view>
			</view>
			<view class="picture-wrapper" @click="takePhotoMode('4')">
				<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.form.vehicleImagesUrl2" class="icon" :src="`${$imgUrl}issuance/xf.png`"
						:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
					</image>
					<image v-else class="icon" :src="strReplace(state.form.vehicleImagesUrl2)"
						:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}"></image>
				</view>
			</view>
			
		</u-form>
	</view>
	<view class="bg">
		<view class="title"> 经办人信息 </view>
		<view class="picture-wrapper" @click="takePhotoMode('1',false)">
			<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.form.userImagesUrl1" class="icon" :src="`${$imgUrl}issuance/sfz.png`"
					:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
				</image>
				<image v-else class="icon" :src="strReplace(state.form.userImagesUrl1)"
					:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"></image>
			</view>
		</view>
		<view class="picture-wrapper" @click="takePhotoMode('2',false)">
			<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.form.userImagesUrl2" class="icon" :src="`${$imgUrl}issuance/sff.png`"
					:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}">
				</image>
				<image v-else class="icon" :src="strReplace(state.form.userImagesUrl2)"
					:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"></image>
			</view>
		</view>
		<u-form label-width="230" :model="state.form" ref="uForm" :label-style='labelStyle'>
			<u-form-item label="经办人姓名" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom>
				<u-input v-model="state.form.name" placeholder='经办人姓名'
					maxlength="20" inputAlign="right"/>
			</u-form-item>
			<u-form-item label="经办人证件类型" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom>
				<u-input placeholder='请输入证件号码' type="idcard" v-model="state.form.customerIdNum1"
					 maxlength="18" inputAlign="right"/>
			</u-form-item>
			<u-form-item label="经办人证号号码" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom>
				<u-input placeholder='请输入证件号码' type="idcard" v-model="state.form.customerIdNum"
					 maxlength="18" inputAlign="right"/>
			</u-form-item>
			<u-form-item label="部门" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom>
				<u-input placeholder='请输入部门' type="number" v-model="state.form.part"
					 maxlength="11" inputAlign="right"/>
			</u-form-item>
		</u-form>
	</view>
	<view class="bg">
		<view class="title_wrap"><text class="title">车辆信息</text></view>
		<u-form label-width="230" :model="state.form" ref="uForm" :label-style='labelStyle'>
				<u-form-item label="车辆所有人信息" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
					borderBottom>
						<u-input v-model="state.form.vehiclePlateColorStr" 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.form.vehiclePlateColorStr" 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.form.vehiclePlateColorStr" 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.form.vehiclePlateColorStr" 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.form.customerName" 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.form.customerTel" 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.form.vin"
						 maxlength="50" />
				</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.form.engineNum"
						maxlength="20" />
				</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.form.engineNum"
						maxlength="20" />
				</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.form.engineNum"
						maxlength="3" />
				</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.form.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.form.engineNum"
						 maxlength="7" />
				</u-form-item>
				<u-form-item label="核定载质量" v-if="state.form.engineNum" :left-icon='`${$imgUrl}issuance/point-form.png`'
					:left-icon-style='leftIcon'>
					<u-input inputAlign="right" placeholder="核定载质量" v-model="state.form.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.form.engineNum"
						 maxlength="7" />
				</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.form.engineNum"
						 maxlength="7" />
				</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.form.engineNum" type="number"
						maxlength="2" />
				</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.form.engineNum" type="number"
						maxlength="2" />
				</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.form.engineNum" type="number"
						maxlength="2" />
				</u-form-item>
			</u-form>
			<view class="picture-wrapper" @click="cardFileImageUpdate(1)">
				<view class="bg1">
					<view class="">
						<view class="name"> 车身45°照 </view>
						<view class="value"> 上传汽车的45°照 </view>
						<view class="tip">
							<view class="tip-value"> 拍摄规范 </view>
						</view>
					</view>
					<image v-if="!state.form.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.form.vehBodyUrl)"
						:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}"></image>
				</view>
			</view>
			<view class="picture-wrapper" @click="cardFileImageUpdate(1)">
				<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.form.vehBodyUrl" class="icon" :src="`${$imgUrl}issuance/chetou45.png`"
						:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
					</image>
					<image v-else class="icon" :src="strReplace(state.form.vehBodyUrl)"
						:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}"></image>
				</view>
			</view>
			<view class="picture-wrapper" @click="cardFileImageUpdate(2)">
				<view class="bg1">
					<view class="">
						<view class="name"> 授权书 </view>
						<view class="value"> 上传授权书 </view>
						<view class="tip">
							<view class="tip-value"> 拍摄规范 </view>
						</view>
						<!-- <view class="down" @click="downAuthD">模板下载</view> -->
					</view>
					<image v-if="!state.form.vehBodyUrl" class="icon" :src="`${$imgUrl}issuance/weituo.png`"
						:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
					</image>
					<image v-else class="icon" :src="strReplace(state.form.vehBodyUrl)"
						:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}"></image>
				</view>
			</view>
	</view>
	<view class="bg">
		<u-form label-width="230" :model="state.form" ref="uForm" :label-style='labelStyle'>
			<u-form-item label="手机号码" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
				borderBottom>
					<u-input v-model="state.form.vehiclePlateColorStr" input-align='right'/>
			</u-form-item>
			<u-form-item label="验证码" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
				borderBottom>
				    <view style="display: flex;align-items: center;flex-shrink: 0;">
						<u-input v-model="state.form.vehiclePlateColorStr" input-align='right'/>
						<text @click="getCode" v-if="waitTime==0" class="search">获取验证码</text>
						<text class="btn" v-else>{{waitTime}}后重试</text>
					</view>
			</u-form-item>
		</u-form>
	</view>
	<view class="action">
		<button type="default" class="ui-btn" @click="savaHandle()">
			提交
		</button>
	</view>
<!-- 选择车牌颜色 -->
	<u-select v-model="show1" :list="state.colorRange" @confirm="changeColor"></u-select>
</template>

<script setup lang="ts">
	import { navTo,uploadFile,strReplace,msg} from "@/utils/utils";
	import { reactive,ref } from "vue";
	import carNumberInput from "@/components/car-number-input/car-number-input.vue";
	import { onLoad } from "@dcloudio/uni-app";
	import { getItem } from "@/utils/storage.ts"
import {selfServiceView,selfServiceUserUpload,newMobileSmsCode} 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 show1 = ref(false)
	const show2 = ref(false)
	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:"",
			
		},
		colorRange: [],
		questionTypeRange:[
			{value: 1, label: "工单1"},
			{value: 2, label: "工单2"},
		],
		etcUserRange:[
			{value: 1, label: "是"},
			{value: 0, label: "否"},
		],
		isTakePhotoModeShow: false,  //选择拍照方式是否出来
		choiceIndex: 1,  // 1 身份证正面  2 身份证反面
		ownerInfo:false,//非本人 个人 车主信息true  ==== 本人  个人  false
	})
	onLoad((option : any) => {
		let getColor = getItem('key')['VEHICLE_COLOR_TYPE'];
		for (var k = 0; k < getColor.length; k++) {
			let obj = {};
			obj['value'] = getColor[k]['code']
			obj['label'] = getColor[k]['name']
			state.colorRange.push(obj)
		}
		console.log("state.colorRange",state.colorRange,option)
	});
	//车牌号输入
	const carNumber = (val : any) => {
		state.form.vehiclePlate = val.trim();
	};
	const savaHandle = () => {
		
	}
   const changeColor = (item) => {
		state.form.vehiclePlateColor = item[0].value
		state.form.vehiclePlateColorStr = item[0].label
		console.log(item)
	}
	const takePhotoMode = (index,ownerInfo) => {
		console.log("index", index)
		state.isTakePhotoModeShow = true
		state.choiceIndex = index
		state.ownerInfo=ownerInfo
	}
	//车头照图片上传  val 1 车头照 2 道路运输证
	const cardFileImageUpdate = (val) => {
		uni.chooseImage({
			count: 1, //只能选取一张照片
			sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ["camera", "album"], //从相册选择
			success: function (res) {
				uploadFile(res.tempFilePaths[0], "", "").then((data) => {
	// 				if (val == 1) {
	// 					state.form.vehBodyUrl = data;
	// 				} else {
	// 					state.form.roadTransportPermitPicUrl = data;
	
	// 				}
				})
			},
		});
	};
	let waitTime = ref(0)
	//倒计时函数
	const codeInterval = () => {
		waitTime.value = 60
		let timer = setInterval(() => {
			if (waitTime.value == 1) {
				clearInterval(timer)
			}
			waitTime.value -= 1
		}, 1000)
	}
	const getCode = () => {
		console.log(123);
		if (checkStr(state.form.newMobile, "mobile")) {
			sendCodeApi()
			codeInterval()
		} else {
			uni.showToast({
				title: '请输入正确的手机号',
				icon: 'none'
			});
		}
	
	}
	// 发送验证码
	const sendCodeApi = () => {
		//参数说明
		let options = {
			type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
			data: {
				mobile: ""
			}, //请求参数
			method: "POST", //提交方式(默认POST)
			showLoading: true, //是否显示加载中(默认显示)
		};
	
		//调用方式
		requestNew(newMobileSmsCode, options)
			.then((res) => {
				let data = res
				console.log(data, "#################");
				if (data.info == "成功") {
					msg("发送成功")
					console.log('######################CCCCCCCCCCCCCCCCC');
				}
			})
			.catch((err) => {
				console.log(err);
			});
	}
</script>

<style lang="scss" scoped>
	.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;
			}
		}

		.des {
			font-weight: 400;
			font-size: 28rpx;
			color: #01243A;
			line-height: 56rpx;
			margin-top: 10rpx;
			text-indent: 1rem;
		}
	}

	.action {
		position: absolute;
		left: 0;
		height: 160rpx;
		background-color: #fff;
		border-radius: 30rpx 30rpx 0 0;
		width: 100vw;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-top: 20rpx;
	}
	.card{
		display: flex;
		align-items: center;
		image{
			width: 120rpx;
			height: 120rpx;
			margin-right: 20rpx;
		}
		.details view:first-child{
			margin-bottom: 10rpx;
		}
	}
	.picture-wrapper {
		margin-top: 30rpx;
	
		.bg1 {
			background: #F5F9FB;
			border-radius: 10rpx;
			padding: 40rpx 30rpx;
			display: flex;
			// align-items: center;
			justify-content: space-between;
	
			.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;
				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;
		}
	}
	.search{
		background: #F8F4E7;
		border-radius: 10rpx;
		border: 1px solid #CCB375;
		font-size: 24rpx;
		color: #CCB375;
		padding: 0rpx 14rpx;
		flex-shrink: 0;
		height: 60rpx;
		line-height: 60rpx;
		margin-left: 20rpx;
	}
	
</style>