rtliveDoctor/pages_user/certificationInfo.vue

<template>
	<view class="container">
		<!-- 导航栏 -->
		<view class="navbar">
			<view class="nav-left" @click="goBack">
				<text class="back-icon"><</text>
			</view>
			<view class="nav-title">认证信息</view>
			<view class="nav-right">
				<text class="more-icon">...</text>
				<text class="eye-icon">O</text>
			</view>
		</view>
		
		<!-- 内容区域 -->
		<scroll-view class="content" scroll-y>
			<view class="info-list">
				<view class="info-item">
					<view class="info-label">姓名</view>
					<view class="info-value">{{ certificationData.name || '-' }}</view>
				</view>
				<view class="divider"></view>
				
				<view class="info-item">
					<view class="info-label">身份证号</view>
					<view class="info-value">{{ formatIdNumber(certificationData.idNumber) || '-' }}</view>
				</view>
				<view class="divider"></view>
				
				<view class="info-item">
					<view class="info-label">认证状态</view>
					<view class="info-value status-value" :class="getStatusClass(certificationData.status)">
						{{ getStatusText(certificationData.status) }}
					</view>
				</view>
				<view class="divider"></view>
				
				<view class="info-item">
					<view class="info-label">机构</view>
					<view class="info-value">{{ certificationData.institution || '-' }}</view>
				</view>
				<view class="divider"></view>
				
				<view class="info-item">
					<view class="info-label">科室</view>
					<view class="info-value">{{ certificationData.department || '-' }}</view>
				</view>
				<view class="divider"></view>
				
				<view class="info-item">
					<view class="info-label">职称</view>
					<view class="info-value">{{ certificationData.title || '-' }}</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import { getCertificationInfo } from '@/api-js/certification'
export default {
	data() {
		return {
			certificationData: {
				name: '',
				idNumber: '',
				status: '', // 认证状态：pending-待审核, approved-已认证, rejected-已驳回
				institution: '',
				department: '',
				title: ''
			}
		}
	},
	onLoad() {
		this.loadCertificationInfo()
	},
	methods: {
		async loadCertificationInfo() {
			try {
				uni.showLoading({ title: '加载中...' })
				const res = await getCertificationInfo()
				uni.hideLoading()
				if (res.code === 200 && res.data) {
					this.certificationData = {
						name: res.data.name || '',
						idNumber: res.data.idNumber || '',
						status: res.data.status || 'pending',
						institution: res.data.institution || '',
						department: res.data.department || '',
						title: res.data.title || ''
					}
				}
			} catch (e) {
				uni.hideLoading()
				console.error('加载认证信息失败', e)
				// 使用示例数据
				this.certificationData = {
					name: '王小明',
					idNumber: '510712345678900029',
					status: 'approved',
					institution: '北京人民医院',
					department: '消化内科',
					title: '主任医师/教授'
				}
			}
		},
		formatIdNumber(idNumber) {
			if (!idNumber) return ''
			if (idNumber.length < 8) return idNumber
			// 显示前4位和后4位，中间用*号隐藏
			const start = idNumber.substring(0, 4)
			const end = idNumber.substring(idNumber.length - 4)
			const middle = '*'.repeat(idNumber.length - 8)
			return start + middle + end
		},
		getStatusText(status) {
			const statusMap = {
				'pending': '待审核',
				'approved': '已认证',
				'rejected': '已驳回'
			}
			return statusMap[status] || '未知'
		},
		getStatusClass(status) {
			const classMap = {
				'pending': 'status-pending',
				'approved': 'status-approved',
				'rejected': 'status-rejected'
			}
			return classMap[status] || ''
		},
		goBack() {
			uni.navigateBack()
		}
	}
}
</script>

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

.navbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 24rpx;
	background: #fff;
	border-bottom: 1rpx solid #f0f0f0;
	position: sticky;
	top: 0;
	z-index: 100;
	
	.nav-left {
		width: 60rpx;
		
		.back-icon {
			font-size: 36rpx;
			color: #333;
			font-weight: bold;
		}
	}
	
	.nav-title {
		flex: 1;
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}
	
	.nav-right {
		display: flex;
		align-items: center;
		gap: 24rpx;
		width: 60rpx;
		justify-content: flex-end;
		
		.more-icon {
			font-size: 32rpx;
			color: #333;
		}
		
		.eye-icon {
			font-size: 32rpx;
			color: #333;
		}
	}
}

.content {
	flex: 1;
}

.info-list {
	background: #fff;
	
	.info-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 32rpx 24rpx;
		min-height: 100rpx;
		
		.info-label {
			font-size: 28rpx;
			color: #333;
			font-weight: 500;
		}
		
		.info-value {
			font-size: 28rpx;
			color: #666;
			text-align: right;
			flex: 1;
			margin-left: 24rpx;
			
			&.status-value {
				font-weight: 500;
				
				&.status-approved {
					color: #52C41A;
				}
				
				&.status-pending {
					color: #FAAD14;
				}
				
				&.status-rejected {
					color: #FF5030;
				}
			}
		}
	}
	
	.divider {
		height: 1rpx;
		background: #EBEDF0;
		margin-left: 24rpx;
	}
}
</style>