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

<template>
	<!-- 表单 -->
	<form style="padding:10px 0" @submit="formSubmit">
		<view v-for="(item,index) in formData" :key="index">
			
			<view v-show="!item.show">
				<!-- 是否显示-->
				<view style="min-height: 90rpx;" :style="item.vertical == 2 ? 'margin-top: 20rpx' : ''"
					:class="item.vertical == 2 ? 'as-layout-vertical' : 'as-layout-horizontal'">
					<!-- 标题 -->
					<view v-if="!item.titleShow" class="as-gravity-center-start"
						:style="'min-width:'+ config.titleWidth + 'rpx'"
						style="margin:0 20rpx;flex-direction: row;display: flex;flex-direction: row;">
						<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:100%;">
							{{item.title}}
						</view>
					</view>
					<!-- 内容 -->
					<view class="as-weight as-gravity-center-start">
						<!-- 文本内容 -->
						<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="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" />
						</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">
								<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%;">
							<view style="margin: 20rpx 30rpx 0 30rpx;border: 1px solid #999999;height: 200rpx;border-radius: 10px;">
								<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>
						</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" 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;">
									<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)">
								</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">
									{{item[item.value] ? (item.itemKey ? item[item.value][item.itemKey] : item[item.value].value) : 
									item.hint ? item.hint : '请选择' + item.title}}
								</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></licensePlateColor>
						</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-text 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 {
		pathToBase64
	} from '../../static/js/util/imageTool.js'
	import pickRegions from '@/components/pick-regions/pick-regions.vue'


	const defaultRegionCode = '520115'
	const props = defineProps({
		formData: {
			type: Array as() => Array < TypeData > ,
			default: () => []
		},
		config: {
			type: Object,
			default: function() {
				return {
					submitName: '提交', //提交按钮名称
					titleWidth: 240, //标题宽度
				}
			}
		}
	})
	
	console.log('====123',props.formData)

	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
	} > ()
	//defineExpose 可宏来显式指定在 <script setup> 组件中要暴露出去的属性。

	//普通选择器
	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] = item.itemData[select]
		}
		console.log('普通选择器', item, select)
		emit('bindPickerChange', e, item)
	}

	// 获取选择的地区  
	function handleGetRegion(e: any, item: TypeData) {
		console.log('输出内容', e)
		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 /* 赋值*/
		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) {
		console.log('输出内容', e)
		var str = e.replace(/\s*/g, "");
		item[item.value] = str
	}

	//短信验证码发送
	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
		})
	}

	//内容提交
	function formSubmit() {
		let content = {}
		console.log('data值', props.formData)
		/* 整理数据对象返回内容 */
		for (var i = 0; i < props.formData.length; i++) {
			let data = props.formData[i]
			console.log('data', data)
			/* 时间另外判断 */
			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]) {
					showToast(newMsg + "不能为空")
					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;
	}

	.btn {
		height: 80rpx;
		opacity: 1;
		border-radius: 100rpx;
		margin: 20rpx 20rpx 20rpx 20rpx;
	}

	.btn-text {
		color: #FFFFFF;
		font-size: 28rpx;
	}

	.nav-bg {
		/* background: linear-gradient(to right, #13E7C1, #43A1E0); */
		border: 1px solid #FFFFFF;
		background: #1AAC1B;
	}
	
	.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;
		/* 添加其他样式属性 */
	}
</style>