veterans_H5/h5_web/pages/applyEducationCode/applyEducationCode.vue

<!-- 退役军人职业教育码申请 -->
<template>
	<view class="apply-code">
		<u-navbar back-text="" title="" back-icon-color="#FFFFFF" :background="{ background: '#3D5D4C' }"
			:border-bottom="false" :custom-back="customBack"></u-navbar>
		<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="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="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="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="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="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="近期1寸免冠照片：" label-position="top" label-width="200" label-align="left" :required="true">
				<view class="pic">
					<u-upload ref="uUpload" :action="action" :custom-btn="true" :header="{
							'Authorization': `Bearer ${vuex_token}`
						}" :max-count="1" :limitType="['png', 'jpg']" @on-success="uploadSuccess" @on-remove="uploadRemove">
						<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>
				<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: {
			customBack() {
				const pages = getCurrentPages();
				if (pages.length >= 2) {
					uni.setStorageSync('last_page', pages[pages.length - 2].route);
					if (pages[pages.length - 2].options) {
						uni.setStorageSync(
							'last_page_options',
							pages[pages.length - 2].options
						);
					}
					this.jumpPostion()
				} else {
					uni.switchTab({
						url: `/pages/index/index`
					});
				}
			},
			/**
			 * 跳转
			 * @param {*} userInfo
			 */
			jumpPostion() {
				const last_page = uni.getStorageSync('last_page') || '',
					switchTabList = ['pages/index/index', 'pages/mycode/mycode', 'pages/mine/mine']
				if (last_page && switchTabList.indexOf(last_page) < 0) {
					const last_page_options = uni.getStorageSync('last_page_options') || '';
					const str = JSON.stringify(last_page_options)
						.replaceAll('{', '')
						.replaceAll('}', '')
						.replaceAll('"', '')
						.replaceAll(':', '=')
						.replaceAll(',', '&');
					// 清空其他路由，直接跳转最后登录的页面
					uni.navigateTo({
						url: `/${last_page}?${str}`
					});
					return;
				} else {
					uni.switchTab({
						url: `/${last_page}`
					});
				}
			},
			/**
			 * 获取已经提交的数据
			 */
			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
				})
			},
			/**
			 * 图片移除
			 * @param {Object} index
			 */
			uploadRemove(index) {
				this.form.files.splice(index, 1)
			},
			/**
			 * 拍照
			 */
			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], // 这个就是我们上面拍照返回或者先中照片返回的数组
							header: {
								Authorization: `Bearer ${vuex_token}`
							},
							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>