informationcollection/pages/forms/forms.vue

<template>
	<view class="container">
		<uni-card :is-shadow="false" is-full class="top"></uni-card>
		<!-- <image class="image" src="../../static/banner.png" mode="heightFix" ></image> -->
		<view >
			<uni-forms ref="form"  :rules="rules" :model="baseFormData" labelWidth="130px" class="form">
				<uni-forms-item label="姓名" name="customerName" required>
					<uni-easyinput :clearable="false" :inputBorder="false" v-model="baseFormData.customerName" maxlength="20" placeholder="请输入姓名" />
				</uni-forms-item>
				<uni-forms-item label="联系电话" name="telephone" required>
					<uni-easyinput :clearable="false" maxlength="11" :inputBorder="false" type="number" v-model="baseFormData.telephone" placeholder="请填写能联系到您的电话" />
				</uni-forms-item>
				<uni-forms-item label="职务">
					<uni-easyinput :clearable="false" :inputBorder="false" v-model="baseFormData.duties" maxlength="20" placeholder="请输入职务" />
				</uni-forms-item>
				<uni-forms-item label="公司/牧场名称" required name="company">
					<uni-easyinput :clearable="false" maxlength="20" :inputBorder="false" v-model="baseFormData.company" placeholder="请输入公司/牧场名称" />
				</uni-forms-item>
				<uni-forms-item label="畜牧类别" required name="cowTypeId">
					<uni-data-select :clear="false" :key="baseFormData.cowTypeId" v-model="baseFormData.cowTypeId" :localdata="animalType" placeholder="请选择"  @change="changeCowType"></uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="所在地区" required name="region">
					<view class="input selectcity" @tap="openPicker">
						<uni-easyinput :clearable="false"  :inputBorder="false" v-model="baseFormData.region" placeholder="省市区县、乡镇等" @focus="heidden" />
					</view>
				</uni-forms-item>
				<uni-forms-item label="详细地址">
					<uni-easyinput :clearable="false" maxlength="60" type="textarea" :inputBorder="false" v-model="baseFormData.address" placeholder="街道、门牌号等" />
				</uni-forms-item>
				<uni-forms-item label="存栏">
					<uni-easyinput :clearable="false" maxlength="20" :inputBorder="false" v-model="baseFormData.cowCount" placeholder="请输入存栏" type="number" />
				</uni-forms-item>
				<uni-forms-item label="需求" required name="demandId">
					<uni-data-select  :clear="false" v-model="baseFormData.demandId" :localdata="demandList" placeholder="请选择" @change="changedDmand"></uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="备注">
					<uni-easyinput :clearable="false" maxlength="320" type="textarea" :inputBorder="false" v-model="baseFormData.remark" placeholder="请填写您其他特别说明" />
				</uni-forms-item>
			</uni-forms>
			<view class="tip">以上信息只用于联系到您，不做其他任何用途，请放心填写</view>
			<view class="btn">
				<button type="primary" @click="submit">提交</button>
			</view>
		</view>
		<cc-selectDity :show="show" @sureSelectArea="onsetCity" @hideShow="onhideShow"></cc-selectDity>
	</view>
</template>

