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.doctorName" 
						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.idCard" 
						placeholder="请输入身份证号"
						maxlength="18"
						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="accountIdentityOptions"
						range-key="label"
						:value="getAccountIdentityIndex()"
						@change="onAccountIdentityChange"
					>
						<view class="form-input picker-input" :class="{ placeholder: !formData.accountType }">
							{{ getAccountIdentityLabel() || '请选择账号身份' }}
							<image class="w32 h32" 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>
					<view style="flex:1" @click="openInstitutionPicker">
						<view class="form-input picker-input" :class="{ placeholder: !formData.institution }">
							{{ getInstitutionLabel() || '请选择机构' }}
							<image class="w32 h32" src="/static/image/icon_my_more.png" mode=""></image>
						</view>
					</view>
				</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="label"
						:value="getDepartmentIndex()"
						@change="onDepartmentChange"
					>
						<view class="form-input picker-input" :class="{ placeholder: !formData.department }">
							{{ getDepartmentLabel() || '请选择科室' }}
							<image class="w32 h32" 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="label"
						:value="getTitleIndex()"
						@change="onTitleChange"
					>
						<view class="form-input picker-input" :class="{ placeholder: !formData.jobTitle }">
							{{ getTitleLabel() || '请选择职称' }}
							<image class="w32 h32" 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" v-if="formData.titleCertificate.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>
			
			<!-- 银行卡信息 -->
			<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="label"
						:value="getBankIndex()"
						@change="onBankChange"
					>
						<view class="form-input picker-input" :class="{ placeholder: !formData.bankName }">
							{{ getBankLabel() || '请选择开户行' }}
							<image class="w32 h32" 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.bankBranch" 
						placeholder="请输入支行名称"
					/>
				</view>
				
				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text>银行卡号</text>
					</view>
					<input 
						class="form-input" 
						v-model="formData.bankCardNo" 
						placeholder="请输入银行卡号"
						type="number"
					/>
				</view>
			</view>
		</scroll-view>
		
		<!-- 机构搜索弹窗 -->
		<view class="search-picker-popup" v-if="showInstitutionPicker" @click="closeInstitutionPicker">
			<view class="popup-content" @click.stop>
				<view class="popup-header">
					<text class="popup-title">选择机构</text>
					<view class="popup-close" @click="closeInstitutionPicker">×</view>
				</view>
				<view class="search-box">
					<input 
						class="search-input" 
						v-model="institutionSearchKeyword" 
						placeholder="请输入机构名称搜索"
						@input="onInstitutionSearch"
					/>
				</view>
				<scroll-view class="search-list" scroll-y>
					<view 
						class="search-item" 
						v-for="(item, index) in filteredInstitutionList" 
						:key="index"
						:class="{ active: formData.institution === item.label }"
						@click="selectInstitution(item)"
					>
						<text>{{ item.label }}</text>
						<text v-if="formData.institution === item.label" class="check-icon">✓</text>
					</view>
					<view class="search-empty" v-if="filteredInstitutionList.length === 0">
						<text>暂无匹配结果</text>
					</view>
				</scroll-view>
			</view>
		</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, 
	getCertificationStatus,
	identityType,
	getHospitalList,
	getDeptData,
	getBankTypeList
} from '@/api/certification'
import { uploadOSS } from '@/api/common'
export default {
	data() {
		return {
			rejectionInfo: '', // 驳回意见
			agreed: false,
			certificationStatus: null, // 认证状态
			formData: {
				doctorName: '',
				idCard: '',
				accountType: '',
				institution: '',
				companyId: '',
				department: '',
				jobTitle: '',
				bankName: '',
				bankBranch: '',
				bankCardNo: '',
				practiceCertificate: [],
				titleCertificate: []
			},
			institutionList: [],
			departmentList: [],
			bankList: [],
			titleList: [],
			accountIdentityOptions: [],
			showInstitutionPicker: false,
			institutionSearchKeyword: '',
			filteredInstitutionList: [],
		}
	},
	onLoad(options) {
		const user = JSON.parse(uni.getStorageSync('userInfo'))
		this.formData.companyId = user.companyId
		if (options.rejectionInfo) {
			this.rejectionInfo = decodeURIComponent(options.rejectionInfo)
		}
		this.loadData()
	},
	methods: {
		extractArray(data) {
			if (Array.isArray(data)) return data
			const candidates = [
				data?.data,
				data?.list,
				data?.rows,
				data?.titleList,
				data?.hospitalList,
				data?.departmentList,
				data?.bankList
			]
			return candidates.find(Array.isArray) || []
		},
		getAccountIdentityLabel() {
			return this.formData.accountType || ''
		},
		getAccountIdentityIndex() {
			if (!this.formData.accountType) return 0
			const idx = this.accountIdentityOptions.findIndex(opt => opt.label === this.formData.accountType)
			return idx >= 0 ? idx : 0
		},
		getInstitutionLabel() {
			return this.formData.institution || ''
		},
		getDepartmentLabel() {
			return this.formData.department || ''
		},
		getDepartmentIndex() {
			if (!this.formData.department) return 0
			const idx = this.departmentList.findIndex(opt => opt.label === this.formData.department)
			return idx >= 0 ? idx : 0
		},
		getBankLabel() {
			return this.formData.bankName || ''
		},
		getBankIndex() {
			if (!this.formData.bankName) return 0
			const idx = this.bankList.findIndex(opt => opt.label === this.formData.bankName)
			return idx >= 0 ? idx : 0
		},
		getTitleLabel() {
			return this.formData.jobTitle || ''
		},
		getTitleIndex() {
			if (!this.formData.jobTitle) return 0
			const idx = this.titleList.findIndex(opt => opt.label === this.formData.jobTitle)
			return idx >= 0 ? idx : 0
		},
		async loadData() {
			try {
				uni.showLoading({ title: '加载中...' })
				const [identityRes, bankRes, instRes, departRes, titleRes] = await Promise.all([
					identityType({ dictType: 'doctor_account_identity_type' }).catch(() => ({ code: 0 })),
					getBankTypeList().catch(() => ({ code: 0 })),
					getHospitalList().catch(() => ({ code: 0 })),
					getDeptData().catch(() => ({ code: 0 })),
					identityType({ dictType: 'hospital_title' }).catch(() => ({ code: 0 })),
				])

				if (identityRes.code === 200) {
					const arr = this.extractArray(identityRes.data)
					this.accountIdentityOptions = arr.map(item => ({
						label: item.dictLabel || '',
						value: item.dictValue
					})).filter(opt => opt.label)
				}

				if (bankRes.code === 200) {
					const arr = this.extractArray(bankRes.data)
					this.bankList = arr.map(item => ({
						label: item.bankName || '',
						value: item.id
					})).filter(opt => opt.label)
				}

				if (instRes.code === 200) {
					const arr = this.extractArray(instRes.data)
					this.institutionList = arr.map(item => ({
						label: item.hospitalName || '',
						value: item.id
					})).filter(opt => opt.label)
				}

				if (departRes.code === 200) {
					const arr = this.extractArray(departRes.data)
					this.departmentList = arr.map(item => ({
						label: item.departmentName || '',
						value: item.id
					})).filter(opt => opt.label)
				}

				if (titleRes.code === 200) {
					const arr = this.extractArray(titleRes.data)
					this.titleList = arr.map(item => ({
						label: item.dictLabel || '',
						value: item.dictValue
					})).filter(opt => opt.label)
				}

				uni.hideLoading()
			} catch (e) {
				uni.hideLoading()
				console.error('加载数据失败', e)
			}
		},
		onAccountIdentityChange(e) {
			const selected = this.accountIdentityOptions[e.detail.value]
			if (selected) {
				this.formData.accountType = selected.label
			}
		},
		openInstitutionPicker() {
			this.showInstitutionPicker = true
			this.institutionSearchKeyword = ''
			this.filteredInstitutionList = this.institutionList
		},
		closeInstitutionPicker() {
			this.showInstitutionPicker = false
		},
		onInstitutionSearch() {
			const keyword = this.institutionSearchKeyword.trim().toLowerCase()
			if (!keyword) {
				this.filteredInstitutionList = this.institutionList
			} else {
				this.filteredInstitutionList = this.institutionList.filter(item => 
					item.label.toLowerCase().includes(keyword)
				)
			}
		},
		selectInstitution(item) {
			this.formData.institution = item.label
			this.closeInstitutionPicker()
		},
		onDepartmentChange(e) {
			const selected = this.departmentList[e.detail.value]
			if (selected) {
				this.formData.department = selected.label
			}
		},
		onBankChange(e) {
			const selected = this.bankList[e.detail.value]
			if (selected) {
				this.formData.bankName = selected.label
			}
		},
		onTitleChange(e) {
			const selected = this.titleList[e.detail.value]
			if (selected) {
				this.formData.jobTitle = selected.label
			}
		},
		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) => {
					// 立即上传图片
					uni.showLoading({ title: '上传中...' })
					this.uploadImages(res.tempFilePaths, (urls) => {
						uni.hideLoading()
						// 保存上传后的URL
						this.formData.practiceCertificate = [...this.formData.practiceCertificate, ...urls]
						uni.showToast({ icon: 'success', title: '上传成功' })
					}, (error) => {
						uni.hideLoading()
						uni.showToast({ icon: 'none', title: error || '上传失败' })
					})
				}
			})
		},
		removePracticeImage(index) {
			this.formData.practiceCertificate.splice(index, 1)
		},
		async chooseTitleImage() {
			uni.chooseImage({
				count: 9 - this.formData.titleCertificate.length,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					// 立即上传图片
					uni.showLoading({ title: '上传中...' })
					this.uploadImages(res.tempFilePaths, (urls) => {
						uni.hideLoading()
						// 保存上传后的URL
						this.formData.titleCertificate = [...this.formData.titleCertificate, ...urls]
						uni.showToast({ icon: 'success', title: '上传成功' })
					}, (error) => {
						uni.hideLoading()
						uni.showToast({ icon: 'none', title: error || '上传失败' })
					})
				}
			})
		},
		// 上传多张图片（不使用 Promise）
		uploadImages(filePaths, successCallback, failCallback) {
			const requestPath = uni.getStorageSync('requestPath') || 'http://t9794bec.natappfree.cc'
			const urls = []
			let completed = 0
			let hasError = false
			
			if (filePaths.length === 0) {
				successCallback([])
				return
			}
			
			filePaths.forEach((filePath, index) => {
				uni.uploadFile({
					url: `${requestPath}/app/common/uploadOSS`,
					filePath: filePath,
					name: 'file',
					success: (uploadRes) => {
						if (hasError) return
						
						try {
							const result = typeof uploadRes.data === 'string' ? JSON.parse(uploadRes.data) : uploadRes.data
							if (result.code == 200) {
								urls[index] = result.url || result.data?.url || ''
							} else {
								hasError = true
								failCallback(result.msg || '上传失败')
								return
							}
						} catch (e) {
							hasError = true
							failCallback('解析上传结果失败')
							return
						}
						
						completed++
						if (completed === filePaths.length) {
							successCallback(urls.filter(Boolean))
						}
					},
					fail: (err) => {
						if (hasError) return
						hasError = true
						failCallback('上传失败')
					}
				})
			})
		},
		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.switchTab({
				url: '/pages/user/index'
			})
		},
		async handleSubmit() {
			if (!this.formData.doctorName) {
				return uni.showToast({ icon: 'none', title: '请输入姓名' })
			}
			if (!this.formData.idCard) {
				return uni.showToast({ icon: 'none', title: '请输入身份证号' })
			}
			if (!this.formData.accountType) {
				return uni.showToast({ icon: 'none', title: '请选择账号身份' })
			}
			if (!this.formData.institution) {
				return uni.showToast({ icon: 'none', title: '请选择机构' })
			}
			if (!this.formData.department) {
				return uni.showToast({ icon: 'none', title: '请选择科室' })
			}
			if (!this.formData.jobTitle) {
				return uni.showToast({ icon: 'none', title: '请选择职称' })
			}
			if (this.formData.practiceCertificate.length === 0 && this.formData.titleCertificate.length === 0) {
				return uni.showToast({ icon: 'none', title: '请至少上传一种身份证明' })
			}
			if (this.formData.practiceCertificate.length > 0 && this.formData.practiceCertificate.length < 2) {
				return uni.showToast({ icon: 'none', title: '医师职业证至少需上传编码页和执业点页' })
			}
			if (!this.formData.bankName) {
				return uni.showToast({ icon: 'none', title: '请选择开户行' })
			}
			if (!this.formData.bankBranch) {
				return uni.showToast({ icon: 'none', title: '请输入支行名称' })
			}
			if (!this.formData.bankCardNo) {
				return uni.showToast({ icon: 'none', title: '请输入银行卡号' })
			}
			if (!this.agreed) {
				return uni.showToast({ icon: 'none', title: '请阅读并同意用户协议和知情同意书' })
			}
			
			try {
				uni.showLoading({ title: '提交中...' })
				
				const licenseImageUrls = this.formData.practiceCertificate.filter(url => url && (url.startsWith('http://') || url.startsWith('https://')))
				const titleCertImageUrls = this.formData.titleCertificate.filter(url => url && (url.startsWith('http://') || url.startsWith('https://')))
				
				const submitData = {
					accountType: this.formData.accountType,
					bankBranch: this.formData.bankBranch,
					bankCardNo: this.formData.bankCardNo,
					bankName: this.formData.bankName,
					companyId: this.formData.companyId,
					companyName: this.formData.institution,
					department: this.formData.department,
					doctorName: this.formData.doctorName,
					idCard: this.formData.idCard,
					institution: this.formData.institution,
					jobTitle: this.formData.jobTitle,
					licenseImage: licenseImageUrls.join(','),
					titleCertImage: titleCertImageUrls.join(',')
				}
				
				if (this.formData.id) {
					submitData.id = this.formData.id
				}
				
				const res = await submitCertification(submitData)
				uni.hideLoading()
				
				if (res.code === 200) {
					uni.showToast({ icon: 'success', title: '提交成功' })
					setTimeout(() => {
						uni.switchTab({ url: '/pages/user/index' })
					}, 1500)
				} else {
					uni.showToast({ icon: 'none', title: res.msg || '提交失败' })
				}
			} catch (e) {
				uni.hideLoading()
				console.error('提交认证失败', e)
				uni.showToast({ icon: 'none', title: e.message || '提交失败' })
			}
		}
	}
}
</script>

