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" maxlength="18"/>
			</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">
				<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="文化程度：" 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="houseTypeId">
				<u-radio-group v-model="form.houseTypeId" @change="houseTypeChange">
					<u-radio v-for="(item, index) in houseTypeList" :key="index" :name="item.value">
						{{ item.label }}
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label="户籍地：" prop="veteHousehRegi">
				<u-input v-model="form.veteHousehRegi" placeholder="请选择您的户籍地" type="select" @click="regionClick"/>
			</u-form-item>
			<u-form-item label="户籍区域：" prop="veteHousehArea" :required="true">
				<u-input v-model="form.veteHousehArea" placeholder="请选择您的户籍区域" type="select" @click="areaShow = 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="就业状况：" prop="jobStatus">
				<u-radio-group v-model="form.jobStatus">
					<u-radio v-for="(item, index) in employmentStatusList" :key="index" :name="item.value">
						{{ item.label }}
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label="薪资范围：" prop="salaryRangeName">
				<u-input v-model="form.salaryRangeName" placeholder="请选择您的薪资范围" type="select" @click="salaryRangeShow = true"/>
			</u-form-item>
			<u-form-item label="近期1寸免冠照片：" label-position="top" label-width="200" label-align="left" :required="true">
				<view class="pic">
					<u-upload
						ref="uUpload"
						:action="action"
						:auto-upload="true"
						:custom-btn="true"
						:show-upload-list="false"
						max-count="1"
						:limitType="['png', 'jpg']"
						@on-success="uploadSuccess"
					>
						<view class="pic-upload-box"  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">
						<image src="../../static/img/paizhao.png" mode=""></image>
						<view class="font">立即拍照</view>
					</view>
					<view class="pic-url" v-if="form.files.length > 0">
						<view class="icon">
							<u-icon name="close" color="#fff" size="16" @click="clearFile"></u-icon>
						</view>
						<image :src="form.files[0].filesUrl" mode=""/>
					</view>
				</view>
			</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>
				<u-button type="primary" class="submit" @click="submit">提交</u-button>
			</u-form-item>
		</u-form>
		
		<!-- 文化程度下拉 -->
		<u-select v-model="degrEducShow" :list="degrEducList" @confirm="degrEducChange" :default-value="degrEducIndex"/>
		
		<!-- 政治面貌下拉 -->
		<u-select v-model="politOutlookShow" :list="politOutlookList" @confirm="politOutlookChange" :default-value="politOutlookIndex"/>
		
		<!-- 户籍地下拉 -->
		<city-select-province v-model="regionShow" :default-region="[]" @city-change="regionConfirm"/>
		
		<!-- 户籍区域下拉 -->
		<u-city-select v-model="areaShow" :default-region="[]" @city-change="areaConfirm"/>
		
		<!-- 工资范围下拉 -->
		<u-select v-model="salaryRangeShow" :list="salaryRangeList" @confirm="salaryRangeChange" :default-value="salaryRangeIndex"/>
	</view>
</template>

