rtliveDoctor/pages_task/medicationSurvey.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="questionnaire-card" v-for="(item, index) in questionnaireList" :key="index">
				<!-- 左侧缩略图 -->
				<view class="card-thumbnail">
					<image class="thumbnail-img" :src="item.coverImage" mode="aspectFill"></image>
				</view>
				
				<!-- 右侧内容 -->
				<view class="card-content">
					<view class="card-title">{{ item.title }}</view>
					<view class="card-date">{{ item.startTime+'-'+ item.endTime}}</view>
					<view class="card-status-section">
						<view class="status-badge" :class="item.timeStatus">{{ item.timeStatus=='before'?'未完成':item.timeStatus=='during'?'进行中':'已结束'}}</view>
						<view class="action-btn" v-if="currentTab == 'before'" @click="goToForm(item)">
							填写问卷
						</view>
					</view>
				</view>
			</view>
			<view class="no-more" v-if="!hasMore && questionnaireList.length > 0">没有更多了~</view>
			<view class="empty-state y-bc" v-if="questionnaireList.length === 0">
				<image class="w300 h300" src="@/static/image/img_blank_nodata.png" mode=""></image>
				<text>暂无数据</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import { getMedicationSurveyList } from '@/api/medicationSurvey'
export default {
	data() {
		return {
			statusBarHeight: uni.getSystemInfoSync().statusBarHeight + 'px',
			currentTab: 'before',
			tabs: [
				{ label: '未完成', value: 'before' },
				{ label: '进行中', value: 'during' },
				{ label: '已结束', value: 'after' }
			],
			questionnaireList: [],
			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()
		},
		goToForm(item) {
			uni.navigateTo({
				url: `/pages_task/caseCollection?id=${item.id}&title=${encodeURIComponent(item.title)}`
			})
		},
		async loadData() {
			try {
				this.pageNum = 1
				this.hasMore = true
				uni.showLoading({ title: '加载中...' })
				const res = await getMedicationSurveyList({
					timeStatus: this.currentTab,
					pageNum: 1,
					pageSize: this.pageSize
				})
				uni.hideLoading()
				if (res.code === 200) {
					this.questionnaireList = res.data.rows || []
					// 判断是否还有更多数据
					if (!res.data.rows || res.data.rows.length < this.pageSize) {
						this.hasMore = false
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
					this.hasMore = false
				}
			} catch (e) {
				uni.hideLoading()
				console.error('加载数据失败', e)
				this.hasMore = false
			}
		},
		async loadMore() {
			if (!this.hasMore || this.loading) return
			
			try {
				this.loading = true
				const nextPage = this.pageNum + 1
				const res = await getMedicationSurveyList({
					timeStatus: this.currentTab,
					pageNum: nextPage,
					pageSize: this.pageSize
				})
				
				if (res.code === 200) {
					const newData = res.data.rows || []
					if (newData.length > 0) {
						// 追加新数据到列表
						this.questionnaireList = [...this.questionnaireList, ...newData]
						this.pageNum = nextPage
						// 如果返回的数据量小于 pageSize，说明没有更多数据了
						if (newData.length < this.pageSize) {
							this.hasMore = false
						}
					} else {
						// 没有新数据，说明已经加载完所有数据
						this.hasMore = false
					}
				} else {
					this.hasMore = false
				}
			} catch (e) {
				console.error('加载更多数据失败', e)
				this.hasMore = false
			} finally {
				this.loading = false
			}
		}
	}
}
</script>

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

.navbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 24rpx;
	background: #fff;
	border-bottom: 1rpx solid #f0f0f0;
	
	.nav-left {
		width: 60rpx;
		
		.back-icon {
			font-size: 36rpx;
			color: #333;
			font-weight: bold;
		}
	}
	
	.nav-title {
		flex: 1;
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}
	
	.nav-right {
		display: flex;
		align-items: center;
		gap: 24rpx;
		width: 120rpx;
		justify-content: flex-end;
		
		.more-icon {
			font-size: 32rpx;
			color: #333;
		}
		
		.target-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: 32rpx;
			color: #333333;
			
			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				width: 80rpx;
				height: 6rpx;
				border-radius: 3rpx;
				background: #388BFF;
			}
		}
	}
}

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

.questionnaire-card {
	display: flex;
	background: #fff;
	border-radius: 16rpx;
	margin-bottom: 24rpx;
	padding: 24rpx;
	
	.card-thumbnail {
		width: 320rpx;
		height: 180rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		overflow: hidden;
		margin-right: 24rpx;
		flex-shrink: 0;
		
		.thumbnail-img {
			width: 100%;
			height: 100%;
		}
	}
	
	.card-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		
		.card-title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			margin-bottom: 16rpx;
		}
		
		.card-date {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			margin-bottom: 16rpx;
		}
		
		.card-status-section {
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			.status-badge {
				padding: 8rpx 16rpx;
				border-radius: 8rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				&.before {
					background: #FFF7E6;
					color: #FF9500;
				}
				
				&.during {
					background: #E6F4FF;
					color: #388BFF;
				}
				
				&.after {
					background: #F6F6F6;
					color: #999999;
				}
			}
			
			.action-btn {
				padding: 12rpx 32rpx;
				background: #388BFF;
				border-radius: 34rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
			}
		}
	}
}

.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>