rtliveCompany/pages_task/medicationSurvey.vue

<template>
	<view class="container">
		<!-- 状态栏占位 -->
		<view class="status-bar" :style="{height: statusBarHeight}"></view>
		
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="back-btn" @click="goBack">
				<image src="@/static/image/back.png" mode="aspectFill"></image>
			</view>
			<view class="title">用药调研</view>
			<view class="header-right">
				<text class="more-icon">⋯</text>
				<text class="more-icon">○</text>
			</view>
		</view>
		
		<!-- 标签栏 -->
		<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="goToDetail(item)">
				<!-- 卡片头部背景 -->
				<view class="card-header-bg" :style="{ backgroundImage: `url(${item.bannerImage})` }">
					<view class="banner-content">
						<view class="banner-title">{{ item.bannerTitle }}</view>
						<view class="banner-subtitle" v-if="item.bannerSubtitle">{{ item.bannerSubtitle }}</view>
						<view class="banner-info" v-if="item.bannerInfo">{{ item.bannerInfo }}</view>
					</view>
				</view>
				
				<!-- 卡片内容 -->
				<view class="card-body">
					<view class="collection-time">
						征集时间: {{ item.collectionStartTime }} 至 {{ item.collectionEndTime }}
					</view>
					<view class="description">{{ item.description }}</view>
					<view class="progress-section">
						<view class="progress-bar">
							<view class="progress-fill" :style="{ width: item.progressPercent + '%' }"></view>
						</view>
						<view class="progress-text">{{ item.completedCount }}/{{ item.totalCount }}</view>
					</view>
					<view class="card-action">
						<view class="action-btn" :class="item.buttonClass" @click.stop="handleAction(item)">
							{{ item.buttonText }}
						</view>
					</view>
				</view>
			</view>
			
			<view class="no-more">没有更多了~</view>
		</scroll-view>
	</view>
</template>

<script>
import { getMedicationSurveyList } from '@/api-js/medicationSurvey'
export default {
	data() {
		return {
			statusBarHeight: uni.getSystemInfoSync().statusBarHeight + 'px',
			currentTab: 'incomplete',
			tabs: [
				{ label: '未完成', value: 'incomplete' },
				{ label: '未开始', value: 'notStarted' },
				{ label: '已结束', value: 'ended' }
			],
			surveyList: []
		}
	},
	onLoad() {
		this.loadData()
	},
	onReachBottom() {
		this.loadMore()
	},
	methods: {
		goBack() {
			uni.navigateBack()
		},
		switchTab(tab) {
			this.currentTab = tab
			this.loadData()
		},
		goToDetail(item) {
			uni.navigateTo({
				url: `/pages_task/activityDetail?id=${item.id}`
			})
		},
		handleAction(item) {
			if (item.status === 'notStarted') {
				uni.showToast({
					icon: 'none',
					title: '活动未开始'
				})
			} else if (item.status === 'ended') {
				uni.showToast({
					icon: 'none',
					title: '活动已结束'
				})
			} else {
				// 跳转到填写问卷或上传病例页面
				uni.navigateTo({
					url: `/pages_task/caseCollection?activityId=${item.id}`
				})
			}
		},
		async loadData() {
			try {
				uni.showLoading({ title: '加载中...' })
				const res = await getMedicationSurveyList({
					status: this.currentTab,
					page: 1,
					pageSize: 20
				})
				uni.hideLoading()
				if (res.code === 200 && res.data) {
					this.surveyList = res.data.list || this.getDefaultData()
				} else {
					this.surveyList = this.getDefaultData()
				}
			} catch (e) {
				uni.hideLoading()
				console.error('加载数据失败', e)
				this.surveyList = this.getDefaultData()
			}
		},
		async loadMore() {
			// 加载更多数据
		},
		getDefaultData() {
			if (this.currentTab === 'notStarted') {
				return [
					{
						id: 1,
						bannerImage: '',
						bannerTitle: '正规医院体检',
						bannerSubtitle: '守护您的健康',
						collectionStartTime: '2025-05-29 00:00',
						collectionEndTime: '2025-05-29 00:00',
						description: '全国14家医院抗菌药物合理用药调研',
						completedCount: 0,
						totalCount: 3,
						progressPercent: 0,
						status: 'notStarted',
						buttonText: '未开始',
						buttonClass: 'not-started'
					},
					{
						id: 2,
						bannerImage: '',
						bannerTitle: '2025广东省医师协会眼科医师分会',
						bannerSubtitle: '眼外伤与眼眶病学术会议',
						bannerInfo: '·暨眼外伤诊疗新进展学习班·',
						collectionStartTime: '2025-05-29 00:00',
						collectionEndTime: '2025-05-29 00:00',
						description: '全国14家医院抗菌药物合理用药调研',
						completedCount: 0,
						totalCount: 3,
						progressPercent: 0,
						status: 'notStarted',
						buttonText: '未开始',
						buttonClass: 'not-started'
					}
				]
			} else if (this.currentTab === 'incomplete') {
				return [
					{
						id: 3,
						bannerImage: '',
						bannerTitle: '正规医院体检',
						bannerSubtitle: '守护您的健康',
						collectionStartTime: '2025-05-29 00:00',
						collectionEndTime: '2025-05-29 00:00',
						description: '全国14家医院抗菌药物合理用药调研',
						completedCount: 0,
						totalCount: 3,
						progressPercent: 0,
						status: 'incomplete',
						buttonText: '填写问卷',
						buttonClass: 'fill-questionnaire'
					},
					{
						id: 4,
						bannerImage: '',
						bannerTitle: '2025广东省医师协会眼科医师分会',
						bannerSubtitle: '眼外伤与眼眶病学术会议',
						bannerInfo: '·暨眼外伤诊疗新进展学习班·',
						collectionStartTime: '2025-05-29 00:00',
						collectionEndTime: '2025-05-29 00:00',
						description: '全国14家医院抗菌药物合理用药调研',
						completedCount: 1,
						totalCount: 3,
						progressPercent: 33,
						status: 'incomplete',
						buttonText: '填写问卷',
						buttonClass: 'fill-questionnaire'
					}
				]
			} else {
				return [
					{
						id: 5,
						bannerImage: '',
						bannerTitle: '正规医院体检',
						bannerSubtitle: '守护您的健康',
						collectionStartTime: '2025-05-29 00:00',
						collectionEndTime: '2025-05-29 00:00',
						description: '全国14家医院抗菌药物合理用药调研',
						completedCount: 0,
						totalCount: 3,
						progressPercent: 0,
						status: 'ended',
						buttonText: '活动已结束',
						buttonClass: 'ended'
					},
					{
						id: 6,
						bannerImage: '',
						bannerTitle: '2025广东省医师协会眼科医师分会',
						bannerSubtitle: '眼外伤与眼眶病学术会议',
						bannerInfo: '·暨眼外伤诊疗新进展学习班·',
						collectionStartTime: '2025-05-29 00:00',
						collectionEndTime: '2025-05-29 00:00',
						description: '全国14家医院抗菌药物合理用药调研',
						completedCount: 0,
						totalCount: 3,
						progressPercent: 0,
						status: 'ended',
						buttonText: '活动已结束',
						buttonClass: 'ended'
					}
				]
			}
		}
	}
}
</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;
		}
	}
}

