<template>
	<page-meta :page-style="themeColor"></page-meta>
	<view class="forgetPassword">
		<block v-if="step==1">
			<div class="box">
				<div class="item">
					<div class="icon">
						<image :src="$util.img(`/upload/weapp/pageSalesman/index/sfyz.png`)"  style="width: 42rpx;height: 52rpx;"></image>
					</div>
					<div style="color: #999999;">身份证验证</div>
				</div>
				<div class="line"></div>
				<div class="item">
					<div class="icon">
						<image :src="$util.img(`/upload/weapp/pageSalesman/index/dxyz.png`)"   style="width: 52rpx;height: 40rpx;"></image>
					</div>
					<div>短信验证</div>
				</div>
			</div>
			<u-input placeholder="请输入您的身份证号" style="margin-top: 80rpx;"></u-input>
			<div class="btn" @click="verification">
				验证
			</div>
		</block>
		
		
		<!-- 短信验证 -->
		<block v-if="step==2">
			<div class="box">
				<div class="item">
					<div class="icon">
						<image :src="$util.img(`/upload/weapp/pageSalesman/index/sfyz1.png`)"  style="width: 42rpx;height: 52rpx;"></image>
					</div>
					<div>身份证验证</div>
				</div>
				<div class="line"></div>
				<div class="item">
					<div class="icon">
						<image :src="$util.img(`/upload/weapp/pageSalesman/index/dxyz1.png`)"  style="width: 52rpx;height: 40rpx;"></image>
					</div>
					<div style="color: #999999;">短信验证</div>
				</div>
			</div>
			
			
			
			
			<u-input placeholder="请输入手机号"  style="margin-top: 80rpx;">
				<div slot="prefix" style="margin-right: 32rpx;">+86</div>	
			</u-input>
			
			<u-input placeholder="请输入验证码"  style="margin-top: 32rpx;">
				<div slot="prefix" style="margin-right: 32rpx;">验证码</div>	
				
				<div slot="suffix" style="margin-right: 32rpx;color:var(--base-color)">获取验证码</div>	
			</u-input>
			
			
			<div class="btn" @click="verification">
				验证
			</div>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				step: 1
			};
		},
		methods: {
			verification() {
				this.step=2
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.forgetPassword {
		padding: 48rpx;

		::v-deep {
			.u-input--radius {
				height: 92rpx;
				background: #F6F6F6;
				border-radius: 16rpx;
				border: 0;
				margin-bottom: 30rpx;
				padding: 12rpx 32rpx !important;
			}
		}

		.btn {
			margin-top: 48rpx;
			height: 80rpx;
			background: $base-color;
			border-radius: 50rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 600;
			color: #FFFFFF;
			text-align: center;
			line-height: 80rpx;
		}

		.box {
			display: flex;
			align-items: center;
			justify-content: center;

			.line {
				width: 216rpx;
				height: 2rpx;
				background: #E8E8E8;
				margin: 0 40rpx;
			}

			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 150rpx;

				.icon {
					width: 96rpx;
					height: 96rpx;
					background: #F7F7F7;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 50%;
					margin-bottom: 16rpx;
				}
			}
		}
	}
</style>
