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="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="collection-time">
							征集时间: {{ item.collectionStartTime }} 至 {{ item.collectionEndTime }}
						</view>
						<view class="banner-info" v-if="item.bannerInfo">{{ item.bannerInfo }}</view>
					</view>
				</view>
				
				<!-- 卡片内容 -->
				<view class="card-body">
					
					<view class="description">{{ item.description }}</view>
					<view class="x-bc">
						<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>
			
			<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: 'https://hos-1309931967.cos.ap-chongqing.myqcloud.com/fs/20240516/b091048293f142608f99eaf1b0b1510a.png',
						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: 'https://hos-1309931967.cos.ap-chongqing.myqcloud.com/fs/20240516/b091048293f142608f99eaf1b0b1510a.png',
						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: 'https://hos-1309931967.cos.ap-chongqing.myqcloud.com/fs/20240516/b091048293f142608f99eaf1b0b1510a.png',
						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: 'https://hos-1309931967.cos.ap-chongqing.myqcloud.com/fs/20240516/b091048293f142608f99eaf1b0b1510a.png',
						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: 'https://hos-1309931967.cos.ap-chongqing.myqcloud.com/fs/20240516/b091048293f142608f99eaf1b0b1510a.png',
						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: 'https://hos-1309931967.cos.ap-chongqing.myqcloud.com/fs/20240516/b091048293f142608f99eaf1b0b1510a.png',
						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-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;
				&.fill-questionnaire {
					background: #388BFF;
				}
				
				&.not-started {
					background: #EFEFEF;
					color: #999999;
				}
				
				&.ended {
					background: #EFEFEF;
					color: #999999;
				}
			}
		}
	}
}

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