<script>
	import citySelectProvince  from '../../uview-ui/components/u-city-select-province/u-city-select-province.vue'
	export default {
		components: {
			citySelectProvince
		},
		data() {
			return {
				// 上传地址
				action: this.config.uploadUrl,
				form: {
					veteName: '',
					veteIdCard: '',
					veteSex: '',
					nation: '',
					qqNum: '',
					wxNum: '',
					degrEduc: '',
					degrEducId: '',
					houseType: '',
					houseTypeId:'',
					politOutlook: '',
					politOutlookId:'',
					veteHousehRegi: '',
					veteHousehArea: '',
					veteResiAddress: '',
					veteDateBirth:'',
					veteStatus: '1',
					files: [],
					jobStatus: '',
					salaryRange: '',
					salaryRangeName: '',
					provinceId: '',
					provinceName: '',
					cityId: '',
					cityName: '',
					areaId: '',
					areaName: ''
				},
				// 表单验证
				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'],
						}
					],
					veteHousehArea:[
						{
							required: true,
							message: '请选择户籍区域',
							trigger: ['change', 'blur'],
						}
					],
					veteResiAddress:[
						{
							required: true,
							message: '请填写详细地址',
							trigger: ['change', 'blur'],
						}
					],
					// nation:[
					// 	{
					// 		required: true,
					// 		message: '请填写民族',
					// 		trigger: ['change', 'blur'],
					// 	}
					// ],
					degrEduc:[
						{
							required: true,
							message: '请选择文化程度',
							trigger: ['change', 'blur'],
						}
					],
					politOutlook:[
						{
							required: true,
							message: '请选择政治面貌',
							trigger: ['change', 'blur']
						}
					],
					// houseTypeId:[
					// 	{
					// 		required: true,
					// 		message: '请选择户籍类别',
					// 		trigger: ['change', 'blur']
					// 	}
					// ],
					// salaryRangeName: [
					// 	{
					// 		required: true,
					// 		message: '请选择薪资范围',
					// 		trigger: ['change', 'blur']
					// 	}
					// ],
					// jobStatus: [
					// 	{
					// 		required: true,
					// 		message: '请选择就业状态',
					// 		trigger: ['change', 'blur']
					// 	}
					// ]
				},
				// 文化程度
				degrEducShow: false,
				degrEducList: [],
				degrEducIndex: [],
				// 政治面貌
				politOutlookShow: false,
				politOutlookList: [],
				politOutlookIndex: [],
				// 户籍地
				regionShow: false,
				regionDefault: [],
				// 户籍类型
				houseTypeShow: false,
				houseTypeList: [],
				houseTypeIndex: [],
				// 户籍区域
				areaShow: false,
				// 薪资范围
				salaryRangeShow: false,
				salaryRangeIndex: [],
				salaryRangeList: [],
				salaryRangeIndex: [],
				// 就业状态
				employmentStatusList: []
			}
		},
		onLoad() {
			this.getVeteDegrEduc();
			this.getVetePolitOutlook();
			this.getVeteHouseType();
			this.getSalaryRange();
			this.getEmploymentStatus();
			this.getVeteEducData();
		},
		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){
						const data = res.data
						for(let key  in data.veteEduc) {
							if(key !== 'files'){
								this.form[key] = data.veteEduc[key];
							}
						};
						if (data.veteEduc) {
							this.form.veteSex = data.veteEduc.veteSex === 0 ? '男' : '女';
							// 文化程度
							this.degrEducList.forEach((item, index) => {
								if (item.text === data.veteEduc.degrEducId) {
									this.degrEducIndex = [index]
								}
							})
							// 政治面貌
							this.politOutlookList.forEach((item, index) => {
								if (item.text === data.veteEduc.politOutlookId) {
									this.politOutlookIndex = [index]
								}
							})
							// 户籍类型
							this.houseTypeList.forEach((item, index) => {
								if (item.text === data.veteEduc.houseTypeId) {
									this.houseTypeIndex = [index]
								}
							})
							// 户籍区域
							if(data.veteEduc.provinceName && data.veteEduc.cityName && data.veteEduc.areaName) {
								this.form.veteHousehArea = data.veteEduc.provinceName + '-' + data.veteEduc.cityName + '-' + data.veteEduc.areaName;
							}
							// 薪资范围
							this.form.salaryRange = data.veteEduc.salaryRange
							this.salaryRangeList.forEach((item, index) => {
								if (Number(item.value) === Number(data.veteEduc.salaryRange)) {
									this.salaryRangeIndex = [index]
									this.form.salaryRangeName = item.label
								}
							})
						}
						this.form.files = 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.map(item => {
							return {
								...item,
								value: item.text
							}
						});
					}
				});
			},
			/**
			 * 政治面貌下拉改变
			 */
			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}`
			},
			/**
			 * 户籍地点击
			 */
			regionClick() {
				this.regionShow = true
			},
			/**
			 * 户籍区域
			 */
			areaConfirm(e) {
				this.form.veteHousehArea = `${e.province.label}-${e.city.label}-${e.area.label}`
				this.form.provinceId = e.province.value
				this.form.provinceName = e.province.label
				this.form.cityId = e.city.value
				this.form.cityName = e.city.label
				this.form.areaId = e.area.value
				this.form.areaName = 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(val){
				this.houseTypeList.forEach(item => {
					if (item.value === val) {
						this.form.houseType = item.label
					}
				})
			},
			/**
			 * 获取薪资范围
			 */
			getSalaryRange(){
				this.$u.api.getDictdataUrl({ key:'salary_range' }).then(res => {
					if(res.code === 200){						
						this.salaryRangeList = res.data.map(item => {
							return {
								...item,
								value: item.text
							}
						});
					}
				});
			},
			/**
			 * 薪资范围
			 * @param {Object} e
			 */
			salaryRangeChange(e) {
				this.form.salaryRangeName = e[0].label
				this.form.salaryRange = e[0].value
			},
			/**
			 * 就业状态
			 */
			getEmploymentStatus(){
				this.$u.api.getDictdataUrl({ key:'member_job_status' }).then(res => {
					if(res.code === 200){						
						this.employmentStatusList = res.data.map(item => {
							return {
								...item,
								value: item.text
							}
						});
					}
				});
			},
			/**
			 * @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) => {
						const tempFilePaths = res.tempFilePaths;
						uni.uploadFile({
							url: this.config.uploadUrl, // 服务器地址
							fileType: "image",// ZFB必填,不然报错
							filePath: tempFilePaths[0], // 这个就是我们上面拍照返回或者先中照片返回的数组
							name: 'imgFile',
							success: (uploadFileRes) => {
								const file = JSON.parse(uploadFileRes.data)
								this.form.files = []
								this.form.files.push({ filesType: 6, filesUrl: file.data.url})
							}
						});
					}
				})
			},
			/**
			 * 清空图片文件
			 */
			clearFile() {
				uni.showModal({
					title: '提示',
					content: '您确定要删除此项吗？',
					success: async (res) => {
						if (res.confirm) {
							this.form.files = []
						}
					}
				});
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						if (this.form.files.length < 1){
							uni.showToast({
							    title: '近期1寸免冠照片',
									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 === '男' ? 0 : 1;
							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>