<style lang="stylus">
.text-placeholder{
  color: #C8C9CC !important;
}
</style>
<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: 160rpx;
			.required {
				color: #FF5030;
				margin-right: 4rpx;
			}
		}
		
	.form-input {
		// width: 100%;
		flex:1;
		height: 80rpx;
		font-size: 28rpx;
		
		&.picker-input {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 16rpx;
		}
		
		&.placeholder {
			color: #C8C9CC !important;
		}
	}
	
	.radio-group {
		flex: 1;
		display: flex;
		align-items: center;
		gap: 48rpx;
		height: 80rpx;
		.radio-item {
			display: flex;
			align-items: center;
			gap: 8rpx;
			
			.radio-text {
				font-size: 28rpx;
				color: #333;
			}
		}
			// 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;
			}
		}
	}
}

.search-picker-popup {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 1000;
	display: flex;
	align-items: flex-end;
	
	.popup-content {
		width: 100%;
		max-height: 80vh;
		background: #fff;
		border-radius: 24rpx 24rpx 0 0;
		display: flex;
		flex-direction: column;
	}
	
	.popup-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 32rpx;
		border-bottom: 1rpx solid #f0f0f0;
		
		.popup-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}
		
		.popup-close {
			font-size: 48rpx;
			color: #999;
			line-height: 1;
		}
	}
	
	.search-box {
		padding: 24rpx 32rpx;
		
		.search-input {
			width: 100%;
			height: 72rpx;
			background: #f5f5f5;
			border-radius: 36rpx;
			padding: 0 32rpx;
			font-size: 28rpx;
		}
	}
	
	.search-list {
		flex: 1;
		max-height: 60vh;
		padding: 0 32rpx;
		
		.search-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 28rpx 0;
			border-bottom: 1rpx solid #f5f5f5;
			
			&:last-child {
				border-bottom: none;
			}
			
			&.active {
				color: #388BFF;
				
				text {
					color: #388BFF;
				}
			}
			
			.check-icon {
				color: #388BFF;
				font-size: 32rpx;
				font-weight: bold;
			}
			
			text {
				font-size: 28rpx;
				color: #333;
			}
		}
		
		.search-empty {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 60rpx 0;
			
			text {
				font-size: 28rpx;
				color: #999;
			}
		}
	}
}
</style>