jp-zeroWorkerStation/pages/packages/mine/otherServices/authentication.vue

<template>
	<view>
		<u-navbar back-text="实名认证" back-icon-size="28" back-icon-color="#ffffff"
			:background="{backgroundColor: '#2795FD',}" :back-text-style="{color: '#ffffff'}"></u-navbar>
		<!-- 标签 -->
		<view class="tabs">
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</view>
		<view class="personal-box" v-if="current==0">
		<!-- 个人认证 -->
		<view class="personal-authentication" v-if="authentication">
			<view class="headline">
				您的信息将会被严格保密，请放心填写
			</view>
			<!-- 信息 -->
			<view class="infos-group">
				<view class="item">
					<view class="title">
						手机号码
					</view>
					<view class="value">
						<input type="text" placeholder="15500001111">
					</view>
				</view>
				<view class="item">
					<view class="title">
						真实姓名
					</view>
					<view class="value">
						<input type="text" placeholder="请填写真实姓名">
					</view>
				</view>
				<view class="item">
					<view class="title">
						身份证号
					</view>
					<view class="value">
						<input type="text" placeholder="请填写18位身份证号">
					</view>
				</view>
			</view>
			<button class="save" @click="authentication=false">保存</button>
			
		</view>
		<!-- 认证成功 -->
		<view class="success" v-if="!authentication">
			<view class="img-box">
				<img src="@/assets/img/success.png" alt="">
			</view>
			<!-- 信息 -->
			<view class="infos-box">
				<view class="item">
					<view class="title">
						手机号码
					</view>
					<view class="title">
						15500001111
					</view>
				</view>
				<view class="item">
					<view class="title">
						姓名
					</view>
					<view class="title">
						李*宵
					</view>
				</view>
				<view class="item">
					<view class="title">
						身份证号
					</view>
					<view class="title">
						4****************1
					</view>
				</view>
			</view>
		
		  
		  
		</view>
		<!-- 提示 -->
		<view class="tips" v-if="!authentication" >
			<view class="tips-item">
				<view class="icon">
					<img src="@/assets/img/shield-user-line.png" alt="">
				</view>
						<view class="text">
							信息安全保护中，认证信息将用于创建信息等功能，与账号为已绑定，未经您允许不对外提供
						</view>
			</view>
					<view class="tips-item">
						<view class="icon">
							<u-icon name="info-circle"></u-icon>
						</view>
						<view class="text">
							每个账号只能进行一次实名认证，认证成功不支持修改
						</view>
					</view>
		</view>
	</view>
	<!-- 企业认证 -->
	<view class="enterprise-box" v-if="current==1" >
		
		<view class="enterprise-authentication" v-if="enterprise">
			<view class="headline">
				您的信息将会被严格保密，请放心填写
			</view>
			<!-- 企业信息 -->
			<view class="enterprise-infos">
				<view class="infos-input">
					<view class="item">
						<view class="title">
							企业全称
						</view>
						<view class="input">
							<input type="text" placeholder="请填写企业全称">
						</view>
					</view>
				</view>
				<!-- 营业执照 -->
				<view class="business-license">
					<view class="title">
						<view class="title-left">
							营业执照
						</view>
						<view class="title-right">
							请保证图中文字、印章等清晰可辨识
						</view>
					</view>
					
					<u-upload width="686" max-count="1"  ></u-upload>
					
				</view>
			</view>
			<button class="save" @click="enterprise=false">保存</button>
		</view>
		<!-- 企业认证成功 -->
		<view class="success" v-if="!enterprise">
			<view class="img-box">
				<img src="@/assets/img/success.png" alt="">
			</view>
			<!-- 信息 -->
			<view class="infos-box">
				<view class="item">
					<view class="title">
						企业全称
					</view>
					<view class="value">
						湖北荆鹏软件开发有限公司
					</view>
				</view>
				<view class="item">
					<view class="title">
						营业执照
					</view>
					
				</view>
				<view class="img-box">
					<img src="@/assets/img/business-license.png" alt="">
				</view>
				
			</view>
		  
		</view>
		<!-- 提示 -->
		<view class="tips" v-if="!enterprise" >
			<view class="tips-item">
				<view class="icon">
					<img src="@/assets/img/shield-user-line.png" alt="">
				</view>
						<view class="text">
							信息安全保护中，认证信息将用于创建信息等功能，与账号为已绑定，未经您允许不对外提供
						</view>
			</view>
					<view class="tips-item">
						<view class="icon">
							<u-icon name="info-circle"></u-icon>
						</view>
						<view class="text">
							每个账号只能进行一次实名认证，认证成功不支持修改
						</view>
					</view>
		</view>
	</view>
	 
	 
	 
	</view>
