assess-app/page_task/identity/identity.vue

<template>
	<view class="total-page page-env-160 page-box task-bg">
		<Nav :title="title" :genre="4" is_fixed :opacity="scrollTop" :fixedHeight="fixedHeight"
			:navsHeight="fixedHeight" :bgHeight="fixedHeight">
			<!-- 步鄹条start -->
			<view class="task-tabs" :style="{top:`${$tools.topHeight()}px`}">
				<view class="row-justify-sb m-lr50 m-tb20">
					<view class="column-c" style="text-align: center;" @click="setNum(1)">
						<image class="wh-45 m-b16" :src="`/static/img/information/${step === 1?'double':'correct'}.png`"
							mode="aspectFill"></image>
						<text class="size-24"
							:class="step === 1?'color-0FB160 sys-weight-600':'sys-weight-400'">身份认证</text>
					</view>
					<view class="line"></view>
					<view class="column-c justify-center" @click="setNum(2)">
						<image class="wh-45 m-b16" :src="`/static/img/information/${stepTwo[step-1]}.png`"
							mode="aspectFill"></image>
						<text class="size-24"
							:class="step === 2?'color-0FB160 sys-weight-600':'sys-weight-400'">教育职业信息</text>
					</view>
					<view class="line"></view>
					<view class="column-c justify-center" @click="setNum(3)">
						<image class="wh-45 m-b16" :src="`/static/img/information/${stepThree[step-1]}.png`"
							mode="aspectFill"></image>
						<text class="size-24"
							:class="step === 3?'color-0FB160 sys-weight-600':'sys-weight-400'">社保信息</text>
					</view>
				</view>
			</view>
			<!-- 步鄹条end -->
		</Nav>
		<view class=" page-env-20" :style="[{top:`${$tools.topHeight() + fixedHeight}px`}]">
			<!-- 身份认证start -->
			<view class="m-t20 m-lr30 text-color-12" v-if="step === 1">
				<view class="sys-background-fff r-20 p-lr30 p-t30">
					<text class="size-30 sys-weight-600'">身份认证</text>
					<view class="size-26 m-t10 text-color-999">应监管要求，请先进行身份认证</view>
					<view class="sys-bg-BFD2CC row-justify-sb sys-weight-500 center r-20 p-30 m-t40">
						<view class="row-c flex">
							<image class="wh-45 m-r20" src="/static/img/task/sf_icon.png" mode=""></image>
							<text class="size-26">身份证认证</text>
						</view>
						<button class="attestation-button button-background button-color size-26 r-30" type="default" hover-class="is-hover" @click="onAuthentication(1)">去认证</button>
					</view>
					<view class="p-t20">
						<WhInput :value="formData.name" name="姓名" placeholder="待自动录入" disabled></WhInput>
						<WhInput :value="formData.sex===1?'男':'女'" name="性别" placeholder="待自动录入" disabled></WhInput>
						<WhInput :value="formData.id_number" :is_border="false" :name="'身份证号'" placeholder="待自动录入"
							disabled>
						</WhInput>
					</view>
				</view>
				<view class="sys-background-fff r-20 m-t20 p-lr30">
					<WhInput :value="formData.phone" v-if="verifyKey('phone')"  :name="'联系方式'"></WhInput>
          <en-city label="常居城市" placeholder="请选择省、市、区" v-if="verifyKey('resident_city')"   v-model="formData.resident_city"></en-city>
					<WhInput :name="'详细地址'" :value="formData.resident_address" v-if="verifyKey('resident_address')"></WhInput>
          <en-select label="婚姻状态" :local-data="marriageData" v-if="verifyKey('marriage_type')" v-model="formData.marriage_type"></en-select>
          <en-upload label="添加结婚证" :imageWidth="180" v-if="verifyKey('marriage_img') && formData.marriage_type!=='1'"  v-model="formData.marriage_img"></en-upload>
				</view>
        <view class="sys-background-fff r-20 m-t20 p-lr30" v-if="formData.marriage_type===2">
          <WhInput label="配偶姓名" type="text" placeholder="等待自动录入" v-if="verifyKey('mate_name')"
                    v-model="formData.mate_name"></WhInput>
          <WhInput label="配偶身份" type="idcard" placeholder="等待自动录入" v-if="verifyKey('mate_id_number')"
                    v-model="formData.mate_id_number"></WhInput>
          <WhInput label="配偶手机号" type="number" placeholder="请输入手机号码" v-if="verifyKey('mate_phone')"
                    v-model="formData.mate_phone"></WhInput>
          <WhInput label="配偶企业" type="text" placeholder="请输入配偶所在企业" v-if="verifyKey('mate_firm')"
                    v-model="formData.mate_firm" :no-box="true"></WhInput>
        </view>
			</view>
			<!-- 身份认证end -->

			<!-- 教育职业背景start -->
			<view class="m-t20 m-lr30 text-color-12" v-if="step === 2">
				<view class="sys-background-fff r-20 m-t20 p-lr30 p-t30">
					<view class="size-30 sys-weight-600 p-b30">教育职业背景</view>
					<WhInput name="学历" disabled is_select></WhInput>
					<EnRadio :value="formData.is_farming" name="雇佣类型" :list="employTypeData" @onSelect="onFarming">
					</EnRadio>
					<WhInput name="企业名称"></WhInput>
					<WhInput name="企业城市" disabled is_select></WhInput>
					<WhInput :is_border="false" name="详细地址"></WhInput>
				</view>
			</view>
			<!-- 教育职业背景end -->

			<!-- 社保信息start -->
			<view class="m-t20 m-lr30 text-color-12" v-if="step === 3 ">
				<view class="sys-background-fff r-20 m-t20 p-lr30 p-t30">
					<view class="size-30 sys-weight-600 p-b30">社保信息</view>
					<WhInput name="缴纳时间" rightText="月" placeholder="请输入社保连续缴纳时间"></WhInput>
					<WhInput name="公积金" rightText="元" placeholder="请输入公积金缴纳基数"></WhInput>
				</view>
			</view>
			<!-- 社保信息end -->
		</view>
		<!-- <EnButton :text="'完成'" @onSubmit="onSubmit" v-if="step === 3 || step === 4"></EnButton> -->
		<EnButton v-if="step === 3" is_both :leftText="'上一步'" :rightText="'保存'" @onLeftSubmit="onStep(0)"
			@onSubmit="onSubmit" />
		<EnButton v-else is_both :leftText="'保存'" :rightText="'下一步'" @onLeftSubmit="onLeftSubmit" @onSubmit="onStep(1)">
		</EnButton>
		<uv-action-sheet ref="marriageSheet" round="10" :actions="marriageData" title="请选择婚姻状态" @select="onSelectMarriage"></uv-action-sheet>
	</view>