<script>
	import utils from "../../utils/utils.js"
	export default {
		data() {
			return {
				baseFormData: {
					customerName: '',telephone: '',duties: '',company: '',cowTypeId: '',region: '',address: '',cowCount: '',demandId: '',remark: ''
				},
				animalType:[],
				demandList:[],
				show: false,
				isShow: true,
				rules:{
					customerName: {
						rules: [{
							required: true,
							errorMessage: '请输入姓名',
						}]
					},
					company:{
						rules:[{
							required: true,
							errorMessage: '请输入公司/牧场名称',
						}]
					},
					region:{
						rules:[{
							required: true,
							errorMessage: '请选择所在地区',
						}]
					},
					cowTypeId:{
						rules:[{
							required: true,
							errorMessage: '请选择畜牧类别',
						}]
					},
					demandId:{
						rules:[{
							required: true,
							errorMessage: '请选择需求',
						}]
					},
					
					telephone:{
						rules: [{
								required: true,
								errorMessage: '请填写能联系到您的电话',
							},
							{
								pattern:'(^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$)',
								errorMessage: '请输入正确的手机号',
							}
						]
						
					}
				}
			}
		},
		
		onLoad() {
			this.get_animalTypeList()
		},
		onReady() {
			// 设置自定义表单校验规则，必须在节点渲染完毕后执行
			// this.$refs.customForm.setRules(this.customRules)
		},
		methods: {
			heidden(){
				 var interval = setInterval(function(){
					uni.hideKeyboard();//隐藏软键盘
					console.log('刷新')
				},60);
					setTimeout(() => {
					clearInterval(interval);
					console.log('停止刷新')
				},2000); 
			},
			get_animalTypeList(){
			  let url = 'GetDataByNameOther'
			  let data = {
			    name:'getDictListSelect',
			    parammaps:{
			      pid:73
			    }
			  }
			  utils.postJson(url, utils.combineFromParamForNull(data)).then((res)=> {
			  	if (res.data.list !== null) {
			  	  this.animalType = res.data.list
			  	  for(var i=0;i<this.animalType.length;i++){
			  	  	this.animalType[i].text = this.animalType[i].name;
			  	  	this.animalType[i].value = this.animalType[i].id;
			  	  }
			  	} else {
			  	  this.animalType = []
			  	}
				console.log(this.animalType,'this.animalType')
			  })
			},
			changeCowType(item){
				this.baseFormData.cowTypeId = item
				if(this.baseFormData.cowTypeId !== ''){
					this.get_demandList()
				}
			},
			changedDmand(item){
				this.baseFormData.demandId = item
			},
			get_demandList(){
			  let url = 'GetDataByNameOther'
			  let data = {
			    name:'getDemandByCowTypeId',
			    parammaps:{
			      cowTypeId:this.baseFormData.cowTypeId
			    }
			  }
			  utils.postJson(url, utils.combineFromParamForNull(data)).then((res)=> {
			  	if (res.data.list !== null) {
			  	  this.demandList = res.data.list
				  for(var i=0;i<this.demandList.length;i++){
				  	this.demandList[i].text = this.demandList[i].name;
				  	this.demandList[i].value = this.demandList[i].id;
				  }
			  	} else {
			  	  this.demandList = []
			  	}
			  })
			},
			openPicker() {
				console.log('执行打开地址选择器')
				this.show = true
			},
			
			onhideShow() {
				this.show = false
				console.log('执行了关闭地址选择器')
			},
			//选中省市区
			onsetCity(e) {
				let data = e.detail.target.dataset;
				let region = data.province + data.city + data.area;
				this.show = false
				this.baseFormData.region = region
			},
			submit(){
				// uni.navigateTo({
				//     url:'/pages/submit/submit'
				// });
				
				this.$refs.form.validate().then(res=>{
					console.log('表单数据信息：', res);
					let url = "PostDataByNameOther"
					let data = {
						name:'insertCustomerinfo',
						parammaps:{
							customerName:this.baseFormData.customerName,
							telephone:this.baseFormData.telephone,
							duties:this.baseFormData.duties,
							company:this.baseFormData.company,
							cowTypeId:this.baseFormData.cowTypeId,
							region:this.baseFormData.region,
							address:this.baseFormData.address,
							cowCount:this.baseFormData.cowCount,
							demandId:this.baseFormData.demandId,
							remark:this.baseFormData.remark
						}
					}
					// data.parammaps = this.baseFormData
					utils.postJson(url, utils.combineFromParamForNull(data)).then((res)=> {
						if(res.msg == 'ok'){
							uni.navigateTo({
							    url:'/pages/submit/submit'
							});
						}else{
							uni.showToast({
								title:'提交失败',
								duration: 2000
							})
						}
					})
				}).catch(err =>{
					console.log('表单错误信息：', err);
					uni.showToast({
						title:err[0].errorMessage,
						duration: 2000
					})
				})
				
			},
		}
	}
</script>

<style lang="scss">
	// .image{
	// 	height: 300rpx;
	// }
	.top{
		height: 300rpx;
		background: url(../../static/banner.png) no-repeat;
		background-size: auto 100%;
	}
	.form{
		background: #fff;
	}
	.uni-forms-item{
		border-bottom: 1px solid #ccc;
		padding-left: 20rpx;
		margin-bottom: 0;
	}
	// .uni-forms-item
	/deep/ .uni-select{
		border: none!important;
	}
	.tip{text-align: center; padding-top: 40rpx;}
	.btn{
		// position: fixed;
		margin-top: 30rpx;
		padding-bottom: 30rpx;
		width: 90%;
		margin-left: 5%;
	}
	/deep/ .uni-easyinput__content-input{
		height: 90rpx;
		font-size: 32rpx;
	}
	/deep/ .uni-forms-item__label{
		height: 90rpx;
		font-size: 32rpx;
	}
	/deep/ .uni-easyinput__placeholder-class{
		font-size: 32rpx;
	}
	/deep/ .uni-select__input-placeholder{
		font-size: 32rpx;
	}
	/deep/ .uni-select{
		height: 90rpx;
		font-size: 32rpx;
	}
	/deep/ .uni-forms-item__error.msg--active{
		opacity: 0;
	}
	.uni-select__input-placeholder{
		padding-left: 30rpx;
	}
	/deep/ .uni-textarea-placeholder{
		padding-left:24rpx
	}
	/deep/ .uni-textarea-textarea{
		padding-left:24rpx;
		font-size: 32rpx;
	}
</style>