xiangqinxiangmu/LiangZhiYUMao/pages/settings/id-verification.vue

<template>
	<view class="id-verification-page">
		<!-- 自定义导航栏 -->
		<view class="custom-navbar">
			<view class="navbar-back" @click="goBack">
				<text class="back-icon">←</text>
			</view>
			<view class="navbar-title">绑定身份证</view>
			<view class="navbar-placeholder"></view>
		</view>
		
		<!-- 提示信息 -->
		<view class="tip-card">
			<text class="tip-icon">🔒</text>
			<view class="tip-content">
				<text class="tip-title">信息安全保障</text>
				<text class="tip-text">您的身份信息将严格加密保存，仅用于实名认证</text>
			</view>
		</view>
		
		<!-- 表单区域 -->
		<view class="form-container">
			<view class="form-item">
				<text class="form-label">真实姓名</text>
				<input class="form-input" v-model="formData.realName" placeholder="请输入真实姓名" />
			</view>
			
			<view class="form-item">
				<text class="form-label">身份证号</text>
				<input class="form-input" v-model="formData.idCard" placeholder="请输入18位身份证号" maxlength="18" />
			</view>
		</view>
		
		<!-- 上传身份证照片 -->
		<view class="upload-section">
			<text class="section-title">上传身份证照片</text>
			<view class="upload-grid">
				<view class="upload-item">
					<image v-if="formData.idCardFront" :src="formData.idCardFront" class="id-card-image" mode="aspectFill"></image>
					<view v-else class="upload-placeholder" @click="uploadIdCard('front')">
						<text class="upload-icon">📷</text>
						<text class="upload-text">身份证正面</text>
					</view>
				</view>
				
				<view class="upload-item">
					<image v-if="formData.idCardBack" :src="formData.idCardBack" class="id-card-image" mode="aspectFill"></image>
					<view v-else class="upload-placeholder" @click="uploadIdCard('back')">
						<text class="upload-icon">📷</text>
						<text class="upload-text">身份证反面</text>
					</view>
				</view>
			</view>
			<text class="upload-tip">请确保照片清晰，信息完整可见</text>
		</view>
		
		<!-- 提交按钮 -->
		<view class="submit-container">
			<button class="submit-btn" :disabled="canSubmit" @click="handleSubmit">
				{{ submitting ? '提交中...' : '提交认证' }}
			</button>
		</view>
		
		<!-- 协议说明 -->
		<view class="agreement">
			<text class="agreement-text">提交即表示同意</text>
			<text class="agreement-link" @click="showAgreement">《实名认证协议》</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
		formData: {
			realName: '',
			idCard: '',
			idCardFront: '',
			idCardBack: ''
		},
			countdown: 0,
			submitting: false,
			timer: null
		}
	},
	
	computed: {
		canSubmit() {
			return this.formData.realName && 
			       this.formData.idCard && 
			       this.formData.code && 
			       this.formData.idCardFront && 
			       this.formData.idCardBack &&
			       !this.submitting
		}
	},
	
	onUnload() {
		if (this.timer) {
			clearInterval(this.timer)
		}
	},
	
	methods: {
		// 发送验证码
		async sendCode() {
			if (this.countdown > 0) return
			
			try {
				// TODO: 调用发送验证码API
				uni.showToast({
					title: '验证码已发送',
					icon: 'success'
				})
				
				// 开始倒计时
				this.countdown = 60
				this.timer = setInterval(() => {
					this.countdown--
					if (this.countdown <= 0) {
						clearInterval(this.timer)
					}
				}, 1000)
			} catch (error) {
				console.error('发送验证码失败:', error)
				uni.showToast({
					title: '发送失败',
					icon: 'none'
				})
			}
		},
		
		// 上传身份证照片
		uploadIdCard(type) {
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					const tempFilePath = res.tempFilePaths[0]
					
					// TODO: 上传到服务器
					// 暂时使用本地临时路径
					if (type === 'front') {
						this.formData.idCardFront = tempFilePath
					} else {
						this.formData.idCardBack = tempFilePath
					}
					
					uni.showToast({
						title: '照片已选择',
						icon: 'success'
					})
				}
			})
		},
		
		// 提交认证
		async handleSubmit() {
			if (this.canSubmit) return
			
			// 验证身份证格式
			if (!this.validateIdCard(this.formData.idCard)) {
				uni.showToast({
					title: '请输入正确的身份证号',
					icon: 'none'
				})
				return
			}
			
			this.submitting = true
			
			try {
				// TODO: 调用实名认证API
				await new Promise(resolve => setTimeout(resolve, 2000))
				
				uni.showToast({
					title: '提交成功，等待审核',
					icon: 'success'
				})
				
				setTimeout(() => {
					uni.navigateBack()
				}, 1500)
			} catch (error) {
				console.error('提交失败:', error)
				uni.showToast({
					title: '提交失败，请重试',
					icon: 'none'
				})
			} finally {
				this.submitting = false
			}
		},
		
		// 验证身份证号
		validateIdCard(idCard) {
			const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
			return reg.test(idCard)
		},
		
		// 显示协议
		showAgreement() {
			uni.showModal({
				title: '实名认证协议',
				content: '为了保障您的权益，我们会严格保护您的个人信息...',
				showCancel: false
			})
		},
		
		// 返回
		goBack() {
			uni.navigateBack()
		}
	}
}
</script>

