zhywpt-sp/subpackage/personal-center/etc-activation.vue

<template>
	<view class="container">
		<!-- 主要内容 -->
		<view class="content">
			<!-- 基本信息 -->
			<view class="info-section">
				<view class="section-title">基本信息</view>
				
				<!-- 激活类型选择 -->
				<view class="activation-type">
					<view 
						:class="['type-item', { active: activationType === 'self' }]"
						@click="changeActivationType('self')"
					>
						本人激活
					</view>
					<view 
						:class="['type-item', { active: activationType === 'other' }]"
						@click="changeActivationType('other')"
					>
						非本人激活
					</view>
				</view>

				<!-- 表单字段 -->
				<view v-if="activationType === 'other'" class="form-item car-number-row">
					<view class="form-label">车牌号</view>
					<car-number-input
						v-model="formData.carNumber"
						@numberInputResult="carNumberInputResult"
						inputColor="#ECF1F4"
						style="width: 100%;"
					/>
				</view>
				<view v-else class="form-item">
					<view class="form-label">车牌号</view>
					<view class="form-input">
					  <picker 
						class="picker-disabled--test" 
						@change="bindPickerChange"  
						:value="formData.vehicleIndex" 
						:range="vehicles" 
						range-key="vehiclePlate">
						<view class="uni-input">
							<view class="text">{{vehicles[formData.vehicleIndex]? vehicles[formData.vehicleIndex].vehiclePlate : '请选择车牌号'}}</view>
							<view class="arrow-down">▼</view>
						</view>
						<!-- <view class="uni-input">{{vehicles[formData.vehicleIndex]?.vehiclePlate}}</view> -->
					  </picker>
					</view>
				</view>
				<view class="form-item">
					<view class="form-label">车牌颜色</view>
					<view class="form-input">
					  <picker 
						class="picker-disabled--test" 
						:disabled="activationType == 'self'"
						@change="bindColorPickerChange"  
						:value="formData.colorIndex" 
						:range="getDicWithType('VEHICLE_COLOR_TYPE')" 
						range-key="name">
						<view class="uni-input">
							<view class="text">{{formData.colorName ? formData.colorName : '请选择车辆颜色'}}</view>
							<view class="arrow-down">▼</view>
						</view>
						<!-- <view class="uni-input">{{vehicles[formData.vehicleIndex]?.vehiclePlate}}</view> -->
					  </picker>
					</view>
				</view>
					<!-- <view class="form-input" >
						
						<view class="uni-list-cell-db">
						  <picker class="picker-selector--test" @change="bindPickerChange" :value="formData.vehicleIndex" :range="vehicles" range-key="name">
							<view class="uni-input picker-selector--value">{{vehicles[formData.vehicleIndex]}}</view>
						  </picker>
						</view>
						
					</view> -->
				<!-- </view> -->

				<!-- <view class="form-item">
					<view class="form-label">车牌颜色</view>
					<view class="form-input" @click="selectCarColor">
						<text :class="['input-text', { placeholder: !formData.carColor }]">
							{{ formData.carColor || '请选择车牌颜色' }}
						</text>
						<view class="arrow-down">▼</view>
					</view>
				</view> -->

				<view class="form-item">
					<view class="form-label">申请手机号</view>
					<input 
						class="form-input-text"
						placeholder="请输入手机号码"
						v-model="formData.phoneNumber"
						disabled="true"
						type="number"
						maxlength="11"
					/>
				</view>
				<!-- 非本人激活时显示验证码 -->
				<view v-if="activationType === 'other'" class="form-item">
					<view class="form-label">短信验证码</view>
					<view class="form-input" style="display:flex;align-items:center;">
						<input
							class="form-input-text"
							placeholder="请输入验证码"
							v-model="formData.smsCode"
							maxlength="6"
							style="flex:1;"
						/>
						<button class="send-code-btn" @click="sendCode" :disabled="waitTime>0">
							{{ waitTime > 0 ? waitTime + 's后重试' : '发送验证码' }}
						</button>
					</view>
				</view>
			</view>

			<!-- 上传照片 -->
			<view class="upload-section">
				<view class="section-title">上传照片</view>
				<view class="picture-wrapper" @click="cardFileImageUpdate(100)">
					<view class="bg">
						<view class="">
							<view class="name"> 行驶证主页 </view>
							<view class="value"> 上传行驶证的主页 </view>
							<view class="tip">
								<view class="tip-value"> 拍摄规范 </view>
							</view>
						</view>
						<image v-if="!formData.vehPosImgUrl" class="icon" :src="`${$imgUrl}issuance/xz.png`"
							:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
						</image>
						<image v-else class="icon" :src="imgPathMontage(formData.vehPosImgUrlName)"
							:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}"></image>
					</view>
				</view>
				<view class="picture-wrapper" @click="cardFileImageUpdate(101)">
					<view class="bg">
						<view class="">
							<view class="name"> 行驶证副页 </view>
							<view class="value"> 上传行驶证的副页 </view>
							<view class="tip">
								<view class="tip-value"> 拍摄规范 </view>
							</view>
						</view>
						<image v-if="!formData.vehNegImgUrl" class="icon" :src="`${$imgUrl}issuance/xf.png`"
							:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
						</image>
						<image v-else class="icon" :src="imgPathMontage(formData.vehNegImgUrlName)"
							:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}"></image>
					</view>
				</view>
				<view class="picture-wrapper" @click="cardFileImageUpdate(102)">
					<view class="bg">
						<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="!formData.vehBodyUrl" class="icon" :src="`${$imgUrl}issuance/chetou.png`"
							:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
						</image>
						<image v-else class="icon" :src="imgPathMontage(formData.vehBodyUrlName)"
							:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}"></image>
					</view>
				</view>
				<view class="picture-wrapper" @click="cardFileImageUpdate(103)">
					<view class="bg">
						<view class="">
							<view class="name"> 上传ETC设备安装照 </view>
							<view class="value"> 上传ETC设备安装位置照片 </view>
							<view class="tip">
								<view class="tip-value"> 拍摄规范 </view>
							</view>
						</view>
						<image v-if="!formData.deviceImageUrl" class="icon" :src="``"
							:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
						</image>
						<image v-else class="icon" :src="imgPathMontage(formData.deviceImageName)"
							:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}"></image>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="bottom-button" @click="nextStep">
			下一步
		</view>
		<uploadImg :isTakePhotoModeShow="isTakePhotoModeShow" :phoneType="choiceIndex" @close="close"
			@ocrResult="ocrResult">
		</uploadImg>
		
	</view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import carNumberInput from './components/car-number-input.vue'
