zhywpt-h5/components/form-builder/form-builder-vue3.vue

<template>
	<!-- 表单 -->
	<form style="padding: 10px 0;width:100vw" @submit="formSubmit">
		<view class="header-info" v-if="config.isHeader">
			<view class="title">上传后请核对识别信息</view>
			<view class="info">如有错误请及时手动修改</view>
		</view>
		<view v-for="(item, index) in formData" :key="index" style="width: 100vw;">
			<view v-show="!item.show" style="width: 100vw;">
				<!-- 头部标题 -->
				<view class="upload-car-bottom" v-if="item.type == 100">
					{{ item.title }}
				</view>
				<!-- 是否显示-->
				<view style="min-height: 90rpx" :style="item.vertical == 2 ? 'margin-top: 20rpx' : ''" :class="
						item.vertical == 2 ? 'as-layout-vertical' : 'as-layout-horizontal'
					" v-else v-if="item.title != '本人办理'">
					<!-- 标题 -->
					<view v-if="
							item.titleShow ||
							(item.titleShow === undefined && item.type != 14 )
						" class="as-gravity-center-start" :style="'margin: 0 20rpx;display: flex;width:' + config.titleWidth + 'rpx'">
						<image class="img-size" :src="item.required ? '/static/image/must.png' : ''"></image>
						<view :class="item.vertical == 2 ? 'text-left' : 'text-justify'" class="text-title"
							:style="`width:calc(${config.titleWidth}rpx - 30rpx)`">
							{{ item.title }}
						</view>
					</view>

					<!-- 内容 -->
					<view class="as-weight as-gravity-center-start" style="margin-right:20rpx;">
						<!-- 文本内容 -->
						<view v-if="item.type == 1" class="text" :style="item.style">
							{{ item[item.value] }}
						</view>
						<!-- 输入框 -->
						<view v-if="item.type == 2" style="width: 100%">
							<input :disabled="item.disabled" v-model.trim="item[item.value]" :type="item.inputType"
								:placeholder="item.hint ? item.hint : '请输入' + item.title" placeholder-class="text-hint"
								class="text as-gravity-center-start" :maxlength="item.maxlength" :style="item.style"
								style="min-height: 90rpx; word-break: break-all" @blur='handleBlurs($event,item)' @input="handleChange($event,item)"/>
						</view>
						<!-- 多项选择器 -->
						<view v-if="item.type == 3">
							<checkbox-group @change="checkboxChange($event, item)" :disabled="item.disabled">
								<view class="as-layout-horizontal" style="flex-wrap: wrap; margin: 10px 0">
									<label style="
											display: flex;
											flex-direction: row;
											margin-right: 30rpx;
										" v-for="(itemData, index) in item.itemData" :key="index">
										<checkbox style="transform: scale(0.7)" :value="itemData.value" :checked="itemData.checked" />
										<view>{{ itemData.value }}</view>
									</label>
								</view>
							</checkbox-group>
						</view>
						<!-- 普通选择器 当 range 是一个 Array＜Object＞ 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容 
						 :range-key="item[item.value]"-->
						<view v-if="item.type == 4" style="width: 100%">
							<!-- range[范围] value[初始选择]-->
							<picker color="uni-picker-container" :disabled="item.disabled" :range-key="item.itemKey"
								:mode="item.mode ? item.mode : 'selector'" @change="bindPickerChange($event, item)"
								:range="item.itemData" @click="handleClick($event, item)">
								<view class="text">
									{{
										item[item.value]
											? item.itemKey
												? item[item.value][item.itemKey]
												: item[item.value]
											: item.hint
											? item.hint
											: '请选择' + item.title
									}}
								</view>
							</picker>
						</view>

						<!-- 富文本框 -->
						<view v-if="item.type == 5" style="width: 100%">
							<u-input @input="textareaInput($event, item)" v-model="item[item.value]"
								:placeholder="item.hint ? item.hint : '请输入' + item.title" :maxlength="item.maxlength || 100"
								type="textarea" :border="false" :auto-height="true" style="width: 100%; " height='90rpx'
								placeholder-style='font-size: 28rpx;color: #969696;' />


							<!-- 								<textarea :disabled="item.disabled" class="text" v-model="item[item.value]"
									@input="textareaInput($event, item)" placeholder-class="text-hint" style="width: 100%; margin: 20rpx"
									:maxlength="item.maxlength" auto-height
									:placeholder="item.hint ? item.hint : '请输入' + item.title"></textarea> -->
							<!-- 							<view v-if="item.maxlength" class="as-gravity-center-end"
								style="display: flex; flex-direction: row; height: 20%">
								<view class="text">{{ !item.num ? '0' : item.num }}</view>
								<view class="text">
									/{{ item.maxlength ? item.maxlength : 100 }}
								</view>
							</view> -->
						</view>

						<!-- 图片选择器  :imgWidth="imgWidth ? imgWidth : 0"-->
						<view v-if="item.type == 6" style="width: 100%">
							<form-image @backImg="backImg($event, item)" style="width: 100%" :retract="40"></form-image>
						</view>

						<!-- 单向选择器 -->
						<view v-if="item.type == 7 && item.title != '本人办理'" style="width: 100%">
							<radio-group @change="radioChange($event, item)">
								<view class="as-layout-horizontal">
									<label style="
											display: flex;
											flex-direction: row;
											margin-right: 30rpx;
										" v-for="(itemData, index) in item.itemData" :key="index">
										<radio color="#1AAC1B" style="transform: scale(0.7)" :value="itemData.value"
											:checked="itemData.checked" />
										<view>{{ itemData.name }}</view>
									</label>
								</view>
							</radio-group>
						</view>

						<!-- 证件照上传 -->
						<view v-if="item.type == 8" style="width: 100%">
							<view style="margin: 0 40rpx">
								<view class="text-error">
									{{
										item.hint && item.hint.split(',')[0]
											? item.hint.split(',')[0]
											: ''
									}}
								</view>
								<view class="as-layout-horizontal as-gravity-center" style="height: 260rpx; margin-top: 20rpx"
									:class="{ dan: item.inputType === '999' }">
									<view class="as-layout-vertical as-gravity-center" style="width: 90%; height: 100%">
										<image :src="
												item.placeholderImg
													? item.placeholderImg.split(',')[0]
													: '../../static/image/license2.png'
											" style="width: 100%; height: 80%" :style="item.style" @tap="ImageSelection(item, 1)"></image>
										<view class="as-gravity-center text-hint" style="margin-top: 5rpx">
											{{
												item.hint && item.hint.split(',')[1]
													? item.hint.split(',')[1]
													: ''
											}}
										</view>
									</view>
									<view style="width: 40rpx"></view>
									<view class="as-layout-vertical" style="width: 90%; height: 100%" v-if="item.inputType != '999'">
										<image :src="
												item.placeholderImg && item.placeholderImg.split(',')[1]
													? item.placeholderImg.split(',')[1]
													: '../../static/image/license2.png'
											" style="width: 100%; height: 80%" @tap="ImageSelection(item, 2)"></image>
										<view class="as-gravity-center text-hint" style="margin-top: 5rpx">
											{{
												item.hint && item.hint.split(',')[2]
													? item.hint.split(',')[2]
													: ''
											}}
										</view>
									</view>
								</view>
							</view>
						</view>

						<!-- 车牌号输入 -->
						<view v-if="item.type == 9" style="width: 100%">
							<view style="margin: 20rpx 30rpx 0 30rpx">
								<car-num-ber-input @numberInputResult="numberInputResult($event, item)"
									:defaultStr="item[item.value]"></car-num-ber-input>
							</view>
						</view>

						<!-- 省市区选择器 -->
						<view v-if="item.type == 10" style="width: 100%">
							<pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion($event, item)">
								<view class="text">
									{{ handleTxt(item) }}
								</view>
							</pick-regions>
						</view>

						<!-- 短信验证码 -->
						<view v-if="item.type == 11" style="width: 100%">
							<view class="as-layout-horizontal as-gravity-center">
								<input v-model="item[item.value]" type="number"
									:placeholder="item.hint ? item.hint : '请输入' + item.title" placeholder-class="text-hint"
									class="text as-gravity-center-start" :maxlength="item.maxlength" :style="item.style"
									style="min-height: 90rpx; word-break: break-all" />
								<button style="width: 160rpx; font-size: 24rpx; height: 60rpx" :disabled="item.disabled"
									@click="SMSsending($event, item)">
									{{ item.hint ? item.hint : '获取验证码' }}
								</button>
							</view>
						</view>

						<!-- 隐私协议 -->
						<view v-if="item.type == 12" style="width: 100%">
							<view class="as-layout-horizontal as-gravity-center">
								<checkbox value="cb" />
								请先阅读并同意
								<a style="color: #007aff; text-decoration: underline">
									《开户服务协议》
								</a>
							</view>
						</view>

						<!-- 车牌颜色 -->
						<view v-if="item.type == 13" style="width: 100%">
							<licensePlateColor @numberplateResult="numberplateResult($event, item)" :defaultStr="item[item.value]"
								:vanType="vanType"></licensePlateColor>
						</view>
						<!-- 上传图片，证件照等 -->
						<view v-if="item.type == 14" style="width: 100%">
							<upload-car-img :dataList="item" @uploadImgHandle="uploadImgHandle($event, item)"
								:imgUrl='item[item.value]' />
						</view>
						<!-- <view v-if="item.type == 15" style="width: 100%;">
							<view class="input-box">
								<text class="sub-label">长</text>
								<input v-model="state.outlineL" @input="outlineInput" :disabled="state.isEnableChangeOCRCarInfo" />
								<text class="sub-text">X</text>
								<text class="sub-label">宽</text>
								<input v-model="state.outlineW" @input="outlineInput" :disabled="state.isEnableChangeOCRCarInfo" />
								<text class="sub-text">X</text>
								<text class="sub-label">高</text>
								<input v-model="state.outlineH" @input="outlineInput" :disabled="state.isEnableChangeOCRCarInfo" />
								<text class="sub-text">mm</text>
							</view>
						</view> -->

						<!-- 车辆用户类型选择 -->
						<view v-if="item.type == 101" style="width: 100%">
							<CarUserType :dataList="item" @useCarUserType="useCarUserType($event, item)" />
						</view>
						<!-- 汽车尺寸处理 -->
						<view v-if="item.type == 102" style="width: 100%"></view>
						<!-- 用户类型选择 -->
						<view v-if="item.type == 103" style="width: 100%">
							<UserType :dataList="item" @useUserType="useUserType($event, item)" />
						</view>
						<!-- 收费车型 -->
						<view v-if="item.type == 104" style="width: 100%">
							<FeeVehicleType :dataList="item" @feeVehicleType="feeVehicleType($event, item)" />
						</view>
						<!-- 使用性质  -->
						<view v-if="item.type == 105" style="width: 100%">
							<Character :dataList="item" @feeVehicleType="feeVehicleType($event, item)" />
						</view>
					</view>
				</view>

				<!-- 最后一位不展示 且 设置为展示 -->
				<view v-show="item.underline" class="as-line-h" style="margin: 0rpx 20rpx 0rpx 20rpx"></view>
			</view>
		</view>

		<view style="display: flex; flex-direction: row">
			<button v-if="config.btnBack" class="back-bg as-gravity-center btn as-weight" @click="back">
				{{ config.submitOneName ? config.submitOneName : '上一步' }}
			</button>
			<button class="btn btn-txt as-gravity-center nav-bg as-weight" form-type="submit">
				{{ config.submitName ? config.submitName : '提交' }}
			</button>
		</view>
	</form>