.tabs-bar {
	display: flex;
	background: #fff;
	border-bottom: 1rpx solid #f0f0f0;
	
	.tab-item {
		flex: 1;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		font-size: 28rpx;
		color: #666;
		position: relative;
		
		&.active {
			color: #388BFF;
			font-weight: bold;
			
			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				height: 4rpx;
				background: #388BFF;
			}
		}
	}
}

.content {
	flex: 1;
	padding: 24rpx;
}

.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: center;
		justify-content: center;
		padding: 24rpx;
		
		.banner-content {
			width: 100%;
			text-align: center;
			
			.banner-title {
				font-size: 36rpx;
				font-weight: bold;
				color: #fff;
				margin-bottom: 8rpx;
			}
			
			.banner-subtitle {
				font-size: 32rpx;
				font-weight: bold;
				color: #fff;
				margin-bottom: 8rpx;
			}
			
			.banner-info {
				font-size: 24rpx;
				color: #fff;
				margin-bottom: 8rpx;
			}
		}
	}
	
	.card-body {
		padding: 24rpx;
		
		.collection-time {
			font-size: 24rpx;
			color: #999;
			margin-bottom: 16rpx;
		}
		
		.description {
			font-size: 28rpx;
			color: #333;
			margin-bottom: 16rpx;
		}
		
		.progress-section {
			display: flex;
			align-items: center;
			gap: 16rpx;
			margin-bottom: 16rpx;
			
			.progress-bar {
				flex: 1;
				height: 8rpx;
				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 {
				padding: 12rpx 32rpx;
				border-radius: 8rpx;
				font-size: 26rpx;
				color: #fff;
				
				&.fill-questionnaire {
					background: #388BFF;
				}
				
				&.not-started {
					background: #ccc;
				}
				
				&.ended {
					background: #999;
				}
			}
		}
	}
}

.no-more {
	text-align: center;
	padding: 48rpx 0;
	font-size: 24rpx;
	color: #999;
}
</style>