import { requestNew } from "@/utils/network/request.js";
import {
		queryVehicle, sendMessage
	} from "@/utils/network/api.js";
import {
	getCodeName, getDicWithType
} from "@/datas/queryKey.js";
import { msg, strReplace, imgPathMontage, hasLogin, uploadFile, compressImage, chooseImageCompress } from "@/utils/utils";
import uploadImg from '@/components/uploadOcr';
import useOrderSkip from "@/composables/order/useOrderSkip";
//办理订单按钮跳转业务逻辑
const {
	gotoCancelOrder,
	gotoEditUserOrUnitInfo,
	gotoConfirmReceipt,
	gotoCheckLogistics,
	gotoEvaluateProduct,
	gotoActiveOrder,
	gotoPay,
	gotoReturnOrder,
	gotoExchangeOrder,
	gotoOrderDetailsPay,
	gotoOrderDetails,
	gotoAgainUseOrder,
	gotoOrderSign,
	closeOrder,
	gotoReplenishmentOrder,
	gotoAddressOrder,
	placeAnOrder,
	gotoEditAddressNew
} = useOrderSkip();

// 响应式数据
const statusBarHeight = ref(0)
const barHeight = ref(0)
const activationType = ref('self') // 'self' 本人激活, 'other' 非本人激活
const waitTime = ref(0)
let timer: any = null

const formData = reactive({
	carNumber: '',
	vehicleIndex: '',
	vehiclePlate: '',
	colorCode: '',
	colorIndex: '',
	colorName: '',
	carColor: '',
	phoneNumber: '',
	vehPosImgUrl: '',
	vehPosImgUrlName: '',
	vehNegImgUrl: '',
	vehNegImgUrlName: '',
	vehBodyUrl: '',
	vehBodyUrlName: '',
	deviceImageUrl: '',
	deviceImageName: '',
	smsCode: '',
	activeType: ''
})