</template>
<!-- correct -->
<script>
	import TaskImgTab from "@/common/task/task_ima_tab.vue"
	import WhInput from "@/components/en-from/en-input/wh-input.vue"
	import EnDataPicker from "@/components/en-utils/en-data-picker/en-data-picker.vue"
  import EnCity from "@/components/en-from/en-city/en-city.vue";
  import EnSelect from "@/components/en-from/en-select/en-select.vue";

	export default {
		components: {
      EnSelect,
      EnCity,
			TaskImgTab,
			WhInput,
			EnDataPicker
		},
		data() {
			return {
        employTypeData: [{'id': 1, 'name': '受薪'}, {'id': 2, 'name': '自雇'}],
        sexData: [{'id': 1, 'name': '男'}, {'id': 2, 'name': '女'}],
        marriageData: [{'value': 1, 'text': '单身'}, {'value': 2, 'text': '已婚'}, {'value': 3, 'text': '离异'}, {'value': 4, 'text': '丧偶'}],
        educationData: [
          {text: "初中", value: 1,},
          {text: "高中", value: 2,},
          {text: "中专", value: 3,},
          {text: "大专", value: 4,},
          {text: "本科", value: 5,},
          {text: "研究生", value: 6,},
          {text: "硕士", value: 7,},
          {text: "博士", value: 8,},
          {text: "博士后", value: 9,},
        ],
				title: '',
				step: 1,
				scrollTop: 0,
				fixedHeight: 75,
				stepTwo: ['two', 'double', 'correct', 'correct'],
				stepThree: ['three', 'three', 'double', 'correct'],
				value: '',
				formData: {
					"name": "",
					"birthday": "",
					"sex": 1,
					"id_number": "",
					"identity_one": "",
					"identity_two": "",
					"phone": "",
					"marriage_type": 1,
					"education_type": '',
					"education_name": '',
					"employ_type": 1,
					"firm_name": "",
					"firm_address": "",
					"resident_city": "",
					"resident_address": "",
					"mate_name": "",
					"mate_phone": "",
					"mate_id_number": "",
					"mate_firm": "",
					"m_code": "",
					"code": "",
					"m_identity_one": "",
					"m_identity_two": "",
					"firm_city": "",
					"social_num": "",
					"reserved_money": "",
					"marriage_img": [],
					"credit_img": []
				},
        clientInfoKey:[]
			}
		},
    watch: {
      'formData': {
        handler() {
          uni.$emit("putClientInfo", this.formData);
        },
        deep: true
      },
    },
		onPageScroll(res) {
			this.scrollTop = res.scrollTop / 120
		},
		onLoad(options) {
			this.title = options.title
			let clientInfoData = uni.getStorageSync('clientInfoData')
			let clientInfoKey = uni.getStorageSync('clientInfoKey')
      this.formData=clientInfoData
      this.clientInfoKey=clientInfoKey
			console.log(clientInfoData, clientInfoKey)
      uni.$on('discernMember',data=>{
        this.formData.identity_one=data.identity_one
        this.formData.identity_two=data.identity_two
        this.formData.name=data.name
        this.formData.id_number=data.id_number
        this.formData.sex=data.sex
        this.formData.identity_validity=data.identity_validity
      })
      uni.$on('setClientData',clientInfo=>{
        this.formData=clientInfo
      })
		},
		methods: {
      verifyKey(field) {
        return this.clientInfoKey.indexOf(field) >= 0
      },
			setNum(step) {
				if (this.step !== step) {
					this.step = step
				}
			},
			//  身份认证
			onAuthentication(item) {
				uni.navigateTo({
					url: "/page_task/identity_upload/identity_upload?identity_one="+this.formData.identity_one+'&identity_two='+this.formData.identity_two+'&name='+this.formData.name+'&identity_validity='+this.formData.identity_validity
				})
			},
			// 保存
			onLeftSubmit() {
				console.log(this.formData);
				console.log('保存');
				this.step--
			},
			// 下一步
			onStep(type) {
				if (type === 1) {
					if (this.step === 3) return
					this.step++
				} else {
					if (this.step === 1) return
					this.step--
				}

			},
			// 完成
			onSubmit() {
				this.step = 4
			},
			onChange(address) {
				console.log(address);
				this.formData.firm_address = address
			},
			onMarriage() {
				this.$refs.marriageSheet.open();
			},
			onSelectMarriage(e) {
				console.log(e);
			},
			onFarming(e) {
				this.formData.is_farming = e
			}
		}
	}
</script>

<style lang="scss" scoped>
	.info_button {
		width: 130rpx;
		height: 60rpx;
		border: none;
		line-height: 60rpx;
	}

	.attestation_content {
		width: 100%;
		position: absolute;
	}

	.attestation-button {
		width: 156rpx;
		height: 54rpx;
		line-height: 54rpx;
		background: #FFFFFF;
		border: 1rpx solid #0FB160;
	}

	.line {
		width: 70rpx;
		height: 4rpx;
		background: #8EDBDA;
		margin-top: 22rpx;
	}

	button::after {
		border: none;
	}
</style>