veterans_H5/h5_web/pages/authentication/authentication.vue

<template>
	<view>
		<u-form :model="form" ref="uForm" label-width="150">
			<u-form-item label="身份证号" prop="veteIdCard" :required="true" style="margin-bottom: 24rpx;">
				<u-input v-model="form.veteIdCard" @blur="getIdcardData" />
			</u-form-item>
			<u-form-item label="姓名" prop="veteName" :required="true">
				<u-input v-model="form.veteName" />
			</u-form-item>
			<u-form-item label="民族" prop="nation" :required="true" >
				<u-input v-model="form.nation"  />
			</u-form-item>
			<u-form-item label="性别" >
				<u-input v-model="veteSex" placeholder="输入身份证自动获取" disabled />
			</u-form-item>
			<u-form-item label="联系电话" prop="vetePhone" :required="true">
				<u-input v-model="form.vetePhone" maxlength="11" />
			</u-form-item>			
			<u-form-item label="文化程度" prop="degrEduc" :required="true" >
				<u-select v-model="degrEducShow" :list="degrEducList" :default-value="[3]" value-name="text" @confirm="degrEducConfirm"></u-select>
				<u-input v-model="form.degrEduc" placeholder="请选择" disabled="disabled" @click="degrEducShow = true" />
			</u-form-item>
			<u-form-item label="政治面貌" prop="politOutlook"  :required="true" >
				<u-select v-model="politOutlookShow" :list="politOutlookList" value-name="text" @confirm="politOutlookConfirm"></u-select>
				<u-input v-model="form.politOutlook" placeholder="请选择" disabled="disabled" @click="politOutlookShow = true" />
			</u-form-item>
			<u-form-item label="户籍类别" prop="houseType"  :required="true" >
				<u-select v-model="houseTypeShow" :list="houseTypeList" value-name="text" @confirm="houseTypeConfirm"></u-select>
				<u-input v-model="form.houseType" placeholder="请选择" disabled="disabled" @click="houseTypeShow = true" />
			</u-form-item>
			<!-- <u-form-item label="申请人" >
				<u-radio-group v-model="form.veteStatus" @change="veteStatusChange" >
					<u-radio shape="circle" name="1">本人申请</u-radio>
					<u-radio shape="circle" name="2">子女代申请</u-radio>
				</u-radio-group>
			</u-form-item> -->
			<!-- <u-form-item label="出生日期" @click="birthTime = true" >
				<u-input v-model="form.veteDateBirth" placeholder="输入身份证自动获取" disabled />
			</u-form-item> -->
			<!-- <u-form-item label="人员属性" prop="veteAttribute" :required="true">
				<u-checkbox-group @change="checkboxGroupChange" :wrap="false">
					<u-checkbox v-model="item.checked" v-for="(item, index) in checkboxList" :key="index" :name="item.label">{{ item.label }}</u-checkbox>
				</u-checkbox-group>
			</u-form-item> -->
			<!-- <u-form-item label="入伍时间" prop="veteInEnlist" :required="true">
				<u-input type="select"
				:select-open="veteInEnlistShow" v-model="form.veteInEnlist" placeholder="请选择入伍时间" @click="veteInEnlistShow = true"></u-input>
			</u-form-item>
			<u-form-item label="退伍时间" prop="veteOutEnlist" :required="true">
				<u-input type="select"
				:select-open="veteOutEnlistShow" v-model="form.veteOutEnlist" placeholder="请选择入伍时间" @click="veteOutEnlistShow = true"></u-input>
			</u-form-item> -->
			
			<u-form-item label="户籍地" prop="veteHousehRegi" :required="true">
				<u-input type="select" 
				:select-open="regiShow" v-model="form.veteHousehRegi" disabled="disabled" placeholder="请正确选择,否则可能影响使用" @click="regiShow = true"></u-input>
			</u-form-item>
			<u-form-item label="居住地址" prop="veteResiAddress" :required="true">
				<u-input v-model="form.veteResiAddress" placeholder="省市区街道/门牌号" />
			</u-form-item>
			<u-form-item label="qq"  >
				<u-input v-model="form.qqNum" />
			</u-form-item>
			<u-form-item label="微信"  >
				<u-input v-model="form.wxNum" />
			</u-form-item>
			<view class="upload-wrap u-flex u-flex-wrap u-row-left">
				<view class="upload-wrap-title">近期一寸免冠照(必选):</view>
				<!-- <u-upload :action="action"  prop="files1" :show-progress="false" upload-text="身份证人像面" max-count="1" @on-success="files1Success"></u-upload>
				<u-upload :action="action" :show-progress="false" upload-text="身份证国徽面" max-count="1" @on-success="files2Success"></u-upload>
				<u-upload :action="action" :show-progress="false" upload-text="手持身份证" max-count="1" @on-success="files3Success"></u-upload>
				<u-upload :action="action" :show-progress="false" upload-text="户口本" max-count="1" @on-success="files4Success"></u-upload>
				<u-upload :action="action" :show-progress="false" upload-text="退役证" max-count="1" @on-success="files5Success"></u-upload> -->
				<u-upload :action="action" :show-progress="true" upload-text="上传图片" max-count="1" @on-success="files6Success"></u-upload>
			</view>
			<!-- <u-form-item label="身份证人像面" prop="pic" label-width="200" :required="true">
				
			</u-form-item>
			<u-form-item label="身份证国徽面" prop="pic" label-width="200" :required="true">
				
			</u-form-item> -->
		</u-form>
		<u-button class="submit-btn" @click="submit">提交</u-button>
		<u-picker mode="region" v-model="regiShow" :default-region='["贵州省", "贵阳市", "南明区"]' @confirm="regionConfirm"></u-picker>
		<u-picker mode="time" v-model="veteInEnlistShow" @confirm="veteInEnlistConfirm"></u-picker>
		<u-picker mode="time" v-model="veteOutEnlistShow" @confirm="veteOutEnlistConfirm"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			let that = this;
			return {
				action:this.config.uploadUrl,
				birthTime:false,
				regiShow:false,
				veteInEnlistShow:false,
				veteOutEnlistShow:false,
				politOutlookShow:false,
				houseTypeShow:false,
				degrEducShow:false,
				veteSex:'',
				checkboxList:[],
				politOutlookList:[],
				houseTypeList:[],
				degrEducList:[],
				form: {
						veteName: '',
						veteIdCard: '',
						veteDateBirth:'',
						veteSex:'',
						veteStatus:'1',
						veteAttribute:'',
						veteInEnlist:'',
						veteOutEnlist:'',
						vetePhone:'',
						veteHousehRegi:'',
						veteResiAddress:'',
						nation:'',
						qqNum:'',
						wxNum:'',
						degrEduc:'',
						degrEducId:'',
						houseType:'',
						houseTypeId:'',
						politOutlook:'',
						politOutlookId:'',
					files:[]
				},
				rules: {
					veteName: [{
						required: true,
						message: '请输入姓名',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					veteIdCard: [{
						required: true,
						pattern: /(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0[1-9]|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/,
						// 正则检验前先将值转为字符串
						transform(value) {
							return String(value);
						},
						message: '请正确输入身份证号',
						trigger: ['change', 'blur'],
					}],
					veteAttribute:[{
						required: true,
						message: '请输入人员属性',
					}],
					veteInEnlist:[{
						required: true,
						message: '请选择入伍时间',
					}],
					veteOutEnlist:[{
						required: true,
						message: '请选择退伍时间',
					}],
					vetePhone:[{
						pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
						message: '请正确输入手机号',
						required: true,
						trigger: ['change', 'blur'],
					}],
					veteHousehRegi:[{
						required: true,
						message: '请选择户籍',
					}],
					veteResiAddress:[{
						required: true,
						message: '请填写详细地址',
					}],
					nation:[{
						required: true,
						message: '请填写民族',
					}],
					degrEduc:[{
						required: true,
						message: '请选择文化程度',
					}],
					politOutlook:[{
						required: true,
						message: '请选择政治面貌',
					}],
					houseType:[{
						required: true,
						message: '请选择户籍类别',
					}]
				}
			}
		},
		onLoad() {
			this.getVeteAttribute();
			this.getVeteDegrEduc();
			this.getVetePolitOutlook();
			this.getVeteHouseType();
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
			this.form.vetePhone = this.vuex_user.mobile;
		},
		onShow() {
			// 获取已经提交的数据
			// this.getVeteEducData();
		},
		methods: {
			// 获取已经提交的数据
			getVeteEducData(){
				this.$u.api.getVeteEducData().then(res=>{
					console.log('getVeteEducData',res);
					if(res.code == 200){
						for(let key  in res.data.veteEduc) {
							if(key!='files'){
								this.form[key] = res.data.veteEduc[key];
							}
						};
						this.form.files = res.data.files;
					}
					console.log('this.form',this.form);
				});
			},
			// 获取人员属性  
			getVeteAttribute(){
				this.$u.api.getDictdataUrl({key:'vete_attribute'}).then(res=>{
					console.log('getVeteAttribute',res);
					if(res.code == 200){						
						this.checkboxList = res.data;
					}
				});
			},
			// 获取文化程度类别
			getVeteDegrEduc(){
				this.$u.api.getDictdataUrl({key:'degr_educ'}).then(res=>{
					if(res.code == 200){						
						this.degrEducList = res.data;
					}
				});
			},
			degrEducConfirm(e){
				console.log('degrEducConfirm',e);
				this.form.degrEduc = e[0].label;
				this.form.degrEducId = e[0].value;
			},
			// 获取政治面貌类别
			getVetePolitOutlook(){
				this.$u.api.getDictdataUrl({key:'polit_outlook'}).then(res=>{
					if(res.code == 200){						
						this.politOutlookList = res.data;
					}
				});
			},
			politOutlookConfirm(e){
				console.log('politOutlookConfirm',e);
				this.form.politOutlook = e[0].label;
				this.form.politOutlookId = e[0].value;
			},
			// 获取户籍类别
			getVeteHouseType(){
				this.$u.api.getDictdataUrl({key:'house_type'}).then(res=>{
					if(res.code == 200){						
						this.houseTypeList = res.data;
					}
				});
			},
			houseTypeConfirm(e){
				console.log('houseTypeConfirm',e);
				this.form.houseType = e[0].label;
				this.form.houseTypeId = e[0].value;
			},
			// 户籍地区回调
			regionConfirm(e) {
				// console.log('户籍地区回调',e)
				this.form.veteHousehRegi = e.province.label + '-' + e.city.label + '-' + e.area.label;
			},
			files1Success(e){
				this.form.files.push({filesType:1,filesUrl:e.data.url})
			},
			files2Success(e){
				this.form.files.push({filesType:2,filesUrl:e.data.url})
			},
			files3Success(e){
				this.form.files.push({filesType:3,filesUrl:e.data.url})
			},
			files4Success(e){
				this.form.files.push({filesType:4,filesUrl:e.data.url})
			},
			files5Success(e){
				this.form.files.push({filesType:5,filesUrl:e.data.url})
			},
			files6Success(e){
				this.form.files.push({filesType:6,filesUrl:e.data.url})
			},
			//入伍时间 
			veteInEnlistConfirm(e){
				console.log('入伍时间',e)
				this.form.veteInEnlist = `${e.year}-${e.month}-${e.day} 00:00:00`
			},
			//退伍时间 
			veteOutEnlistConfirm(e){
				console.log('退伍时间',e)
				this.form.veteOutEnlist = `${e.year}-${e.month}-${e.day} 00:00:00`
			},
			getIdcardData(){
			   if(!/^\d{6}((?:19|20)((?:\d{2}(?:0[13578]|1[02])(?:0[1-9]|[12]\d|3[01]))|(?:\d{2}(?:0[13456789]|1[012])(?:0[1-9]|[12]\d|30))|(?:\d{2}02(?:0[1-9]|1\d|2[0-8]))|(?:(?:0[48]|[2468][048]|[13579][26])0229)))\d{2}(\d)[xX\d]$/.test(this.form.veteIdCard)){
			      // alert('身份证号非法.');
			      return;
			   }
			  this.form.veteDateBirth=(RegExp.$1).substr(0,4)+'-'+(RegExp.$1).substr(4,2)+'-'+(RegExp.$1).substr(6,2)+' 00:00:00';//设置出生日期
			  this.form.veteSex=(parseInt(this.form.veteIdCard.charAt(this.form.veteIdCard.length-2))%2==0?'1':'0');//设置性别 0 男 1 女
			  this.veteSex=(parseInt(this.form.veteIdCard.charAt(this.form.veteIdCard.length-2))%2==0?'女':'男');//设置性别 0 男 1 女
			  uni.showLoading({
			  	title:'数据查询中'
			  });
			  this.$u.api.getIdInfo({id:this.form.veteIdCard}).then(res=>{
				  uni.hideLoading();
				  if(res.code === 200){
					  if (res.data) {
							this.form.nation = res.data.nation;
							this.form.veteName = res.data.veteName;
							this.form.vetePhone = res.data.vetePhone;
							this.form.veteResiAddress = res.data.veteResiAddress;
						}
				  }else{
					uni.showToast({
						icon:'none',
						title:res.msg
					})
				}
				  console.log('getIdInfo',res)
			  }).catch(err=>{
				  uni.hideLoading();
				  // uni.showToast({
				  // 	icon:'none',
				  // 	title:'网络出错'
				  // })
			  })
			},
			veteStatusChange(e){
				console.log('veteStatusChange',e)
				this.form.veteStatus = e;
			},
			// checkbox选择发生变化
			checkboxGroupChange(e) {
				// console.log('checkboxGroupChange',e)
				this.form.veteAttribute = e.toString();
				// console.log('this.form',this.form)
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					console.log('this.form',this.form);
					if (valid) {
						console.log('验证通过');						
						if(this.form.files.length<1){
							uni.showToast({
							    title: '请上传所需图片',
								icon:'none',
							    duration: 2000
							});
							return;
						}else{
							console.log('this.form',this.form);
							
							let params = {veteEduc:{}};
							params.files = this.form.files
							
							for(let key  in this.form) {
								if(key!='files'){
									params.veteEduc[key] = this.form[key];
								}
							};
							console.log('params',params);
							
							this.$u.api.veteEduc(params)
							.then(res=>{
								if(res.code == 200 ){
									uni.showToast({
									    title: '提交成功，等待审核！',
									    duration: 2000,
										success:function(){
											uni.switchTab({
												url: '../index/index'
											})
										}
									});
								}else{
									uni.showToast({
									    title: res.msg,
										icon:'none',
									    duration: 2000
									});
								}
								console.log('认证',JSON.parse(JSON.stringify(res)));
							}).catch(err=>{
								uni.showToast({
								    title: '请重试！',
									icon:'none',
								    duration: 2000
								});
							});
						}
					} else {
						console.log('验证失败');
						return;
					}
				});
			}

		}
	}
</script>

<style lang="scss" scoped>
	page{background-color: #e5e6e6;padding-top: 24rpx;padding-bottom: 58rpx;}
	.u-form-item{background-color: #fff;margin: 0 24rpx;padding-left: 24rpx;padding-right: 24rpx;}
	.upload-wrap{background-color: #fff;margin: 0 24rpx 24rpx;padding-bottom: 24rpx;}
	.upload-wrap-title{width: 100%;margin: 24rpx;}
	.submit-btn{margin: 24rpx;border: 0;background-color: #2b82e4;box-shadow: none;color: #fff;}
	// @import  './authentication.scss'
</style>