</template>

<script>
	export default {
		data() {
			return {
				authentication:true,
				enterprise:true,
				list: [{
					name: '个人认证'
				}, {
					name: '企业认证'
				}],
				current: 0,
				
			}
		},
		methods: {
			change(index) {
				this.current = index;
			}
		}
	}
</script>
<style>
	page {
		background: #F0F0F2;
		padding-bottom: 150px;
	}
</style>

<style lang="scss" scoped>
	.headline{
			 color: rgba(51, 51, 51, 1);
			 padding-left: 32rpx;
			 margin-top: 32rpx;
		}
	.personal-box{


 // 信息
 .infos-group{
	 background-color: #fff;
	 margin-top: 16rpx;
	 .item{
		 display: flex;
		 align-items: center;
		 padding: 24rpx 32rpx;
		 
		 .title{
			 color: rgba(51, 51, 51, 1);
			 font-size: 32rpx;
			 width: 180rpx;
		 }
		 .value{
			 /deep/.uni-input-input{
				 color: rgba(51, 51, 51, 1);
				 font-size: 32rpx;
			 }
		 }
	 }
	 .img-box{
		 display: flex;
		 justify-content: center;
		 img{
			 width: 100%;
			 height:440rpx;
		 }
	 }
	 
 }





}
// 企业认证
.enterprise-box{
	
	.enterprise-authentication{
		
		
		.enterprise-infos{
			background-color: #fff;
			padding: 24rpx 32rpx;
			margin-top: 16rpx;
		}
		.infos-input{
			padding:0 0  24rpx 0;
			border-bottom: 1px solid #e6e6e6;
		}
		.item{
			display: flex;
			align-items: center;
			.title{
						 color: rgba(51, 51, 51, 1);
						 font-size: 32rpx;
						 width: 180rpx;
					 }
					 .value{
						 /deep/.uni-input-input{
							 color: rgba(51, 51, 51, 1);
							 font-size: 32rpx;
						 }
					 }
		}
	}
.business-license{
	
	.title{
		display: flex;
		justify-content: space-between;
		padding: 24rpx 0 20rpx ;
		.title1{
			color: rgba(51, 51, 51, 1);
			font-size: 32rpx;
		}
		.title2{
			color: #999999;
		}
		
	}
	// 上传
	/deep/.u-list-item {
		width: 686rpx;
		height: 360rpx !important;
	}
	/deep/.u-add-btn {
	color: #ACBAC9;
	font-size: 96rpx
	}
	/deep/.uicon-plus[data-v-2ee87dc9]:before {
		font-size: 72rpx;
	}
}

}
//认证成功
.success{
	background-color: #fff;
	.img-box{
		display: flex;
		justify-content: center;
		width: 686rpx;
		height: 596rpx;
		margin: 0 auto;
		padding: 48rpx;
		img{
			 width: 100%;
			 height: 100%;
			 
		}
	}
	// 信息
	.infos-box{
		
		.item{
			display: flex;
			align-items: center;
			padding:24rpx ;
			margin:0 32rpx;
			border-bottom:1px solid #e3e3e3;
			.title{
				color: rgba(119, 119, 119, 1);
				font-size: 16px;
				width: 180rpx;
			}
			.value{
				color: rgba(51, 51, 51, 1);
				font-size: 16px;
			}
		}
	}
	
}


//提示
.tips{
	padding: 24rpx 32rpx;
	.tips-item{
		display: flex;
		margin-bottom: 24rpx;
		font-size: 24rpx;
		line-height: 34rpx;
		.icon{
			width: 32rpx;
			height: 32rpx;
			img{
				width: 100%;
				height: 100%;
				vertical-align: middle;
			}
		}
		.text{
			flex:1;
			margin-left: 8rpx;
		}
	}
}
// 保存
.save{
	background-color: rgba(34, 149, 255, 1);
	color: rgba(241, 241, 241, 1);
	font-size: 36rpx;
	height: 96rpx;
	margin: 40rpx 32rpx;
	border-radius: 50px;}
</style>