车辆信息变更

pages.json

@@ -1622,6 +1622,27 @@
 		{
 			"root": "subpackage/personal-center", //个人中心
 			"pages": [
+				{
+					"path": "vehicle-change/car-details",
+					"style": {
+						"navigationBarTitleText": "车辆详情",
+						"enablePullDownRefresh": false
+					}
+				},
+				{
+					"path": "vehicle-change/vehicle-change-cheliangmsg-write",
+					"style": {
+						"navigationBarTitleText": "车辆信息变更",
+						"enablePullDownRefresh": false
+					}
+				},
+				{
+					"path": "vehicle-change/vehicle-change-chepai-write",
+					"style": {
+						"navigationBarTitleText": "车牌变更填写",
+						"enablePullDownRefresh": false
+					}
+				},
 				{
 					"path": "vehicle-change/vehicle-change-chepai",
 					"style": {
@@ -1692,13 +1713,6 @@
 						"enablePullDownRefresh": false
 					}
 				},
-				{
-					"path": "car-details",
-					"style": {
-						"navigationBarTitleText": "车辆详情",
-						"enablePullDownRefresh": false
-					}
-				},
 				{
 					"path": "get-code",
 					"style": {

pages/bluetooth/bluetooth.vue

@@ -727,7 +727,7 @@
 			});
 		} else if (routeType.value == "10") {
 			uni.navigateTo({
-				url: `/subpackage/personal-center/car-message-change?vehicleId=${state.vehicleId}`,
+				url: `/subpackage/personal-center/vehicle-change/vehicle-change-choiceType?vehicleId=${state.vehicleId}`,
 			});
 		} else {
 			return;

pages/user/user.vue

@@ -160,9 +160,9 @@
 							</view>
 						</view>
 						<view class="car-item" v-for="(item,index) in state.list">
-							<image @click="carDetails(item)" :src="`${$imgUrl}myImage/car.png`" class="car-pic" mode="widthFix">
+							<image @click="carDetails(item.vehicleId)" :src="`${$imgUrl}myImage/car.png`" class="car-pic" mode="widthFix">
 							</image>
-							<view class="car-info" @click="carDetails(item)">
+							<view class="car-info" @click="carDetails(item.vehicleId)">
 								<view class="car-no">
 									<text class="no">{{item.vehiclePlate}}</text>
 									<text class="color" :style="{ background: item.showColor}">{{item.color}}</text>
@@ -253,10 +253,9 @@
 		console.log("state.data.opId",state.data.opId)
 		mobile.value = getItem("mobile");
 	});
