FE-lab-xcx/pages_safetyEducationExamination/views/home/component/userInfoCard.vue

<template>
	<view class='safetyEducationExamination-workbench-userInfoCard'>
		<!-- 顶部用户信息卡片 -->
		<view class="top-max-big-box">
			<img v-if="userInfo.avatar" class="avatar-img" :src="baseUrl+userInfo.avatar">
			<img v-else class="avatar-img" :src="imagesUrl('commonality/icon_01.png')">
			<view class="center-info-box">
				<view class="name-box">
					<view>{{userInfo.userName}}</view>
					<view>奖励分 {{userInfo.totalPoints}}</view>
					<view>信用分 {{userInfo.scoreCredit}}</view>
				</view>
				<view class="account-box">
					<view>{{userInfo.userType == 2?userInfo.educationName:(userInfo.userType == 1?'教职工':'系统用户')}}</view>
					<view> · </view>
					<view>{{userInfo.account}}</view>
					<view> · </view>
					<view>{{userInfo.deptName}}</view>
				</view>
				<!-- <view class="dept-box">
					<view>{{userInfo.deptName}}</view>
				</view> -->
			</view>
			<!-- <view class="right-type-box">
				<view></view>
				<view>正常</view>
			</view> -->
		</view>

		<!-- 底部详情卡片 -->
		<view class="bottom-max-big-box">
			<!-- 1. 绑定实验室 -->
			<view class="lab-bind-box" v-if="userInfo.userType == 2">
				<view class="lab-title">{{userInfo.bound?'实验室信息':'绑定实验室'}}</view>
				<view class="lab-info-row">
					<view class="dot dot-green" v-if="userInfo.bound"></view>
					<view class="dot dot-green" style="background-color: #999;" v-if="!userInfo.bound"></view>
					<text class="lab-name" v-if="userInfo.bound">{{ userInfo.labName }}</text>
					<text class="lab-name" style="color:#999;" v-if="!userInfo.bound&&userInfo.educationType == 1">暂无绑定实验室</text>
					<text class="lab-name" style="color:#999;" v-if="!userInfo.bound&&userInfo.educationType == 2">{{userInfo.isFinishExam?'暂无绑定实验室':'请先完成入学考试'}}</text>
					<text class="tag" style="color:#1857d4;font-size:28rpx;font-weight:600;" v-if="(!userInfo.bound&&userInfo.educationType == 1)||(!userInfo.bound&&userInfo.educationType == 2&&userInfo.isFinishExam)" @click="shadeButton(4)">去绑定</text>
					<text class="tag tag-green" v-if="userInfo.bound">{{userInfo.bindStatus}}</text>
				</view>
			</view>

			<!-- 2. 学年进度 -->
			<view class="year-progress-card">
				<view class="card-header">
					<view class="tags-group">
						<text class="tag tag-blue">{{userInfo.gradeRange}}</text>
						<text class="tag" :style="'color:'+userInfo.levelColor+';border:1rpx solid '+userInfo.levelColor+';'"
							v-if="userInfo.levelName">{{userInfo.levelName}}</text>
						<text class="tag tag-gray" v-if="userInfo.typeName">{{userInfo.typeName}}</text>
					</view>
				</view>
				<view class="progress-info" v-if="userInfo.totalStudyHours>0">
					<view class="info-row">
						<text class="label">当前学年学时完成进度</text>
						<text class="value text-blue text-bold">{{ userInfo.completedStudyHours }} / {{ userInfo.totalStudyHours }} 学时</text>
					</view>
					<view class="progress-wrap">
						<view class="progress-bar" :style="{ width: (userInfo.studyHourRate) + '%' }"></view>
					</view>
				</view>
				<view class="card-footer">
					<view class="footer-left">
						<text class="text-sm text-gray">{{userInfo.totalStudyHours>0?'学时完成度':'学时要求'}}</text>
						<text class="text-bold text-blue">{{userInfo.totalStudyHours>0?userInfo.studyHourRate+'%':'无'}}</text>
					</view>
				</view>
				<view class="card-footer" style="margin-top:10rpx;">
					<view class="footer-right">
						<text class="text-sm text-gray">目标考试</text>
						<text class="exam-link">{{userInfo.targetExamName?userInfo.targetExamName:'无'}}</text>
					</view>
				</view>
			</view>

			<!-- 3. 任务状态 -->
			<view class="task-status-box">
				<view class="task-title">当前学年任务状态</view>
				<view class="task-grid">
					<view class="task-item">
						<view class="task-label" :class="userInfo.examPassStatus==1?'task-item-active':''">考试状态</view>
						<text class="tag" :class="!userInfo.examPassStatus||userInfo.examPassStatus==1?'tag-gray':(userInfo.examPassStatus==2?'tag-green':(userInfo.examPassStatus==3||userInfo.examPassStatus==4?'tag-error':''))">
						{{!userInfo.examPassStatus?'暂无':(userInfo.examPassStatus==1?'考试中':((userInfo.examPassStatus==2?'已通过':(userInfo.examPassStatus==3?'未通过':(userInfo.examPassStatus==4?'缺考':'')))))}}
						</text>
					</view>
					<view class="task-item" :class="userInfo.certificateStatus==1?'task-item-active':''">
						<view class="task-label">证书状态</view>
						<text class="tag" :class="!userInfo.certificateStatus?'tag-gray':(userInfo.certificateStatus==1?'tag-green':(userInfo.certificateStatus==2||userInfo.certificateStatus==3||userInfo.certificateStatus==4?'tag-error':''))">
						{{!userInfo.certificateStatus?'暂无':(userInfo.certificateStatus==1?'已通过':(userInfo.certificateStatus==2?'失效':(userInfo.certificateStatus==3?'已撤销':(userInfo.certificateStatus==4?'未签发':''))))}}
						</text>
					</view>
					<view class="task-item" :class="userInfo.approvalStatus==1?'task-item-active':''" v-if="userInfo.approvalStatus!=3&&userInfo.userType == 2">
						<view class="task-label">审批状态</view>
						<text class="tag" :class="userInfo.approvalStatus==0?'tag-gray':(userInfo.approvalStatus==1?'tag-green':(userInfo.approvalStatus==2?'tag-error':'tag-gray'))">
						{{userInfo.bound&&userInfo.approvalStatus==0?'待审批':(userInfo.approvalStatus==1?'已通过':(userInfo.approvalStatus==2?'未通过':'待绑定'))}}
						</text>
					</view>
				</view>
			</view>
		</view>
		<BindLabModal
			:visible="showBindLabModal"
			:off-type="bindLabOffType"
			:education-type="userInfo.educationType"
			@close="showBindLabModal = false"
			@bind-success="refreshPageData"
		/>
	</view>
