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">去认证</button>
					</view>
					<view class="p-t20">
						<WhInput :value="formData.name" name="姓名" placeholder="待自动录入" disabled></WhInput>
						<WhInput :value="formData.gender" 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 :name="'联系方式'"></WhInput>
					<EnDataPicker title="请选择常居城市" @onChange="onChange">
						<WhInput :value="formData.firm_address" name="常居城市" disabled is_select></WhInput>
					</EnDataPicker>
					<WhInput :name="'详细地址'"></WhInput>
					<view @click="onMarriage">
						<WhInput :is_border="false" name="婚姻状态" disabled is_select></WhInput>
					</view>
				</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="farming" @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 || step === 4">
				<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 || step === 4" 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="actionSheet" round="10" :actions="list" title="请选择婚姻状态" @select="onSelect">
		</uv-action-sheet>
	</view>
</template>
<!-- correct -->
<script>
	import TaskImgTab from "@/common/task/task_ima_tab.vue"
	import WhInput from "@/page_task/module/wh-input.vue"
	import EnDataPicker from "@/components/en-utils/en-data-picker/en-data-picker.vue"

	export default {
		components: {
			TaskImgTab,
			WhInput,
			EnDataPicker
		},
		data() {
			return {
				list: [{
					name: '单身',
					value: 1
				}, {
					name: '已婚',
					value: 2
				}],
				farming: [{
					text: '受薪',
					value: 1
				}, {
					text: '自雇',
					value: 2
				}],
				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": []
				}
			}
		},
		onPageScroll(res) {
			this.scrollTop = res.scrollTop / 120
		},
		onLoad(options) {
			this.title = options.title
			let clientInfoData = uni.getStorageSync('clientInfoData')
			let clientInfoKey = uni.getStorageSync('clientInfoKey')
			console.log(clientInfoData, clientInfoKey)
		},
		methods: {
			setNum(step) {
				if (this.step !== step) {
					this.step = step
				}
			},
			//  身份认证
			onAuthentication(item) {
				uni.navigateTo({
					url: "/page_task/identity_upload/identity_upload"
				})
			},
			// 保存
			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() {
				console.log(11111);
				this.$refs.actionSheet.open();
			},
			onSelect(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>