zhywpt-sp/components/form-builder/form-builder.vue

<template>
	<!-- 通用表单 modify by ht 
	     @submit="formSubmit"-->
	<form>
		<view v-for="(item, index) in formData" :key="index">
			<view v-show="!item.hide">
				<!-- 是否显示-->
				<view style="min-height: 80rpx" :class="
            item.vertical === 2 ? 'as-layout-vertical' : 'as-layout-horizontal'
          ">
					<!-- 标题 -->
					<view class="as-gravity-center-start" :style="{
              minWidth: config.titleWidth + 'rpx',
              marginTop: `${item.bg || item.vertical === 2 ? '30rpx' : ''}`,
            }" style="
              margin-left: 20rpx;
              flex-direction: row;
              display: flex;
              flex-direction: row;
            ">
						<!-- <image class="img-size" mode="aspectFill" :src="item.required ? '../must.png' : ''"></image> -->
						<!-- :class="item.vertical === 2 ? 'text-left' : 'text-justify'" -->
						<span v-if="item.star" style="color: red">*</span>
						<view class="text-title" :style="{
                color: `#${item.labelColor ?item.labelColor:'333333'}`,
                width: '100%',
              }">
							{{ item.title }}
						</view>
					</view>

					<!-- 内容 -->
					<view class="as-weight as-gravity-center-start">
						<!-- 文本内容 -->
						<view v-if="item.type === 1" :class="item.bg ? 'bg' : 'notbg'" class="text-hint"
							:style="item.style">{{ item[item.value] }}</view>

						<!-- 输入框 -->
						<view v-if="item.type === 2" style="width: 100%" :class="item.bg ? 'bg' : 'notbg'">
							<view class="as-layout-horizontal" style="align-items: center">
								<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" :maxlength="item.maxlength"
									:style="item.style" style="min-height: 80rpx; word-break: break-all; flex: 1"
									@input="inputChange($event, item)" />

								<view v-if="item.btn" class="as-gravity-center">
									<!-- 验证码 -->
									<verification-code v-if="item.btnType === 'code'"
										:mobile="item.codeValue"></verification-code>
									<button v-else size="mini" style="background-color: #2ce242; color: #fff"
										@click="inputBtnClickHandle(item)">
										{{ item.btnTitle }}
									</button>
								</view>
							</view>
						</view>

						<!-- 多项选择器 -->
						<view v-if="item.type === 3" :class="item.bg ? 'bg' : 'notbg'">
							<checkbox-group @change="checkboxChange($event, item)" :disabled="item.disabled">
								<view class="as-layout-horizontal" style="justify-content: right">
									<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.name }}</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%" :class="item.bg ? 'bg' : 'notbg'">
							<!-- range[范围] value[初始选择]-->
							<view class="as-layout-horizontal" style="align-items: center">
								<view v-if="item.mode === 'custom'" :class="item[item.value] ? 'text' : 'text-hint'"
									style="flex: 1" @click="emit('pickerCustom', item)">
									{{
										item[item.value]
										  ? item.itemKey
											? item[item.value][item.itemKey]
											: item[item.value]
										  : item.hint
										  ? item.hint
										  : "请选择" + item.title
									  }}
								</view>

								<template v-else-if="item.mode === 'search' && state.sysType == 'WECHAT'">
									<view :disabled="item.disabled" :class="item[item.value] ? 'text' : 'text-hint'"
										style="flex: 1" @click="item.searchPickerVisible = true">
										{{
										  item[item.value]
											? item.itemKey
											  ? item[item.value][item.itemKey]
											  : item[item.value]
											: item.hint
											? item.hint
											: "请选择" + item.title
										}}
									</view>
									<search-picker :visible="item.searchPickerVisible" :dataSource="item.itemData"
										v-model="item[item.value]"
										@hidePicker="item.searchPickerVisible = false"></search-picker>
								</template>
								<picker v-else mode="selector" :range="item.itemData"
									@change="bindPickerChange($event, item)">
									<view :class="item[item.value] ? 'text' : 'text-hint'">
										{{
									  item[item.value]
									    ? item.itemKey
									      ? item[item.value][item.itemKey]
									      : item[item.value]
									    : item.hint
									    ? item.hint
									    : "请选择" + item.title
									}}
									</view>
								</picker>

								<image class="arror" mode="aspectFill" :src="`${$imgUrl}common/arror-right.png`">
								</image>
							</view>
						</view>

						<!-- 富文本框 -->
						<view v-if="item.type === 5" style="width: 100%; margin: 30rpx 25rpx 0rpx">
							<view>
								<textarea :disabled="item.disabled" v-model="item[item.value]"
									@input="textareaInput($event, item)" :class="item.bg ? 'textarea-bg' : 'notbg'"
									placeholder-class="text-hint" style="width: 100%" :maxlength="item.maxlength"
									:placeholder="item.hint ? item.hint : '请输入' + item.title">
                </textarea>
							</view>
						</view>

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

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

						<!-- 证件照上传 -->
						<view v-if="item.type === 8" style="width: 100%" :class="item.bg ? 'bg' : 'notbg'">
							<view style="margin: 0 40rpx">
								<view class="text-error">{{ item.hint }}</view>
								<view class="as-layout-horizontal as-gravity-center"
									style="height: 250rpx; margin-top: 20rpx">
									<view class="as-layout-vertical" style="width: 90%; height: 100%">
										<image :src="
                        item.placeholderImg1
                          ? item.placeholderImg1
                          : `${$imgUrl}license2.png`
                      " style="width: 100%; height: 80%" @tap="ImageSelection(item, 1)" mode="aspectFill"></image>
										<view class="as-gravity-center text-hint" style="margin-top: 5rpx">
											{{ item.hint1 }}
										</view>
									</view>
									<view style="width: 40rpx"></view>
									<view class="as-layout-vertical" style="width: 90%; height: 100%">
										<image :src="
                        item.placeholderImg2
                          ? item.placeholderImg2
                          : `${$imgUrl}license2.png`
                      " style="width: 100%; height: 80%" @tap="ImageSelection(item, 2)" mode="aspectFill"></image>
										<view class="as-gravity-center text-hint" style="margin-top: 5rpx">
											{{ item.hint2 }}
										</view>
									</view>
								</view>
							</view>
						</view>

						<!-- 车牌号输入 -->
						<view v-if="item.type === 9" style="width: 100%" :class="item.bg ? 'bg' : 'notbg'">
							<view style="margin: 20rpx -20rpx 10rpx">
								<car-num-ber-input @numberInputResult="numberInputResult($event, item)">
								</car-num-ber-input>
							</view>
						</view>

						<!-- 省市区选择 -->
						<view v-if="item.type === 10" style="width: 100%" :class="item.bg ? 'bg' : 'notbg'">
							<view class="as-layout-horizontal" style="align-items: center">

								<picker mode="region" @change="handleGetRegion($event, item)" :value="item.region">
									<view class="uni-input">
										{{item.region?item.region[0]+item.region[1]+item.region[2]:""}}
									</view>
								</picker>
								<!-- <image class="arror" v-if="state.sysType == 'WECHAT'"
									:src="`${$imgUrl}common/arror-right.png`" mode="aspectFill">
								</image> -->
							</view>
						</view>

						<!-- 车辆图片上传 -->
						<view v-if="item.type === 11" style="width: 100%" :class="item.bg ? 'bg' : 'notbg'">
							<view class="imgs-box as-layout-horizontal">
								<view class="img-box" v-for="(img, index) in item.imgList">
									<form-image @backImg="backImg2($event, img, item)" style="width: 100%"
										:imgWidth="120" :retract="-10" :showTxt="false" :count="1"
										@removeImg="removeImg2($event, img, item)"></form-image>
									<view class="img-hint">{{ img.hint }}</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view v-show="index !== formData.length - 1 && !item.underline" class="as-line3"
					style="margin: 0rpx 20rpx 0rpx 20rpx"></view>

				<view class="divider" v-if="item.divider"></view>
			</view>
		</view>

		<view class="subBtn">
			<submit-button :title="config ? config.submitName : '提交'" form-type="submit"
				@submit="formSubmit"></submit-button>
		</view>

	</form>
