H5_module/match/addForm/addForm.vue

<template>
	<view class="p-form">
		<view v-for='item,index in extForm' class="p-form-item" :key="index">
			<view class="p-label ddflex" style="justify-content: space-between;">
				{{item.chineseName}}
				<view class="ddflex" style="font-size: 24rpx;">
					<text style="color: blue;" @click="editItem(index)">编辑</text>
					<text style="margin-left: 20rpx;color: red;" @click="removeItem(index)">删除</text>
				</view>
			</view>
			<!-- 输入框 -->
			<view v-if="item.type==1" class="p-input">
				<input :placeholder="'请输入'+item.chineseName" placeholder-class="p-placeholder" />
			</view>
			<!-- 单选 -->
			<view v-if="item.type==2" class="p-select">
				<view class="ddflex">
					<view class="ddflex p-select-item" v-for="it in item.selectValues">
						<image src="/static/images/select.png"></image>
						<view>{{it.name}}</view>
					</view>
				</view>
			</view>
			<!-- 多选 -->
			<view v-if="item.type==3" class="p-select-group">
				<view class="ddflex">
					<view class="ddflex p-select-group-item" v-for="it in item.selectValues">
						<view>{{it.name}}</view>
					</view>
				</view>
			</view>
			<!-- 图片 -->
			<view v-if="item.type==4">
				<view class="ddflex" style="margin-top: 30rpx;">
					<view class="upload-photo ddflex">
						<image src="../static/images/photo.png"></image>
					</view>
				</view>
			</view>
			<!-- 多图片 -->
			<view v-if="item.type==5">
				<view class="ddflex" style="margin-top: 30rpx;">
					<view class="upload-photo ddflex">
						<image src="../static/images/photo.png"></image>
					</view>
				</view>
			</view>
		</view>
		
		<view v-if="extForm.length==0" style="text-align: center;margin: 30rpx 0;color: #999;">添加报名字段</view>
		<view class="add-btn" @click="showPop">
			<image src="../static/images/add.png"></image>
		</view>


		<view class="next-btn" @click="save">
			<view>确定</view>
		</view>


		<view class="ceng" v-if="isShowPop" @click="hidePop()"></view>
		<view class="hx-pop" :style="'bottom:' + popBottom">
			<view class="pop-tit">添加报名信息</view>
			<view class="pop-list">
				<view class="form">
					<view class="form-item-title">名称</view>
					<view class="form-input-box">
						<input v-model="addObj.chineseName" placeholder-class="form-input-placeholder"
							placeholder="请输入名称(如 姓名)" />
					</view>
					<view class="form-item-title">字段名</view>
					<view class="form-input-box">
						<input v-model="addObj.englishName" placeholder-class="form-input-placeholder"
							placeholder="请输入字段名(如 name)" />
					</view>
					<view class="form-item-title">字段类型</view>
					<view class="form-input-box form-input-placeholder">
						<picker :range="formTypeOptions" range-key="label" v-model="formTypeIndex" @change="changeType" style="color: #333;">
								{{formTypeOptions[formTypeIndex].label}}
								<view class="more ddflex">
									<image src="/static/pages/images/more.png"></image>
								</view>
						</picker>
						<view v-if="formTypeOptions[formTypeIndex].value==2||formTypeOptions[formTypeIndex].value==3">
							<view class="ddflex option-input" v-for="it,idx in addObj.selectValues">
								<input v-model="it.name" class="fflex" placeholder-class="option-input-placeholder" placeholder="请输入选项值"/>
								<view class="option-input-delete" @click="removeOption(idx)">删除</view>
							</view>
							<view class="add-option-btn" @click="addOption">添加选项</view>
						</view>
					</view>
					<view class="form-item-title ddflex" style="justify-content: space-between;">
						是否必填
						<switch v-model="addObj.required" :checked="addObj.required==1" style="transform:scale(0.7)" color="var(--main)"
							@change="requiredChange"></switch>
					</view>
				</view>
			</view>
			<view class="pop-cancel" @click="confirmPop()">确定</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	const req = require("../../utils/request.js");

	export default {
		components: {},
		props: {},
		data() {
			return {
				isShowPop: false,
				popBottom: '-100%',
				addObj: {
					englishName: '',
					chineseName: '',
					type: 1,
					selectValues: null,
					required: 1,
					value: ''
				},
				extForm: [],
				formTypeOptions: [{
					value: '1',
					label: '输入框'
				}, {
					value: '2',
					label: '单选框'
				}, {
					value: '3',
					label: '多选框'
				}, {
					value: '4',
					label: '单图片'
				}, {
					value: '5',
					label: '多图片'
				}],
				formTypeIndex:0,
				editIndex:-1
			}
		},
		onLoad(options) {
			let pages = getCurrentPages(); //获取所有页面栈实例列表
			let prevPage = pages[pages.length - 2]; //上一页页面实例
			if(prevPage.$vm.extForm){
				this.extForm = JSON.parse(prevPage.$vm.extForm);
			}
		},
		onShow() {

		},
		methods: {
			showPop() {
				this.isShowPop = true;
				this.popBottom = 0;
			},
			hidePop() {
				this.editIndex = -1
				this.isShowPop = false;
				this.popBottom = '-100%';
				this.clearPop()
			},
			clearPop(){
				this.editIndex = -1
				this.formTypeIndex = 0
				this.addObj = {
					englishName: '',
					chineseName: '',
					type: 1,
					selectValues: null,
					required: 1,
					value: ''
				}
			},
			confirmPop(){
				if(!this.addObj.chineseName) return req.msg('请输入名称')
				if(!this.addObj.englishName) return req.msg('请输入字段名')
				if(!this.addObj.type) return req.msg('请选择字段类型')
				if(this.addObj.selectValues) {
					for(let i=0;i<this.addObj.selectValues.length;i++){
						if(!this.addObj.selectValues[i].name) return req.msg('请输入选项值')
					}
				}
				console.log(this.addObj)
				if(this.editIndex>-1){
					this.extForm[this.editIndex] = this.addObj
				}else{
					this.extForm.push(this.addObj)
				}
				console.log(this.addObj)
				this.hidePop()
			},
			editItem(index){
				this.editIndex = index
				this.addObj = JSON.parse(JSON.stringify(this.extForm[index]))
				this.formTypeIndex = this.formTypeOptions.findIndex(item=>item.value==this.extForm[index].type)
				this.showPop()
			},
			removeItem(index){
				this.extForm.splice(index,1)
			},
			changeType(e) {
				console.log(e)
				let index = e.detail.value
				this.formTypeIndex = index
				this.addObj.type = this.formTypeOptions[index].value
				if (this.formTypeOptions[index].value == 2 || this.formTypeOptions[index].value == 3) {
					this.addObj.selectValues = [{name:''}]
				} else {
					this.addObj.selectValues = null
				}
				console.log(this.addObj)
				this.addObj = JSON.parse(JSON.stringify(this.addObj))
			},
			addOption(){
				this.addObj.selectValues.push({name:''})
				this.addObj = JSON.parse(JSON.stringify(this.addObj))
			},
			removeOption(index){
				console.log(this.addObj.selectValues,index)
				this.addObj.selectValues.splice(index,1)
			},
			requiredChange(e){
				this.addObj.required = e.detail.value?1:0
			},
			save(){
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2];
				prevPage.$vm.extForm = this.extForm&&this.extForm.length>0?JSON.stringify(this.extForm):'';
				uni.navigateBack({
					delta: 1
				});
			}
		},
		mounted() {},
	}
</script>

<style>
	@import "./addForm.css";
</style>