-	const carDetails = (item) => {
-		const params = encodeURIComponent(JSON.stringify(item))
+	const carDetails = (vehicleId) => {
 		uni.navigateTo({
-			url: `/subpackage/personal-center/car-details?params=${params}`
+			url: `/subpackage/personal-center/vehicle-change/car-details?vehicleId=${vehicleId}`
 		})
 	}
 	const goTrajectory = () => {

subpackage/after-sale/activation-once-again/select-car.vue

@@ -221,7 +221,7 @@ import {getVehiclePlateColor,vehiclePlateColorPai} from "@/datas/vehiclePlateCol
 				})
 			}else if (state.type == "38") {
 				uni.navigateTo({
-					url: `/subpackage/personal-center/vehicle-change/vehicle-change-choiceType`
+					url: `/subpackage/personal-center/vehicle-change/vehicle-change-choiceType?vehicleId=${item.vehicleId}&vehiclePlate=${item.vehiclePlate}`
 				})
 			}else{
 				if (item.deviceType == deviceType) {

subpackage/after-sale/blacklist-query/addCar.vue

@@ -7,25 +7,33 @@
 		</view>
 		<!-- 车牌颜色 -->
 		<view class="chepai-lane">
-			<view class="title">车牌颜色 <text class='tips'></text></view>
+			<view class="title">车牌颜色</view>
 			<numberplate-color :numberplate="state.vehiclePlate" 
 				:numberplateCor='state.vehiclePlateColor' @numberplateResult="checkNumberplateColor">
 			</numberplate-color>
 		</view>
+		<view class="chepai-lane" v-if="state.isBand">
+			<view class="title">选择卡号</view>
+			<picker mode="selector" :value="state.index" :range="state.array" @change="choiceCard" class="picker">
+				<view>{{state.index<0?'请选择':state.array[state.index]}} </view>
+			</picker>
+		</view>
 		
 	</view>
 	
 	<view class="action">
-		<button type="default" class="ui-btn" @click="add()">
+		<button type="default" class="ui-btn" @click="add()" v-if="state.isBand">
 			绑定
 		</button>
-		
+		<button type="default" class="ui-btn" @click="search()" v-else>
+			查询
+		</button>
 	</view>
 </template>
 <script setup lang="ts">
 	import { reactive } from "vue";
 	import { onLoad } from "@dcloudio/uni-app";
-	import {vehicleBind } from "@/utils/network/api.js";
+	import {vehicleBind,queryCardInfo } from "@/utils/network/api.js";
 	import {requestNew } from "@/utils/network/request.js";
 	import {getItem,StorageKeys } from "@/utils/storage";
 	import carNumberInput from "../components/car-number-input.vue";
@@ -33,7 +41,11 @@
 	import {msg} from "@/utils/utils";
 	const state = reactive({
 		vehiclePlate: "",
-		vehiclePlateColor: ""
+		vehiclePlateColor: "",
+		index:-1,
+		array:[],
+		arrayAll:[],
+		isBand:false
 	});
 	onLoad((option : any) => {
 		
@@ -45,13 +57,23 @@
 	const checkNumberplateColor = (item : any) => {
 		state.vehiclePlateColor = item;
 	};
+	const search=()=>{
+		cardList()
+	}
 	const add = () => {
+		if(state.index<0){
+			msg('请选择卡号');
+			return;
+		}
 		const options = {
 			type: 2,
 			data: {
 				"vehiclePlate": state.vehiclePlate,
 				"vehiclePlateColor": state.vehiclePlateColor,
-				"operaterId":getItem(StorageKeys.OpenId)
+				"operaterId":getItem(StorageKeys.OpenId),
+				"cardId": state.arrayAll[state.index]['cardId'],
+				"cardStatus": state.arrayAll[state.index]['cardStatus'],
+				"cardType": state.arrayAll[state.index]['cardType'],
 			},
 			method: 'POST',
 			showLoading: true,
@@ -65,6 +87,35 @@
 			
 		})
 	}
+	const cardList = () => {
+		if(!state.vehiclePlate){
+			msg('请输入车牌号');
+			return;
+		}
+		const options = {
+			type: 2,
+			data: {
+				"vehiclePlate": state.vehiclePlate,
+				"vehiclePlateColor": state.vehiclePlateColor,
+			},
+			method: 'POST',
+			showLoading: true,
+		}
+		requestNew(queryCardInfo, options).then((res) => {
+			console.log("卡信息",res)
+			if(res.length>0){
+				state.isBand=true
+				state.arrayAll=res
+				for(var i=0;i<res.length;i++){
+					state.array.push(res[i]['cardId'])
+				}
+			}
+		})
+	}
+	const choiceCard=(e)=>{
+		console.log("e",e.detail.value)
+		state.index=e.detail.value
+	}
 </script>
 
 <style scoped lang="scss">
@@ -99,4 +150,8 @@
 		flex-direction: column;
 		margin-top: 20rpx;
 	}
+	.picker{
+		border: 1rpx solid #E9EDF0;
+		padding:10rpx;
+	}
 </style>

subpackage/after-sale/rescind-carId/rescind-carId-select.vue

@@ -102,11 +102,15 @@
 				<u-input inputAlign="right" placeholder="请输入所有人" v-model="state.form.vehicleOwnerName" maxlength="20" />
 			</u-form-item>
 			<u-form-item label="车牌颜色" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'>
-				<uni-data-select v-model="state.form.vehiclePlateColor" :localdata="state.colorRange" @change="changeColor"
-					:clear="false"></uni-data-select>
+				<!-- <uni-data-select v-model="state.form.vehiclePlateColor" :localdata="state.colorRange" @change="changeColor"
+					:clear="false"></uni-data-select> -->
+					<u-input v-model="state.form.vehiclePlateColorStr" type="select" @click="show1 = true" input-align='right'/>
 			</u-form-item>
 		</u-form>
 	</view>
+	<!-- 选择车牌颜色 -->
+	<u-select v-model="show1" :list="state.colorRange" @confirm="changeColor"></u-select>
+	
 	<view class="bg" v-if="state.form.applyType=='2'">
 		<view class="title"> 单位资料信息 </view>
 		<view class="picture-wrapper" @click="cardImageOcrYY()">
@@ -316,6 +320,7 @@
 			orgId:"",//单位证件编号
 			orgName:"",
 			orgIdClass:"",//营业执照203
+			vehiclePlateColorStr:""
 		},
 		colorRange: [],
 		ownerInfo:false,//非本人 个人 车主信息true  ==== 本人  个人  false
@@ -328,9 +333,10 @@
 	const changeisSelf=(e)=>{
 		state.form.isSelf = e
 	}
-	const changeColor = (e) => {
-		state.form.vehiclePlateColor = e
-		console.log(e)
+	const changeColor = (item) => {
+		state.form.vehiclePlateColor = item[0].value
+		state.form.vehiclePlateColorStr = item[0].label
+		console.log(item)
 	}
 	//车牌号输入
 	const carNumber = (val : any) => {
@@ -433,7 +439,7 @@
 		for (var k = 0; k < getColor.length; k++) {
 			let obj = {};
 			obj['value'] = getColor[k]['code']
-			obj['text'] = getColor[k]['name']
+			obj['label'] = getColor[k]['name']
 			state.colorRange.push(obj)
 		}
 	});
@@ -591,7 +597,6 @@
 				text-align: center;
 				width: 100rpx;
 				height: 30rpx;
-				// background: rgba(204, 179, 117);
 				border-radius: 6rpx;
 				border: 1rpx solid #CCB375;
 	

subpackage/personal-center/car-details.vue

@@ -1,103 +0,0 @@
-<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']?state.tableData['axleCount']:2}}轴</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 v-if="state.tableData['status']=='已办理' && source=='WECHAT'" class="submit"
-				@click="carChange(state.tableData['vehicleId'])">车辆信息变更</button>
-				<!-- <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";
-	import {navTo} from "@/utils/utils";
-	import { source } from "@/utils/network/difference";
-	const state = reactive({
-		tableData: {},  //上一个页面传递过来的参数
-	});
-	onLoad((options) => {
-		state.tableData = JSON.parse(decodeURIComponent(options.params))
-		console.log("options.promoteId", 1111, state.tableData)
-	})
-	const carChange = (vehicleId) => {
-			navTo(`/pages/bluetooth/bluetooth?routeType=10&vehicleId=${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(to right,#01243A,#004576);
-		border-radius: 40rpx;
-		font-size: 32rpx;
-		font-family: Noto Sans S Chinese;
-		font-weight: 400;
-		color: #FFFFFF;
-		line-height: 80rpx;
-	}
-</style>

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

@@ -0,0 +1,295 @@
+<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>

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

@@ -0,0 +1,553 @@
+<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>

subpackage/personal-center/vehicle-change/vehicle-change-chepai-write.vue

@@ -0,0 +1,553 @@
+<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>

subpackage/personal-center/vehicle-change/vehicle-change-chepai.vue

@@ -22,7 +22,7 @@
 				borderBottom>
 			</u-form-item>
 			<view class="card">
-				<image :src='`${$imgUrl}issuance/obuPicture.png`' mode=""></image>
+				<image :src='`${$imgUrl}issuance/cardPicture.png`' mode=""></image>
 				<view class="details">
 					<view>储蓄卡</view>
 					<view>卡号：100101010101</view>
@@ -158,7 +158,6 @@ import {requestNew} from "@/utils/network/request.js";
 		.title_wrap {
 			display: flex;
 			font-weight: 400;
-			margin-bottom: 40rpx;
             justify-content: space-between;
 			.title {
 				font-size: 30rpx;

subpackage/personal-center/vehicle-change/vehicle-change-choiceType.vue

@@ -1,13 +1,13 @@
 <template>
 	<view class="content">
-		<view class="tilte">贵A12345</view>
+		<view class="tilte">{{state.vehiclePlate}}</view>
 		<view class="list">
 			<radio-group @change="radioChange">
 				<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in state.items" :key="item.value">
 					<view class="item">
 						<image  :src='`${$imgUrl}${item.url}`' mode=""></image>
 						<text class="name">{{item.name}}</text>
-						<radio :value="item.value" :checked="index === state.current" />
+						<radio :value="item.value" :checked="index === state.isVehiclePlateChange" />
 					</view>
 				</label>
 			</radio-group>
@@ -32,31 +32,112 @@
 	import {navTo} from "@/utils/utils";
 	import {reactive} from "vue";
 	import {onLoad} from "@dcloudio/uni-app";
+	import {preDeviceCheck,preDeviceCheckRes} from "@/utils/network/api.js";
+	const tools = require("../../../static/etcUtil/tools.js");
+	 const bluetoothUtil = require("../../../static/etcUtil/index.js");
+	import {requestNew} from "@/utils/network/request.js";
 	const state = reactive({
 		items: [{
-				value: 'USA',
+				value: 0,
 				name: 'ETC车辆信息变更',
 				checked: 'true',
 				url:"issuance/carmsg.png"
 			},
 			{
-				value: 'CHN',
+				value: 1,
 				name: 'ETC车牌变更',
 				url:"issuance/carmsg1.png"
 			},
 		],
-		current: 0
+		isVehiclePlateChange: 0,
+		vehicleId:"",
+		vehiclePlate:""
 	});
+	onLoad((options) => {
+		state.vehicleId=options.vehicleId
+		state.vehiclePlate=options.vehicleId.split("_")[0]
+		getDeviceUpgradeNew()
+		console.log("options",options)
+	})
+	function getDeviceUpgradeNew(){
+		tools.showLoadingAlert('设备检测')
+		const options = {
+			type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
+			showLoading: true,
+			data: {}, //请求参数
+			method: "POST", //提交方式(默认POST)
+		};
+		console.log("options2222", options)
+		requestNew(preDeviceCheck, options)
+			.then((res) => {
+				console.log("设备预检成功", res);
+				bluetoothUtil.transCmd(res.cardCmd.split(','), '10', function(rescard) {
+					state.cardCmdResult=rescard.toString()
+					console.log("res卡",rescard)
+					bluetoothUtil.transCmd(res.obuCmd.split(','), '20', function(resobu) {
+						state.obuCmdResult=resobu.toString()
+						preDeviceCheckResRequest()
+					}, () => {
+						tools.hideLoadingAlert();
+					});
+				}, () => {
+					tools.hideLoadingAlert();
+				});
+			})
+			.catch((err) => {
+				console.log(err);
+				tools.hideLoadingAlert();
+			});
+	}
+	//设备预检结果回传
+	function preDeviceCheckResRequest(){
+		const options = {
+			type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
+			showLoading: true,
+			data: {
+				cardCmdResult:state.cardCmdResult,
+				obuCmdResult:state.obuCmdResult
+			}, //请求参数
+			method: "POST", //提交方式(默认POST)
+		};
+		console.log("options2222", options)
+		requestNew(preDeviceCheckRes, options)
+			.then((res) => {
+				console.log("设备预检结果回传", res);
+				tools.hideLoadingAlert();
+				if(!res.cardCheckPass){
+					msg("请更换卡")
+					return;
+				}
+				if(!res.obuCheckPass){
+					msg("请更换签")
+					return;
+				}
+				if(!res.cardCheckPass && !res.obuCheckPass){
+					msg("请更换卡签")
+					return;
+				}
+				if(res.cardCheckPass && res.obuCheckPass){
+					console.log("成功")
+				}
+			})
+			.catch((err) => {
+				console.log(err);
+				tools.hideLoadingAlert();
+			});
+	}
 	const radioChange=(evt) =>{
+		console.log("evt.detail.value",evt.detail.value)
 		for (let i = 0; i < state.items.length; i++) {
-			if (state.items[i].value === evt.detail.value) {
-				state.current = i;
+			if (state.items[i].value == evt.detail.value) {
+				state.isVehiclePlateChange = i;
 				break;
 			}
 		}
+		console.log("state.isVehiclePlateChange",state.isVehiclePlateChange)
 	}
 	const savaHandle=()=>{
-		navTo(`/subpackage/personal-center/vehicle-change/vehicle-change-direction`)
+		navTo(`/subpackage/personal-center/vehicle-change/vehicle-change-direction?vehicleId=${state.vehicleId}&isVehiclePlateChange=${state.isVehiclePlateChange}`)
 	}
 </script>
 

subpackage/personal-center/vehicle-change/vehicle-change-direction.vue

@@ -1,7 +1,7 @@
 <template>
 	<view>
 		<view class="top-tip">
-			<image src="/static/image/myx.png" mode=""></image>
+			<image :src="`${$imgUrl}issuance/vehicle1.png`" mode=""></image>
 			<view>
 				<view style="margin-bottom: 6rpx;">使用场景</view>
 				<view>需要变更车辆信息，包括信息修改及车牌变更。</view>
@@ -10,7 +10,7 @@
 		<view class="bg" style="margin-top: -10rpx;">
 			<view class="title"> 需要准备的材料 </view>
 			<view class="cailiao">
-				<view class="list" v-for="(item,index) in list">
+				<view class="list" v-for="(item,index) in list" :key="index">
 					<view>{{item.name}}</view>
 					<view class="tip">{{item.tip}}</view>
 					<image class="icon" :src="`${$imgUrl}${item.img}`"
@@ -39,48 +39,49 @@
 			</view>
 			<view class="dot_wrap_right">
 				<view class="item">
-					<image :src="`${$imgUrl}issuance/direction1.png`"></image>
+					<image :src="`${$imgUrl}issuance/ydy1.png`"></image>
 					<view class="destion">
 						<view class="destion1">选择变更车辆</view>
 						<view class="destion2">辅助说明。</view>
 					</view>
-					<image :src="`${$imgUrl}issuance/direction4.png`"></image>
+					<image :src="`${$imgUrl}issuance/ydy2.png`"></image>
 				</view>
 				<view class="item">
-					<image :src="`${$imgUrl}issuance/direction2.png`"></image>
+					<image :src="`${$imgUrl}issuance/ydy3.png`"></image>
 					<view class="destion">
 						<view class="destion1">选择变更类型</view>
 						<view class="destion2">辅助说明</view>
 					</view>
+					<image :src="`${$imgUrl}issuance/ydy4.png`"></image>
 				</view>
 				<view class="item">
-					<image :src="`${$imgUrl}issuance/direction3.png`"></image>
+					<image :src="`${$imgUrl}issuance/ydy5.png`"></image>
 					<view class="destion">
 						<view class="destion1">设备预检</view>
 						<view class="destion2">辅助说明</view>
 					</view>
 				</view>
 				<view class="item">
-					<image :src="`${$imgUrl}issuance/direction1.png`"></image>
+					<image :src="`${$imgUrl}issuance/ydy6.png`"></image>
 					<view class="destion">
 						<view class="destion1">资料提交</view>
 						<view class="destion2">根据实际使用和购买产品产生。</view>
 					</view>
-					<image :src="`${$imgUrl}issuance/direction4.png`"></image>
 				</view>
 				<view class="item">
-					<image :src="`${$imgUrl}issuance/direction2.png`"></image>
+					<image :src="`${$imgUrl}issuance/ydy9.png`"></image>
 					<view class="destion">
 						<view class="destion1">资料审核</view>
 						<view class="destion2">辅助说明</view>
 					</view>
 				</view>
 				<view class="item" style="margin-bottom: 0;">
-					<image :src="`${$imgUrl}issuance/direction3.png`"></image>
+					<image :src="`${$imgUrl}issuance/ydy7.png`"></image>
 					<view class="destion">
 						<view class="destion1">设备升级</view>
 						<view class="destion2">辅助说明</view>
 					</view>
+					<image :src="`${$imgUrl}issuance/ydy8.png`"></image>
 				</view>
 			</view>
 		</view>
@@ -97,9 +98,12 @@
 
 <script setup lang="ts">
 	import {navTo} from "@/utils/utils";
-	import {
-		ref
-	} from "vue";
+	import {reactive,ref} from "vue";
+	import {onLoad} from "@dcloudio/uni-app";
+	const state = reactive({
+		isVehiclePlateChange: 0,
+		vehicleId:"",
+	});
     const list=ref([
 		{'name':"申请人身份证正面",'img':"issuance/sfz.png"},
 		{'name':"车辆行驶证",'img':"issuance/xz.png"},
@@ -108,8 +112,18 @@
 		{'name':"单位授权书",'img':"issuance/weituo.png","tip":"（单位必传）"},
 		{'name':"营业执照",'img':"issuance/zhizhaoNew.png","tip":"（单位必传）"},
 	])
+	onLoad((options) => {
+		state.vehicleId=options.vehicleId
+		state.isVehiclePlateChange=options.isVehiclePlateChange
+		
+		console.log("options",options)
+	})
 	const savaHandle = () => {
-       navTo(`/subpackage/after-sale/rescind-carId/rescind-carId-select`)
+		if(state.isVehiclePlateChange==1){
+			navTo(`/subpackage/personal-center/vehicle-change/vehicle-change-chepai?vehicleId=${state.vehicleId}&isVehiclePlateChange=${state.isVehiclePlateChange}`)
+		}else{
+			navTo(`/subpackage/personal-center/vehicle-change/vehicle-change-cheliangmsg-write?vehicleId=${state.vehicleId}&isVehiclePlateChange=${state.isVehiclePlateChange}`)
+		}
 	}
 	const progressQuery = () => {
 	}

utils/network/api.js

@@ -369,18 +369,13 @@ export const etcSmsCodeValid = "/iaw/aftersale/etcMobileChange/etcSmsCodeValid"
 export const newMobileSmsCode = "/iaw/aftersale/etcMobileChange/newMobileSmsCode" //ETC预留手机号修改-新手机验证码发送
 export const newMobileSmsCodeValid = "/iaw/aftersale/etcMobileChange/newMobileSmsCodeValid" //ETC预留手机号修改-验证码验证(新手机号)
 export const mobileChangeProfile = "/iaw/aftersale/etcMobileChange/mobileChangeProfile" //ETC预留手机号修改-ocr识别记录上传
-//车辆信息变更
-export const vehicleInfoChangeChangeApply = "/iaw/aftersale/vehicleInfoChange/changeApply" //车辆信息变更申请
-export const vehicleInfoChangeQuery = "/iaw/aftersale/vehicleInfoChange/query" //车辆详情信息查询
-export const preDeviceCheck = "/iaw/aftersale/deviceUpgrade/preDeviceCheck" //设备预检
-export const preDeviceCheckRes = "/iaw/aftersale/deviceUpgrade/preDeviceCheckRes" //设备预检结果回传
 // 二次激活
 export const secondActiveInstallApply = "/iaw/api/secondActive/installApply" // OBU安装申请
 export const vfjObuActive = "/iaw/vfj/obuActive" // VFJ-OBU激活申请
 export const vfjCfmActive = "/iaw/vfj/cfmActive" // VFJ-OBU激活确认
 export const issueConfirm = "/iaw/api/secondActive/issueConfirm" // OBU发行确认接口
-export const reactivateQuery = "/iaw/api/obu/reactivate/query" // 重新激活记录
 export const reactivateConfirm = "/iaw/api/obu/reactivate/confirm" // 重新激活新增记录
+export const reactivateQuery = "/iaw/api/obu/reactivate/query" // 重新激活记录
 // 设备更换（售后）
 export const changeCardObuApply = "/iaw/api/afterSale/changeCardObu/apply" // 卡签更换申请
 export const changeCardObuCancel = "/iaw/api/afterSale/changeCardObu/cancel" // 卡签更换申请取消
@@ -476,5 +471,13 @@ export const selfServiceUserUpload = "/iaw/api/afterSale/selfService/userUpload"
 export const vehicleBind = "/iaw/api/vehicle/bind" //车辆绑定（所有售后）
 export const queryVehicleBind = "/iaw/api/vehicle/page" //车辆绑定列表查询
 export const vehicleUnBind = "/iaw/api/vehicle/unBind" //车辆解绑
+export const queryCardInfo = "/iaw/api/vehicle/queryCardInfo" //etc卡信息查询
 // 黑名单
 export const cardBlackListQuery = "/iaw/api/afterSale/cardBlack/cardBlackListQuery" //黑名单列表查询
+//车辆信息变更
+export const vehicleInfoChangeChangeApply = "/iaw/aftersale/vehicleInfoChange/changeApply" //车辆信息变更申请
+export const vehicleInfoChangeQuery = "/iaw/aftersale/vehicleInfoChange/query" //车辆详情信息查询
+
+export const preDeviceCheck = "/iaw/aftersale/deviceUpgrade/preDeviceCheck" //设备预检
+export const preDeviceCheckRes = "/iaw/aftersale/deviceUpgrade/preDeviceCheckRes" //设备预检结果回传
+export const vehicleInformationChange = "/iaw/aftersale/vehicleInformationChange/vehicleView" //车辆详细信息