<style scoped>
.id-verification-page {
	min-height: 100vh;
	background: #F5F5F5;
}

/* 自定义导航栏 */
.custom-navbar {
	height: 88rpx;
	background: #E91E63;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20rpx;
	color: white;
}

.navbar-back {
	padding: 10rpx 20rpx;
}

.back-icon {
	font-size: 40rpx;
	color: white;
	font-weight: bold;
}

.navbar-title {
	font-size: 32rpx;
	font-weight: bold;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

.navbar-placeholder {
	width: 80rpx;
}

/* 提示卡片 */
.tip-card {
	margin: 24rpx;
	padding: 30rpx;
	background: linear-gradient(135deg, #FFF3E0 0%, #FFECB3 100%);
	border-radius: 16rpx;
	display: flex;
	align-items: center;
	gap: 20rpx;
	border-left: 6rpx solid #FF9800;
}

.tip-icon {
	font-size: 48rpx;
}

.tip-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8rpx;
}

.tip-title {
	font-size: 28rpx;
	font-weight: bold;
	color: #E65100;
}

.tip-text {
	font-size: 24rpx;
	color: #F57C00;
	line-height: 1.5;
}

/* 表单区域 */
.form-container {
	margin: 24rpx;
}

.form-item {
	background: white;
	padding: 32rpx;
	margin-bottom: 24rpx;
	border-radius: 16rpx;
}

.form-label {
	display: block;
	font-size: 28rpx;
	color: #333;
	margin-bottom: 20rpx;
	font-weight: bold;
}

.form-input {
	width: 100%;
	height: 80rpx;
	padding: 0 24rpx;
	background: #F5F5F5;
	border-radius: 12rpx;
	font-size: 28rpx;
	border: 2rpx solid #E0E0E0;
}

.code-input-group {
	display: flex;
	gap: 16rpx;
}

.code-input {
	flex: 1;
}

.send-code-btn {
	width: 200rpx;
	height: 80rpx;
	line-height: 80rpx;
	background: #E91E63;
	color: white;
	border: none;
	border-radius: 12rpx;
	font-size: 26rpx;
	padding: 0;
}

.send-code-btn[disabled] {
	background: #BDBDBD;
}

/* 上传区域 */
.upload-section {
	margin: 24rpx;
	padding: 32rpx;
	background: white;
	border-radius: 16rpx;
}

.section-title {
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 24rpx;
	display: block;
}

.upload-grid {
	display: flex;
	gap: 24rpx;
	margin-bottom: 16rpx;
}

.upload-item {
	flex: 1;
	aspect-ratio: 16/10;
}

.upload-placeholder {
	width: 100%;
	height: 100%;
	background: #F5F5F5;
	border: 2rpx dashed #BDBDBD;
	border-radius: 12rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12rpx;
}

.upload-icon {
	font-size: 60rpx;
}

.upload-text {
	font-size: 24rpx;
	color: #999;
}

.id-card-image {
	width: 100%;
	height: 100%;
	border-radius: 12rpx;
}

.upload-tip {
	font-size: 24rpx;
	color: #999;
	text-align: center;
}

/* 提交按钮 */
.submit-container {
	padding: 40rpx 24rpx;
}

.submit-btn {
	width: 100%;
	height: 100rpx;
	background: linear-gradient(135deg, #E91E63 0%, #C2185B 100%);
	color: white;
	border-radius: 50rpx;
	font-size: 32rpx;
	font-weight: bold;
	border: none;
	box-shadow: 0 8rpx 24rpx rgba(233, 30, 99, 0.3);
}

.submit-btn[disabled] {
	background: #BDBDBD;
	box-shadow: none;
}

/* 协议 */
.agreement {
	text-align: center;
	padding: 0 24rpx 40rpx;
	font-size: 24rpx;
	color: #999;
}

.agreement-link {
	color: #E91E63;
	text-decoration: underline;
}
</style>