const reset = () => {
	Object.assign(formData, {
		carNumber: '',
		vehicleIndex: '',
		vehiclePlate: '',
		colorCode: '',
		colorIndex: '',
		colorName: '',
		carColor: '',
		phoneNumber: '',
		vehPosImgUrl: '',
		vehPosImgUrlName: '',
		vehNegImgUrl: '',
		vehNegImgUrlName: '',
		vehBodyUrl: '',
		vehBodyUrlName: '',
		deviceImageUrl: '',
		deviceImageName: '',
		smsCode: '',
		activeType: ''
	})
}

const changeActivationType = (type:string) => {
	if(activationType.value != type) {
		activationType.value = type;
	}
	reset();
}

// 页面加载
onLoad(() => {
	getSystemInfo()
	queryVehicleData();
})

const close = (e) => {
	console.log("e", e)
	isTakePhotoModeShow.value = e
}

const ocrResult = (data) => {
	console.log('输出内容=====================', choiceIndex.value);
	console.log("上传数据：", data)
	// 委托书
	formData.proxyUrl = data.imageUrl;
	formData.proxyUrlName = data.imageName;
}

const isTakePhotoModeShow = ref(false);
const choiceIndex = ref(0);
const takePhotoMode = (index) => {
	console.log("index", index)
	isTakePhotoModeShow.value = true
	choiceIndex.value = index
}

const vehiclesShow = ref(true);
const vehicles = ref([]);
const queryVehicleData = (vehicleId) => {
	let data = {
		vehicleId: ''
	}
	if(vehicleId) {
		data.vehicleId = vehicleId;
	}
	const options = {
		type: 2,
		method: "POST",
		data,
		showLoading: true,
	}
	requestNew('/iaw/active/queryVehicle', options).then(res => {
		vehicles.value = res.modelList;
		if(vehicleId) {
			let vehicle = res.modelList[0];
			formData.phoneNumber = vehicle.mobile;
			formData.activeType = vehicle.activeType;
		}
	})
}

//车头照图片上传  val 100行驶证证明 101行驶证反面 102车头照 103
const cardFileImageUpdate = (val) => {
	uni.chooseImage({
		count: 1, //只能选取一张照片
		sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
		sourceType: ["camera", "album"], //从相册选择
		success: function (res) {
			uploadFile(res.tempFilePaths[0], val).then((data : any) => {
				if (val == 100) {
					formData.vehPosImgUrl = data.imageUrl;
					formData.vehPosImgUrlName = res.tempFilePaths[0];
				} else if (val == 101) {
					formData.vehNegImgUrl = data.imageUrl;
					formData.vehNegImgUrlName = res.tempFilePaths[0];
				} else if (val == 102){
					formData.vehBodyUrl = data.imageUrl;
					formData.vehBodyUrlName = res.tempFilePaths[0];
				} else {
					formData.deviceImageUrl = data.imageUrl;
					formData.deviceImageName = res.tempFilePaths[0];
				}
			})
		},
	});
};

const bindPickerChange = (e) => {
	console.log('picker发送选择改变，携带值为：' + e.detail.value)
	let index = e.detail.value;
	formData.vehicleIndex = index;
	let vehicle = vehicles.value[index];
	formData.vehiclePlate = vehicle.vehiclePlate;
	formData.colorCode = vehicle.vehiclePlateColor;
	formData.activeType = vehicle.activeType;
    const colorItem = getDicWithType('VEHICLE_COLOR_TYPE').find(item => item.code == formData.colorCode);
	formData.colorName = colorItem.name;
	formData.phoneNumber = vehicle.mobile
};

const bindColorPickerChange = (e) => {
	console.log('picker发送选择改变，携带值为：' + e.detail.value)
	let index = e.detail.value
	formData.colorIndex = index;
	let colorItem = getDicWithType('VEHICLE_COLOR_TYPE')[index];
	formData.colorCode = colorItem.code;
	formData.colorName = colorItem.name;
	if(formData.carNumber) {
		queryVehicleData(`${formData.carNumber}_${formData.colorCode}`);
	}
};

