veterans_H5/h5_web/pages/mycode/mycode.vue

<!-- 0审核中,1不通过,2通过,9未提交 -->
	<template>
		<view>
			<image class="bg" src="../../static/img/mycode-bg-copy.png" mode="widthFix"></image>
			<view class="header" v-if="isHeaderShow">
				<view class="header-left">
					<view class="header-left-point"></view>
					<view class="header-left-tips">请提交采集信息，提交后可获得进步积分</view>
					<view class="header-left-view" @click="viewDetails">查看详细<u-icon class="icon" name="arrow-right" size="20"/></view>
				</view>
				<view class="header-right">
					<u-icon name="close" color="#A7A7A7" size="24" @click="isHeaderShow = false"/>
				</view>
			</view>
			<view class="content" style="padding-top: 20vh;">
				<view class="qrimg">
					<tki-qrcode
						ref="qrcode"
						cid="cid"
						:showLoading="false"
						:val="memberinfo.id"
						:size="384"
						background="#000"
						foreground="#fff"
						pdground="#fff"
						:usingComponents="true"
						:onval="true"
						@result="qrR"
					/>
				</view>
			</view>
			
			<!-- 0审核中 -->
			<view class="content fixed" v-if="memberinfo.auditStatus == 0">
				<view class="tip">
					您已提交退役军人身份审核，通过后生成退役军人码，并可享受平台提供的专享培训、就业服务，请耐心等待。
				</view>
			</view>
			
			<!-- 1不通过 -->
			<view class="content fixed" v-else-if="memberinfo.auditStatus == 1">
				<view class="tip">
					很抱歉，您提交的退役军人身份信息未通过审核，请审查后重新提交。
				</view>
				<view class="submit" @click="jumpPage('/pages/applyEducationCode/applyEducationCode')">立即提交</view>
			</view>
			
			<!-- 2通过审核 -->
			<view class="code-text" v-else-if="memberinfo.auditStatus == 2">
				<view class="code-id">{{ memberinfo.id }}</view>
				<view class="thanks">
					{{memberinfo.name}}{{memberinfo.menSex | verifySexFilter}},感谢您为国家的付出
				</view>
				<view v-if="!memberinfo.id">还没有退役军人码</view>
			</view>
			
			<!-- 3撤销审核 -->
			<view class="content no-submit" v-else-if="memberinfo.auditStatus == 3">
				<view class="tip">
					您已撤销审核，请重新提交退役军人身份审核，获取退役军人码，并享受平台提供的专享培训、就业服务。
				</view>
				<view class="submit" @click="jumpPage('/pages/applyEducationCode/applyEducationCode')">立即提交</view>
			</view>
			
			<!-- 9未提交 -->
			<view class="content no-submit" v-else-if="memberinfo.auditStatus == 9">
				<view class="tip">
					提交退役军人身份审核，获取退役军人码，并享受平台提供的专享培训、就业服务。
				</view>
				<view class="submit" @click="jumpPage('/pages/applyEducationCode/applyEducationCode')">立即提交</view>
			</view>
			
			<u-modal
				ref="uModal"
				v-model="updateShow"
				title="填写当前情况"
				:show-cancel-button="true"
				@cancel="updateCancel"
				@confirm="updateConfirm"
				:async-close="true"
			>
				<view class="slot-content">
					<view class="condition-form">
						<u-form :model="conditionForm" label-width="180" ref="conditionForm">
							<u-form-item label="就业状态：" prop="jobStatus" :required="true">
								<u-radio-group v-model="conditionForm.jobStatus" :wrap="true" icon-size="16">
									<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" :required="true">
								<u-input v-model="conditionForm.salaryRangeName" placeholder="请选择您的薪资范围" type="select" @click="salaryRangeClick"/>
							</u-form-item>
						</u-form>
					</view>
				</view>
			</u-modal>

			<!-- ########################## -- 底部导航栏 -- ################################ -->
			<u-tabbar
				:list="tabbarConfig.tabbarList"
				:height="tabbarConfig.height"
				:mid-button="tabbarConfig.midButton"
				:inactive-color="tabbarConfig.inactiveColor"
				:active-color="tabbarConfig.activeColor"
				:mid-button-size="tabbarConfig.midButtonSize"
			/>
			<!-- 工资范围下拉 -->
			<u-select v-model="salaryRangeShow" :list="salaryRangeList" @confirm="salaryRangeChange" :default-value="salaryRangeIndex"/>
			<u-toast ref="uToast" />
		</view>
	</template>

	<script>
		import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue";
		import tabbarconfig from 'tabbarconfig.js';
		export default {
			components: {
				tkiQrcode
			},
			data() {
				return {
					memberinfo: {},
					icon: '/static/icons/index.png',
					tabbarConfig: tabbarconfig,
					isHeaderShow: false,
					updateShow: false,
					conditionForm: {
						jobStatus:'',
						salaryRangeName: '',
						salaryRange: ''
					},
					conditionFormRules: {
						jobStatus: [
							{
								required: true,
								message: '请选择就业状态',
								trigger: ['change', 'blur']
							}
						],
						salaryRangeName: [
							{
								required: true,
								message: '请选择薪资范围',
								trigger: ['change', 'blur']
							}
						]
					},
					employmentStatusList: [],
					// 薪资范围
					salaryRangeShow: false,
					salaryRangeList: [],
					salaryRangeIndex: []
				}
			},
			onLoad(page) {
				this.getSalaryRange();
				this.getEmploymentStatus();
			},
			onShow() {
				this.getmemberinfo();
			},
			filters: {
				verifySexFilter(value) {
					if (value == 0) {
						return '先生';
					} else if (value == 1) {
						return '女士';
					}
				}
			},
			methods: {
				/**
				 * 获取用户信息
				 */
				getmemberinfo() {
					this.$u.api.getmemberinfo().then(res => {
						if (res.code == 200) {
							this.memberinfo = res.data;
							if (this.memberinfo.auditStatus !== 2) {
								this.memberinfo.id = null;
								this.$refs.qrcode._clearCode()
							}
							this.conditionForm.jobStatus = res.data.jobStatus;
							this.conditionForm.salaryRange = res.data.salaryRange;
							this.salaryRangeList.forEach((item, index) => {
								if (res.data.salaryRange === item.value) {
									this.salaryRangeIndex = [index]
									this.conditionForm.salaryRangeName = item.label
								}
							})
							if (res.data.isShowButton) {
								this.isHeaderShow = true
								this.viewDetails()
							} else {
								this.isHeaderShow = false
							}
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						}
					})
				},
				qrR(e) {
					// console.log(e)
				},
				/**
				 * 跳转到指定页面
				 */
				jumpPage(url) {
					this.$u.route(url)
				},
				/**
				 * 查看详情
				 */
				viewDetails() {
					this.updateShow = true
					setTimeout(() => {
						this.$refs.conditionForm.setRules(this.conditionFormRules);
					}, 200)
				},
				/**
				 * 就业状态
				 */
				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
								}
							});
						}
					});
				},
				/**
				 * 获取薪资范围
				 */
				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.conditionForm.salaryRange = e[0].value
					this.conditionForm.salaryRangeName = e[0].label
				},
				/**
				 * 点击薪资范围
				 */
				salaryRangeClick() {
					this.salaryRangeShow = true
				},
				/**
				 * 弹框返回操作
				 */
				updateCancel() {
					this.conditionForm.jobStatus = this.memberinfo.jobStatus;
					this.conditionForm.salaryRange = this.memberinfo.salaryRange;
					this.salaryRangeList.forEach((item, index) => {
						if (this.memberinfo.salaryRange === item.value) {
							this.salaryRangeIndex = [index]
							this.conditionForm.salaryRangeName = item.label
						}
					})
				},
				/**
				 * 弹框确认操作
				 */
				updateConfirm() {
					this.$refs.conditionForm.validate(valid => {
						if (valid) {
							const params = {
								salaryRange: this.conditionForm.salaryRange,
								jobStatus: this.conditionForm.jobStatus
							}
							this.$u.api.mine.submitEmploymentCondition(params).then(res => {
								if (res.code === 200) {
									this.getmemberinfo();
									this.$refs.uToast.show({
										title: '更新成功!',
										type: 'success'
									})
									this.updateShow = false
								} else {
									this.$refs.uToast.show({
										title: res.msg,
										type: 'error'
									})
								}
							}).catch(() => {
								this.$refs.uToast.show({
									title: '系统异常!',
									type: 'error'
								})
							})
						} else {
							this.$refs.uModal.clearLoading();
						}
					});
				}
			}
		}
	</script>

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