</template>

<script>
	import {
		config
	} from '@/api/request/config.js'
	import {
		examElLabEduRelationBindStatus
	} from '@/pages_safetyEducationExamination/api/index.js'
	import BindLabModal from './BindLabModal.vue'
	export default {
		components: { BindLabModal },
		data() {
			return {
				baseUrl: config.base_url,
				userInfo: {
					userType: '',
					userName: '',
					account: '',
					educationName: '',
					deptName: '',
					labName: '',
					bound: '',
					approvalStatus: '',
					certificateStatus: '',
					examPassStatus: '',
					gradeRange: '',
					typeName: '',
					completedStudyHours: '',
					totalStudyHours: '',
					studyHourRate: '',
					targetExamName: '',
				},
				showBindLabModal: false,
				bindLabOffType: true,
			}
		},
		mounted() {
			this.loadUserInfo();
		},
		methods: {
			refreshPageData() {
				this.loadUserInfo();
			},
			async loadUserInfo() {
				const { data } = await examElLabEduRelationBindStatus({});
				if (data.code == 200) {
					this.$set(this, 'userInfo', data.data);
					if (data.data.isPopup) {
						this.bindLabOffType = false;
						this.showBindLabModal = true;
					}
				}
			},
			shadeButton(type) {
				if (type == 4) {
					this.bindLabOffType = true;
					this.showBindLabModal = true;
				} else if (type == 5) {
					this.bindLabOffType = false;
					this.showBindLabModal = true;
				}
			},
		}
	}

	</script>

