rtliveDoctor/pages_task/questionnaire.vue

<template>
	<view class="container">
		<!-- 标签栏 -->
		<view class="tabs-bar">
			<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>
		
		<!-- 调研列表 -->
		<scroll-view class="content" scroll-y>
			<view class="survey-card" v-for="(item, index) in surveyList" :key="index" @click="handleAction(item)">
				<!-- 卡片头部背景 -->
				<view class="card-header-bg" :style="{ backgroundImage: `url(${item.coverImage})` }">
					<view class="banner-content">
						<!-- <view class="banner-title">{{ item.bannerTitle }}</view> -->
						<view class="collection-time">
							征集时间: {{ formatTime(item.periodStartTime) }} 至 {{ formatTime(item.periodEndTime) }}
						</view>
						<!-- <view class="banner-info" v-if="item.title">{{ item.title }}</view> -->
					</view>
				</view>
				
				<!-- 卡片内容 -->
				<view class="card-body">
					
					<view class="description">{{ item.title }}</view>
					<view class="x-bc">
						<view class="progress-section" v-if="item.periodDataDto && shouldShowProgress(item)">
							<view class="progress-bar">
								<view class="progress-fill" :style="{ width: getProgressWidth(item) }"></view>
							</view>
							<view class="progress-text">{{ getProgressText(item) }}</view>
						</view>
						<view class="card-action">
							<view class="action-btn" v-if="currentTab == 'before'" :class="item.timeStatus" @click.stop="handleAction(item)">
								填写问卷
							</view>
							<view class="action-btn" v-else :class="currentTab">
								{{currentTab == 'during'?'进行中':'已结束'}}
							</view>
						</view>
					</view>
					
				</view>
			</view>
			
			<view class="no-more" v-if="!hasMore && surveyList.length > 0">没有更多了~</view>
			<view class="empty-state y-bc" v-if="surveyList.length === 0">
				<image class="w300 h300" src="@/static/image/img_blank_nodata.png" mode=""></image>
				<text>暂无数据</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import { 
	getQuestionnaireList
} from '@/api/questionnaire'
export default {
	data() {
		return {
			statusBarHeight: uni.getSystemInfoSync().statusBarHeight + 'px',
			currentTab: 'before',
			tabs: [
				{ label: '未完成', value: 'before' },
				{ label: '进行中', value: 'during' },
				{ label: '已结束', value: 'after' }
			],
			surveyList: [],
			pageNum: 1,
			pageSize: 10,
			hasMore: true,
			loading: false
		}
	},
	onLoad() {
	},
	onShow() {
		// 从表单页返回时刷新列表
		this.loadData()
	},
	onReachBottom() {
		this.loadMore()
	},
	methods: {
		goBack() {
			uni.navigateBack()
		},
		switchTab(tab) {
			this.currentTab = tab
			this.pageNum = 1
			this.hasMore = true
			this.loadData()
		},
		goToDetail(item) {
			uni.navigateTo({
				url: `/pages_task/activityDetail?id=${item.id}`
			})
		},
		handleAction(item) {
			if (this.currentTab == 'after') {
				uni.showToast({
					icon: 'none',
					title: '活动已结束'
				})
			} else {
				// 跳转到填写问卷或上传病例页面
				uni.navigateTo({
					url: `/pages_task/questionnaireForm?id=${item.id}`
				})
			}
		},
		// 判断是否显示进度条
		shouldShowProgress(item) {
			if (!item.periodDataDto) return false
			const { alreadyPeriodNum, totalPeriodNum } = item.periodDataDto
			return totalPeriodNum != null && totalPeriodNum > 0
		},
		// 计算进度条宽度百分比
		getProgressWidth(item) {
			if (!item.periodDataDto) return '0%'
			const { alreadyPeriodNum, totalPeriodNum } = item.periodDataDto
			if (!totalPeriodNum || totalPeriodNum === 0) return '0%'
			const percentage = Math.min(100, Math.max(0, (alreadyPeriodNum / totalPeriodNum) * 100))
			return percentage.toFixed(2) + '%'
		},
		// 获取进度文本
		getProgressText(item) {
			if (!item.periodDataDto) return '0/0'
			const { alreadyPeriodNum, totalPeriodNum } = item.periodDataDto
			const already = alreadyPeriodNum != null ? alreadyPeriodNum : 0
			const total = totalPeriodNum != null ? totalPeriodNum : 0
			return `${already}/${total}`
		},
		// 格式化时间，去掉秒数
		formatTime(timeStr) {
			if (!timeStr) return '-'
			// 如果时间格式包含秒数（如 "YYYY-MM-DD HH:mm:ss"），则去掉秒数部分
			if (timeStr.length >= 19 && timeStr.indexOf(':') !== -1) {
				// 匹配 "YYYY-MM-DD HH:mm:ss" 格式，去掉最后的 ":ss"
				return timeStr.substring(0, 16)
			}
			return timeStr
		},
		async loadData() {
			try {
				this.pageNum = 1
				this.hasMore = true
				uni.showLoading({ title: '加载中...' })
				const res = await getQuestionnaireList({
					timeStatus: this.currentTab,
					pageNum: 1,
					pageSize: this.pageSize
				})
				uni.hideLoading()
				if (res.code === 200) {
					this.surveyList = res.data.rows || []
					// 判断是否还有更多数据
					if (!res.data.rows || res.data.rows.length < this.pageSize) {
						this.hasMore = false
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
				}
			} catch (e) {
				uni.hideLoading()
				console.error('加载数据失败', e)
			}
		},
		async loadMore() {
			// 如果没有更多数据或正在加载，则不执行
			if (!this.hasMore || this.loading) {
				return
			}
			
			try {
				this.loading = true
				const nextPage = this.pageNum + 1
				const res = await getQuestionnaireList({
					timeStatus: this.currentTab,
					pageNum: nextPage,
					pageSize: this.pageSize
				})
				
				if (res.code === 200) {
					const newData = res.data.rows || []
					if (newData.length > 0) {
						// 追加新数据到列表
						this.surveyList = [...this.surveyList, ...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;
	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;
		}
	}
}

.tabs-bar {
	display: flex;
	background: #fff;
	border-bottom: 1rpx solid #f0f0f0;
	
	.tab-item {
		flex: 1;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #969799;
		position: relative;
		
		&.active {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			font-weight: bold;
			
			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				right: 0;
				width: 80rpx;
				height: 6rpx;
				border-radius: 3rpx 3rpx 3rpx 3rpx;
				background: #388BFF;
			}
		}
	}
}

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

.survey-card {
	background: #fff;
	border-radius: 16rpx;
	margin-bottom: 24rpx;
	overflow: hidden;
	
	.card-header-bg {
		position: relative;
		height: 240rpx;
		background: linear-gradient(135deg, #87CEEB 0%, #98D8C8 100%);
		display: flex;
		    align-items: flex-start;
		    justify-content: flex-end;
		    flex-direction: column;
		padding: 24rpx;
		
		.banner-content {
			width: 100%;
			text-align:left;
			.collection-time {
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				font-size: 26rpx;
				color: #FFFFFF;
			}
			
			
			.banner-info {
				font-size: 24rpx;
				color: #fff;
				margin-bottom: 8rpx;
			}
		}
	}
	
	.card-body {
		padding: 24rpx;
		
		
		
		.description {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			margin-bottom: 30rpx;
		}
		
		.progress-section {
			width: 60%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 16rpx;
			
			.progress-bar {
				flex: 1;
				height: 12rpx;
				background: #f0f0f0;
				border-radius: 4rpx;
				overflow: hidden;
				
				.progress-fill {
					height: 100%;
					background: #388BFF;
					border-radius: 4rpx;
					transition: width 0.3s;
				}
			}
			
			.progress-text {
				font-size: 24rpx;
				color: #388BFF;
				min-width: 60rpx;
			}
		}
		
		.card-action {
			display: flex;
			justify-content: flex-end;
			
			.action-btn {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 12rpx 24rpx;
				background: #388BFF;
				border-radius: 34rpx 34rpx 34rpx 34rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
				&.before {
					background: #388BFF;
				}
				
				&.during {
					background: #EFEFEF;
					color: #999999;
				}
				
				&.after {
					background: #EFEFEF;
					color: #999999;
				}
			}
		}
	}
}

.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;
}
</style>