rtliveDoctor/pages_user/certification.vue

<template>
	<view class="container">
		<scroll-view class="content" scroll-y>
			<!-- 驳回意见提示 -->
			<view class="rejection-banner" v-if="rejectionInfo">
				<view class="rejection-icon">✕</view>
				<view class="rejection-text">驳回意见: {{ rejectionInfo }}</view>
			</view>
			
			<!-- 基本信息 -->
			<view class="form-section">
				<view class="section-header">
					<view class="section-indicator"></view>
					<text class="section-title">基本信息</text>
				</view>
				
				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text>姓名</text>
					</view>
					<input 
						class="form-input" 
						v-model="formData.name" 
						placeholder="请输入姓名"
						placeholder-class="placeholder"
					/>
				</view>
				
				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text>身份证号</text>
					</view>
					<input 
						class="form-input" 
						v-model="formData.idNumber" 
						placeholder="请输入身份证号"
						maxlength="18"
						placeholder-class="placeholder"
					/>
				</view>
				
				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text>账号身份</text>
					</view>
					<input 
						class="form-input" 
						v-model="formData.accountIdentity" 
						placeholder="请输入账号身份"
						placeholder-class="placeholder"
					/>
				</view>
				
				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text>机构</text>
					</view>
					<picker style="flex:1" mode="selector" :range="institutionList" range-key="name" @change="onInstitutionChange">
						<view class="form-input picker-input" :class="{ placeholder: !formData.institution }">
							{{ formData.institution || '请选择机构' }}
							<image class="w36 h36" src="@/static/image/icon_my_more.png" mode=""></image>
						</view>
					</picker>
				</view>
				
				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text>科室</text>
					</view>
					<picker style="flex:1" mode="selector" :range="departmentList" range-key="name" @change="onDepartmentChange">
						<view class="form-input picker-input" :class="{ placeholder: !formData.department }">
							{{ formData.department || '请选择科室' }}
							<image class="w36 h36" src="@/static/image/icon_my_more.png" mode=""></image>
						</view>
					</picker>
				</view>
				
				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text>职称</text>
					</view>
					<picker style="flex:1" mode="selector" :range="titleList" range-key="name" @change="onTitleChange">
						<view class="form-input picker-input" :class="{ placeholder: !formData.title }">
							{{ formData.title || '请选择职称' }}
							<image class="w36 h36" src="@/static/image/icon_my_more.png" mode=""></image>
						</view>
					</picker>
				</view>
			</view>
			
			<!-- 身份证明 -->
			<view class="form-section">
				<view class="section-header">
					<view class="section-indicator"></view>
					<text class="section-title">身份证明</text>
					<view class="section-subtitle">以下资质任意选填其中一个</view>
				</view>
				
				
				<!-- 医师职业证 -->
				<view class="certificate-item">
					<view class="certificate-header">
						<view class="x-f">
							<view class="certificate-title">医师职业证</view>
							<view class="certificate-tip">-至少需上传编码页和执业点页</view>
						</view>
						
						<view class="example-btn" @click="goToPracticeExample">
							<image class="w28 h28" src="@/static/image/icon_example.png" mode=""></image>
							<text>示例</text>
						</view>
					</view>
					
					<view class="upload-grid">
						<view class="upload-item" v-for="(image, index) in formData.practiceCertificate" :key="index">
							<image class="uploaded-image" :src="image" mode="aspectFill" @click="previewImage(image, formData.practiceCertificate)"></image>
							<view class="delete-btn" @click="removePracticeImage(index)">×</view>
						</view>
						<view class="upload-item upload-placeholder" @click="choosePracticeImage" v-if="formData.practiceCertificate.length < 2">
							<image class="bg" src="@/static/image/img_idcard_Front.png" mode=""></image>
							<view class="img-btn">
								<image class="w56 h56" src="@/static/image/icon_uplodeidcard.png" mode=""></image>
								<text class="upload-text">点击上传</text>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 医师职称证/工牌 -->
				<view class="certificate-item">
					<view class="certificate-header">
						<view class="certificate-title">医师职称证/工牌</view>
						<view class="example-btn" @click="goToTitleExample">
							<image class="w28 h28" src="@/static/image/icon_example.png" mode=""></image>
							<text>示例</text>
						</view>
					</view>
					<view class="upload-grid">
						<view class="upload-item" v-for="(image, index) in formData.titleCertificate" :key="index">
							<image class="uploaded-image" :src="image" mode="aspectFill" @click="previewImage(image, formData.titleCertificate)"></image>
							<view class="delete-btn" @click="removeTitleImage(index)">×</view>
						</view>
						<view class="upload-item upload-placeholder" @click="chooseTitleImage">
							<image class="bg" src="@/static/image/img_idcard_Front.png" mode=""></image>
							<view class="img-btn">
								<image class="w56 h56" src="@/static/image/icon_uplodeidcard.png" mode=""></image>
								<text class="upload-text">点击上传</text>
							</view>
							
						</view>
					</view>
				</view>
			</view>
			
			<!-- 银行卡信息 -->
			<view class="form-section">
				<view class="section-header">
					<view class="section-indicator"></view>
					<text class="section-title">银行卡信息</text>
				</view>
				
				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text>开户行</text>
					</view>
					<picker style="flex:1" mode="selector" :range="bankList" range-key="name" @change="onBankChange">
						<view class="form-input picker-input" :class="{ placeholder: !formData.bank }">
							{{ formData.bank || '请选择开户行' }}
							<image class="w36 h36" src="@/static/image/icon_my_more.png" mode=""></image>
						</view>
					</picker>
				</view>
				
				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text>支行名称</text>
					</view>
					<input 
						class="form-input" 
						v-model="formData.branchName" 
						placeholder="请输入支行名称"
					/>
				</view>
				
				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text>银行卡号</text>
					</view>
					<input 
						class="form-input" 
						v-model="formData.bankCardNumber" 
						placeholder="请输入银行卡号"
						type="number"
					/>
				</view>
			</view>
		</scroll-view>
		
		<!-- 底部操作栏 -->
		<view class="bottom-bar">
		
			<view class="action-buttons">
				<view class="btn btn-cancel" @click="handleCancel">暂不认证</view>
				<view class="btn btn-submit" @click="handleSubmit">提交认证</view>
			</view>
			<view class="agreement-checkbox x-c">
				<checkbox-group @change="onAgreementChange">
					<label class="checkbox-label">
						<checkbox value="agree" :checked="agreed" color="#388BFF" />
						<text class="agreement-text">
							我已阅读并同意
							<text class="link-text" @click.stop="goToUserAgreement">《用户协议》</text>
							<text class="link-text" @click.stop="goToInformedConsent">《知情同意书》</text>
						</text>
					</label>
				</checkbox-group>
			</view>
		</view>
	</view>