</template>
<script setup lang="ts">
	import { TypeData } from './tools';
	import licensePlateColor from '@/components/LicensePlateColor.vue';
	import carNumBerInput from '@/components/car-number-input/car-number-input';
	import uploadCarImg from '@/components/upload-car-img/upload-car-img';
	import CarUserType from '@/components/CarUserType.vue';
	import UserType from '@/components/UserType.vue';
	import FeeVehicleType from '@/components/FeeVehicleType.vue';
	import Character from '@/components/Character.vue';
	import { pathToBase64 } from '../../static/js/util/imageTool.js';
	import pickRegions from '@/components/pick-regions/pick-regions.vue';
	import { computed } from 'vue';
	
	const defaultRegionCode = '520115';
	const props = defineProps({
		vanType: {
			default: 'all'
		},
		formData: {
			type: Array as () => Array<TypeData>,
			// type: Array as() => Array < any > ,
			default: () => []
		},
		config: {
			type: Object,
			default: function () {
				return {
					submitName: '提交', //提交按钮名称
					titleWidth: 240, //标题宽度
					isHeader: false //头部信息展示
				};
			}
		}
	});

	const emit = defineEmits<{
		(e : 'submit', content : any) : void;
		(e : 'bindPickerChange', event : any, item : TypeData) : void;
		(e : 'handleGetRegion', event : any, item : TypeData) : void;
		(e : 'uploadImg', content : any, item : TypeData, index : Number) : void;
		(e : 'radioChange', event : any, item : TypeData) : void;
		(e : 'sendText', event : any, item : TypeData) : void;
		(e : 'uploadImgOcr', fileLise : any, item : any) : void;
		(e : 'handleBlurs', e : any, item : any) : void;
		(e : 'handleChange', e : any, item : any) : void;
		(e : 'handleClick', e : any, item : any) : void;
		(e : 'handleUseUserType', e : any, item : any) : void;
	}>();
	//defineExpose 可宏来显式指定在 <script setup> 组件中要暴露出去的属性。
	function handleBlurs(e,item){
		emit('handleBlurs', e, item);
	}
	function handleChange(e,item){
		emit('handleChange', e, item);
	}
	function handleClick(e,item){
		emit('handleClick', e, item);
	}
	//普通选择器
	function bindPickerChange(e : any, item : TypeData) {
		let select = e.target.value;
		// #ifdef H5
		select = e.detail.value;
		// #endif
		if (item.mode == 'date' || item.mode == 'time') {
			/* 日期选择器*/
			item[item.value] = select;
		} else {
			/* 普通选择器*/
			item[item.value] = select || item.itemData[select];
		}
		emit('bindPickerChange', e, item);
	}
	// 车辆选择器处理
	function useCarUserType(e, item) {
		item[item.value] = e;
		emit('handleUseUserType', e, item);
	}

	function useUserType(e, item) {
		item[item.value] = e;
		console.log(e);
	}
	function feeVehicleType(e, item) {
		item[item.value] = e;
		console.log(e);
	}
	function handleTxt(item) {
		if (!item.value) {
			return '请选择省市区';
		}
		const str = item[item.value] || '请选择省市区';
		return str;
	}
	// 获取选择的地区
	function handleGetRegion(e : any, item : TypeData) {
		item[item.value] = e[0].name + e[1].name + e[2].name;
		emit('handleGetRegion', e, item);
	}

	//多项选择器
	function checkboxChange(e : any, item : TypeData) {
		item[item.value] = e.detail.value; /* 赋值*/
	}

	//单项选择器
	function radioChange(e : any, item : TypeData) {
		item[item.value] = e.detail.value; /* 赋值*/
		console.log(e, item);
		emit('radioChange', e, item);
	}

	//富文本框输入内容
	function textareaInput(e : Event, item : TypeData) {
		item.num = item[item.value].length;
	}

	//点击图片按钮
	function backImg(e : Event, item : TypeData) {
		item[item.value] = e;
	}

	function back(e : Event) { }

	//车牌输入
	function numberInputResult(e : any, item : TypeData) {
		var str = e.replace(/\s*/g, '');
		item[item.value] = str;
	}

	function numberplateResult(e : any, item) {
		item[item.value] = e.id;
		console.log(e);
	}

	//短信验证码发送
	function SMSsending(e : any, item : TypeData) {
		let time = 60;
		emit('sendText', e, item);
		const fn = setInterval(function () {
			time--;
			item.hint = time + 's';
			item.disabled = true;
			if (time == 0) {
				clearInterval(fn);
				item.disabled = false;
				item.hint = '获取验证码';
			}
		}, 1000);
	}

	//选择图片按钮
	function ImageSelection(item : TypeData, index : number) {
		uni.chooseImage({
			count: 1, //最多可以选择的文件个数
			sourceType: ['camera'], //album 从相册选视频，camera 使用相机拍摄，默认为：['album', 'camera']
			success(res : any) {
				if (res.tempFiles[0].size > 2000000) {
					uni.showToast({
						title: '图片大于2M，请重新上传',
						icon: 'none',
						duration: 1500
					});
					return;
				}
				// #ifdef H5
				pathToBase64(res.tempFilePaths[0]).then((data) => {
					emit('uploadImg', data, item, index);
				});
				// #endif
			},
			fail(res : any) {
				if (!res.authSetting['scope.album']) {
					uni.showModal({
						title: '授权失败',
						content: '需要从您的相机或相册获取图片，请在设置界面打开相关权限',
						success: (res) => {
							if (res.confirm) {
								uni.openSetting();
							}
						}
					});
				}
			}
		});
	}

	function showToast(hint : string) {
		uni.showToast({
			icon: 'none',
			title: hint
		});
	}
	// type为14，上传图片
	function uploadImgHandle(fileList, item) {
		item[item.value] = fileList.url;
		console.log('uploadImgHandle1231231')
		emit('uploadImgOcr', fileList, item);
	}
	//内容提交
	function formSubmit() {
		let content = {};
		// console.log('data值', props.formData)
		/* 整理数据对象返回内容 */
		for (var i = 0; i < props.formData.length; i++) {
			let data = props.formData[i];
			if (data.show) continue;
		// 	/* 时间另外判断 */

			if (+data.type == 7) {
				// @ts-ignore
				let values = data[data.value];
				if (!values && values !== 0) {
					values = data.itemData.find((item) => item.checked).value;
				}
				values = parseInt(values);
				data[data.value] = isNaN(values)
					? data.itemData.find((item) => item.checked).value
					: values;
			}
			// 如果等于100说明是标题，跳过
			if (+data.type == 100) {
				continue;
			}
			if (data.required && !data.show) {
				let reg = new RegExp('：', 'g'); //g代表全部
				let newMsg = data.title.replace(reg, '');
				if (data.value.indexOf(',') != -1 && +data.type == 8) {
					if (!data[data.value.split(',')[0]]) {
						showToast(data.hint + '不能为空');
						return;
					} else if (!data[data.value.split(',')[1]]) {
						showToast(data.hint + '不能为空');
						return;
					}
				} else if (data[data.value] === undefined || data[data.value] === '') {
					showToast(newMsg + '不能为空');
					return;
				}
			}
			if (+data.type == 2 && !data.show) {
				if (data.checkReg) {
					let regs = new RegExp(data.checkReg); //g代表全部
					if (data[data.value] && !regs.test(data[data.value])) {
						showToast(data.checkPrompt || data.title + '校验失败');
						return;
					}
				}
				if (
					data.minlength &&
					data[data.value].length &&
					+data.minlength > data[data.value].length
				) {
					showToast(data.title + '最小长度为' + data.minlength);
					return;
				}
			}

			if (data.value.indexOf(',') != -1 && +data.type == 8) {
				if (data[data.value.split(',')[0]]) {
					content[data.value.split(',')[0]] = data[data.value.split(',')[0]];
				}
				if (data[data.value.split(',')[1]]) {
					content[data.value.split(',')[1]] = data[data.value.split(',')[1]];
				}
			} else if (+data.type == 10) {
				for (var s = 0; s < data.value.split(',').length; s++) {
					if (data[data.value]) {
						content[data.value.split(',')[s]] = data[data.value].split('-')[s];
					}
				}
			} else {
				if (+data.type == 4 && data.name && data[data.value]) {
					content[data.value] = data[data.value][data.name];
				} else {
					content[data.value] = data[data.value];
				}
			}
		}
		emit('submit', content);
	}
</script>
<style lang="scss" scoped>
	.img-size {
		width: 30rpx;
		height: 30rpx;
	}

	.upload-car-bottom {
		font-size: 32rpx;
		text-align: left;
		margin: 15rpx 30rpx;
	}

	.header-info {
		padding: 40rpx 40rpx 10rpx;

		.title {
			font-size: 28rpx;
			color: #000;
			font-weight: bold;
		}

		.info {
			margin-top: 8rpx;
			font-size: 24rpx;
			color: #999;
		}
	}

	.back-bg {
		border: 1px solid #1aac1b;
		color: #1aac1b;
		background: #ffffff;
	}

	::v-deep .uni-picker-container .uni-picker-action.uni-picker-action-confirm {
		background-color: blue;
		color: #1aac1b;
		/* 添加其他样式属性 */
	}

	.dan {
		width: 50%;
	}
</style>