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="questionnaire-card" v-for="(item, index) in questionnaireList" :key="index">
				<!-- 左侧缩略图 -->
				<view class="card-thumbnail">
					<image class="thumbnail-img" :src="item.thumbnail" mode="aspectFill"></image>
				</view>
				
				<!-- 右侧内容 -->
				<view class="card-content">
					<view class="card-title">{{ item.title }}</view>
					<view class="card-date">{{ item.dateRange }}</view>
					<view class="card-status-section">
						<view class="status-badge" :class="item.statusClass">{{ item.statusText }}</view>
						<view class="action-btn" v-if="currentTab === 'incomplete'" @click.stop="goToForm(item)">
							填写问卷
						</view>
					</view>
				</view>
			</view>
			
			<view class="no-more">没有更多了~</view>
		</scroll-view>
	</view>
</template>

<script>
import { getQuestionnaireList } from '@/api-js/questionnaire'
export default {
	data() {
		return {
			statusBarHeight: uni.getSystemInfoSync().statusBarHeight + 'px',
			currentTab: 'incomplete',
			tabs: [
				{ label: '未完成', value: 'incomplete' },
				{ label: '未开始', value: 'notStarted' },
				{ label: '已结束', value: 'ended' }
			],
			questionnaireList: []
		}
	},
	onLoad() {
		this.loadData()
	},
	methods: {
		goBack() {
			uni.navigateBack()
		},
		switchTab(tab) {
			this.currentTab = tab
			this.loadData()
		},
		goToForm(item) {
			uni.navigateTo({
				url: `/pages_task/questionnaireForm?id=${item.id}&title=${encodeURIComponent(item.title)}`
			})
		},
		async loadData() {
			try {
				uni.showLoading({ title: '加载中...' })
				const res = await getQuestionnaireList({
					status: this.currentTab,
					page: 1,
					pageSize: 20
				})
				uni.hideLoading()
				if (res.code === 200 && res.data) {
					this.questionnaireList = res.data.list || this.getDefaultData()
				} else {
					this.questionnaireList = this.getDefaultData()
				}
			} catch (e) {
				uni.hideLoading()
				console.error('加载数据失败', e)
				this.questionnaireList = this.getDefaultData()
			}
		},
		getDefaultData() {
			const defaultThumbnail = 'https://hos-1309931967.cos.ap-chongqing.myqcloud.com/fs/20240516/b091048293f142608f99eaf1b0b1510a.png'
			
			if (this.currentTab === 'notStarted') {
				return [
					{
						id: 1,
						thumbnail: defaultThumbnail,
						title: '康复医学调研',
						dateRange: '2024-09-15~2025-09-30',
						status: 'notStarted',
						statusText: '待开始',
						statusClass: 'status-pending'
					},
					{
						id: 2,
						thumbnail: defaultThumbnail,
						title: '康复医学调研',
						dateRange: '2024-09-15~2025-09-30',
						status: 'notStarted',
						statusText: '待开始',
						statusClass: 'status-pending'
					},
					{
						id: 3,
						thumbnail: defaultThumbnail,
						title: '糖尿病并发症调研',
						dateRange: '2024-09-15~2025-09-30',
						status: 'notStarted',
						statusText: '待开始',
						statusClass: 'status-pending'
					}
				]
			} else if (this.currentTab === 'incomplete') {
				return [
					{
						id: 4,
						thumbnail: defaultThumbnail,
						title: '康复医学调研',
						dateRange: '2024-09-15~2025-09-30',
						status: 'incomplete',
						statusText: '待完成',
						statusClass: 'status-incomplete'
					},
					{
						id: 5,
						thumbnail: defaultThumbnail,
						title: '康复医学调研',
						dateRange: '2024-09-15~2025-09-30',
						status: 'incomplete',
						statusText: '待完成',
						statusClass: 'status-incomplete'
					},
					{
						id: 6,
						thumbnail: defaultThumbnail,
						title: '糖尿病并发症调研',
						dateRange: '2024-09-15~2025-09-30',
						status: 'incomplete',
						statusText: '待完成',
						statusClass: 'status-incomplete'
					}
				]
			} else {
				return [
					{
						id: 7,
						thumbnail: defaultThumbnail,
						title: '康复医学调研',
						dateRange: '2024-09-15~2025-09-30',
						status: 'ended',
						statusText: '已结束',
						statusClass: 'status-ended'
					},
					{
						id: 8,
						thumbnail: defaultThumbnail,
						title: '康复医学调研',
						dateRange: '2024-09-15~2025-09-30',
						status: 'ended',
						statusText: '已结束',
						statusClass: 'status-ended'
					},
					{
						id: 9,
						thumbnail: defaultThumbnail,
						title: '糖尿病并发症调研',
						dateRange: '2024-09-15~2025-09-30',
						status: 'ended',
						statusText: '已结束',
						statusClass: 'status-ended'
					}
				]
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background: #f5f5f5;
	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;
				
				&.status-pending {
					background: #FFF7E6;
					color: #FF9500;
				}
				
				&.status-incomplete {
					background: #E6F4FF;
					color: #388BFF;
				}
				
				&.status-ended {
					background: #F5F5F5;
					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;
}
</style>