assess-app/page_task/identity/identity.vue

<template>
	<view class="total-page page-env-160 page-box">
		<Nav :title="title" :genre="1" :fixedHeight="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;">
						<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">
						<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">
						<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="sys-list-background-color attestation_content page-env-160"
			: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/logo.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="'待自动录入'"></WhInput>
						<WhInput :value="formData.gender" :name="'性别'" :placeholder="'待自动录入'"></WhInput>
						<WhInput :value="formData.id_number" :is_border="false" :name="'身份证号'" :placeholder="'待自动录入'">
						</WhInput>
					</view>
				</view>
				<view class="sys-background-fff r-20 m-t20 p-lr30 p-t30">
					<WhInput :name="'联系方式'"></WhInput>
					<WhInput :name="'常居城市'" is_select></WhInput>
					<WhInput :name="'详细地址'"></WhInput>
					<WhInput :is_border="false" :name="'婚姻状态'" is_select></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="'联系方式'"></WhInput>
					<WhInput :name="'常居城市'" is_select></WhInput>
					<WhInput :name="'详细地址'"></WhInput>
					<WhInput :is_border="false" :name="'婚姻状态'" is_select></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="'联系方式'"></WhInput>
					<WhInput :name="'常居城市'" is_select></WhInput>
					<WhInput :name="'详细地址'"></WhInput>
					<WhInput :is_border="false" :name="'婚姻状态'" is_select></WhInput>
				</view>
			</view>
			<!-- 社保信息end -->
		</view>
		<EnButton :text="'完成'" @onSubmit="onSubmit" v-if="step === 3 || step === 4">
		</EnButton>
		<EnButton is_both :leftText="'保存'" :rightText="'下一步'" @onLeftSubmit="onLeftSubmit" @onSubmit="onStep" v-else>
		</EnButton>

	</view>
</template>
<!-- correct -->
<script>
	import TaskImgTab from "@/common/task/task_ima_tab.vue"
	import WhInput from "@/page_task/module/wh-input.vue"

	export default {
		components: {
			TaskImgTab,
			WhInput
		},
		data() {
			return {
				title: '',
				step: 1,
				fixedHeight: 75,
				stepTwo: ['two', 'double', 'correct', 'correct'],
				stepThree: ['three', 'three', 'double', 'correct'],
				value: '',
				formData: {
					name: '',
					sex: '',
					id_number: ''
				}
			}
		},
		onLoad(options) {
			this.title = options.title
		},
		methods: {
			//  身份认证
			onAuthentication(item) {
				uni.navigateTo({
					url: "/page_task/identity_upload/identity_upload"
				})
			},
			// 保存
			onLeftSubmit() {
				console.log(this.formData);
				console.log('保存');
				this.step--
			},
			// 下一步
			onStep() {
				if (this.step === 3) return
				this.step++
			},
			// 完成
			onSubmit() {
				this.step = 4
			}
		}
	}
</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>