rtliveDoctor/pages_task/shortVideo.vue

<template>
	<view class="container">
		
		<!-- 筛选标签栏 -->
		<view class="filter-bar">
			<view class="filter-tabs">
				<view class="tab-item" 
					:class="{ active: currentTab === item.value }" 
					v-for="(item, index) in tabs" 
					:key="index"
					@click="switchTab(item.value)">
					{{ item.label }}
				</view>
			</view>
			<view class="filter-divider"></view>
			<view class="filter-btn" @click="showFilter = true">
				<image class="w32 h32" src="@/static/image/icon_select.png" mode=""></image>
			</view>
		</view>
		
		<!-- 任务列表 -->
		<scroll-view class="content" scroll-y>
			<view class="task-card" v-for="(item, index) in taskList" :key="index" @click="showDetail(item)">
				<view class="card-header">
					<view class="card-title">{{ item.taskName}}</view>
					<view class="status-tag" :class="'tag'+item.finishAuditStatus">
						{{ item.finishAuditStatus==0?'待审核':item.finishAuditStatus==1?'已通过':item.finishAuditStatus==2?'已驳回':'未完成'}}
					</view>
				</view>
				<view style="padding: 24rpx;">
				<view class="card-tags">
					<view class="x-f">
						<view class="tag-item video-tag" v-if="item.taskType">
							<image class="w28 h28 mr10" src="@/static/image/icon_longvideo.png" mode=""></image>
							<!-- <image class="w28 h28 mr10" src="@/static/image/icon_article.png" mode=""></image> -->
							<text>空中课堂</text>
							
						</view>
						<view class="tag-item category">
							学术
						</view>
					</view>
					
					<view class="tag-item points-tag">
						{{ item.taskIntegral }}积分
					</view>
					<view class="tag-item">
						{{ item.taskCount }}{{item.taskUnitName}}
					</view>
				</view>
				
				<view class="card-dates">
					<view class="date-item">
						<text>开始时间：{{ item.planStartTime }}</text>
					</view>
					<view class="date-item">
						<text>结束时间：{{ item.planEndTime }}</text>
					</view>
				</view>
				
				<view class="card-warning" v-if="item.warning">
					<image class="w28 h28 mr8" src="@/static/image/icon_admonish.png" mode=""></image>
					<text>{{ item.warning }}</text>
				</view>
				
				<view class="card-rejection" v-if="item.finishAuditStatus == 2">
					<image class="w28 h28 mr8" src="@/static/image/icon_reject.png" mode=""></image>
					<text>驳回原因: {{ item.finishAuditRemark }}</text>
				</view>
				
				<view class="card-footer">
					<view class="footer-date">{{ item.createTime }}</view>
					<view class="footer-actions">
						<view class="action-btn" v-if="item.finishAuditStatus==3">
							去完成
						</view>
						<view class="action-btn" v-if="item.finishAuditStatus == 2" @click="goEdit(item)">
							编辑
						</view>
					</view>
				</view>
				</view>
			</view>
			
			<view class="no-more" v-if="!hasMore && taskList.length > 0">没有更多了~</view>
			<view class="empty-state y-bc" v-if="taskList.length === 0">
				<image class="w300 h300" src="@/static/image/img_blank_nodata.png" mode=""></image>
				<text>暂无数据</text>
			</view>
		</scroll-view>
		
		<!-- 筛选弹窗 -->
		<view class="filter-popup" v-if="showFilter" @click="closeFilter">
			<view class="filter-content" @click.stop>
				<view class="filter-header">
					<view class="filter-title">筛选</view>
					<view class="filter-close-btn" @click="closeFilter">
						<image class="w44 h44" src="@/static/image/icon_cross.png" mode=""></image>
					</view>
				</view>
				
				<!-- 申请时间筛选 -->
				<view class="filter-group">
					<view class="group-label">申请时间</view>
					<view class="date-range-inputs">
						<picker style="flex:1" mode="date" :value="tempDateRange.startDate" @change="onStartDateChange">
							<view class="date-input" :class="{ placeholder: !tempDateRange.startDate }">
								{{ tempDateRange.startDate || '开始时间' }}
							</view>
						</picker>
						<text class="date-separator">-</text>
						<picker style="flex:1" mode="date" :value="tempDateRange.endDate" @change="onEndDateChange">
							<view class="date-input" :class="{ placeholder: !tempDateRange.endDate }">
								{{ tempDateRange.endDate || '结束时间' }}
							</view>
						</picker>
					</view>
				</view>
				
				<!-- 任务类型筛选 -->
				<!-- <view class="filter-group">
					<view class="group-label">任务类型</view>
					<view class="filter-tags">
						<view 
							class="filter-tag" 
							:class="{ active: tempSelectedTaskType === item.value }"
							v-for="(item, index) in taskTypeOptions" 
							:key="index"
							@click="selectTaskType(item.value)">
							{{ item.label }}
						</view>
					</view>
				</view> -->
				
				<!-- 操作按钮 -->
				<view class="filter-actions">
					<view class="reset-btn" @click="resetFilters">重置</view>
					<view class="confirm-btn" @click="confirmFilters">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getAirClassroomList ,getTaskDetail,submitTask} from '@/api/airClassroom'
