edu-uniapp/components/userInfo/active_form.vue

<template>
	<view class="form-container">
		<view class="form-box" >
			<block v-for="(item,index) in formDate" :key="item.rules.name">
				<!-- 单行文本框 -->
				<view class='line' v-if="item.type=='text' || item.type=='number' || item.type=='password'">
					<view :class="item.rules.verify.indexOf('req')!=-1 ? 'line-left' :'p-l14 line-left' "><text class='colorRed' v-if="item.rules.verify.indexOf('req')!=-1">*</text>{{item.label}}</view>					
					<!-- 发送验证码 -->
					<view class="line-right send-code-box" v-if="item.rules.name=='yzm'">
						<input :type="item.type" class="input" placeholder-class="plaClass" :placeholder='item.placeholder' v-model="item.rules.value" @input="inputVal(index)"></input>
						<view class="send-code" @click="sendCode()" :style="sendColor">{{codeFont}}</view>
					</view>
					<!-- 普通输入框 -->
					<view class="line-right" v-else>
						<input :type="item.type" class="input" placeholder-class="plaClass" :placeholder='item.placeholder' v-model="item.rules.value" @input="inputVal(index)"></input>
					</view>	
				</view>
				<!-- 下拉选择-->
				<view class='line' v-else-if="item.type=='radio'">
					<view :class="item.rules.verify.indexOf('req')!=-1 ? 'line-left' :'p-l14 line-left' "><text class='colorRed' v-if="item.rules.verify.indexOf('req')!=-1">*</text>{{item.label}}</view>				
					<view  class="line-right">
						<input type="text" class="input" placeholder-class="plaClass" :placeholder='item.placeholder' v-model="item.rules.value"
						 @click="selectInput(index)"></input>
						<view class="select-icon"> </view>
					</view>
				</view>
				<!-- 多行文本框 -->
				<view class="textarea-box" v-else-if="item.type=='textarea'">
					<view :class="item.rules.verify.indexOf('req')!=-1 ? '' :'p-l14 ' "><text class='colorRed' v-if="item.rules.verify.indexOf('req')!=-1">*</text>{{item.label}}</view>					
					<view class="line-right">
						<textarea rows="" cols=""  placeholder-class="plaClass" :placeholder='item.placeholder' v-model="item.rules.value" @input="inputVal(index)">							
						</textarea>
					</view>
				</view>
				<!-- 上传图片 -->
				<view class="img-box" v-else-if="item.type=='image'">
					<view :class="item.rules.verify.indexOf('req')!=-1 ? 'img-label' :'p-l14 img-label' "><text class='colorRed' v-if="item.rules.verify.indexOf('req')!=-1">*</text>{{item.label}}</view>
					<view class="line-right">
						<view v-if="item.updateImg" class="update-img-box">
							<view class="update-img-box2">
								<img :src="item.rules.value" alt="" mode="aspectFill" class="update-img">
								<img src="/static/img/delete_img.png" alt="" class="close-img" @click="deleteImg(index)">
							</view>							
						</view>
						<view v-if="!item.updateImg" class="update-btn-box">
							<img src="/static/img/update_btn.png" alt="" mode="aspectFill" @click="chooseImage(index)">							
						</view>							
					</view>
				</view>				
			</block>								
		</view>
		<view class="select-modal" v-if="show">
			<view class="select-bg" @click="cancel"></view>
			<view class="select-box" :animation="animationData">
				<view class="select-title">
					<view class="font32 color-999" @click="cancel">取消</view>
					<view class="font32 color-orange" @click="sure">确定</view>
				</view>
				<view>					
					<block v-for="(item,index) in selectBox" :key="index">
						<view class="select-item" @click="selectItem(item.value,index)">{{item.value}} <i class="select-flag" v-if="item.flag"></i></view>										
					</block>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'activeForm',
		data() {
			return {
				submitData: "",
				show: false,
				animationData: {},
				selectBox:[],
				currentSelectIndex:"",
				currentSelectValue:"",
				codeFont:"获取验证码",
				wait:60,
				isSend:false,
				sendColor:"color:#ff5b01"
			}
		},
		props: {
			formDate:{
				type:Array,
				 default:function(){
					return []
				    }
				}			
		},			
		methods: {	
			//input输入框的值传给父组件
			inputVal:function(index){
				this.$emit("input-val",JSON.stringify({
					val:this.formDate[index].rules.value,
					index:index
				}))	
			},
			// 选择下拉框
			selectInput: function(index) {
				this.selectBox = [];
				this.currentSelectIndex="";
				this.currentSelectValue="";
				this.currentSelectIndex=index;
				for (var i = 0; i < this.formDate[index].selectVal.length; i++) {
					var selectVal = {
						value: this.formDate[index].selectVal[i],
						flag: false
					}
					if (this.formDate[index].selectVal[i] == this.formDate[index].rules.value) { //判断上次选中的那个
						selectVal.flag = true;
					}
					 this.selectBox.push(selectVal)
				}
				this.show = true;
				var animation = uni.createAnimation({
					duration: 300,
					timingFunction: 'ease',
				})
				this.animation = animation;
				animation.bottom("0").step()
				this.animationData = this.animation.export()
				this.$emit("select-input-btn",index);
			},
			// 上传图片
			chooseImage: function(index) {
				var that=this;
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album'],
					success: (res) => {						
						this.$emit("choose-image-btn",JSON.stringify(
							{
								value:res.tempFilePaths[0],
								index:index,						
							}
						))
					},
					fail: (err) => {
						console.log('chooseImage fail', err)						
					}
				
				})
			},
			// 删除图片
			deleteImg:function(index){
				this.$emit("delete-img-btn",index)
			},
			// 取消
			cancel: function() {
				var that = this;
				var animation = uni.createAnimation({
					duration: 300,
					timingFunction: 'ease',
				})
				this.animation = animation;
				animation.bottom("-1000upx").step()
				this.animationData = this.animation.export()
				setTimeout(function() {
					that.show = false;
				}, 200)
			},
			// 确定
			sure: function() {				
				this.$emit("sure-btn",JSON.stringify({
					currentSelectIndex:this.currentSelectIndex,
					currentSelectValue:this.currentSelectValue
				}))				
				console.log(this.formDate)
				this.cancel();
			},
			//选择值
			selectItem: function(value, index) {
				this.currentSelectValue = value;
				for (var i = 0; i < this.selectBox.length; i++) {
					this.$set(this.selectBox[i], "flag", false);
				}
				this.selectBox[index].flag = true;
			},
			// 发送验证码
			sendCode:function(){				
				var that=this;
				var setTime=0;
				if(!that.isSend){
					that.isSend=true;					
					setTime=setInterval(function(){
						that.wait--;
						that.sendColor="color:#999";
						that.codeFont=that.wait+"重新发送";						
						if(that.wait==0){
							clearInterval(setTime);
							that.codeFont="获取验证码";
							that.isSend=false;
							that.wait=60;
							that.sendColor="color:#ff5b01";
						}						
					},1000)
				}
				
			}

		}
	}
