shuju_ui/qs_zhaoshang/components/addclue/second.vue

<template>
	<view>
		<uni-forms class='inform'  ref="form" :rules="rules" :value="datainfo">
			<view class="info_tit">项目信息</view>
			<uni-forms-item name="xmbh" style='margin-bottom: 0;'>
			 <view class="flexc infolist">
			  	<view class="f16 fw c34 flex0 pr pl12">项目编号</view>
			  	<input  placeholder="请输入项目编号" v-model="datainfo.xmbh"   class="f16  c34 flex1 txr"/>
			  </view>
			</uni-forms-item>
			<uni-forms-item name="xmxsmc" 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.xmxsmc"    class="f16  c34 flex1 txr"/>
			  </view>
			</uni-forms-item>
			<uni-forms-item name="sfwlhxxxm" style='margin-bottom: 0;'>
			 <view class="flexc infolist">
			  	<view class="f16 fw c34 flex0 pr pl12"><text class="cir">*</text>是否为领航信息项目</view>
				<picker  range-key='label' :value="lhindex" :range="lhlist" class="infolist_a" @change='bindDateChangea'>
					<view :class="datainfo.sfwlhxxxm?'':'f16 co80'">{{datainfo.sfwlhxxxm||"请选择是否为领航信息"}}</view>
				</picker>
			  </view>
			</uni-forms-item>
			<uni-forms-item name="yzssName" 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.yzssName"    class="f16  c34 flex1 txr"/>
			  </view>
			</uni-forms-item>
			<uni-forms-item name="ntze" 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.ntze"  class="f16  c34 flex1 txr"/>
			  </view>
			</uni-forms-item>
			<uni-forms-item name="cylxName" style='margin-bottom: 0;'>
			 <view class="flexc infolist">
			  	<view class="f16 fw c34 flex0 pr pl12"><text class="cir">*</text>产业类型</view>
				<picker  range-key='label' :value="cyindex" :range="cylist" class="infolist_a" @change='bindDateChangeb'>
					<view :class="datainfo.cylxName?'':'f16 co80'">{{datainfo.cylxName||"请选择产业类型"}}</view>
				</picker>
			  </view>
			</uni-forms-item>
			<uni-forms-item name="xmlb" style='margin-bottom: 0;'>
			 <view class="flexc infolist">
			  	<view class="f16 fw c34 flex0 pr pl12"><text class="cir">*</text>项目类别</view>
				<!-- 多选 -->
				<view :class="datainfo.xmlb?'infolist_a':'flex1 txr f16 co80'" @click="getMoreFn(0)">{{datainfo.xmlb||"请选择项目类别"}}</view>
			  </view>
			</uni-forms-item>
			<uni-forms-item name="nlhd" style='margin-bottom: 0;'>
			 <view class="flexc infolist">
			  	<view class="f16 fw c34 flex0 pr pl12"><text class="cir">*</text>拟落户地</view>
				<picker  range-key='label' :value="cyindex" :range="cylist" class="infolist_a" @change='bindDateChangec'>
					<view :class="datainfo.nlhd?'':'f16 co80'">{{datainfo.nlhd||"请选择拟落户地"}}</view>
				</picker>
			  </view>
			</uni-forms-item>
			<uni-forms-item name="xmjj" 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.xmjj"   class="f16  c34 flex1 txr"/>
			  </view>
			</uni-forms-item>
			<uni-forms-item name="qybj" style='margin-bottom: 0;'>
			 <view class="flexc infolist">
			  	<view class="f16 fw c34 flex0 pr pl12"><text class="cir">*</text>企业背景</view>
				<view :class="datainfo.qybj?'infolist_a':'flex1 txr f16 co80'" @click="getMoreFn(0)">{{datainfo.qybj||"请选择企业背景"}}</view>
			  </view>
			</uni-forms-item>
		</uni-forms>
		<view class="infobtn flexcc cf f16 f500" @click="getNext">下一步</view>
		<!-- 弹框 -->
		<view class="bgbox" @click="getClose" v-if="tanfalg"></view>
		<view class="fixedbox"  v-if="tanfalg">
			<image :src="closeimg" class="choseimg" @click="getClose"></image>
			<view class="top">企业背景</view>
			<view class="boxs">
				<uni-data-checkbox :map="map" multiple v-model="qybgvalue" :localdata="qybglist" ></uni-data-checkbox>
			</view>
			<view class="fixedbtn" @click="roleSure">确认</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				datainfo:{
					xmbh:'',
					xmxsmc:'',
					sfwlhxxxm:'',
					yzssName:'',
					ntze:'',
					cylxId:'',
					cylxName:'',
					xmlb:'',
					nlhd:'',
					xmjj:'',
					qybj:'',
				},
				tanfalg:false,
				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: {
				  xmxsmc: {rules: [{required: true,errorMessage: '请输入项目线索名称'}]},
				  sfwlhxxxm: {rules: [{required: true,errorMessage: '请选择是否为领航信息',}]},
				  yzssName: {rules: [{required: true,errorMessage: '请输入引资省市' } ]},
				  ntze: {rules: [{required: true,errorMessage: '请输入拟投资额'} ]},
				  cylxName: {rules: [{required: true,errorMessage: '请选择产业类型'} ]},
				  xmlb: {rules: [{required: true,errorMessage: '请选择项目类别'} ]},
				  nlhd: {rules: [{required: true,errorMessage: '请选择拟落户地'} ]},
				  xmjj: {rules: [{required: true,errorMessage: '请输入项目简介'} ]},
				  qybj: {rules: [{required: true,errorMessage: '请选择企业背景'} ]},
				  
				},
				lhindex:0,
				lhlist:[{label:'是',id:'Y'},{label:'否',id:'N'},],//领航
				cyindex:0,
				cylist:[{label:'是',id:'Y'},{label:'否',id:'N'}],
				map:{text:'label',value:'id'},
				qybglist:[{label:'500强企业',id:1},{label:'上市部门',id:2},{label:'行业100强',id:3},{label:'头部企业',id:4}]
				
			}
		},
		mounted() {
			
		},
		methods:{
			// 领航
			bindDateChangea(e) {
				var val=e.detail.value;
				this.datainfo.sfwlhxxxm=this.lhlist[val].label
			},
			// 产业类型
			bindDateChangeb(e) {
				var val=e.detail.value;
				this.datainfo.sfwlhxxxm=this.lhlist[val].label
			},
			// 多选
			getMoreFn(idx){
				this.tanfalg=true
			},
			getClose(){
				this.tanfalg=false
			},
			getAdd(){
				this.tanfalg=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;}
// 弹窗

// .fixedbox  /deep/ .uni-data-checklist .checklist-group .checklist-box{padding: 44rpx 0;border-bottom: 2rpx solid  #E5E5E5;margin: 0;
//   &:last-of-type{border-bottom: none;}}
.fixedbox   /deep/ .uni-data-checklist .checklist-group .checklist-box{margin-right: 30rpx;padding: 4rpx 0;}
.fixedbox   /deep/ .uni-data-checklist .checklist-group .checklist-box .checklist-text{color: #343434;font-size: 30rpx;}
// .fixedbox   /deep/ .uni-data-checklist .checklist-group .checklist-box .checkbox__inner{margin-right: 40rpx;}
.fixedbox    /deep/ .uni-data-checklist .checklist-group .checklist-box.is--default.is-checked .checkbox__inner{border-color: #FF440B; background-color: #FF440B;}
.fixedbox   /deep/ .uni-data-checklist .checklist-group .checklist-box.is--default.is-checked .checklist-text{color: #343434;}
 

.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;}
.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;}
}
.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>