// 获取系统信息
const getSystemInfo = () => {
	const systemInfo = uni.getSystemInfoSync()
	statusBarHeight.value = systemInfo.statusBarHeight || 0
	const { top, height } = uni.getMenuButtonBoundingClientRect()
	barHeight.value = height ? height + (top - statusBarHeight.value) * 2 : 38
}

// 返回上一页
const goBack = () => {
	uni.navigateBack()
}

// 选择车牌号
const selectCarNumber = () => {
	// 这里可以调用车牌号选择组件
	// uni.showActionSheet({
	// 	itemList: vehicles.value,
	// 	success: (res) => {
	// 		const colors = ['蓝色', '绿色', '黄色', '白色', '黑色']
	// 		formData.carColor = colors[res.tapIndex]
	// 	}
	// })
	vehiclesShow.value = true;
}

// 上传图片
const uploadImage = (type: 'vehicle' | 'device') => {
	uni.chooseImage({
		count: 1, //只能选取一张照片
		sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
		sourceType: ["camera", "album"], //从相册选择
		success: function (res) {
			// 这里可以添加文件上传逻辑
			const tempFilePath = res.tempFilePaths[0]
			if (type === 'vehicle') {
				formData.vehicleImage = tempFilePath
			} else {
				formData.deviceImage = tempFilePath
			}
		}
	})
}

// 显示拍摄规范
const showSpec = (type: 'vehicle' | 'device') => {
	const title = type === 'vehicle' ? '车辆45度照拍摄规范' : 'ETC设备安装照拍摄规范'
	const content = type === 'vehicle' 
		? '请从车辆前45度角拍摄，确保车牌清晰可见，车辆完整入镜。'
		: '请拍摄ETC设备安装位置，确保设备清晰可见，安装牢固。'
	
	uni.showModal({
		title,
		content,
		showCancel: false
	})
}

// 发送验证码
const sendCode = () => {
	if (!/^1[3-9]\d{9}$/.test(formData.phoneNumber)) {
		uni.showToast({ title: '请输入正确手机号', icon: 'none' })
		return
	}
	const options = {
	  type: 2,
	  data: { 
		mobile: formData.phoneNumber,
		businessType:4
	},
	  method: "POST",
	  showLoading: true,
	};
	requestNew(sendMessage, options).then((res) => {
		// 这里调用后端发送验证码接口
		msg("验证码发送成功！");
		uni.showToast({ title: '验证码已发送', icon: 'success' })
		waitTime.value = 60
		timer = setInterval(() => {
		waitTime.value--
		if (waitTime.value <= 0) clearInterval(timer)
		}, 1000)
	});
}


onUnmounted(() => { if (timer) clearInterval(timer) })

const carNumberInputResult = (val: string) => {
  formData.carNumber = val.replaceAll(' ', '');
  if(formData.colorCode && formData.carNumber.length >= 7) {
	queryVehicleData(`${formData.carNumber}_${formData.colorCode}`);
  }
};

// 下一步
const nextStep = () => {
	// 表单验证
	if (!formData.carNumber && activationType.value === 'other') {
		uni.showToast({
			title: '请输入车牌号',
			icon: 'none'
		})
		return
	}
	
	if (!formData.vehiclePlate && activationType.value === 'self') {
		uni.showToast({
			title: '请选择车牌号',
			icon: 'none'
		})
		return
	}
	
	if (!formData.colorCode) {
		uni.showToast({
			title: '请选择车牌颜色',
			icon: 'none'
		})
		return
	}
	
	if (!formData.phoneNumber) {
		uni.showToast({
			title: '请输入手机号码',
			icon: 'none'
		})
		return
	}
	
	if (!/^1[3-9]\d{9}$/.test(formData.phoneNumber)) {
		uni.showToast({
			title: '请输入正确的手机号码',
			icon: 'none'
		})
		return
	}
	
	if (!formData.smsCode && activationType.value === 'other') {
		uni.showToast({
			title: '请输入验证码',
			icon: 'none'
		})
		return
	}
	
	if (!formData.vehPosImgUrl) {
		uni.showToast({
			title: '请上传行驶证正面照',
			icon: 'none'
		})
		return
	}
	
	if (!formData.vehNegImgUrl) {
		uni.showToast({
			title: '请上传行驶证反面照',
			icon: 'none'
		})
		return
	}
	
	if (!formData.vehBodyUrl) {
		uni.showToast({
			title: '请上传车辆45度照',
			icon: 'none'
		})
		return
	}
	
	if (!formData.deviceImageUrl) {
		uni.showToast({
			title: '请上传ETC设备安装照',
			icon: 'none'
		})
		return
	}
	
	
	// 提交数据
	console.log('表单数据:', formData)
	if(activationType.value === 'other') {
		const options = {
			type: 2,
			method: "POST",
			data: {
				mobile: formData.phoneNumber,
				code: formData.smsCode
			},
			showLoading: true,
		}
		requestNew('/iaw/active/checkSendCode', options).then(res => {
			next();
		})
		return;
	}
	next();
}