<style lang="stylus" scoped>
	.safetyEducationExamination-workbench-userInfoCard {
		.top-max-big-box {
			z-index: 0;
			height: 200rpx;
			background-color: #1959D5;
			overflow: hidden;
			display: flex;

			.avatar-img {
				border: 4rpx solid #87A8E9;
				border-radius: 50%;
				width: 98rpx;
				height: 98rpx;
				margin: 32rpx 32rpx 0 32rpx;
			}

			.center-info-box {
				flex: 1;
				margin-top:22rpx;
				.name-box {
					display: flex;
					margin-top: 18rpx;

					view:nth-child(1) {
						font-size: 34rpx;
						font-weight: 700;
						color: #fff;
						margin-right: 20rpx;
					}

					view:nth-child(2) {
						background: rgba(255, 215, 0, .2);
						color: #ffe066;
						font-size: 22rpx;
						line-height:40rpx;
						padding: 0 16rpx;
						border-radius: 40rpx;
						border: 2rpx solid rgba(255, 215, 0, .35);
						margin-right: 20rpx;
					}

					view:nth-child(3) {
						background: rgba(0, 210, 140, .18);
						color: #7fffd4;
						font-size: 22rpx;
						line-height:40rpx;
						padding: 0 16rpx;
						border-radius: 40rpx;
						border: 2rpx solid rgba(0, 210, 140, .4);
						margin-right: 20rpx;
					}
				}

				.account-box {
					display: flex;
					margin-top: 10rpx;

					view {
						color: rgba(255, 255, 255, .8);
						font-size: 24rpx;
					}

					view:nth-child(2) {
						margin: 0 10rpx;
					}
				}

				.dept-box {
					display: flex;
					margin-top: 10rpx;

					view {
						color: rgba(255, 255, 255, .8);
						font-size: 24rpx;
					}
				}
			}

			.right-type-box {
				width: 70rpx;
				height: 30rpx;
				background: rgba(0, 210, 140, .18);
				color: #7fffd4;
				font-size: 22rpx;
				padding: 4rpx 16rpx;
				border-radius: 40rpx;
				border: 2rpx solid rgba(0, 210, 140, .4);
				display: flex;
				margin: 60rpx 20rpx 0 0;

				view:nth-child(1) {
					width: 10rpx;
					height: 10rpx;
					border-radius: 50%;
					background-color: rgba(0, 210, 140, 1);
					text-align: center;
					margin: 10rpx 10rpx 0 0;
				}
			}
		}

		.bottom-max-big-box {
			z-index: 1;
			position: relative;
			border-radius: 32rpx;
			padding: 32rpx;
			margin: -36rpx 24rpx 24rpx;
			background-color: #fff;

			// 1. 绑定实验室样式
			.lab-bind-box {
				background: #eef3fd;
				border-radius: 16rpx;
				padding: 20rpx;
				margin-bottom: 28rpx;

				.lab-title {
					font-size: 24rpx;
					color: #8896a7;
					margin-bottom: 16rpx;
				}

				.lab-info-row {
					display: flex;
					align-items: center;
					gap: 12rpx;

					.dot-green {
						width: 12rpx;
						height: 12rpx;
						border-radius: 50%;
						background-color: #0d8f6f;
					}

					.lab-name {
						width: 400rpx;
						font-weight: 500;
						color: #1857d4;
						font-size: 28rpx;
					}
				}
			}

			// 2. 学年进度样式
			.year-progress-card {
				background-color: #f4f6fa;
				border-radius: 20rpx;
				padding: 28rpx;
				margin-bottom: 24rpx;

				.card-header {
					margin-bottom: 24rpx;
				}

				.tags-group {
					display: flex;
					align-items: center;
					gap: 16rpx;
				}

				.progress-info {
					margin-bottom: 16rpx;
				}

				.info-row {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 8rpx;
				}

				.label {
					font-size: 24rpx;
					color: #8896a7;
				}

				.value {
					font-size: 24rpx;
				}

				.progress-wrap {
					background-color: #e8edf6;
					border-radius: 8rpx;
					height: 14rpx;
					overflow: hidden;
				}

				.progress-bar {
					height: 100%;
					border-radius: 8rpx;
					background: linear-gradient(90deg, #2e6fe0, #1857d4);
					transition: width 0.4s;
				}

				.card-footer {
					display: flex;
					justify-content: space-between;
					align-items: center;
				}

				.footer-left,
				.footer-right {
					display: flex;
					align-items: center;
					gap: 8rpx;
				}

				.exam-link {
					color: #1857d4;
					font-weight: 600;
					background-color: #eef3fd;
					padding: 4rpx 16rpx;
					border-radius: 12rpx;
					border: 1px solid rgba(24, 87, 212, 0.25);
					font-size: 24rpx;
				}
			}

			// 3. 任务状态样式
			.task-status-box {
				.task-title {
					font-size: 28rpx;
					color: #8896a7;
					font-weight: 700;
					margin-bottom: 16rpx;
				}

				.task-grid {
					display: grid;
					grid-template-columns: 1fr 1fr 1fr;
					gap: 16rpx;
					display: flex;

					.task-item {
						flex:1;
						border: 1px solid #e8edf6;
						border-radius: 16rpx;
						padding: 20rpx;
						text-align: center;

						.task-label {
							font-size: 24rpx;
							color: #8896a7;
							margin-bottom: 8rpx;
						}
					}

					.task-item-active {
						border: 1px solid #e0ffc1;
						background-color: #f6ffed;
					}
				}
			}
		}

		// 全局标签样式
		.tag {
			display: inline-flex;
			align-items: center;
			padding: 4rpx 16rpx;
			border-radius: 40rpx;
			font-size: 22rpx;
			font-weight: 500;
		}

		.tag-blue {
			background-color: #eef3fd;
			color: #1857d4;
		}

		.tag-green {
			background-color: #edfaf6;
			color: #0d8f6f;
		}

		.tag-gray {
			background-color: #f4f6fa;
			color: #8896a7;
		}
		
		.tag-error {
			background-color: #fff7d8;
			color: #e67e22;
		}

		.text-sm {
			font-size: 24rpx;
		}

		.text-bold {
			font-weight: 600;
		}

		.text-blue {
			color: #1857d4;
		}

		.text-gray {
			color: #8896a7;
		}
	}
</style>