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

<!-- 绑定实验室弹窗 -->
<template>
	<view class="bind-lab-modal" v-if="visible">
		<!-- 遮罩层点击不关闭（强制绑定模式），offType=true时可关闭 -->
		<view class="bind-lab-overlay" v-if="offType" @tap="handleClose"></view>
		<view class="bind-lab-overlay no-close" v-else></view>

		<!-- 主弹窗 -->
		<view class="bind-lab-content" @tap.stop>
			<!-- 标题栏 -->
			<view class="modal-header">
				<text class="modal-title">绑定实验室</text>
				<text v-if="offType" class="modal-close" @tap="handleClose">✕</text>
			</view>

			<scroll-view scroll-y class="modal-scroll" :style="scrollStyle">
				<view class="modal-body">
					<!-- 无需进入实验室 勾选区 -->
					<view class="no-lab-box">
						<view class="checkbox-row" @tap="toggleNoLab">
							<view class="custom-checkbox" :class="{ checked: isEnter }"></view>
							<text class="no-lab-title">无需进入实验室</text>
						</view>
						<view class="no-lab-desc">
							<text>人文、体育等相关学院无需进入实验室的新研究生可选择此项，选择后学时要求为4小时，需通过应知应会考试。</text>
						</view>
					</view>

					<!-- 选择实验室（未勾选"无需进入"时显示） -->
					<view v-if="!isEnter">
						<!-- 选择实验室按钮 -->
						<view class="select-lab-btn" @tap="openSelectLab">
							<text v-if="!selectedLab" class="select-lab-placeholder">点击选择实验室</text>
							<text v-else class="select-lab-value">{{ selectedLabLabel }}</text>
							<text class="select-lab-arrow">›</text>
						</view>
						<text class="search-tip">此处请选择需要后续进入的科研实验室的名称，输入实验室名称、房号或楼栋关键词，再从检索结果中选择目标实验室。</text>

						<!-- 实验室信息表 -->
						<view class="lab-info-table" v-if="selectedLab">
							<view class="info-row">
								<view class="info-cell label-cell">实验室名称</view>
								<view class="info-cell value-cell">{{ selectedLab.subName }}{{ selectedLab.roomNum ? '(' + selectedLab.roomNum + ')' : '' }}</view>
							</view>
							<view class="info-row">
								<view class="info-cell label-cell">实验室类型</view>
								<view class="info-cell value-cell">{{ selectedLab.moldName }}</view>
							</view>
							<view class="info-row">
								<view class="info-cell label-cell">负责人</view>
								<view class="info-cell value-cell">{{ selectedLab.adminName }}</view>
							</view>
							<view class="info-row">
								<view class="info-cell label-cell">实验室分级</view>
								<view class="info-cell value-cell" :style="'color:' + (selectedLab.classLevelColor || '#333')">{{ selectedLab.classLevelName }}</view>
							</view>
							<view class="info-row">
								<view class="info-cell label-cell">所属学院</view>
								<view class="info-cell value-cell">{{ selectedLab.deptName }}</view>
							</view>
							<view class="info-row">
								<view class="info-cell label-cell">实验室分类</view>
								<view class="info-cell value-cell">{{ selectedLab.classTypeNames }}</view>
							</view>
							<view class="info-row no-border">
								<view class="info-cell label-cell">所在位置</view>
								<view class="info-cell value-cell">{{ selectedLab.buildName }}{{ selectedLab.floorName }}</view>
							</view>
						</view>

						<!-- 本科生：进入原因（educationType=2） -->
						<view class="reason-box" v-if="educationType == 2&&!isEnter">
							<textarea
								class="reason-input"
								v-model="reason"
								placeholder="请填写进入实验室原因(必填)"
								maxlength="100"
								:auto-height="false"
							></textarea>
							<text class="reason-tip">毕业论文或毕业设计，科创等相关需要在具体的实验室开展业务的情况可申请绑定实验室，绑定完毕后需要完成对应的分级考试。</text>
						</view>
					</view>

					<!-- 协议勾选 -->
					<view class="agree-row" @tap="onAgreeTap">
						<view class="custom-checkbox" :class="{ checked: checkType }"></view>
						<view class="agree-text">
							<text>我已阅读并同意</text>
							<text class="agree-link" @tap.stop="openNotice">《新生绑定实验室须知及责任说明》</text>
						</view>
					</view>

					<!-- 底部按钮 -->
					<view class="modal-footer">
						<view v-if="offType" class="btn-cancel" @tap="handleClose">取消</view>
						<view class="btn-confirm" @tap="handleConfirm">确认绑定</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 须知弹窗 -->
		<view class="notice-modal" v-if="showNotice" @tap.stop>
			<view class="notice-content">
				<view class="notice-header">
					<text class="notice-title">新生绑定实验室须知及责任说明</text>
				</view>
				<scroll-view scroll-y class="notice-scroll">
					<view class="notice-body">
						<text class="notice-p">1. 保证进入的实验室为导师实际使用实验室或属于当前实验室所属课题组。</text>
						<text class="notice-p">2. 研究生期间涉及到操作实验室内重要危险源，必须绑定实验室。</text>
					</view>
				</scroll-view>
				<view class="notice-footer">
					<view class="btn-cancel" @tap="cancelNotice">取消</view>
					<view class="btn-confirm" @tap="confirmNotice">我已知晓</view>
				</view>
			</view>
		</view>

		<!-- 选择实验室弹窗 -->
		<view class="select-lab-modal" v-if="showSelectLab" @tap="closeSelectLab">
			<view class="select-lab-content" @tap.stop>
				<view class="select-lab-header">
					<text class="select-lab-title">选择实验室</text>
					<text class="modal-close" @tap="closeSelectLab">✕</text>
				</view>
				<!-- 搜索框 -->
				<view class="search-bar">
					<input
						class="search-input"
						type="text"
						v-model="searchKeyword"
						placeholder="输入实验室名称、房间或楼栋关键词搜索"
						@input="onSearchInput"
					/>
				</view>
				<!-- 列表 -->
				<scroll-view
					scroll-y
					class="lab-list-scroll"
					:style="labListScrollStyle"
					@scrolltolower="onScrollLower"
				>
					<view v-if="labList.length === 0 && !labLoading" class="lab-list-empty">暂无数据</view>
					<view
						v-for="(lab, idx) in labList"
						:key="idx"
						class="lab-list-item"
						:data-idx="idx"
						@tap="onLabItemTap"
					>
						<text class="lab-item-name">{{ lab.subName }}{{ lab.roomNum ? '(' + lab.roomNum + ')' : '' }}</text>
						<text class="lab-item-sub">{{ lab.deptName }} · {{ lab.buildName }}{{ lab.floorName }}</text>
					</view>
					<view v-if="labLoading" class="lab-list-loading">加载中...</view>
					<view v-if="labNoMore" class="lab-list-loading">没有更多了</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		examElLabEduRelationLabLists,
		examElLabEduRelationBind,
	} from '@/pages_safetyEducationExamination/api/index.js'

	export default {
		name: 'BindLabModal',
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			// 是否可关闭（true=去绑定时点击可关闭，false=强制绑定）
			offType: {
				type: Boolean,
				default: true
			},
			// 用户教育类型：1=本科生，2=研究生（来自 bindStatus 接口）
			educationType: {
				type: [Number, String],
				default: 1
			},
		},
		data() {
			return {
				// 表单
				isEnter: false,      // 无需进入实验室
				checkType: false,    // 已同意协议
				reason: '',          // 进入原因（本科生必填）
				selectedLab: null,   // 选中的实验室对象

				// 须知弹窗
				showNotice: false,

				// 选择实验室弹窗
				showSelectLab: false,
				searchKeyword: '',
				searchTimer: null,
				labList: [],
				labLoading: false,
				labNoMore: false,
				labPage: 1,
				labPageSize: 15,
				labTotal: 0,
			}
		},
		computed: {
			selectedLabLabel() {
				if (!this.selectedLab) return '';
				const lab = this.selectedLab;
				return (lab.deptName || '') + ' - ' + (lab.subName || '') +
					(lab.roomNum ? '（' + lab.roomNum + '）' : '') +
					' - ' + (lab.buildName || '') + (lab.floorName || '');
			},
			scrollStyle() {
				const sys = uni.getSystemInfoSync();
				const h = sys.windowHeight - 100;
				return 'height:' + (h > 300 ? h : 300) + 'px;';
			},
			labListScrollStyle() {
				const sys = uni.getSystemInfoSync();
				const h = sys.windowHeight * 0.5;
				return 'height:' + h + 'px;';
			},
		},
		watch: {
			visible(val) {
				if (val) this.resetState();
			}
		},
		methods: {
			resetState() {
				this.isEnter = false;
				this.checkType = false;
				this.reason = '';
				this.selectedLab = null;
				this.showNotice = false;
				this.showSelectLab = false;
				this.searchKeyword = '';
				this.labList = [];
				this.labPage = 1;
				this.labTotal = 0;
				this.labNoMore = false;
			},
			handleClose() {
				if (!this.offType) return;
				this.$emit('close');
			},
			toggleNoLab() {
				this.isEnter = !this.isEnter;
			},
			onAgreeTap() {
				// 点击文字区域时切换，但点链接时单独处理
				this.checkType = !this.checkType;
			},

			// ---- 须知弹窗 ----
			openNotice() {
				this.showNotice = true;
			},
			cancelNotice() {
				this.checkType = false;
				this.showNotice = false;
			},
			confirmNotice() {
				this.checkType = true;
				this.showNotice = false;
			},

			// ---- 选择实验室弹窗 ----
			openSelectLab() {
				this.showSelectLab = true;
				this.searchKeyword = '';
				this.labList = [];
				this.labPage = 1;
				this.labTotal = 0;
				this.labNoMore = false;
				this.fetchLabList(true);
			},
			closeSelectLab() {
				this.showSelectLab = false;
				clearTimeout(this.searchTimer);
			},
			onSearchInput() {
				clearTimeout(this.searchTimer);
				this.searchTimer = setTimeout(() => {
					this.labPage = 1;
					this.labList = [];
					this.labNoMore = false;
					this.fetchLabList(true);
				}, 300);
			},
			onScrollLower() {
				if (this.labNoMore || this.labLoading) return;
				this.labPage++;
				this.fetchLabList(false);
			},
			fetchLabList(reset) {
				if (this.labLoading) return;
				this.labLoading = true;
				examElLabEduRelationLabLists({
					searchValue: this.searchKeyword.trim(),
					page: this.labPage,
					pageSize: this.labPageSize,
				}).then(res => {
					const resp = res.data || {};
					if (resp.code === 200) {
						const records = Array.isArray(resp.data) ? resp.data : ((resp.data || {}).records || []);
						const total = typeof resp.data === 'object' && !Array.isArray(resp.data) ? (resp.data.total || records.length) : records.length;
						if (reset) {
							this.labList = records;
						} else {
							this.labList = [...this.labList, ...records];
						}
						this.labTotal = total;
						this.labNoMore = this.labList.length >= this.labTotal;
					}
				}).catch(() => {}).finally(() => {
					this.labLoading = false;
				});
			},
			onLabItemTap(e) {
				const idx = Number(e.currentTarget.dataset.idx);
				const lab = this.labList[idx];
				if (!lab) return;
				this.selectedLab = lab;
				this.showSelectLab = false;
			},

			// ---- 提交 ----
			handleConfirm() {
				if (!this.isEnter && !this.selectedLab) {
					return uni.showToast({ title: '请选择实验室或勾选无需进入', icon: 'none' });
				}
				if (this.educationType == 2 && !this.isEnter && !this.reason.trim()) {
					return uni.showToast({ title: '请填写进入实验室原因', icon: 'none' });
				}
				if (!this.checkType) {
					return uni.showToast({ title: '请阅读并确认勾选《新生绑定实验室须知及责任说明》', icon: 'none' });
				}
				uni.showLoading({ title: '提交中...' });
				const obj = {
					subId: this.isEnter ? '' : (this.selectedLab ? this.selectedLab.subId : ''),
					reason: this.reason || '',
					isEnter: this.isEnter ? '0' : '1',
				};
				examElLabEduRelationBind(obj).then(res => {
					uni.hideLoading();
					const resp = res.data || {};
					if (resp.code === 200) {
						uni.showToast({ title: resp.message || '绑定成功', icon: 'success' });
						this.$emit('bind-success');
						this.$emit('close');
					} else {
						uni.showToast({ title: resp.message || '绑定失败', icon: 'none' });
					}
				}).catch(() => {
					uni.hideLoading();
					uni.showToast({ title: '绑定失败', icon: 'none' });
				});
			},
		}
	}