const next = () => {
	if(formData.activeType == 1) {
		gotoActiveOrder();
	} else {
		
	}
}
</script>

<style lang="scss" scoped>

.picture-wrapper {
	margin-top: 30rpx;

	.bg {
		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;
			// 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;
	}
}


.container {
	min-height: 100vh;
	background-color: #f2f5f7;
}

.nav-bar {
	background-color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	
	.nav-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		
		.nav-left, .nav-right {
			width: 60rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			
			.back-icon {
				width: 40rpx;
				height: 40rpx;
			}
			
			.more-dots {
				display: flex;
				flex-direction: column;
				gap: 4rpx;
				
				.dot {
					width: 6rpx;
					height: 6rpx;
					background-color: #333;
					border-radius: 50%;
				}
			}
		}
		
		.nav-title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
		}
	}
}

.content {
	padding: 60rpx 30rpx 120rpx;
}

.info-section, .upload-section {
	background-color: #fff;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
	
	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 30rpx;
	}
}

.activation-type {
	display: flex;
	background-color: #f5f5f5;
	border-radius: 10rpx;
	padding: 4rpx;
	margin-bottom: 30rpx;
	
	.type-item {
		flex: 1;
		text-align: center;
		padding: 20rpx 0;
		border-radius: 8rpx;
		font-size: 28rpx;
		color: #666;
		transition: all 0.3s;
		
		&.active {
			background-color: #c2a75f;
			color: #fff;
		}
	}
}

.form-item {
	display: flex;
	align-items: center;
	margin-bottom: 30rpx;
	
	.form-label {
		width: 160rpx;
		font-size: 28rpx;
		color: #333;
	}
	
	.form-input {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 80rpx;
		padding: 0 20rpx;
		background-color: #f8f8f8;
		border-radius: 10rpx;
		
		.picker-disabled--test {
			width: 100%;
			height: 100%;
			line-height: 80rpx;
			.uni-input {
				display: flex;
				flex-direction: row;
				align-items: center;
				.text {
					flex: 1;
					height: 100%;
				}
			}
		}
		
		.input-text {
			font-size: 28rpx;
			color: #333;
			
			&.placeholder {
				color: #999;
			}
		}
		
		.arrow-down {
			font-size: 20rpx;
			color: #999;
		}
	}
	
	.form-input-text {
		flex: 1;
		height: 80rpx;
		padding: 0 20rpx;
		background-color: #f8f8f8;
		border-radius: 10rpx;
		font-size: 28rpx;
		color: #333;
	}
}

.car-number-row {
  flex-direction: column;
  align-items: flex-start;
  .form-label {
    margin-bottom: 12rpx;
  }
  :deep(.car-number-input-root) {
    width: 100%;
    justify-content: flex-start;
  }
}

// .picture-wrapper {
// 	margin-top: 30rpx;

// 	.bg1 {
// 		background: #F5F9FB;
// 		border-radius: 10rpx;
// 		padding: 40rpx 30rpx;
// 		display: flex;
// 		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;
// 	}
// }

.bottom-button {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100rpx;
	background-color: #133850;
	color: #fff;
	font-size: 32rpx;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
}

.send-code-btn {
	margin-left: 16rpx;
	background: #f8f4e7;
	color: #ccb375;
	border: 1px solid #ccb375;
	border-radius: 10rpx;
	font-size: 24rpx;
	height: 60rpx;
	line-height: 60rpx;
	padding: 0 20rpx;
}
</style>