import { getTaskTypeList } from '@/api/common.js'
export default {
	data() {
		return {
			statusBarHeight: uni.getSystemInfoSync().statusBarHeight + 'px',
			currentTab: '',
			showFilter: false,
			dateRange: {
				startDate: '',
				endDate: ''
			},
			tempDateRange: {
				startDate: '',
				endDate: ''
			},
			selectedTaskType: 'article', // 默认选中科普文章
			tempSelectedTaskType: 'article',
			// taskTypeOptions: [
			// 	{ label: '科普文章', value: 'article' },
			// 	{ label: '科普短视频', value: 'shortVideo' },
			// 	{ label: '科普长视频', value: 'longVideo' }
			// ],
			tabs: [
				{ label: '全部', value:''},
				{ label: '未完成', value: 3},
				{ label: '待审核', value: 0},
				{ label: '已通过', value: 1},
				{ label: '已驳回', value: 2}
			],
			taskList: [],
			pageNum: 1,
			pageSize: 10,
			hasMore: true,
			loading: false
		}
	},
	watch: {
		showFilter(newVal) {
			if (newVal) {
				// 打开弹窗时，同步临时日期范围和任务类型为当前值
				this.tempDateRange = {
					startDate: this.dateRange.startDate,
					endDate: this.dateRange.endDate
				}
				this.tempSelectedTaskType = this.selectedTaskType
			}
		}
	},
	onLoad() {
		
	},
	onShow() {
		this.loadData()
	},
	onReachBottom() {
		this.loadMore()
	},
	methods: {
		goBack() {
			uni.navigateBack()
		},
		switchTab(value) {
			this.currentTab = value
			this.pageNum = 1
			this.hasMore = true
			this.loadData()
		},
		closeFilter() {
			// 关闭弹窗时，恢复临时日期范围和任务类型为当前值
			this.tempDateRange = {
				startDate: this.dateRange.startDate,
				endDate: this.dateRange.endDate
			}
			this.tempSelectedTaskType = this.selectedTaskType
			this.showFilter = false
		},
		selectTaskType(value) {
			// 如果点击的是已选中的，则取消选择
			if (this.tempSelectedTaskType === value) {
				this.tempSelectedTaskType = ''
			} else {
				this.tempSelectedTaskType = value
			}
		},
		onStartDateChange(e) {
			this.tempDateRange.startDate = e.detail.value
		},
		onEndDateChange(e) {
			this.tempDateRange.endDate = e.detail.value
		},
		resetFilters() {
			this.tempDateRange = {
				startDate: '',
				endDate: ''
			}
			this.tempSelectedTaskType = ''
		},
		confirmFilters() {
			// 时间筛选时必须选择结束时间
			if (this.tempDateRange.startDate && !this.tempDateRange.endDate) {
				uni.showToast({
					icon: 'none',
					title: '请选择结束时间'
				})
				return
			}
			// 验证日期范围
			if (this.tempDateRange.startDate && this.tempDateRange.endDate) {
				if (new Date(this.tempDateRange.startDate) > new Date(this.tempDateRange.endDate)) {
					uni.showToast({
						icon: 'none',
						title: '开始时间不能大于结束时间'
					})
					return
				}
			}
			this.dateRange = {
				startDate: this.tempDateRange.startDate,
				endDate: this.tempDateRange.endDate
			}
			this.selectedTaskType = this.tempSelectedTaskType
			this.showFilter = false
			this.pageNum = 1
			this.hasMore = true
			this.loadData()
		},
		goComplete(item) {
			uni.navigateTo({
				url: `/pages_task/completeTask?id=${item.id}`
			})
		},
		goEdit(item) {
			uni.navigateTo({
				url: `/pages_task/completeTask?id=${item.id}&edit=true`
			})
		},
		// 查看详情
		showDetail(item) {
			uni.navigateTo({
				url: `/pages_task/taskDetail?id=${item.id}`
			})
		},
		async loadData() {
			try {
				this.pageNum = 1
				this.hasMore = true
				uni.showLoading({ title: '加载中...' })
				// 构建请求参数
				const params = {
					applyStartTime: this.dateRange.startDate,
					applyEndTime: this.dateRange.endDate,
					finishAuditStatus:this.currentTab,
					taskType:3,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}
				const res = await getAirClassroomList(params)
				uni.hideLoading()
				if (res.code === 200) {
					this.taskList = res.rows || []
					// 判断是否还有更多数据
					if (!res.rows || res.rows.length < this.pageSize) {
						this.hasMore = false
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
				}
			} catch (e) {
				uni.hideLoading()
			}
		},
		async loadMore() {
			// 如果没有更多数据或正在加载，则不执行
			if (!this.hasMore || this.loading) {
				return
			}
			
			try {
				this.loading = true
				const nextPage = this.pageNum + 1
				// 构建请求参数
				const params = {
					applyStartTime: this.dateRange.startDate,
					applyEndTime: this.dateRange.endDate,
					finishAuditStatus:this.currentTab,
					taskType: 3,
					pageNum: nextPage,
					pageSize: this.pageSize
				}
				
				const res = await getAirClassroomList(params)
				
				if (res.code === 200) {
					const newData = res.rows || []
					if (newData.length > 0) {
						// 追加新数据到列表
						this.taskList = [...this.taskList, ...newData]
						this.pageNum = nextPage
						// 如果返回的数据量小于 pageSize，说明没有更多数据了
						if (newData.length < this.pageSize) {
							this.hasMore = false
						}
					} else {
						// 没有新数据，说明已经加载完所有数据
						this.hasMore = false
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: res.msg || '加载失败'
					})
				}
			} catch (e) {
				console.error('加载更多数据失败', e)
				uni.showToast({
					icon: 'none',
					title: '加载失败'
				})
			} finally {
				this.loading = false
			}
		}
	}
}
</script>

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