</script>

<style lang="stylus" scoped>
	.bind-lab-modal
		position fixed
		top 0
		left 0
		right 0
		bottom 0
		z-index 800
		display flex
		align-items center
		justify-content center

	.bind-lab-overlay
		position absolute
		top 0
		left 0
		right 0
		bottom 0
		background rgba(0,0,0,0.5)

	.no-close
		pointer-events none

	.bind-lab-content
		position relative
		z-index 1
		background #fff
		border-radius 24rpx
		width 90%
		max-width 680rpx
		box-shadow 0 16rpx 64rpx rgba(0,0,0,0.2)
		overflow hidden

	.modal-header
		display flex
		align-items center
		justify-content space-between
		padding 32rpx 40rpx 24rpx
		border-bottom 1rpx solid #f0f0f0
		flex-shrink 0

	.modal-title
		font-size 32rpx
		font-weight 700
		color #1a1a1a

	.modal-close
		font-size 36rpx
		color #999
		padding 8rpx

	.modal-scroll
		overflow hidden

	.modal-body
		padding 28rpx 36rpx 32rpx

	// 无需进入实验室
	.no-lab-box
		background #f6f8ff
		border-radius 16rpx
		padding 24rpx 28rpx
		margin-bottom 28rpx

	.checkbox-row
		display flex
		align-items center
		gap 16rpx

	.custom-checkbox
		width 36rpx
		height 36rpx
		border-radius 6rpx
		border 2rpx solid #ccc
		flex-shrink 0
		box-sizing border-box
		position relative

	.custom-checkbox.checked
		background #1677ff
		border-color #1677ff

	.custom-checkbox.checked::after
		content ''
		position absolute
		top 44%
		left 20%
		width 10rpx
		height 20rpx
		border solid #fff
		border-width 0 3rpx 3rpx 0
		transform rotate(45deg) translate(-50%,-50%)

	.no-lab-title
		font-size 28rpx
		font-weight 600
		color #1a1a1a

	.no-lab-desc
		font-size 22rpx
		color #888
		margin-top 10rpx
		line-height 1.6
		padding-left 52rpx

	// 选择实验室按钮
	.select-lab-btn
		display flex
		align-items center
		border 1rpx solid #d9d9d9
		border-radius 12rpx
		padding 0 24rpx
		height 80rpx
		background #fafafa
		margin-bottom 12rpx

	.select-lab-placeholder
		flex 1
		font-size 26rpx
		color #bbb

	.select-lab-value
		flex 1
		font-size 26rpx
		color #333

	.select-lab-arrow
		font-size 36rpx
		color #bbb
		margin-left 8rpx

	.search-tip
		font-size 22rpx
		color #1677ff
		line-height 1.5
		margin-bottom 20rpx
		display block

	// 实验室信息表
	.lab-info-table
		border 1rpx solid #e8e8e8
		border-radius 12rpx
		overflow hidden
		margin-bottom 24rpx

	.info-row
		display flex
		border-bottom 1rpx solid #f0f0f0

	.info-row.no-border
		border-bottom none

	.info-cell
		padding 18rpx 20rpx
		font-size 24rpx

	.label-cell
		width 160rpx
		color #888
		background #fafafa
		flex-shrink 0

	.value-cell
		flex 1
		color #333

	// 原因输入框（本科生）
	.reason-box
		margin-bottom 20rpx

	.reason-input
		width 100%
		box-sizing border-box
		height 120rpx
		border 1rpx solid #d9d9d9
		border-radius 12rpx
		padding 16rpx 20rpx
		font-size 26rpx
		color #333
		background #fafafa

	.reason-tip
		font-size 22rpx
		color #9ba7ba
		line-height 1.5
		margin-top 8rpx
		display block

	// 协议
	.agree-row
		display flex
		align-items flex-start
		gap 16rpx
		margin-bottom 32rpx
		margin-top 16rpx

	.agree-text
		display flex
		flex-wrap wrap
		font-size 24rpx
		color #555
		line-height 1.6

	.agree-link
		color #1677ff

	// 底部按钮
	.modal-footer
		display flex
		gap 20rpx
		justify-content flex-end

	.btn-cancel
		padding 16rpx 44rpx
		border-radius 12rpx
		font-size 26rpx
		border 1rpx solid #d9d9d9
		background #fff
		color #555

	.btn-confirm
		padding 16rpx 44rpx
		border-radius 12rpx
		font-size 26rpx
		background #1677ff
		color #fff
		font-weight 600

	// 须知弹窗
	.notice-modal
		position fixed
		top 0
		left 0
		right 0
		bottom 0
		z-index 900
		background rgba(0,0,0,0.5)
		display flex
		align-items center
		justify-content center

	.notice-content
		background #fff
		border-radius 20rpx
		width 85%
		max-width 640rpx
		overflow hidden

	.notice-header
		padding 28rpx 36rpx
		border-bottom 1rpx solid #f0f0f0

	.notice-title
		font-size 30rpx
		font-weight 700
		color #1a1a1a

	.notice-scroll
		height 300rpx

	.notice-body
		padding 24rpx 36rpx

	.notice-p
		display block
		font-size 26rpx
		color #333
		line-height 1.8
		margin-bottom 12rpx

	.notice-footer
		display flex
		gap 20rpx
		justify-content flex-end
		padding 20rpx 36rpx
		border-top 1rpx solid #f0f0f0

	// 选择实验室弹窗
	.select-lab-modal
		position fixed
		top 0
		left 0
		right 0
		bottom 0
		z-index 900
		background rgba(0,0,0,0.5)
		display flex
		align-items flex-end

	.select-lab-content
		background #fff
		border-radius 32rpx 32rpx 0 0
		width 100%
		overflow hidden

	.select-lab-header
		display flex
		align-items center
		justify-content space-between
		padding 28rpx 36rpx 20rpx
		border-bottom 1rpx solid #f0f0f0

	.select-lab-title
		font-size 30rpx
		font-weight 700
		color #1a1a1a

	.search-bar
		padding 16rpx 28rpx
		background #fff

	.search-input
		width 100%
		box-sizing border-box
		height 76rpx
		border 1rpx solid #e0e0e0
		border-radius 38rpx
		padding 0 28rpx
		font-size 26rpx
		color #333
		background #f5f5f5

	.lab-list-scroll
		overflow hidden

	.lab-list-item
		padding 24rpx 36rpx
		border-bottom 1rpx solid #f5f5f5

	.lab-item-name
		display block
		font-size 28rpx
		color #222
		font-weight 600
		margin-bottom 6rpx

	.lab-item-sub
		display block
		font-size 22rpx
		color #999

	.lab-list-empty
		text-align center
		padding 60rpx 0
		color #bbb
		font-size 26rpx

	.lab-list-loading
		text-align center
		padding 24rpx 0
		color #bbb
		font-size 24rpx
</style>