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>
					<radio-group @change="onAccountIdentityChange" class="radio-group">
						<label 
							class="radio-item"
							v-for="(option, index) in accountIdentityOptions"
							:key="index">
							<radio
								:value="option.value"
								:checked="formData.accountType == option.value"
								color="#388BFF"
							/>
							<text class="radio-text">{{ option.label }}</text>
						</label>
					</radio-group>
				</view>
				
				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text>机构</text>
					</view>
					<input 
						class="form-input" 
						v-model="formData.institution" 
						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.department" 
						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.jobTitle" 
						placeholder="请输入职称"
						placeholder-class="placeholder"
					/>
				</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>
					<input 
						class="form-input" 
						v-model="formData.bankName" 
						placeholder="请输入开户行"
						placeholder-class="text-placeholder"
					/>
				</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="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, 
	getBankList,
	getCertificationStatus 
} from '@/api/certification'
import { uploadOSS } from '@/api/common'
export default {
	data() {
		return {
			rejectionInfo: '', // 驳回意见
			agreed: false,
			certificationStatus: null, // 认证状态
			formData: {
				doctorName: '', // 讲者姓名
				idCard: '', // 身份证号
				accountIdentity: '', // 账号身份（用于转换为 accountType）
				accountType: 1, // 账户身份: 1-医生, 2-药剂师
				institution: '', // 机构名称
				institutionId: '', // 机构ID（用于获取 companyId）
				companyId: '', // 公司ID
				companyName: '', // 公司名称
				department: '', // 科室
				jobTitle: '', // 职称
				licenseImage: '', // 执业证图片URL（多个图片用逗号分隔）
				titleCertImage: '', // 职称证/工牌图片URL（多个图片用逗号分隔）
				bankName: '', // 开户银行
				bankBranch: '', // 支行信息
				bankCardNo: '', // 银行卡号
				// 本地图片路径（用于上传）
				practiceCertificate: [], // 医师职业证图片数组（本地路径）
				titleCertificate: [] // 医师职称证/工牌图片数组（本地路径）
			},
			institutionList: [],
			departmentList: [],
			titleList: [],
			selectedInstitution: null, // 选中的机构对象
			selectedBank: null, // 选中的银行对象
			accountIdentityOptions: [
				{ label: '医生', value: 1 },
				{ label: '药剂师', value: 2 }
			]
		}
	},
	onLoad(options) {
		var user = JSON.parse(uni.getStorageSync('userInfo'))
		this.formData.companyId=user.companyId
		if (options.rejectionInfo) {
			this.rejectionInfo = decodeURIComponent(options.rejectionInfo)
		}
		//this.loadData()
	},
	methods: {
		async loadData() {
			try {
				uni.showLoading({ title: '加载中...' })
				// 并行加载所有数据
				const [infoRes, statusRes, bankRes] = await Promise.all([
					getCertificationInfo().catch(() => ({ code: 0 })),
					getCertificationStatus().catch(() => ({ code: 0 })),
					// getBankList().catch(() => ({ code: 0, data: [] }))
				])
				
				// 加载认证信息（如果已提交过）
				if (infoRes.code === 200 && infoRes.data) {
					const data = infoRes.data
					// 映射接口返回的字段到表单字段
					this.formData = {
						...this.formData,
						doctorName: data.doctorName || data.name || '',
						idCard: data.idCard || data.idNumber || '',
						accountType: data.accountType || '',
						accountIdentity: data.accountType === 1 ? '医生' : (data.accountType === 2 ? '药剂师' : ''),
						institution: data.institution || '',
						companyId: data.companyId || '',
						companyName: data.companyName || '',
						department: data.department || '',
						jobTitle: data.jobTitle || data.title || '',
						bankName: data.bankName || data.bank || '',
						bankBranch: data.bankBranch || data.branchName || '',
						bankCardNo: data.bankCardNo || data.bankCardNumber || '',
					// 处理图片URL，转换为数组
					licenseImage: data.licenseImage || '',
					titleCertImage: data.titleCertImage || '',
					practiceCertificate: data.licenseImage ? data.licenseImage.split(',').filter(Boolean) : [],
					titleCertificate: data.titleCertImage ? data.titleCertImage.split(',').filter(Boolean) : []
				}
				// 设置账号身份
				if (data.accountType) {
					const selected = this.accountIdentityOptions.find(opt => opt.value === data.accountType)
					if (selected) {
						this.formData.accountIdentity = selected.label
						this.formData.accountType = selected.value
					}
				}
				// 如果有id（编辑时），保存id
				if (data.id) {
					this.formData.id = data.id
				}
				if (data.rejectionInfo) {
					this.rejectionInfo = data.rejectionInfo
				}
			}
				
				// 加载认证状态
				if (statusRes.code === 200 && statusRes.data) {
					this.certificationStatus = statusRes.data
				}
				
				
				uni.hideLoading()
			} catch (e) {
				uni.hideLoading()
				console.error('加载数据失败', e)
			}
		},
		onAccountIdentityChange(e) {
			const value = parseInt(e.detail.value)
			const selected = this.accountIdentityOptions.find(opt => opt.value === value)
			if (selected) {
				this.formData.accountIdentity = selected.label
				this.formData.accountType = selected.value
			}
		},
		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 && !this.formData.name) {
				uni.showToast({
					icon: 'none',
					title: '请输入姓名'
				})
				return
			}
			if (!this.formData.idCard && !this.formData.idNumber) {
				uni.showToast({
					icon: 'none',
					title: '请输入身份证号'
				})
				return
			}
			if (!this.formData.accountType) {
				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.jobTitle && !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.bankName && !this.formData.bank) {
				uni.showToast({
					icon: 'none',
					title: '请输入开户行'
				})
				return
			}
			if (!this.formData.bankBranch && !this.formData.branchName) {
				uni.showToast({
					icon: 'none',
					title: '请输入支行名称'
				})
				return
			}
			if (!this.formData.bankCardNo && !this.formData.bankCardNumber) {
				uni.showToast({
					icon: 'none',
					title: '请输入银行卡号'
				})
				return
			}
			if (!this.agreed) {
				uni.showToast({
					icon: 'none',
					title: '请阅读并同意用户协议和知情同意书'
				})
				return
			}
			
			try {
				uni.showLoading({ title: '提交中...' })
				
				// 获取图片URL（选择时已上传，直接使用）
				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, // 账户身份: 1-医生, 2-药剂师
					bankBranch: this.formData.bankBranch || this.formData.branchName, // 支行信息
					bankCardNo: this.formData.bankCardNo || this.formData.bankCardNumber, // 银行卡号
					bankName: this.formData.bankName || this.formData.bank, // 开户银行
					companyId: this.formData.companyId || '', // 公司ID
					companyName: this.formData.companyName || this.formData.institution, // 公司名称
					department: this.formData.department, // 科室
					doctorName: this.formData.doctorName || this.formData.name, // 讲者姓名
					idCard: this.formData.idCard || this.formData.idNumber, // 身份证号
					institution: this.formData.institution, // 机构名称
					jobTitle: this.formData.jobTitle || this.formData.title, // 职称
					licenseImage: licenseImageUrls.join(','), // 执业证图片URL（多个用逗号分隔）
					titleCertImage: titleCertImageUrls.join(',') // 职称证/工牌图片URL（多个用逗号分隔）
				}
				
				// 如果有id（编辑时），添加id字段
				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;
	}
	
	.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;
			}
		}
	}
}
</style>