.status-bar {
	width: 100%;
	background: #fff;
}

.header {
	position: relative;
	height: 88rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border-bottom: 1rpx solid #f0f0f0;
	
	.back-btn {
		position: absolute;
		left: 24rpx;
		width: 40rpx;
		height: 40rpx;
		
		image {
			width: 100%;
			height: 100%;
		}
	}
	
	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}
	
	.header-right {
		position: absolute;
		right: 24rpx;
		display: flex;
		align-items: center;
		gap: 16rpx;
		
		.more-icon {
			font-size: 32rpx;
			color: #333;
		}
	}
}

.filter-bar {
	display: flex;
	align-items: center;
	background: #fff;
	padding: 0 24rpx;
	border-bottom: 1rpx solid #f0f0f0;
	
	.filter-tabs {
		flex: 1;
		display: flex;
		align-items: center;
		gap: 48rpx;
		overflow-x: auto;
		
		.tab-item {
			padding: 24rpx 0;
			font-size: 28rpx;
			color: #969799;
			white-space: nowrap;
			position: relative;
			
			&.active {
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				
				&::after {
					content: '';
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 56rpx;
					height: 6rpx;
					background: #388BFF;
					border-radius: 3rpx 3rpx 3rpx 3rpx;
				}
			}
		}
	}
	
	.filter-divider {
		width: 1rpx;
		height: 40rpx;
		background: #e0e0e0;
		margin: 0 16rpx;
	}
	
	.filter-btn {
		padding: 24rpx 0;
		
		.filter-icon {
			font-size: 32rpx;
			color: #333;
		}
	}
}

.content {
	flex: 1;
	padding: 24rpx;
	box-sizing: border-box;
}

