shuju_ui/qs_zhaoshang/components/addclue/first.vue

<template>
	<view>
		<uni-forms class='inform'  ref="form" :rules="rules" :value="datainfo">
			<view class="info_tit">基本信息</view>
			<uni-forms-item name="sbdw" style='margin-bottom: 0;'>
			 <view class="flexc infolist">
			  	<view class="f16 fw c34 flex0 pr pl12"><text class="cir">*</text>上报单位</view>
			  	<input  placeholder="请输入上报单位" v-model="datainfo.sbdw"   class="f16  c34 flex1 txr"/>
			  </view>
			</uni-forms-item>
			<uni-forms-item name="tbrq" style='margin-bottom: 0;'>
			 <view class="flexc infolist">
			  	<view class="f16 fw c34 flex0 pr pl12"><text class="cir">*</text>填表日期</view>
			  	<picker mode="date" :value="datainfo.tbrq" class="infolist_a" @change='bindDateChange'>
					<view :class="datainfo.tbrq?'':'f16 co80'">{{datainfo.tbrq||"请选择填表日期"}}</view>
			  	</picker>
			  </view>
			</uni-forms-item>
			<uni-forms-item name="zszxfzr" style='margin-bottom: 0;'>
			 <view class="flexc infolist">
			  	<view class="f16 fw c34 flex0 pr pl12"><text class="cir">*</text>项目负责人</view>
			  	<input  placeholder="请输入项目负责人姓名" v-model="datainfo.zszxfzr"   class="f16  c34 flex1 txr"/>
			  </view>
			</uni-forms-item>
			<view class="info_tit">投资方信息</view>
			<uni-forms-item name="ziranren" style='margin-bottom: 0;'>
			 <view class="flexc infolist">
				 <view class="flexc infolist_add" @click="getAdd">
					 <image :src="addimg"></image>
					 <view>新增企业/自然人</view>
				 </view>
			  	<view class="f16 fw c34 flex0 pr pl12"><text class="cir">*</text>添加企业/自然人</view>
				<view class="flex1 txr flexc">
					<text class="uni-calendar__header-text" v-if="datainfo.sbdw">{{datainfo.sbdw}}</text>
					<text class="f16 co80" v-else>请先选择添加企业/自然人</text>
					<image :src="delimg" class="delimg"></image>
				</view>
			  </view>
			</uni-forms-item>
			<uni-forms-item name="tzrxm" style='margin-bottom: 0;'>
			 <view class="flexc infolist">
			  	<view class="f16 fw c34 flex0 pr pl12"><text class="cir">*</text>投资人姓名</view>
			  	<input  placeholder="请输入投资人姓名" v-model="datainfo.tzrxm"  class="f16  c34 flex1 txr"/>
			  </view>
			</uni-forms-item>
			<uni-forms-item name="tzrzw" style='margin-bottom: 0;'>
			 <view class="flexc infolist">
			  	<view class="f16 fw c34 flex0 pr pl12">投资人职务</view>
			  	<input  placeholder="请输入投资人职务" v-model="datainfo.tzrzw"  class="f16  c34 flex1 txr"/>
			  </view>
			</uni-forms-item>
			<uni-forms-item name="tzrdh" style='margin-bottom: 0;'>
			 <view class="flexc infolist">
			  	<view class="f16 fw c34 flex0 pr pl12">联系方式</view>
			  	<input  placeholder="请输入联系方式" v-model="datainfo.tzrdh"  class="f16  c34 flex1 txr"/>
			  </view>
			</uni-forms-item>
			<uni-forms-item name="gtzzrsfzhm" style='margin-bottom: 0;'>
			 <view class="flexc infolist">
			  	<view class="f16 fw c34 flex0 pr pl12">身份证号</view>
			  	<input  placeholder="请输入个体投资人身份证号" v-model="datainfo.gtzzrsfzhm"  class="f16  c34 flex1 txr"/>
			  </view>
			</uni-forms-item>
			<uni-forms-item name="qytzrxyzdm" style='margin-bottom: 0;'>
			 <view class="flexc infolist">
			  	<view class="f16 fw c34 flex0 pr pl12">信用证代码</view>
			  	<input  placeholder="请输入企业投资人信用证代码" v-model="datainfo.qytzrxyzdm"   class="f16  c34 flex1 txr"/>
			  </view>
			</uni-forms-item>
			
		</uni-forms>
		<view class="infobtn flexcc cf f16 f500" @click="getNext">下一步</view>
		<!-- 弹框 -->
		<view class="bgbox" @click="getClose" v-if="addflag"></view>
		<view class="fixedbox" v-if="addflag">
			<image :src="closeimg" class="choseimg" @click="getClose"></image>
			<view class="top">添加信息</view>
			<view  class="boxs">
				<view class="mb30">
					<view class="flexc">
						<view class="flexcc boxcen" :class="shenflag?'act':''" @click="shenflag=true">
							<image :src="gcheckimg" v-if="shenflag"></image>
							<image :src="checknimg" v-else></image>
							<view :class="shenflag?'co28':''">添加企业</view>
						</view>
						<view class="flexcc boxcen" :class="shenflag?'':'act'" @click="shenflag=false">
							<image :src="checknimg" v-if="shenflag"></image>
							<image :src="gcheckimg" v-else></image>
							<view :class="shenflag?'':'co28'">添加自然人</view>
						</view>
					</view>
				</view>
				<!-- 企业 -->
				<uni-forms ref="qiform" :rules="qirules" :value="qiinfo" v-if="shenflag">
					<uni-forms-item name="companyName" style='margin-bottom: 0;'>
					 <view class="flexc infolist">
					  	<view class="f16 fw c34 flex0 pr pl12"><text class="cir">*</text>企业名称</view>
					  	<input  placeholder="请输入企业名称" v-model="qiinfo.companyName"  class="f16  c34 flex1 txr"/>
					  </view>
					</uni-forms-item>
					<uni-forms-item name="companyAddress" style='margin-bottom: 0;'>
					 <view class="flexc infolist">
					  	<view class="f16 fw c34 flex0 pr pl12"><text class="cir">*</text>企业所在地</view>
					  	<input  placeholder="请输入企业所在地" v-model="qiinfo.companyAddress"  class="f16  c34 flex1 txr"/>
					  </view>
					</uni-forms-item>
					<uni-forms-item name="companyLegal" style='margin-bottom: 0;'>
					 <view class="flexc infolist">
					  	<view class="f16 fw c34 flex0 pr pl12"><text class="cir">*</text>法人代表姓名</view>
					  	<input  placeholder="请输入法人代表姓名" v-model="qiinfo.companyLegal" class="f16  c34 flex1 txr"/>
					  </view>
					</uni-forms-item>
					<uni-forms-item name="companyCode" style='margin-bottom: 0;'>
					 <view class="flexc infolist">
					  	<view class="f16 fw c34 flex0 pr pl12"><text class="cir">*</text>统一社会信用代码</view>
					  	<input  placeholder="请输入统一社会信用代码" v-model="qiinfo.companyCode" class="f16  c34 flex1 txr"/>
					  </view>
					</uni-forms-item>
					<uni-forms-item name="phone" style='margin-bottom: 0;'>
					 <view class="flexc infolist">
					  	<view class="f16 fw c34 flex0 pr pl12"><text class="cir">*</text>联系方式</view>
					  	<input  placeholder="请输入联系方式" v-model="qiinfo.phone"  class="f16  c34 flex1 txr"/>
					  </view>
					</uni-forms-item>
					
				</uni-forms>
				<!-- 自然人 -->
				<uni-forms ref="ziform" :rules="zirules" :value="ziinfo" v-else>
					<uni-forms-item name="idcode" style='margin-bottom: 0;'>
					 <view class="flexc infolist">
					  	<view class="f16 fw c34 flex0 pr pl12">身份证号码</view>
					  	<input  placeholder="请输入身份证号码" v-model="ziinfo.idcode"  class="f16  c34 flex1 txr"/>
					  </view>
					</uni-forms-item>
					<uni-forms-item name="name" style='margin-bottom: 0;'>
					 <view class="flexc infolist">
					  	<view class="f16 fw c34 flex0 pr pl12"><text class="cir">*</text>姓名</view>
					  	<input  placeholder="请输入姓名" v-model="ziinfo.name"  class="f16  c34 flex1 txr"/>
					  </view>
					</uni-forms-item>
					<uni-forms-item name="address" style='margin-bottom: 0;'>
					 <view class="flexc infolist">
					  	<view class="f16 fw c34 flex0 pr pl12"><text class="cir">*</text>自然人所在地</view>
					  	<input  placeholder="请输入自然人所在地" v-model="ziinfo.address"  class="f16  c34 flex1 txr"/>
					  </view>
					</uni-forms-item>
					<uni-forms-item name="phone" style='margin-bottom: 0;'>
					 <view class="flexc infolist">
					  	<view class="f16 fw c34 flex0 pr pl12"><text class="cir">*</text>联系方式</view>
					  	<input  placeholder="请输入联系方式" v-model="ziinfo.phone"  class="f16  c34 flex1 txr"/>
					  </view>
					</uni-forms-item>
					
				</uni-forms>
			</view>
			<view class="fixedbtn" @click="getyjSubmit">确认</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				datainfo:{
					sbdw:'',
					tbrq:'',
					zszxfzr:'',
					tzrxm:'',
					tzrzw:'',
					tzrdh:'',
					gtzzrsfzhm:'',
					qytzrxyzdm:'',
				},
				qiinfo:{
					companyName:'',
					companyAddress:'',
					companyLegal:'',
					companyCode:'',
					phone:'',
				},
				ziinfo:{
					name:'',
					address:'',
					idcode:'',
					phone:'',
				},
				addflag:false,
				shenflag:true,
				addimg:require("@/static/images/mine/add.png"),
				delimg:require("@/static/images/mine/del.png"),
				checknimg:require("@/static/images/mine/jnicon.png"),
				gcheckimg:require("@/static/images/mine/jicon.png"),
				closeimg:require('@/static/images/close.png'),
				rules: {
				  sbdw: {rules: [{required: true,errorMessage: '请输入上报单位'}]},
				  tbrq: {rules: [{required: true,errorMessage: '请选择填表日期',}]},
				  zszxfzr: {rules: [{required: true,errorMessage: '请输入项目负责人姓名' } ]},
				  tzrxm: {rules: [{required: true,errorMessage: '请输入投资人姓名'} ]},
				},
				qirules:{
					companyName: {rules: [{required: true,errorMessage: '请输入企业名称'}]},
					companyAddress: {rules: [{required: true,errorMessage: '请输入企业所在地'}]},
					companyLegal: {rules: [{required: true,errorMessage: '请输入法人代表姓名'}]},
					companyCode: {rules: [{required: true,errorMessage: '请输入统一社会信用代码'}]},
					phone: {rules: [{required: true,errorMessage: '请输入联系方式'}]},
				},
				zirules:{
					name: {rules: [{required: true,errorMessage: '请输入姓名'}]},
					address: {rules: [{required: true,errorMessage: '请输入自然人所在地'}]},
					phone: {rules: [{required: true,errorMessage: '请输入联系方式'}]},
				}
			}
		},
		mounted() {
			//  {
			//   pattern:  /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
			//   message: '身份证格式错误',
			//   trigger: 'blur'
			// }
			
		},
		methods:{
			bindDateChange(e) {
				
				this.datainfo.tbrq = e.detail.value
			},
			getClose(){
				this.addflag=false
			},
			getAdd(){
				this.addflag=true;
			},
			getNext(){
				
				this.$emit("getNext")
				// this.$refs.form.validate().then(res => {
				// })
			}
		}
	}
