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="`https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/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="`https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/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="`https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/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">
				<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="https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/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>-->
					<add-identity :user-name.sync="formData.name" :user-sex.sync="formData.sex"
						:id-number.sync="formData.id_number" :identity-one.sync="formData.identity_one"
						:identity-two.sync="formData.identity_two" :identity-validity.sync="formData.identity_validity"
						:user-birthday.sync="formData.birthday" v-if="verifyKey('identity_one')"></add-identity>
					<view class="p-t20">
						<en-input :value="formData.name" label="姓名" placeholder="待自动录入" v-if="verifyKey('name')"
							disabled></en-input>
						<!--						<en-input :value="formData.sex===1?'男':'女'" label="性别" placeholder="待自动录入" disabled></en-input>-->
						<EnRadio v-model="formData.sex" label="性别" v-if="verifyKey('sex')" :list="sexData"
							disabled="disabled"> </EnRadio>
						<en-input :value="formData.id_number" v-if="verifyKey('id_number')" :label="'身份证号'"
							placeholder="待自动录入" disabled> </en-input>
						<en-input :value="formData.birthday" v-if="verifyKey('birthday')" :is_border="false"
							:label="'生日'" placeholder="待自动录入" disabled> </en-input>
					</view>
				</view>
				<view class="sys-background-fff r-20 m-t20 p-lr30">
					<en-input :value="formData.phone" v-if="verifyKey('phone')" :label="'联系方式'"></en-input>
					<en-city label="常居城市" placeholder="请选择省、市、区" v-if="verifyKey('resident_city')"
						v-model="formData.resident_city"></en-city>
					<en-input :label="'详细地址'" :value="formData.resident_address"
						v-if="verifyKey('resident_address')"></en-input>
					<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">
					<add-identity v-if="verifyKey('m_identity_one')" :user-name.sync="formData.mate_name"
						:id-number.sync="formData.mate_id_number" :identity-one.sync="formData.m_identity_one"
						:identity-two.sync="formData.m_identity_two"
						:identity-validity="formData.m_identity_validity"></add-identity>
					<en-input label="配偶姓名" type="text" placeholder="等待自动录入" v-if="verifyKey('mate_name')"
						v-model="formData.mate_name"></en-input>
					<en-input label="配偶身份" type="idcard" placeholder="等待自动录入" v-if="verifyKey('mate_id_number')"
						v-model="formData.mate_id_number"></en-input>
					<en-input label="配偶手机号" type="number" placeholder="请输入手机号码" v-if="verifyKey('mate_phone')"
						v-model="formData.mate_phone"></en-input>
					<en-input label="配偶企业" type="text" placeholder="请输入配偶所在企业" v-if="verifyKey('mate_firm')"
						v-model="formData.mate_firm" :no-box="true"></en-input>
				</view>
			</view>
			<!-- 身份认证end -->

			<!-- 教育职业背景start -->
			<view class="m-t20 m-lr30 text-color-12"
				v-show="verifyKey('education_type') || verifyKey('employ_type') || verifyKey('firm_name')|| verifyKey('firm_city')|| verifyKey('firm_address')">
				<view class="sys-background-fff r-20 m-t20 p-lr30 p-t30">
					<view class="size-30 sys-weight-600 p-b30">教育职业背景</view>
					<en-input label="学历" placeholder="请选择教育背景" :local-data="educationData"
						v-if="verifyKey('education_type')" v-model="formData.education_type" disabled
						is_select></en-input>
					<EnRadio v-model="formData.is_farming" label="雇佣类型" :list="employTypeData"> </EnRadio>
					<en-input label="企业名称" placeholder="请输入企业名称" v-if="verifyKey('firm_name')"
						v-model="formData.firm_name"></en-input>
					<en-city label="企业城市" placeholder="请选择省、市、区" v-if="verifyKey('firm_city')"
						v-model="formData.firm_city"></en-city>
					<en-input :is_border="false" label="详细地址" v-if="verifyKey('firm_address')"
						v-model="formData.firm_address"></en-input>
				</view>
			</view>
			<!-- 教育职业背景end -->

			<!-- 社保信息start -->
			<view class="m-t20 m-lr30 text-color-12" v-show="verifyKey('social_num') || verifyKey('reserved_money')">
				<view class="sys-background-fff r-20 m-t20 p-lr30 p-t30">
					<view class="size-30 sys-weight-600 p-b30">社保信息</view>
					<en-input label="缴纳时间" rightText="月" v-if="verifyKey('social_num')"
						v-model="formData.social_num"></en-input>
					<en-input label="公积金" rightText="元" v-if="verifyKey('reserved_money')"
						v-model="formData.reserved_money" placeholder="请输入公积金缴纳基数"></en-input>
				</view>
			</view>
			<!-- 社保信息end -->
		</view>
		<!-- <EnButton :text="'完成'" @onSubmit="onSubmit" v-if="step === 3 || step === 4"></EnButton> -->
		<EnButton is_both :leftText="'上一步'" :rightText="'保存'" @onLeftSubmit="onStep(0)" @onSubmit="onSubmit" />
	</view>
</template>
<!-- correct -->
<script>
	import TaskImgTab from "@/common/task/task_ima_tab.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";
	import EnUpload from "@/components/en-from/en-upload/en-upload.vue";
	import AddIdentity from "@/page_task/identity_upload/add-identity.vue";
	import EnInput from "@/components/en-from/en-input/en-input.vue";

	export default {
		components: {
			EnInput,
			AddIdentity,
			EnUpload,
			EnSelect,
			EnCity,
			TaskImgTab,
			EnDataPicker
		},
		data() {
			return {
				employTypeData: [{
					'value': 1,
					'text': '受薪'
				}, {
					'value': 2,
					'text': '自雇'
				}],
				sexData: [{
					'value': 1,
					'text': '男'
				}, {
					'value': 2,
					'text': '女'
				}],
				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,
				fixedHeight: 0,
				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

			uni.$on('setClientData', clientInfo => {
				this.formData = clientInfo
			})
		},
		methods: {
			verifyKey(field) {
				return this.clientInfoKey.indexOf(field) >= 0
			},
			//  身份认证
			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) {


			},
			// 完成
			onSubmit() {
				this.step = 4
			},
			onChange(address) {
				console.log(address);
				this.formData.firm_address = address
			}

		}
	}
</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>