FE-lab-xcx/pages_basics/views/trainingSignIn.vue

<!-- 培训详情-扫码签到跳转至此 -->
<template>
	<view class="training-signin-page">
		<!-- 顶部导航 -->
		<!-- <view class="topbar">
			<view class="topbar-back" @click="goBack">
				<text class="back-icon">‹</text>
				<text>返回</text>
			</view>
			<view class="topbar-title">培训详情</view>
			<view v-if="userType === 1" class="teacher-topbar">
				<text class="publish-label" :style="{ color: isPublished ? '#52c41a' : '#8c8c8c' }">{{ isPublished ? '已发布' : '未发布' }}</text>
				<view class="publish-toggle" :class="{ active: isPublished }" @click="togglePublish">
					<view class="publish-knob"></view>
				</view>
			</view>
		</view> -->

		<!-- 滚动内容 -->
		<scroll-view scroll-y @scrolltolower="scrollGet" class="scroll-content">
			<!-- 状态标签 -->
			<view class="status-bar">
				<text class="status-tag" :class="statusClass">{{ statusText }}</text>
				<text class="tag tag-blue">{{ detail.trainingModeName || '知识讲座' }}</text>
			</view>

			<!-- 标题 -->
			<view class="title">{{ detail.trainingName }}</view>

			<!-- 信息卡片 -->
			<view class="info-card">
				<view class="info-row">
					<text class="info-label">培训时间</text>
					<text class="info-value">{{ detail.startDate }} 至 {{ detail.endDate }}</text>
				</view>
				<view class="info-row">
					<text class="info-label">培训地点</text>
					<!-- <text class="info-value">📍 {{ detail.locationText || '-' }}</text> -->
					<text class="info-value">{{ detail.locationText || '-' }}</text>
				</view>
				<view class="info-row">
					<text class="info-label">组织单位</text>
					<!-- <text class="info-value">{{ detail.categoryName || '-' }}</text> -->
					<text class="info-value">{{ detail.orgDeptName || '-' }}</text>
				</view>
				<view class="info-row">
					<text class="info-label">主讲人</text>
					<text class="info-value">{{ detail.speakerName || '-' }}</text>
				</view>
				<view class="info-row">
					<text class="info-label">培训时长</text>
					<!-- <text class="info-value">{{ trainingDurationMinutes ? trainingDurationMinutes + ' 分钟' : '-' }}</text> -->
					<text class="info-value">{{ detail.trainingDurationMinutes ? detail.trainingDurationMinutes + ' 分钟' : '-' }}</text>
				</view>
				<view class="info-row">
					<text class="info-label">可得学时</text>
					<text class="info-value info-value-blue">+ {{ detail.creditHours || 0 }} 学时</text>
				</view>
				<view class="info-row last">
					<text class="info-label">可得积分</text>
					<text class="info-value info-value-orange">+ {{ detail.points || 0 }} 奖励分</text>
				</view>
			</view>

			<!-- 签到二维码（老师端 + 进行中） -->
			<view v-if="userType == 1 && trainingStatus === 'active'" class="qr-section">
				<text class="qr-title">签到二维码</text>
				<view class="qr-box" @click="openQrModal">
					<uqrcode 
						v-show="false"
						ref="qrcode" 
						canvas-id="qrcode" 
						:value="qrValue" 
						:size="200"
						@complete="onQrcodeComplete">
					</uqrcode>
					<!-- 用于展示生成的二维码图片 -->
					<image v-if="qrImagePath" :src="qrImagePath" mode="widthFix" style="width: 200px; height: 200px;"></image>
					<!-- <image class="qr-image" src="/static/qr-placeholder.png" mode="aspectFit"></image> -->
				</view>
				<text class="qr-hint">学员扫码签到 · 点击可放大</text>
			</view>

			<!-- 签到人数统计（老师端） -->
			<view v-if="userType == 1" class="signin-stats">
				<text class="stats-title">签到统计</text>
				<view class="stats-grid">
					<view class="stats-card stats-card-blue">
						<text class="stats-num">{{ detail.totalCount || 0 }}</text>
						<text class="stats-label">总人数</text>
					</view>
					<view class="stats-card stats-card-green">
						<text class="stats-num">{{ detail.signedCount || 0 }}</text>
						<text class="stats-label">已签到</text>
					</view>
					<view class="stats-card stats-card-orange">
						<text class="stats-num">{{ detail.notSignedCount || 0 }}</text>
						<text class="stats-label">未签到</text>
					</view>
				</view>
				<!-- 进度条 -->
				<view class="progress-bar">
					<view class="progress-fill" :style="{ width: (detail.signRate || 0) + '%' }"></view>
				</view>
				<text class="progress-text">签到率 {{ detail.signRate || 0 }}%</text>
			</view>

			<!-- 签到区域（学员端 + 进行中） -->
			<view v-if="userType == 2 && !signType" class="signin-section">
				<text class="signin-title">现场签到</text>
				<view class="signin-btn" @click="openScanModal">
					<text class="signin-icon"></text>
					<text class="signin-btn-text">点击签到</text>
				</view>
				<view class="signin-status" :class="{ signed: isSigned }">
					{{ isSigned ? '✓ 已签到' : '● 未签到' }}
				</view>
			</view>

			<!-- 培训证明上传区域（学员端 + 进行中） -->
			<view v-if="userType == 2 && !upType && proofRequired" class="upload-section">
				<view class="upload-header">
					<text class="upload-icon">🖼️</text>
					<text class="upload-title">上传培训证明</text>
					<text class="upload-hint">（如签到截图、现场照片等）</text>
				</view>
				<!-- 已选图片预览 -->
				<view class="upload-preview">
					<view v-for="(img, idx) in previewImages" :key="idx" class="preview-item">
						<image class="preview-img" :src="baseUrl+img" mode="aspectFill" @click="previewImage(img)"></image>
						<view class="preview-del" @click.stop="removeImage(idx)">×</view>
					</view>
				</view>
				<!-- 上传按钮 -->
				<view class="upload-actions">
					<view v-if="previewImages.length < 5" class="upload-btn" @click="chooseImage">
						<text class="upload-btn-icon">＋</text>
						<text>选择图片</text>
					</view>
					<view v-if="previewImages.length > 0" class="submit-btn" @click="submitProof">提交证明</view>
				</view>
				<text class="upload-tip">支持 JPG、PNG 格式，单张不超过 10MB，最多上传 5 张</text>
			</view>

			<!-- 已完成状态展示 -->
			<view v-if="signType">
				<!-- 完成状态提示 -->
				<view class="done-banner">
					<text class="done-icon">✅</text>
					<view class="done-info">
						<!-- <text class="done-title">培训已完成</text>
						<text class="done-desc">已签到并获得 {{ detail.creditHours || 0 }} 学时 · +{{ detail.points || 0 }} 奖励分</text> -->
						<text class="done-title">签到已完成</text>
						<!-- <text class="done-desc">已签到并获得 {{ detail.creditHours || 0 }} 学时 · +{{ detail.points || 0 }} 奖励分</text> -->
					</view>
				</view>
			</view>
			<view v-if="upType">
				<!-- 已上传培训证明 -->
				<view v-if="previewImages.length > 0" class="done-images-card">
					<view class="done-images-header">
						<text class="done-images-icon">🖼️</text>
						<text class="done-images-title">培训证明图片</text>
					</view>
					<view class="done-images-grid">
						<view v-for="(img, idx) in previewImages" :key="idx" class="done-image-item" @click="previewImage(img)">
							<image class="done-image" :src="img" mode="aspectFill"></image>
						</view>
					</view>
					<text class="done-images-tip">共 {{ previewImages.length }} 张</text>
				</view>
			</view>

			<!-- 签到名单（老师端） -->
			<view v-if="userType == 1" class="roster-section">
				<!-- Tab -->
				<view class="roster-tabs">
					<view class="roster-tab" :class="{ active: activeRosterTab === 1 }" @click="switchRosterTab(1)">
						已签到 <text class="tab-badge tab-badge-green">{{signedCount}}</text>
					</view>
					<view class="roster-tab" :class="{ active: activeRosterTab === 0 }" @click="switchRosterTab(0)">
						未签到 <text class="tab-badge tab-badge-orange">{{notSignedCount}}</text>
					</view>
				</view>
				<!-- 已签到名单 -->
				<view v-if="activeRosterTab === 1" class="roster-panel">
					<view v-for="(item, idx) in signedList" :key="idx" class="roster-item roster-item-green">
						<view class="roster-avatar" style="background: linear-gradient(135deg, #1677ff, #4096ff);">{{ item.userName[0] }}</view>
						<view class="roster-info">
							<text class="roster-name">{{ item.userName }}</text>
							<text class="roster-meta">{{ item.account }} · {{ item.deptName }}</text>
						</view>
						<view class="roster-status">
							<text class="status-text-green">✓ 已签到</text>
							<text class="status-time">{{ item.signTime }}</text>
						</view>
					</view>
					<text class="roster-more">…… 共{{signedCount}}人已签到 ……</text>
				</view>
				<!-- 未签到名单 -->
				<view v-if="activeRosterTab === 0" class="roster-panel">
					<view v-for="(item, idx) in unsignedList" :key="idx" class="roster-item roster-item-orange">
						<view class="roster-avatar" style="background: linear-gradient(135deg, #1677ff, #4096ff);">{{ item.userName[0] }}</view>
						<view class="roster-info">
							<text class="roster-name">{{ item.userName }}</text>
							<text class="roster-meta">{{ item.account }} · {{ item.deptName }}</text>
						</view>
						<view class="roster-status">
							<text class="status-text-orange">● 未签到</text>
						</view>
					</view>
					<text class="roster-more">…… 共{{notSignedCount}}人未签到 ……</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import { config } from '@/api/request/config.js'
	import {
		examElTrainingTaskProgressDetail,examElTrainingTaskSignInList,
		examUserTrainingDetail,examUserTrainingSignIn,examUserTrainingProofUpload,
	} from '@/pages_basics/api/index.js'
	export default {
		data() {
			return {
				baseUrl:config.base_url,
				id:'',
				userType: 0, // 1老师 2学生（后续自行调试切换）
				detail: {},
				isPublished: true,
				activeRosterTab: 1,
				previewImages: [], // 待上传图片预览
				currentUserId: null, // TODO: 当前登录用户ID，需从登录态获取
				// 已签到名单
				signedList: [],
				// 未签到名单
				unsignedList: [],
				signedCount:0,
				notSignedCount:0,
				page:1,
				pageSize:10,
				total:0,
				getDataType:false,
				//二维码
				qrValue: 'https://uniapp.dcloud.io/', // 二维码内容
				qrImagePath: '' ,// 生成的二维码图片路径
				//签到状态
				signType:false,
				//上传状态
				upType:false,
				//开启签到上传状态
				proofRequired:false,
			}
		},
		computed: {
			// 培训状态：直接取接口返回的 status（1-未开始 2-进行中 3-已结束）
			trainingStatus() {
				const status = this.detail.status
				if (status === 1) return 'upcoming'
				if (status === 3) return 'done'
				return 'active'
			},
			// 状态标签文字
			statusText() {
				return this.detail.statusName || '● 进行中'
			},
			// 状态标签样式类
			statusClass() {
				const map = {
					upcoming: 'status-upcoming',
					active: 'status-active',
					done: 'status-done'
				}
				return map[this.trainingStatus] || 'status-active'
			},
			// 格式化培训时间显示
			formatTime() {
				const { startDate, endDate } = this.detail
				if (!startDate || !endDate) return '-'
				const datePart = startDate.split(' ')[0]
				const startTime = startDate.split(' ')[1].substring(0, 5)
				const endTime = endDate.split(' ')[1].substring(0, 5)
				return `${datePart}   ${startTime} – ${endTime}`
			},
			// 培训时长（分钟）：根据起止时间计算
			trainingDurationMinutes() {
				const { startDate, endDate } = this.detail
				if (!startDate || !endDate) return 0
				const start = new Date(startDate.replace(' ', 'T')).getTime()
				const end = new Date(endDate.replace(' ', 'T')).getTime()
				const diff = end - start
				return diff > 0 ? Math.round(diff / (1000 * 60)) : 0
			},
			// 当前用户在 records 中的记录
			myRecord() {
				if (!this.detail.records || !this.currentUserId) return null
				return this.detail.records.find(r => r.userId === this.currentUserId) || null
			},
			// 是否已签到（线下 status === 1 表示已签到）
			isSigned() {
				return this.myRecord && this.myRecord.status === 1
			},
		},
		onLoad(option) {
			this.qrValue = uni.getStorageSync('codeOnlineAdd') +'?code='+option.code+'&type=offlineTraining',
			this.userType = uni.getStorageSync('userType');
			if (option.code) {
				this.$set(this,'id',option.code);
				this.examElTrainingTaskProgressDetail()
				this.examElTrainingTaskSignInList()
				if(this.userType == 2){
					this.examUserTrainingDetail();
				}
			}
		},
		methods: {
			onQrcodeComplete(res) {
				if (res.success) {
					// 生成成功后，调用 toTempFilePath 获取图片临时路径
					this.$refs.qrcode.toTempFilePath({
						success: (res) => {
							// console.log('二维码图片路径:', res.tempFilePath);
							this.qrImagePath = res.tempFilePath; // 将路径赋值给 data，用于页面展示
						},
						fail: (err) => {
							console.error('获取图片路径失败:', err);
						}
					});
				}
			},
			//查询培训详情
			async examElTrainingTaskProgressDetail() {
				const {
					data
				} = await examElTrainingTaskProgressDetail({
					id: this.id
				})
				if (data.code == 200) {
					this.detail = data.data || {};
				}
			},
			//查询用户培训信息
			async examUserTrainingDetail() {
				const {
					data
				} = await examUserTrainingDetail({
					id: this.id
				})
				if (data.code == 200) {
					this.$set(this,'signType',data.data.signStatus==1?true:false);
					this.$set(this,'upType',data.data.proofImages[0]?true:false);
					this.$set(this,'proofRequired',data.data.proofRequired==1?true:false);
					this.$set(this,'previewImages',data.data.proofImages);
					
				}
			},
			//滚动加载事件
			scrollGet() {
				let self = this;
				console.log('self.total',self.total);
				console.log('self.pageSize',self.pageSize);
				console.log('self.page',self.page);
				if (self.total / self.pageSize <= self.page) {
					this.$set(this, 'getDataType', true);
				} else {
					this.page += 1;
					this.$nextTick(() => {
						this.examElTrainingTaskSignInList();
					})
				}
			},
			async examElTrainingTaskSignInList() {
				let self = this;
				const {
					data
				} = await examElTrainingTaskSignInList({
					id: this.id,
					signStatus:this.activeRosterTab,
					page:this.page,
					pageSize:this.pageSize,
				})
				if (data.code == 200) {
					this.$set(this,'signedCount',data.data.signedCount);
					this.$set(this,'notSignedCount',data.data.notSignedCount);
					if(self.page == 1){
						if(this.activeRosterTab == 1){
							this.signedList = data.data.records;
						}else{
							this.unsignedList = data.data.records;
						}
						this.total = data.data.pageTotal;
						if (data.data.total / self.pageSize <= self.page) {
							this.$set(this, 'getDataType', true);
						}
					}else{
						if(this.activeRosterTab == 1){
							this.signedList = [...this.signedList, ...data.data.records]
						}else{
							this.unsignedList = [...this.unsignedList, ...data.data.records]
						}
						this.total = data.data.pageTotal;
						if (data.data.total / self.pageSize <= self.page) {
							this.$set(this, 'getDataType', true);
						}
					}
				}
			},
			// 返回上一页
			goBack() {
				uni.navigateBack()
			},
			// 发布开关切换（老师端）
			togglePublish() {
				this.isPublished = !this.isPublished
				uni.showToast({
					title: this.isPublished ? '培训已发布，学员可见' : '培训已取消发布',
					icon: 'none'
				})
			},
			// 打开扫码
			openScanModal() {
				this.examUserTrainingSignIn()
			},
			async examUserTrainingSignIn() {
				const {
					data
				} = await examUserTrainingSignIn({
					taskId: this.id
				})
				if (data.code == 200) {
					uni.showToast({ title: data.message, icon: 'none' })
					this.examUserTrainingDetail();
				}
			},
			// 扫码完成：更新本地 records 中当前用户状态
			completeScan() {
				if (this.myRecord) {
					this.$set(this.myRecord, 'status', 1)
					this.$set(this.myRecord, 'statusName', '已签到')
				}
				uni.showToast({ title: '签到成功！', icon: 'success' })
			},
			// 打开二维码放大
			openQrModal() {
				if (!this.qrImagePath) return;
				uni.previewImage({
					current: this.qrImagePath, // 当前显示图片的链接
					urls: [this.qrImagePath],  // 需要预览的图片链接列表（这里只有一张，所以包在数组里）
					fail: (err) => {
						console.error('预览失败', err);
					}
				});
			},
			// 选择图片
			chooseImage() {
				let self = this;
				const remaining = 5 - this.previewImages.length
				if (remaining <= 0) {
					uni.showToast({ title: '最多上传 5 张图片', icon: 'none' })
					return
				}
				uni.chooseImage({
					count: remaining,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						const tempFiles = res.tempFiles || []
						const oversized = tempFiles.filter(f => f.size > 10 * 1024 * 1024)
						if (oversized.length) {
							uni.showToast({ title: '图片大小不能超过 10MB', icon: 'none' })
							return
						}
						let tempFilePaths = res.tempFilePaths[0];
						self.uploadImg(tempFilePaths);
					}
				})
			},
			async uploadImg(tempFilePaths){
				let self = this;
				uni.showLoading({
						title: '上传中',
						mask: true
				});
				uni.uploadFile({
						url: config.base_url + '/system/file/upload', //仅为示例，非真实的接口地址
						header:{'Authorization':uni.getStorageSync('token')},
						filePath: tempFilePaths,
						name: 'file',
						formData: {
							'user': 'test'
						},
						success: (uploadFileRes) => {
							let res = JSON.parse(uploadFileRes.data);
							if(res.code == 200){
								this.previewImages.push(res.data.url);
							}else{
								uni.showToast({
									title: res.msg,
									icon:"none",
									mask:true,
									duration: 2000
								});
							}
						},
						fail: err => {},
						complete: () => {
								uni.hideLoading()
						}
				});
			},
			// 移除预览图
			removeImage(idx) {
				this.previewImages.splice(idx, 1)
			},
			// 提交证明
			submitProof() {
				if (!this.previewImages.length) {
					uni.showToast({ title: '请先选择图片', icon: 'none' })
					return
				}
				this.examUserTrainingProofUpload();
			},
			//上传培训照片
			async examUserTrainingProofUpload() {
				const {
					data
				} = await examUserTrainingProofUpload({
					taskId: this.id,
					proofImagePath:this.previewImages+'',
				})
				if (data.code == 200) {
					uni.showToast({ title: data.message, icon: 'none' })
					this.examUserTrainingDetail();
				}
			},
			// 预览图片
			previewImage(url) {
				const urls = this.previewImages.length > 0 ? this.previewImages : this.myProofImages
				uni.previewImage({
					current: url,
					urls: urls.length > 0 ? urls : [url]
				})
			},
			// 名单Tab切换
			switchRosterTab(idx) {
				this.activeRosterTab = idx
				this.examElTrainingTaskSignInList();
			}
		}
	}