</template>

<script>
import { submitCertification, getCertificationInfo } from '@/api-js/certification'
export default {
	data() {
		return {
			rejectionInfo: '', // 驳回意见
			agreed: false,
			formData: {
				name: '',
				idNumber: '',
				accountIdentity: '',
				institution: '',
				department: '',
				title: '',
				practiceCertificate: [], // 医师职业证图片数组
				titleCertificate: [], // 医师职称证/工牌图片数组
				bank: '',
				branchName: '',
				bankCardNumber: ''
			},
			institutionList: [],
			departmentList: [],
			titleList: [],
			bankList: []
		}
	},
	onLoad(options) {
		if (options.rejectionInfo) {
			this.rejectionInfo = decodeURIComponent(options.rejectionInfo)
		}
		this.institutionList = [
			{ name: '机构1', id: 1 },
			{ name: '机构2', id: 2 }
		]
		this.departmentList = [
			{ name: '内科', id: 1 },
			{ name: '外科', id: 2 },
			{ name: '儿科', id: 3 }
		]
		this.titleList = [
			{ name: '主任医师', id: 1 },
			{ name: '副主任医师', id: 2 },
			{ name: '主治医师', id: 3 }
		]
		this.bankList = [
			{ name: '中国工商银行', id: 1 },
			{ name: '中国建设银行', id: 2 },
			{ name: '中国银行', id: 3 }
		]
		//this.loadData()
	},
	methods: {
		async loadData() {
			try {
				// 加载认证信息（如果已提交过）
				const res = await getCertificationInfo()
				if (res.code === 200 && res.data) {
					this.formData = { ...this.formData, ...res.data }
					if (res.data.rejectionInfo) {
						this.rejectionInfo = res.data.rejectionInfo
					}
				}
				// 加载选项数据
				this.loadOptions()
			} catch (e) {
				console.error('加载数据失败', e)
				this.loadOptions()
			}
		},
		loadOptions() {
			// 这里应该从API获取选项数据
			this.institutionList = [
				{ name: '机构1', id: 1 },
				{ name: '机构2', id: 2 }
			]
			this.departmentList = [
				{ name: '内科', id: 1 },
				{ name: '外科', id: 2 },
				{ name: '儿科', id: 3 }
			]
			this.titleList = [
				{ name: '主任医师', id: 1 },
				{ name: '副主任医师', id: 2 },
				{ name: '主治医师', id: 3 }
			]
			this.bankList = [
				{ name: '中国工商银行', id: 1 },
				{ name: '中国建设银行', id: 2 },
				{ name: '中国银行', id: 3 }
			]
		},
		onInstitutionChange(e) {
			const index = e.detail.value
			this.formData.institution = this.institutionList[index].name
		},
		onDepartmentChange(e) {
			const index = e.detail.value
			this.formData.department = this.departmentList[index].name
		},
		onTitleChange(e) {
			const index = e.detail.value
			this.formData.title = this.titleList[index].name
		},
		onBankChange(e) {
			const index = e.detail.value
			this.formData.bank = this.bankList[index].name
		},
		onAgreementChange(e) {
			this.agreed = e.detail.value.includes('agree')
		},
		choosePracticeImage() {
			uni.chooseImage({
				count: 2 - this.formData.practiceCertificate.length,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					this.formData.practiceCertificate = [...this.formData.practiceCertificate, ...res.tempFilePaths]
				}
			})
		},
		removePracticeImage(index) {
			this.formData.practiceCertificate.splice(index, 1)
		},
		chooseTitleImage() {
			uni.chooseImage({
				count: 9 - this.formData.titleCertificate.length,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					this.formData.titleCertificate = [...this.formData.titleCertificate, ...res.tempFilePaths]
				}
			})
		},
		removeTitleImage(index) {
			this.formData.titleCertificate.splice(index, 1)
		},
		previewImage(current, urls) {
			uni.previewImage({
				current: current,
				urls: urls
			})
		},
		goToPracticeExample() {
			uni.navigateTo({
				url: '/pages_user/practiceCertificateExample'
			})
		},
		goToTitleExample() {
			uni.navigateTo({
				url: '/pages_user/certificationExample'
			})
		},
		goToUserAgreement() {
			uni.navigateTo({
				url: '/pages_user/userAgreement'
			})
		},
		goToInformedConsent() {
			uni.navigateTo({
				url: '/pages_user/informedConsent'
			})
		},
		handleCancel() {
			uni.navigateBack()
		},
		async handleSubmit() {
			// 表单验证
			if (!this.formData.name) {
				uni.showToast({
					icon: 'none',
					title: '请输入姓名'
				})
				return
			}
			if (!this.formData.idNumber) {
				uni.showToast({
					icon: 'none',
					title: '请输入身份证号'
				})
				return
			}
			if (!this.formData.accountIdentity) {
				uni.showToast({
					icon: 'none',
					title: '请输入账号身份'
				})
				return
			}
			if (!this.formData.institution) {
				uni.showToast({
					icon: 'none',
					title: '请选择机构'
				})
				return
			}
			if (!this.formData.department) {
				uni.showToast({
					icon: 'none',
					title: '请选择科室'
				})
				return
			}
			if (!this.formData.title) {
				uni.showToast({
					icon: 'none',
					title: '请选择职称'
				})
				return
			}
			// 至少上传一种证件
			if (this.formData.practiceCertificate.length === 0 && this.formData.titleCertificate.length === 0) {
				uni.showToast({
					icon: 'none',
					title: '请至少上传一种身份证明'
				})
				return
			}
			// 医师职业证至少上传2张
			if (this.formData.practiceCertificate.length > 0 && this.formData.practiceCertificate.length < 2) {
				uni.showToast({
					icon: 'none',
					title: '医师职业证至少需上传编码页和执业点页'
				})
				return
			}
			if (!this.formData.bank) {
				uni.showToast({
					icon: 'none',
					title: '请选择开户行'
				})
				return
			}
			if (!this.formData.branchName) {
				uni.showToast({
					icon: 'none',
					title: '请输入支行名称'
				})
				return
			}
			if (!this.formData.bankCardNumber) {
				uni.showToast({
					icon: 'none',
					title: '请输入银行卡号'
				})
				return
			}
			if (!this.agreed) {
				uni.showToast({
					icon: 'none',
					title: '请阅读并同意用户协议和知情同意书'
				})
				return
			}
			
			try {
				uni.showLoading({ title: '提交中...' })
				const res = await submitCertification(this.formData)
				uni.hideLoading()
				if (res.code === 200) {
					uni.showToast({
						icon: 'success',
						title: '提交成功'
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				} else {
					uni.showToast({
						icon: 'none',
						title: res.msg || '提交失败'
					})
				}
			} catch (e) {
				uni.hideLoading()
				uni.showToast({
					icon: 'none',
					title: '提交失败'
				})
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background: #f5f5f5;
	display: flex;
	flex-direction: column;
}

.content {
	flex: 1;
	padding-bottom: 200rpx;
	box-sizing: border-box;
}

.rejection-banner {
	display: flex;
	align-items: center;
	padding: 24rpx;
	background: #FF5030;
	color: #fff;
	margin: 24rpx;
	border-radius: 8rpx;
	
	.rejection-icon {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.3);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		margin-right: 16rpx;
	}
	
	.rejection-text {
		flex: 1;
		font-size: 28rpx;
		line-height: 1.5;
	}
}

.form-section {
	background: #fff;
	margin: 20rpx;
	border-radius: 16rpx;
	padding: 32rpx;
	
	.section-header {
		display: flex;
		align-items: center;
		margin-bottom: 32rpx;
		
		.section-indicator {
			width: 6rpx;
			height: 32rpx;
			background: #388BFF;
			border-radius: 3rpx;
			margin-right: 16rpx;
		}
		
		.section-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}
	}
	
	.section-subtitle {
		font-size: 24rpx;
		color: #999;
		//margin-bottom: 24rpx;
		margin-left: 22rpx;
	}
	
	.form-item {
		margin-bottom: 32rpx;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #EBEDF0;
		&:last-child {
			border-bottom: 0;
			margin-bottom: 0;
		}
		
		.form-label {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #333;
			margin-bottom: 16rpx;
			width: 150rpx;
			.required {
				color: #FF5030;
				margin-right: 4rpx;
			}
		}
		
		.form-input {
			// width: 100%;
			flex:1;
			height: 80rpx;
			padding: 0 24rpx;
			font-size: 28rpx;
			color: #333;
			
			&.placeholder {
				color: #C8C9CC;
			}
			
			&.picker-input {
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				.arrow-right {
					font-size: 32rpx;
					color: #999;
				}
			}
		}
	}
	
	.certificate-item {
		padding-bottom: 32rpx;
		margin-bottom: 32rpx;
		border-bottom: 2rpx solid #F5F5F5; 
		&:last-child {
			margin-bottom: 0;
			border-bottom: 0;
		}
		
		.certificate-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 24rpx;
			
			.certificate-title {
				font-size: 28rpx;
				color: #333;
				font-weight: 500;
			}
			
			.example-btn {
				display: flex;
				align-items: center;
				gap: 8rpx;
				font-size: 24rpx;
				color: #388BFF;
				
				.example-icon {
					width: 32rpx;
					height: 32rpx;
					border-radius: 50%;
					background: #E6F7FF;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 20rpx;
					color: #388BFF;
				}
			}
		}
		
		.certificate-tip {
			font-size: 24rpx;
			color: #999;
			// margin-bottom: 16rpx;
		}
		
		.upload-grid {
			display: flex;
			gap: 16rpx;
			flex-wrap: wrap;
			
			.upload-item {
				width: 310rpx;
				height: 176rpx;
				border-radius: 8rpx;
				overflow: hidden;
				position: relative;
				.uploaded-image {
					width: 100%;
					height: 100%;
				}
				.bg{
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
				}
				.delete-btn {
					position: absolute;
					top: 0;
					right: 0;
					width: 40rpx;
					height: 40rpx;
					line-height: 40rpx;
					background: rgba(0, 0, 0, 0.5);
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 32rpx;
					color: #fff;
				}
				
				&.upload-placeholder {
					background: #f5f5f5;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					// border: 2rpx dashed #ddd;
				    .img-btn{
						z-index: 1;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
					}
					.camera-icon {
						font-size: 60rpx;
						margin-bottom: 8rpx;
					}
					
					.upload-text {
						font-size: 24rpx;
						color: #388BFF;
					}
				}
			}
		}
	}
}

.bottom-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #fff;
	padding: 24rpx;
	// border-top: 1rpx solid #f0f0f0;
	z-index: 100;
	
	.agreement-checkbox {
		margin-bottom: 24rpx;
		margin-top: 20rpx;
		.checkbox-label {
			display: flex;
			align-items: flex-start;
			font-size: 24rpx;
			color: #666;
			
			.agreement-text {
				margin-left: 8rpx;
				line-height: 1.5;
				
				.link-text {
					color: #388BFF;
				}
			}
		}
	}
	
	.action-buttons {
		display: flex;
		gap: 24rpx;
		
		.btn {
			flex: 1;
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 8rpx;
			font-size: 32rpx;
			font-weight: 500;
			border-radius: 200rpx 200rpx 200rpx 200rpx;
			&.btn-cancel {
				background: #fff;
				border: 2rpx solid #388BFF;
				color: #388BFF;
			}
			
			&.btn-submit {
				background: #388BFF;
				color: #fff;
			}
		}
	}
}
</style>