uniapp-app/pages_app/idcardAuth/idcardAuth.vue

<template>
	<view class="idcard-auth-page">
		<!-- 顶部导航栏 -->
		<uni-nav-bar
			left-icon="left"
			title="身份验证"
			@cviewckLeft="goBack"
			fixed
			color="#8B2316"
			height="140rpx"
			:border="false"
			backgroundColor="#eeeeee"
		>
		</uni-nav-bar>
		<!-- 内容区域 -->
		<view class="content-area">
			<!-- 进度指示器 -->
			<view class="progress-bar">
				<view class="barbox">
					<view class="imgbox">
						<up-image  :src="stepImg" width="46rpx" height="46rpx" ></up-image>
						<view class="desc ">身份信息</view>
					</view>
					<view class="line"></view>
					<view class="imgbox">
						<up-image  :src="stepImg" width="46rpx" height="46rpx" ></up-image>
						<view class="desc">添加银行卡</view>
					</view>
					<view class="line"></view>
					<view class="imgbox">
					  <up-image  :src="stepImg" width="46rpx" height="46rpx" ></up-image>
				      <view class="desc">完成</view>
					</view>
				</view>
				
			<!-- 	<view class="progress-step active">
					<view class="step-icon">
						<uni-icons type="checkmarkempty" color="#ff0000" size="20"></uni-icons>
					</view>
					<text class="step-text">身份信息</text>
				</view>
				<view class="progress-line active"></view>
				<view class="progress-step">
					<view class="step-icon">
						<uni-icons type="checkmarkempty" color="#cccccc" size="20"></uni-icons>
					</view>
					<text class="step-text">添加银行卡</text>
				</view>
				<view class="progress-line"></view>
				<view class="progress-step">
					<view class="step-icon">
						<uni-icons type="checkmarkempty" color="#cccccc" size="20"></uni-icons>
					</view>
					<text class="step-text">完成</text>
				</view> -->
			</view>

			<!-- 输入表单 -->
			<view class="form-section">
				<view class="form-item">
					<text class="form-label">姓名</text>
					<input 
						class="form-input" 
						placeholder="请输入您的姓名" 
						v-model="formData.name"
						placeholder-style="color: #cccccc"
					/>
				</view>
				<view class="form-item">
					<text class="form-label">身份证号</text>
					<input 
						class="form-input" 
						placeholder="请输入您的身份证号" 
						v-model="formData.idNumber"
						placeholder-style="color: #cccccc"
					/>
				</view>
			</view>

			<!-- 提示文字 -->
			<view class="warning-text">
				平台不支持绑定多人银行卡,请务必绑定本人卡,实名认证信息,谨慎填写!
			</view>

			<!-- 下一步按钮 -->
			<view class="bottom-actions">
				<button class="next-btn" @click="onNextStep">下一步</button>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import stepImg from "@/static/add_card_no.png"
import stepActiveImg from "@/static/add_card_yes.png"
const formData = ref({
	name: '',
	idNumber: ''
});

const goBack = () => {
	uni.navigateBack();
};

const onNextStep = () => {
	if (!formData.value.name.trim()) {
		uni.showToast({ title: '请输入姓名', icon: 'none' });
		return;
	}
	if (!formData.value.idNumber.trim()) {
		uni.showToast({ title: '请输入身份证号', icon: 'none' });
		return;
	}
	
	uni.showToast({ title: '验证通过，跳转下一步', icon: 'success' });
	// 这里可以跳转到下一步页面
};
</script>

<style lang="scss" scoped>
.idcard-auth-page {
	min-height: 100vh;
	background: #f5f5f5;
}

.content-area {
	padding-top: 160rpx;
	padding: 0rpx 0rpx 0;
}

.progress-bar {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: #ffffff;
	padding: 80rpx 20rpx 120rpx;
	border-radius: 16rpx;
	margin-bottom: 30rpx;
	.barbox{
		display: flex;
		align-items: center;
		justify-content: center;
		.imgbox{
			flex:1;
			
			position: relative;
			.desc{
				position: absolute;
				left:-50%;
				color:#d0d0d0;
				top:80rpx;
				font-size: 28rpx;
				margin-left: -10rpx;
				white-space: nowrap;
				transform: translateY(-50%);
				&.active{
					color:#8B2316;
				}
			}
			
		}
		.imgbox:last-child{
			.desc{
				margin-left: 15rpx;
			}
		}
		.line{
			width:240rpx;
			margin:0 -2rpx;
			height: 16rpx;
			background:#cccccc;
			&.active{
				background:#8B2316;
			}
		}
	}
	.steptext{
		margin:0 30rpx;
		display: flex;
		width:900rpx;
		justify-content: space-between;
		align-items:center ;
	}
	.progress-step {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 1;
		
		.step-icon {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			background: #f0f0f0;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 16rpx;
			
			&.active {
				background: #ff0000;
			}
		}
		
		.step-text {
			font-size: 24rpx;
			color: #666666;
			
			&.active {
				color: #000000;
			}
		}
		
		&.active {
			.step-icon {
				background: #ff0000;
			}
			.step-text {
				color: #000000;
			}
		}
	}
	
	.progress-line {
		flex: 1;
		height: 4rpx;
		background: #f0f0f0;
		margin: 0 20rpx;
		
		&.active {
			background: #ff0000;
		}
	}
}

.form-section {
	background: #ffffff;
	border-radius: 16rpx;
	padding: 30rpx;
	
	
	.form-item {
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
		border-bottom: 2rpx solid #eee;
		
		&:last-child {
			margin-bottom: 0;
		}
		
		.form-label {
			display: block;
			font-size: 28rpx;
			color: #000000;
			width:120rpx;
		}
		
		.form-input {
			flex:1;
			height: 80rpx;
			
			padding: 0 20rpx;
			font-size: 28rpx;
			background: #ffffff;
			
			&:focus {
				border-color: #ff0000;
			}
		}
	}
}

.warning-text {
	background: #ffffff;
	border-radius: 16rpx;
	padding: 30rpx;
	margin-bottom: 60rpx;
	font-size: 26rpx;
	color: #000000;
	line-height: 1.6;
}

.bottom-actions {
	padding: 0 30rox 40rpx;
	
	.next-btn {
		margin:0 30rpx;
		height: 88rpx;
		background: #cccccc;
		color: #ffffff;
		border: none;
		border-radius: 8rpx;
		font-size: 32rpx;
		
		&:active {
			background: #8B2316;
		}
	}
}
</style>