</script>

<style lang="scss" scoped>
 .inform{padding-top: 30rpx; padding-bottom: 160rpx;}
  .infolist{padding: 30rpx 32rpx 30rpx 24rpx;position: relative;
	.cir{position: absolute;font-size: 36rpx;font-weight: bold;color: #FE5706;left: 0rpx;}
	.delimg{width: 30rpx;height:30rpx;margin-left: 8rpx;}
  }
  .infobtn{width: 100%;height: 88rpx;background: #FA5F03;line-height: 88rpx;position: fixed;left: 0;right: 0;bottom: 0;z-index: 3;}
  .input_ye image{width: 34rpx;height: 18rpx;}
.info_tit{font-size: 32rpx;color: #FE5706;padding: 30rpx 26rpx;font-weight: bold;}
.infolist_a{height: 44rpx;flex: 1;text-align: right;font-size: 32rpx;color: #343434;}
.infolist_add{position: absolute;right: 0;top: -40rpx;font-size: 28rpx;color: #41C942;padding-right: 30rpx;
	image{width: 30rpx;height: 30rpx;margin-right: 20rpx;}
}

// // 弹窗
.fixedbox{position: fixed;left:24rpx;right: 24rpx;background: #fff;border-radius: 10rpx;min-height: 468rpx;top: 50%;transform: translateY(-60%);z-index: 20;padding: 48rpx 36rpx 68rpx;max-height: calc(100vh - 200rpx);overflow: auto;box-sizing: border-box;
.infolist{padding:24rpx 0 24rpx 0;}
.choseimg{width: 34rpx;height: 34rpx;position: absolute;left: 36rpx;top: 54rpx;z-index: 22;}
.chebox{position: absolute;right: 36rpx;top:54rpx;display: flex;align-items: center;
	image{width: 30rpx;height: 32rpx;margin-right: 12rpx;}
	view{font-size: 32rpx;font-weight: 500;color: #F13800;;}
}
.top{position: relative;text-align: center;font-size: 32rpx;font-weight: bold;color: #343434;}
.boxs{padding: 60rpx 0;
	.box{display: flex;align-items: center;min-height:100rpx;}
	.boxcen{flex:1;
		&.act{
			view{color: #FF6400;}
		}
		image{width: 32rpx;height: 32rpx;margin-right: 20rpx;}
		view{font-size: 32rpx;font-weight: 500;
color: #666666;}
	}
	

}
.fixedbtn{width:100%;height: 80rpx;background: #FF6400;
border-radius: 10rpx;display: flex;align-items: center;justify-content: center;font-size: 32rpx;font-weight: bold;color: #FFFFFF;
	&.btn1{background-color: #20ACCF;margin-bottom: 36rpx;}
	}
}
 .inform /deep/ .uni-forms-item__error{margin-top: -30rpx;margin-left: 24rpx;}
</style>