</script>

<style lang="scss">
	// 弹框
	.select-modal {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 300000;
		.select-bg{
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.3);
		}
		.select-box {
			position: absolute;
			left: 0;
			bottom: -1000upx;
			width: 100%;
			background: #fff;
			max-height: 50%;
			// height: 0%;
			overflow: auto;
			.select-title {
				display: flex;
				justify-content: space-between;
				height: 80upx;
				background: #f5f5f5;
				line-height: 80upx;
				padding: 0 30upx;
			}
			.select-item {
				font-size: 28upx;
				color: #333;
				border-bottom: 1px solid #eee;
				height: 75upx;
				line-height: 75upx;
				padding: 0 30upx;
				i {
					display: block;
					float: right;
					border-bottom: 4upx solid #1ca032;
					border-right: 4upx solid #1ca032;
					width: 12upx;
					height: 26upx;
					transform: rotate(45deg);
					margin-top: 24.5upx;
				}
			}
		}
		@keyframes mymove {
			0% {
				max-height: 10%;
			}

			100% {
				max-height: 50%;
			}
		}

		/*Safari 和 Chrome:*/
		@-webkit-keyframes mymove {
			0% {
				max-height: 10%;
			}

			100% {
				max-height: 50%;
			}
		}
	}
	// 下拉icon
	.select-icon {
		// display: block;
		float: right;
		border-bottom: 2upx solid #999;
		border-right: 2upx solid #999;
		width: 16upx;
		height: 16upx;
		transform: rotate(-45deg);
		margin-right: 10upx;
	}
	.color-orange {
		color: #ff5b01;
	}
	.color-999 {
		color: #999;
	}
	.font32 {
		font-size: 32upx;
	}
	.plaClass {
		color: #dbdbdb;
	}
	.form-container {
		/* padding: 0 30upx; */
		.form-box {
			width: 100%;
			box-sizing: border-box;
		}
		.colorRed {
			color: red;
		}		
		.img-box {
			border-bottom: 1px solid #ededed;			
			padding: 30upx 0;			
			.update-img-box{
				border: 1px solid #ededed;
				display: flex;
				
				.update-img{
					width: 140upx;
					height: 140upx;
				}
			}
			.update-img-box2{
				overflow: hidden;
				display: flex;
			}
			.update-img-box,.update-btn-box{
				width: 140upx;
				height: 140upx;
				position:relative;
				margin-top: 20upx;
			}
			.update-img-box .close-img{
				width: 40upx;
				height: 40upx;
				position: absolute;
				right: -12upx;
				top: -16upx;
				background:#fff;
				border-radius: 50%;
			}
			img{
				width: 140upx;
				height: 140upx;
				object-fit: cover;
			}	
		}
		.line-right {
			flex: 1;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: relative;
			
		}
		.send-code-box{
			.send-code{
				font-size: 28upx;
				padding: 0;
				white-space: nowrap;
				// width: 60%;
				//color:#ff5b01;
				height: 90upx;
				line-height: 90upx;	
				cursor: pointer;
			}
		}
		.line-left {
			display: flex;
			/* width: 22%; */
			width: 35%;
			align-items: center;
			height: 100%;
			font-size: 28upx;
			color: #333;
			box-sizing: border-box;
		}
		.img-label{
			width: 100%;
			height: 100%;
			font-size: 28upx;
			color: #333;
			box-sizing: border-box;
		}
		.p-l14{
			padding-left: 14upx;
		}
		.textarea-box{
			// display: flex;
			border-bottom: 1px solid #ededed;
			padding-top: 20upx;
			// align-items: center;
			textarea{
				height: 150upx;
				font-size: 28upx;
				color:#333;
				width: 100%;
				margin-top: 20upx;
			}
		}
		.line {
			margin-top: 30upx;
			height: 100upx;
			width: 100%;
			margin: 0 auto;
			border-bottom: 1px solid #ededed;
			display: flex;
			overflow: hidden;
			.input {
				padding-right: 20upx;
				height: 100%;
				width: 100%;
				text-align: left;
				font-size: 28upx;
				color: #333;
				border: none;
				overflow: hidden;
				text-overflow: ellipsis;
				outline: none;
			}
		}		
	}
</style>