</template>
<script setup lang="ts">
	import { onLoad, onShow } from "@dcloudio/uni-app";
	import { TypeData, ImgData } from "./tools";
	import { request } from "@/utils/network/request.js";
	import carNumBerInput from "@/components/car-number-input/car-number-input";
	import { pathToBase64 } from "@/utils/util/imageTool.js";
	import pickRegions from "@/login/pick-regions/pick-regions.vue";
	import { onMounted, ref } from "vue";
	import { reactive } from "vue";
	onShow((option : any) => {
		// #ifdef MP-ALIPAY
		state.sysType = 'ALI';
		// #endif
		// #ifdef MP-WEIXIN
		state.sysType = 'WECHAT';
		// #endif
	});
	const defaultRegionCode = "520115";
	const props = defineProps({
		formData: {
			type: Array as () => Array<TypeData>,
			default: () => [],
		},
		config: {
			type: Object,
			default: function () {
				return {
					submitName: "提交", //提交按钮名称
					titleWidth: 120, //标题宽度
				};
			},
		},
	});
	const state = reactive({
		multiIndex: [0, 0, 0],
		sysType: ""
	})
	//defineEmits
	const emit = defineEmits<{
		(e : "submit", content : any) : void;
		(e : "uploadImg", content : any, item : TypeData, index : Number) : void;
		(e : "radioChange", event : any, item : TypeData) : void;
		(e : "addressInfo", content : any) : void;
		(e : "inputChange", event : any, item : TypeData) : void;
		(e : "pickerCustom", item : TypeData) : void;
		(e : "handleGetRegion", 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("111111", item.mode, item[item.value])
	}

	//输入框后按钮点击
	const inputBtnClickHandle = (item : TypeData) => {
		if (item.btnType === "address") {
			//#ifdef MP-WEIXIN
			uni.chooseAddress({
				success: (res) => {
					console.log("addressInfo", res)
					emit("addressInfo", res);
				},
				fail: (err) => {
					showToast("获取失败!");
				},
			});
			//#endif
			//#ifdef MP-ALIPAY
			my.getAddress({
				success: (res) => {
					console.log("addressInfo", res.result)
					emit("addressInfo", res.result);
				},
				fail: (err) => {
					showToast("获取失败!");
				},
			});
			//#endif
		} else if (item.btnType === "code") {
			//获取验证码
			showToast("获取验证码");
		}
	};

	// 获取选择的地区
	function handleGetRegion(e : any, item : TypeData) {
		item[item.value] = e.detail.value;
		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 inputChange(e : Event, item : TypeData) {
		emit("inputChange", e, item);
	}

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

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

	//点击图片按钮2
	function backImg2(e : Event, imgItem : ImgData, item : TypeData) {
		imgItem[imgItem.value] = e;
		let all = true;
		let srcUrl = "";
		item.imgList.map((temp) => {
			if (!temp[temp.value]) {
				all = false;
				return;
			} else {
				srcUrl = srcUrl + temp[temp.value] + ",";
			}
		});

		if (all) {
			item[item.value] = srcUrl;
		}
	}

	//删除图片
	const removeImg2 = (e : Event, imgItem : ImgData, item : TypeData) => {
		imgItem[imgItem.value] = "";
		item[item.value] = "";
	};

	//车牌输入
	function numberInputResult(e : Event, item : TypeData) {
		item[item.value] = e;
	}

	//选择图片按钮
	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 MP-WEIXIN
				uni.getFileSystemManager().readFile({
					filePath: res.tempFiles[0].tempFilePath, //要读取的文件的路径
					encoding: "base64", //编码格式
					success: (res) => {
						let imgBase64 = res.data;
						let reqData = {
							imageBase: imgBase64,
							accountNum: "qtzl_xcx",
							secretKey: "4DE47302-EDC7-41D4-888F-59A79DF4EA46",
						};
						//上传给服务器
						uni.showLoading({
							title: "正在加载中...",
							mask: true,
						});
						//文件上传
						request("", {
							baseUrl: "https://etcfile.etcjz.cn/v1/file/uploadImageBaseFile",
							data: reqData,
						}).then((content) => {
							uni.hideLoading();
							if (content.rc != "00") {
								uni.showModal({
									title: "请求错误",
									content: "图片上传失败",
									showCancel: false,
									confirmText: "取消",
								});
							}
							//处理后的 Data
							let data = {
								source: 2, //来源
								imageBase64: imgBase64,
								imageType: index,
								imageUrl: content.data.fileUrl,
							};
							emit("uploadImg", data, item, index);
						});
					},
					fail: (err) => {
						console.log("错误提示", err);
					},
				});
				// #endif

				// #ifdef H5
				pathToBase64(res.tempFilePaths[0]).then((data) => {
					let base64 = data.replaceAll("data:image/jpeg;base64,", "");
					base64 = base64.replaceAll("data:image/png;base64,", "");
					base64 = base64.replaceAll("data:image/jpg;base64,", "");
					let reqData = {
						imageBase: base64,
						accountNum: "qtzl_xcx",
						secretKey: "4DE47302-EDC7-41D4-888F-59A79DF4EA46",
					};
					//上传给服务器
					uni.showLoading({
						title: "文件上传中...",
						mask: true,
					});
					//文件上传
					request("", {
						baseUrl: "https://etcfile.etcjz.cn/v1/file/uploadImageBaseFile",
						data: reqData,
					})
						.then((content) => {
							console.log("上传结果", content);
							uni.hideLoading();
							if (content.rc != "00" && content.rc != 0) {
								uni.showModal({
									title: "请求错误",
									content: "图片上传失败",
									showCancel: false,
									confirmText: "取消",
								});
							}
							//展示缩略图
							if (index % 2 != 0) {
								//奇数第一张 偶数第二张
								item.placeholderImg1 = content.data.fileUrl;
								item[item.value.split(",")[0]] = content.data.fileUrl;
							} else {
								item.placeholderImg2 = content.data.fileUrl;
								item[item.value.split(",")[1]] = content.data.fileUrl;
							}
							//只展示缩略图
							if (!item.inputType) {
								emit("uploadImg", data, item, index);
							} else {
								//if(item.type === 1)
								//证件OCR识别
								uni.showLoading({
									title: "证件识别中...",
									mask: true,
								});
								let reqData2 = {
									imageDriveBase: "",
									imageBase64: base64,
									imageType: index % 2 != 0 ? 1 : 2, //1代表身份证正面，2代表反面
									imageUrl: content.data.fileUrl,
								};
								//默认身份证
								let code = "IF010012019070410001";
								if (item.inputType == "2") {
									//2为行驶证
									code = "IF010012019070410002";
									reqData2.imageBase64 = "";
									reqData2.imageDriveBase = base64;
								}
								request(code, {
									data: reqData2,
								}).then((ocr) => {
									uni.hideLoading();
									if (ocr.rc !== "00") {
										uni.showModal({
											title: "请求错误",
											content: "证件识别失败",
											showCancel: false,
											confirmText: "取消",
										});
									}
									let data = ocr.rd;
									//[身份证正面]姓名(name) 住址(address) 出生日期(birthday) 身份证号(idno) 民族(nation)
									//[身份证反面]证件机关(agency) 有效起始日期(begindate) 有效结束日期(enddate)
									emit("uploadImg", data, item, index);
								});
							}
						})
						.catch((e) => {
						});
				});
				// #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,
		});
	}

	//内容提交
	const formSubmit = () => {
		let content = {};
		/* 整理数据对象返回内容 */
		for (var i = 0; i < props.formData.length; i++) {
			let data = props.formData[i];
			console.log("data", data)
			/* 时间另外判断 */
			if (data.required && !data.hide) {
				//隐藏的不用进行判断
				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]]) {
						console.log("1111")
						showToast(data.emptyHint ? data.emptyHint : `${data.hint1}不能为空`);
						return;
					} else if (!data[data.value.split(",")[1]]) {
						console.log("2222")
						showToast(data.emptyHint ? data.emptyHint : `${data.hint2}不能为空`);
						return;
					}
				} else if (!data[data.value]) {
					console.log("3333", data[data.value], data)
					showToast(data.emptyHint ? data.emptyHint : `${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 i = 0; i < data.value.split(',').length; i++) {
				// 	content[data.value.split(',')[i]] = data[data.value].split('-')[i]
				// }
				content[data.value] = data[data.value];
			} else {
				if (data.type === 4 && data.name) {
					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;
	}

	.notbg {
		background-color: #ffffff;
		border-radius: 20rpx;
		min-height: 80rpx;
		line-height: 80rpx;
		padding: 8rpx 28rpx;
	}

	.bg {
		background-color: #f1f1f1;
		border-radius: 20rpx;
		min-height: 80rpx;
		line-height: 80rpx;
		padding: 0 28rpx;
		margin-right: 29rpx;
		margin-left: 25rpx;
		margin-top: 30rpx;
	}

	.textarea-bg {
		background-color: #f1f1f1;
		border-radius: 20rpx;
		height: 245rpx;
		padding: 30rpx;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		/*Firefox*/
		-webkit-box-sizing: border-box;
		/*Safari*/
	}

	.text-hint {
		font-size: 28rpx;
		color: #999999;
	}

	.text-title {
		font-size: 28rpx;
		color: #333333;
	}

	.subBtn {
		margin: 112rpx 30rpx 30rpx;
	}

	.divider {
		border-bottom: 1px solid #dcdcdc;
	}

	.arror {
		width: 35rpx;
		height: 35rpx;
	}

	.imgs-box {
		flex-wrap: wrap;
		margin-top: 20rpx;
		margin-bottom: -35rpx;
		padding-right: 110rpx;
		justify-content: space-between;

		.img-box {
			margin-bottom: 35rpx;
		}

		.img-hint {
			font-size: 24rpx;
			color: #333333;
			text-align: center;
		}
	}

	.uni-input {
		color: #646464;
		font-size: 28rpx;
	}

	.red {
		color: red;
		margin-right: 10rpx;
	}

	.message {
		font-size: 30rpx;
		margin-top: 30rpx;
		padding: 0 20rpx;
	}
</style>