.no-more {
	text-align: center;
	padding: 48rpx 0;
	font-size: 24rpx;
	color: #999;
}
.empty-state {
	padding: 120rpx 24rpx;
	text-align: center;
	font-size: 28rpx;
	color: #999;
}
.task-card {
	background: #fff;
	border-radius: 24rpx 24rpx 24rpx 24rpx;
	border: 2rpx solid #E9F2FF;
	margin-bottom: 24rpx;
	
	.card-header {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		margin-bottom: 16rpx;
		padding: 24rpx;
		background: linear-gradient( 90deg, #E8F1FF 0%, #FFFFFF 100%);
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		
		.card-title {
			flex: 1;
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}
		
		.status-tag {
			padding: 8rpx 16rpx;
			border-radius: 20rpx;
			font-size: 24rpx;
			
			&.tag0 {
				// 待审核
				background: #FFF3E0;
				color: #FF9800;
			}
			
			&.tag1 {
				// 已通过
				background: #E8F5E9;
				color: #4CAF50;
			}
			
			&.tag2 {
				// 已驳回
				background: #FFF4F5;
				color: #CF3546;
			}
			
			&.tag3 {
				// 未完成
				background: #EBF5FF;
				color: #388BFF;
			}
		}
	}
	
	.card-tags {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 12rpx;
		margin-bottom: 16rpx;
		
		.tag-item {
			padding: 8rpx 16rpx;
			// background: #f5f5f5;
			border-radius: 8rpx;
			font-size: 24rpx;
			color: #999999;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			border: 2rpx solid #F5F5F5;
			&.category{
				border-radius: 0rpx 8rpx 8rpx 0rpx;
			    border: 2rpx solid #F3D191;
				background: #FFFAF4;
				color:#5D410F
			}
			&.video-tag {
				background: linear-gradient( 90deg, #FFE9C7 0%, #F3D091 100%);
				border-radius:8rpx 0rpx 0rpx 8rpx;
				border: 2rpx solid #F3D191;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #5D410F;
				display: flex;
				align-items: center;
				.tag-icon {
					margin-right: 4rpx;
				}
			}
			
			&.points-tag {
				border: 1rpx solid #388BFF;
				color: #388BFF;
				background: transparent;
				
			}
		}
	}
	
	.card-dates {
		margin-bottom: 16rpx;
		
		.date-item {
			font-size: 26rpx;
			color: #999;
			margin-bottom: 8rpx;
		}
	}
	
	.card-warning {
		display: flex;
		align-items: center;
		gap: 8rpx;
		padding: 12rpx;
		background: #FFF3E0;
		border-radius: 8rpx;
		margin-bottom: 16rpx;
		font-size: 26rpx;
		color: #FF9800;
		
		.warning-icon {
			font-size: 28rpx;
		}
	}
	
	.card-rejection {
		display: flex;
		align-items: center;
		gap: 8rpx;
		padding: 12rpx;
		background: #FFEBEE;
		border-radius: 8rpx;
		margin-bottom: 16rpx;
		font-size: 26rpx;
		color: #F44336;
		
		.rejection-icon {
			font-size: 28rpx;
		}
	}
	
	.card-footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 16rpx;
		border-top: 1rpx solid #f0f0f0;
		
		.footer-date {
			font-size: 24rpx;
			color: #999;
		}
		
		.footer-actions {
			.action-btn {
				padding: 12rpx 32rpx;
				background: #388BFF;
				border-radius: 34rpx 34rpx 34rpx 34rpx;
				font-size: 28rpx;
				color: #fff;
			}
		}
	}
}

.filter-popup {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 999;
	display: flex;
	align-items: flex-end;
}

.filter-content {
	width: 100%;
	background: #fff;
	border-radius: 24rpx 24rpx 0 0;
	padding: 32rpx;
	
	.filter-header {
		display: flex;
		align-items: center;
		justify-content: center;
		// padding: 32rpx 24rpx;
		position: relative;
		
		.filter-title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
		}
		
		.filter-close-btn {
			position: absolute;
			right: 24rpx;
			top: 50%;
			transform: translateY(-50%);
			font-size: 48rpx;
			color: #999;
			width: 48rpx;
			height: 48rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			line-height: 1;
		}
	}
	
	.filter-group {
		margin-bottom: 32rpx;
		
		.group-label {
			font-size: 28rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 20rpx;
		}
		
		.date-range-inputs {
			display: flex;
			align-items: center;
			gap: 16rpx;
			
			.date-input {
				flex: 1;
				height: 80rpx;
				line-height: 80rpx;
				padding: 0 24rpx;
				background: #f5f5f5;
				border-radius: 8rpx;
				font-size: 28rpx;
				color: #333;
				text-align: center;
				
				&.placeholder {
					color: #999;
				}
			}
			
		.date-separator {
			font-size: 28rpx;
			color: #666;
		}
	}
	
	.filter-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 16rpx;
		
		.filter-tag {
			padding: 14rpx 36rpx;
			background: #F7F8FA;
			border-radius: 70rpx 70rpx 70rpx 70rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			border: 1rpx solid transparent;
			
			&.active {
				background: rgba(56,139,255,0.15);
				color: #388BFF;
				border-color: #388BFF;
			}
		}
	}
}
	
	.filter-actions {
		display: flex;
		gap: 24rpx;
		margin-top: 40rpx;
		padding-top: 24rpx;
		border-top: 1rpx solid #f0f0f0;
		
		.reset-btn,
		.confirm-btn {
			flex: 1;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			border-radius: 200rpx 200rpx 200rpx 200rpx;
			font-size: 30rpx;
		}
		
		.reset-btn {
			background: #fff;
			color: #666;
			border: 1rpx solid #e0e0e0;
		}
		
		.confirm-btn {
			background: #388BFF;
			color: #fff;
		}
	}
}
</style>