veterans_H5/h5_web/pages/applyEducationCode/applyEducationCode.vue

<!-- 退役军人职业教育码申请 -->
<template>
	<view class="apply-code">
		<u-form :model="form" ref="uForm" label-width="160" label-align="left">
			<u-form-item label="姓名：" prop="veteName" :required="true">
				<u-input v-model="form.veteName" placeholder="请输入真实姓名" />
			</u-form-item>
			<u-form-item label="身份证号：" prop="veteIdCard" :required="true">
				<u-input v-model="form.veteIdCard" placeholder="请输入身份证号" @blur="idNumberChange" />
			</u-form-item>
			<u-form-item label="性别：" prop="veteSex" :required="true">
				<u-input v-model="form.veteSex" placeholder="输入身份证自动获取" disabled />
			</u-form-item>
			<u-form-item label="民族：" prop="nation" :required="true">
				<u-input v-model="form.nation" placeholder="请输入您的民族" />
			</u-form-item>
			<u-form-item label="联系电话：" prop="vetePhone" :required="true">
				<u-input v-model="form.vetePhone" placeholder="请输入您的联系电话" maxlength="11" />
			</u-form-item>
			<u-form-item label="QQ：" prop="qqNum">
				<u-input v-model="form.qqNum" placeholder="请输入您的QQ" />
			</u-form-item>
			<u-form-item label="微信：" prop="wxNum">
				<u-input v-model="form.wxNum" placeholder="请输入您的微信" />
			</u-form-item>
			<u-form-item label="文化程度：" prop="degrEduc" :required="true">
				<u-input v-model="form.degrEduc" placeholder="请选择您的文化程度" type="select" @click="degrEducShow = true"/>
			</u-form-item>
			<u-form-item label="政治面貌：" prop="politOutlook" :required="true">
				<u-input v-model="form.politOutlook" placeholder="请选择您的政治面貌" type="select" @click="politOutlookShow = true"/>
			</u-form-item>
			<u-form-item label="户籍类别：" prop="houseType" :required="true">
				<u-input v-model="form.houseType" placeholder="请选择您的户籍类型" type="select" @click="houseTypeShow = true"/>
			</u-form-item>
			<u-form-item label="户籍地：" prop="veteHousehRegi" :required="true">
				<u-input v-model="form.veteHousehRegi" placeholder="请选择您的户籍地" type="select" @click="regionShow = true"/>
			</u-form-item>
			<u-form-item label="现家庭详细地址：" label-position="top" label-width="200" label-align="left" prop="veteResiAddress" :required="true">
				<u-input v-model="form.veteResiAddress" placeholder="请输入您的现家庭详细地址" />
			</u-form-item>
			<u-form-item label="近期1寸免冠照片：" label-position="top" label-width="200" label-align="left" prop="national">
				<view class="pic">
					<u-upload ref="uUpload" :action="action" :auto-upload="true" :custom-btn="true" max-count="1" :limitType="['png', 'jpg']" @on-success="uploadSuccess">
						<view class="pic-upload-box" v-if="form.files.length === 0" slot="addBtn">
							<view class="pic-upload">
								<image src="../../static/img/upload-add.png" mode=""/>
								<view class="font">上传照片</view>
							</view>
							<view class="tips">支持jpg.png格式</view>
						</view>
					</u-upload>
					<view class="pic-photograph" @click="photograph" v-if="form.files.length === 0">
						<image src="../../static/img/paizhao.png" mode=""></image>
						<view class="font">立即拍照</view>
					</view>
				</view>
			</u-form-item>
			<u-form-item>
				<u-button type="primary" class="submit" @click="submit">提交简历</u-button>
			</u-form-item>
		</u-form>
		
		<!-- 文化程度下拉 -->
		<u-select v-model="degrEducShow" :list="degrEducList" @confirm="degrEducChange"/>
		
		<!-- 政治面貌下拉 -->
		<u-select v-model="politOutlookShow" :list="politOutlookList" @confirm="politOutlookChange"/>
		
		<!-- 户籍地 -->
		<u-picker mode="region" v-model="regionShow" :default-region='["贵州省", "贵阳市", "南明区"]' @confirm="regionConfirm"/>
		
		<!-- 户籍类型下拉 -->
		<u-select v-model="houseTypeShow" :list="houseTypeList" @confirm="houseTypeChange"/>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 上传地址
				action: this.config.uploadUrl,
				form: {
					veteName: '',
					veteIdCard: '',
					veteSex: '',
					national: '',
					phoneNumber: '',
					qqNum: '',
					wxNum: '',
					degrEduc: '',
					degrEducId: '',
					houseType: '',
					houseTypeId:'',
					politOutlook: '',
					politOutlookId:'',
					veteHousehRegi: '',
					veteResiAddress: '',
					veteDateBirth:'',
					veteStatus: '1',
					veteAttribute: '',
					houseType: '',
					houseTypeId: '',
					veteDateBirth: '',
					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']
						}
					],
					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: '请选择户籍类别',
						}
					]
				},
				// 文化程度
				degrEducShow: false,
				degrEducList: [],
				// 政治面貌
				politOutlookShow: false,
				politOutlookList: [],
				// 户籍地
				regionShow: false,
				// 户籍类型
				houseTypeShow: false,
				houseTypeList: []
			}
		},
		onLoad() {
			this.getVeteEducData();
			this.getVeteDegrEduc();
			this.getVetePolitOutlook();
			this.getVeteHouseType();
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
			this.form.vetePhone = this.vuex_user.mobile;
		},
		methods: {
			/**
			 * 获取已经提交的数据
			 */
			getVeteEducData(){
				this.$u.api.getVeteEducData().then(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;
					}
				});
			},
			/**
			 * 获取文化程度类别
			 */
			getVeteDegrEduc(){
				this.$u.api.getDictdataUrl({key:'degr_educ'}).then(res=>{
					if(res.code == 200){						
						this.degrEducList = res.data.map(item => {
							return {
								...item,
								value: item.text
							}
						});
					}
				});
			},
			/**
			 * 文化程度下拉变化
			 */
			degrEducChange(item) {
				this.form.degrEduc = item[0].label
				this.form.degrEducId = item[0].value
			},
			/**
			 * 获取政治面貌类别
			 */
			getVetePolitOutlook(){
				this.$u.api.getDictdataUrl({ key: 'polit_outlook' }).then(res => {
					if(res.code == 200){						
						this.politOutlookList = res.data;
					}
				});
			},
			/**
			 * 政治面貌下拉改变
			 */
			politOutlookChange(item) {
				this.form.politOutlook = item[0].label
				this.form.politOutlookId = item[0].value
			},
			/**
			 * 户籍地
			 */
			regionConfirm(e){
				this.form.veteHousehRegi = `${e.province.label}-${e.city.label}-${e.area.label}`
			},
			/**
			 * 获取户籍类别
			 */
			getVeteHouseType(){
				this.$u.api.getDictdataUrl({ key:'house_type' }).then(res => {
					if(res.code === 200){						
						this.houseTypeList = res.data.map(item => {
							return {
								...item,
								value: item.text
							}
						});
					}
				});
			},
			/**
			 * 户籍类别下拉变化
			 */
			houseTypeChange(e){
				this.form.houseType = e[0].label;
				this.form.houseTypeId = e[0].value;
			},
			/**
			 * @param { String } val
			 */
			idNumberChange(val) {
				const reg =
					/^\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]$/
				if (!reg.test(val)) {
					return
				}
				// 根据身份证得出性别
				this.form.veteSex = (parseInt(val.substr(16, 1)) % 2 === 1 ? '男' : '女');
				// 设置出生日期
				this.form.veteDateBirth = val.substring(6, 10) + "-" + val.substring(10, 12) + "-" + val.substring(12, 14) + ' 00:00:00';
				// 根据身份证号获取基本信息
				this.$u.api.getIdInfo({ id: this.form.veteIdCard }).then(res=>{
					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
						})
					}
				})
			},
			/**
			 * 图片上传成功
			 */
			uploadSuccess(e) {
				this.form.files = []
				this.form.files.push({ filesType: 6, filesUrl: e.data.url})
			},
			/**
			 * 拍照
			 */
			photograph() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera'], //从相册选择
					success: (res) => {
						console.log(res);
					}
				})
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						if (this.form.files.length < 1){
							uni.showToast({
							    title: '请上传所需图片',
									icon:'none',
							    duration: 2000
							});
						} else {
							let params = {
								veteEduc: {}
							};
							params.files = this.form.files
							for(let key  in this.form) {
								if (key !== 'files') {
									params.veteEduc[key] = this.form[key];
								}
							};
							params.veteEduc.veteSex = params.veteEduc.veteSex === '男' ? 1 : 0
							this.$u.api.veteEduc(params).then(res => {
								if (res.code === 200 ) {
									uni.showToast({
									    title: '提交成功，等待审核！',
									    duration: 2000,
											success: () => {
												this.$u.route('/pages/applyEducationCode/applyEducationSuccess')
											}
									});
								} else {
									uni.showToast({
									    title: res.msg,
											icon:'none',
									    duration: 2000
									});
								}
							})
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './applyEducationCode.scss';
</style>