</script>

<style lang="stylus" scoped>
	// ========== 基础变量 ==========
	$blue = #1857d4
	$blue-light = #eef3fd
	$green = #10a37f
	$green-dark = #0d8f6f
	$green-light = #edfaf6
	$orange = #e67e22
	$orange-light = #fef6ec
	$red = #e53e3e
	$gray = #8896a7
	$gray-light = #f4f6fa
	$gray-border = #dde3ed
	$text-primary = #1a2233
	$text-hint = #8896a7
	$bg = #f0f4fb
	$white = #ffffff

	// ========== 页面布局 ==========
	.training-signin-page
		display flex
		flex-direction column
		height 100vh
		background $bg

	// ========== 顶部导航 ==========
	.topbar
		background $white
		padding 13px 16px
		display flex
		align-items center
		justify-content space-between
		border-bottom 1px solid $gray-border
		flex-shrink 0
		box-shadow 0 1px 6px rgba(24, 87, 212, .07)

	.topbar-back
		display flex
		align-items center
		gap 4px
		color $blue
		font-size 13px
		padding 5px 10px
		border 1px solid rgba(24, 87, 212, .25)
		border-radius 8px
		background #f5f8ff
		font-weight 500

	.back-icon
		font-size 18px
		line-height 1

	.topbar-title
		font-size 16px
		font-weight 700
		color $text-primary
		letter-spacing .3px

	// 老师端发布开关
	.teacher-topbar
		display flex
		align-items center
		gap 6px

	.publish-label
		font-size 11px
		font-weight 500
		white-space nowrap

	.publish-toggle
		width 40px
		height 22px
		border-radius 11px
		background #d9d9d9
		position relative
		transition background .2s

		&.active
			background #52c41a

			.publish-knob
				left auto
				right 4px

	.publish-knob
		position absolute
		top 4px
		left 4px
		width 14px
		height 14px
		border-radius 50%
		background #fff
		transition left .2s, right .2s

	// ========== 滚动内容区 ==========
	.scroll-content
		flex 1
		overflow-y scroll;
		padding 12px
		box-sizing border-box

	// ========== 状态标签 ==========
	.status-bar
		display flex
		align-items center
		gap 8px
		margin-bottom 12px

	.status-tag
		font-size 11px
		border-radius 10px
		padding 3px 10px
		font-weight 500

	.status-active
		background #fff7e6
		color #fa8c16
		border 1px solid #ffd591

	.status-done
		background #f6ffed
		color #52c41a
		border 1px solid #b7eb8f

	.status-upcoming
		background #f5f5f5
		color #8c8c8c
		border 1px solid #d9d9d9

	.tag
		display inline-flex
		align-items center
		padding 2px 8px
		border-radius 20px
		font-size 11px
		font-weight 500

	.tag-blue
		background $blue-light
		color $blue

	// ========== 标题 ==========
	.title
		font-size 17px
		font-weight 700
		color #1a1a1a
		margin-bottom 16px

	// ========== 信息卡片 ==========
	.info-card
		border 1px solid #f0f0f0
		border-radius 10px
		overflow hidden
		margin-bottom 14px
		background $white

	.info-row
		display flex
		border-bottom 1px solid #f5f5f5

		&.last
			border-bottom none

	.info-label
		padding 10px 14px
		color #888
		background #fafafa
		width 30%
		font-size 13px
		white-space nowrap
		flex-shrink 0

	.info-value
		padding 10px 14px
		color #333
		font-size 13px
		font-weight 500
		flex 1

	.info-value-blue
		color #1677ff
		font-weight 600

	.info-value-orange
		color #fa8c16
		font-weight 600

	// ========== 二维码区域 ==========
	.qr-section
		border 1.5px solid #ffadd2
		border-radius 12px
		padding 16px 14px
		background linear-gradient(135deg, #fff0f6, #fff7e6)
		margin-bottom 14px
		text-align center

	.qr-title
		font-size 13px
		font-weight 600
		color #c41d7f
		margin-bottom 12px
		display block

	.qr-box
		display inline-block
		background #fff
		border-radius 12px
		padding 10px
		border 1.5px solid #ffadd2

	.qr-image
		width 120px
		height 120px
		display block

	.qr-hint
		font-size 12px
		color #ad6494
		margin-top 8px
		display block

	// ========== 签到统计 ==========
	.signin-stats
		margin-bottom 14px

	.stats-title
		font-size 13px
		font-weight 600
		color #1a1a1a
		margin-bottom 8px
		display block

	.stats-grid
		display flex
		gap 10px

	.stats-card
		flex 1
		border-radius 12px
		padding 14px 10px
		text-align center

	.stats-card-blue
		background linear-gradient(135deg, #e6f4ff, #bae0ff)
		border 1px solid #91caff

		.stats-num
			color #0958d9

		.stats-label
			color #4096ff

	.stats-card-green
		background linear-gradient(135deg, #f6ffed, #d9f7be)
		border 1px solid #b7eb8f

		.stats-num
			color #389e0d

		.stats-label
			color #52c41a

	.stats-card-orange
		background linear-gradient(135deg, #fff7e6, #ffe7ba)
		border 1px solid #ffd591

		.stats-num
			color #d46b08

		.stats-label
			color #fa8c16

	.stats-num
		font-size 28px
		font-weight 800
		line-height 1.1
		display block

	.stats-label
		font-size 11px
		margin-top 4px
		font-weight 500
		display block

	// 进度条
	.progress-bar
		margin-top 10px
		background #f0f0f0
		border-radius 20px
		height 8px
		overflow hidden

	.progress-fill
		height 100%
		background linear-gradient(90deg, #52c41a, #73d13d)
		border-radius 20px
		transition width .4s

	.progress-text
		font-size 11px
		color #888
		margin-top 4px
		text-align right
		display block

	// ========== 签到区域 ==========
	.signin-section
		border 1px solid #ffadd2
		border-radius 10px
		padding 14px
		background linear-gradient(135deg, #fff0f6, #fff7e6)
		text-align center
		margin-bottom 14px

	.signin-title
		font-size 13px
		font-weight 600
		color #c41d7f
		margin-bottom 10px
		display block

	.signin-btn
		width 72px
		height 72px
		border-radius 12px
		border 1.5px solid #eb2f96
		background #fff
		color #c41d7f
		display inline-flex
		flex-direction column
		align-items center
		justify-content center
		gap 4px
		margin-bottom 6px

	.signin-icon
		font-size 28px
		line-height 1

	.signin-btn-text
		font-size 10px
		font-weight 500

	.signin-status
		font-size 11px
		font-weight 500
		color #fa8c16

		&.signed
			color #52c41a

	// ========== 上传区域 ==========
	.upload-section
		border 1px solid #91caff
		border-radius 10px
		padding 14px
		background linear-gradient(135deg, #e6f4ff, #f0f9ff)
		margin-bottom 14px

	.upload-header
		display flex
		align-items center
		gap 6px
		margin-bottom 10px

	.upload-icon
		font-size 15px

	.upload-title
		font-size 13px
		font-weight 600
		color #1677ff

	.upload-hint
		font-size 11px
		color #999
		margin-left 2px

	.upload-preview
		display flex
		flex-wrap wrap
		gap 8px
		margin-bottom 10px

	.preview-item
		position relative
		width 80px
		height 80px
		border-radius 8px
		overflow hidden
		border 1px solid #91caff
		flex-shrink 0

	.preview-img
		width 100%
		height 100%
		display block

	.preview-del
		position absolute
		top 2px
		right 2px
		width 20px
		height 20px
		border-radius 50%
		background rgba(0, 0, 0, .5)
		color #fff
		font-size 14px
		line-height 20px
		text-align center

	.upload-actions
		display flex
		align-items center
		gap 10px

	.upload-btn
		display inline-flex
		align-items center
		gap 6px
		padding 8px 16px
		border-radius 8px
		border 1.5px dashed #4096ff
		background #fff
		color #1677ff
		font-size 13px
		font-weight 500

	.upload-btn-icon
		font-size 16px

	.submit-btn
		padding 8px 20px
		border-radius 8px
		background #1677ff
		color #fff
		font-size 13px
		font-weight 500

	.upload-tip
		font-size 11px
		color #aaa
		margin-top 8px
		display block

	// ========== 已完成区域 ==========
	.done-banner
		border 1px solid #b7eb8f
		border-radius 10px
		padding 12px 14px
		background #f6ffed
		display flex
		align-items center
		gap 10px
		margin-bottom 14px

	.done-icon
		font-size 22px

	.done-info
		flex 1

	.done-title
		font-size 13px
		font-weight 600
		color #389e0d
		display block

	.done-desc
		font-size 12px
		color #73d13d
		margin-top 2px
		display block

	.done-images-card
		border 1px solid #f0f0f0
		border-radius 10px
		padding 14px
		background $white

	.done-images-header
		display flex
		align-items center
		gap 6px
		margin-bottom 12px

	.done-images-icon
		font-size 15px

	.done-images-title
		font-size 13px
		font-weight 600
		color #1a1a1a

	.done-images-grid
		display flex
		flex-wrap wrap
		gap 8px

	.done-image-item
		position relative
		width 80px
		height 80px
		border-radius 8px
		overflow hidden
		border 1px solid #f0f0f0

	.done-image
		width 100%
		height 100%
		display block

	.done-images-tip
		font-size 11px
		color #bbb
		margin-top 10px
		display block

	// ========== 签到名单 ==========
	.roster-section
		margin-top 14px

	.roster-tabs
		display flex
		border-bottom 2px solid $gray-border
		margin-bottom 12px

	.roster-tab
		flex 1
		text-align center
		padding 9px 4px 8px
		font-size 13px
		color #888
		border-bottom 2px solid transparent
		margin-bottom -2px

		&.active
			color #1677ff
			font-weight 600
			border-bottom-color #1677ff

	.tab-badge
		border-radius 10px
		padding 1px 7px
		font-size 11px
		font-weight 600
		color #fff

	.tab-badge-green
		background #52c41a

	.tab-badge-orange
		background #fa8c16

	.roster-panel
		display flex
		flex-direction column
		gap 8px

	.roster-item
		display flex
		align-items center
		gap 10px
		border-radius 10px
		padding 10px 12px

	.roster-item-green
		background #f6ffed
		border 1px solid #d9f7be

	.roster-item-orange
		background #fff7e6
		border 1px solid #ffe7ba

	.roster-avatar
		width 36px
		height 36px
		border-radius 50%
		display flex
		align-items center
		justify-content center
		color #fff
		font-size 15px
		font-weight 700
		flex-shrink 0

	.roster-info
		flex 1

	.roster-name
		font-size 13px
		font-weight 600
		display block

	.roster-meta
		font-size 11px
		color #888
		margin-top 2px
		display block

	.roster-status
		text-align right

	.status-text-green
		font-size 11px
		color #52c41a
		font-weight 500
		display block

	.status-text-orange
		font-size 11px
		color #fa8c16
		font-weight 500
		display block

	.status-time
		font-size 10px
		color #aaa
		margin-top 2px
		display block

	.roster-more
		text-align center
		padding 8px 0
		color $text-hint
		font-size 12px
		display block
</style>