rtliveDoctor/pages_echarts/statistics.vue

<template>
	<view class="container">
		<!-- 日期范围和筛选 -->
		<view class="date-filter-bar mb16">
			<view class="date-range" @click="showDatePicker = true">
				<image class="w32 h32" src="@/static/image/icon_time.png" mode=""></image>
				<text class="date-text">{{ dateRangeText }}</text>
				<text class="arrow-down">▼</text>
			</view>
			<view class="filter-btn" @click="showFilter = true">
				<image class="w32 h32" src="@/static/image/icon_select.png" mode=""></image>
				<text>筛选</text>
			</view>
		</view>
		
		<!-- 内容区域 -->
		<scroll-view class="content" scroll-y>
			<!-- 数据汇总 -->
			<view class="summary-section x-bc">
				<view class="summary-header">
					<view class="summary-indicator"></view>
					<text class="summary-title">数据汇总</text>
				</view>
				<view class="summary-stats">
					<view class="stat-item">
						<text class="stat-label">任务数</text>
						<text class="stat-value">{{ summaryData.taskCount }}</text>
					</view>
					<view class="stat-item">
						<text class="stat-label">总积分</text>
						<text class="stat-value">{{ summaryData.totalPoints }}</text>
					</view>
				</view>
			</view>
			
			<!-- 数据表格 -->
			<view class="table-section">
				<view class="table-header">
					<view class="table-col" style="width: 20%;">任务类型</view>
					<view class="table-col" style="width: 15%;">积分</view>
					<view class="table-col" style="width: 20%;">申请人员</view>
					<view class="table-col" style="width: 20%;">任务状态</view>
					<view class="table-col" style="width: 25%;">接收时间</view>
				</view>
				<view class="table-body">
					<view class="table-row" v-for="(item, index) in tableData" :key="index">
						<view class="table-col" style="width: 20%;">{{ item.taskType }}</view>
						<view class="table-col" style="width: 15%;">{{ item.points }}</view>
						<view class="table-col" style="width: 20%;">{{ item.applicant }}</view>
						<view class="table-col" style="width: 20%;">
							<text class="status-tag" :class="item.status">{{ item.statusText }}</text>
						</view>
						<view class="table-col" style="width: 25%;">{{ item.receiveTime }}</view>
					</view>
				</view>
			</view>
			
			<!-- 底部提示 -->
			<view class="no-more">没有更多了~</view>
		</scroll-view>
		
		<!-- 日期选择弹窗 -->
		<view class="date-picker-popup" v-if="showDatePicker" @click="showDatePicker = false">
			<view class="date-picker-content" @click.stop>
				<view class="picker-header">
					<view class="picker-cancel" @click="showDatePicker = false">取消</view>
					<view class="picker-title">选择日期范围</view>
					<view class="picker-confirm" @click="confirmDateRange">确定</view>
				</view>
				<view class="picker-body">
					<view class="date-item">
						<text class="date-label">开始日期</text>
						<picker mode="date" :value="tempDateRange.startDate" @change="onStartDateChange">
							<view class="date-value">{{ tempDateRange.startDate || '请选择' }}</view>
						</picker>
					</view>
					<view class="date-item">
						<text class="date-label">结束日期</text>
						<picker mode="date" :value="tempDateRange.endDate" @change="onEndDateChange">
							<view class="date-value">{{ tempDateRange.endDate || '请选择' }}</view>
						</picker>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 筛选弹窗 -->
		<view class="filter-popup" v-if="showFilter" @click="closeFilter">
			<view class="filter-content" @click.stop>
				<view class="filter-header">
					<view class="filter-title">筛选</view>
					<view class="filter-close-btn" @click="closeFilter">
						<image class="w44 h44" src="@/static/image/icon_cross.png" mode=""></image>
					</view>
				</view>
				
				<!-- 任务类型筛选 -->
				<view class="filter-group">
					<view class="group-label">任务类型</view>
					<view class="filter-tags">
						<view 
							class="filter-tag" 
							:class="{ active: tempSelectedTaskType === item.value }"
							v-for="(item, index) in taskTypeOptions" 
							:key="index"
							@click="selectTaskType(item.value)">
							{{ item.label }}
						</view>
					</view>
				</view>
				
				<!-- 任务状态筛选 -->
				<view class="filter-group">
					<view class="group-label">任务状态</view>
					<view class="filter-tags">
						<view 
							class="filter-tag" 
							:class="{ active: tempSelectedTaskStatus === item.value }"
							v-for="(item, index) in taskStatusOptions" 
							:key="index"
							@click="selectTaskStatus(item.value)">
							{{ item.label }}
						</view>
					</view>
				</view>
				
				<!-- 操作按钮 -->
				<view class="filter-actions">
					<view class="reset-btn" @click="resetFilters">重置</view>
					<view class="confirm-btn" @click="confirmFilters">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
// import { getStatisticsData } from '@/api-js/statistics'
export default {
	data() {
		return {
			statusBarHeight: uni.getSystemInfoSync().statusBarHeight + 'px',
			showDatePicker: false,
			showFilter: false,
			dateRange: {
				startDate: '2025-12-01',
				endDate: '2025-12-25'
			},
			tempDateRange: {
				startDate: '2025-12-01',
				endDate: '2025-12-25'
			},
			selectedTaskType: 'academicLecture', // 默认选中学术讲座
			selectedTaskStatus: '',
			taskTypeOptions: [
				{ label: '医生坐诊', value: 'doctorConsultation' },
				{ label: '科普讲座', value: 'popularScienceLecture' },
				{ label: '学术讲座', value: 'academicLecture' },
				{ label: '科普文章', value: 'popularScienceArticle' },
				{ label: '科普短视频', value: 'popularScienceShortVideo' },
				{ label: '科普长视频', value: 'popularScienceLongVideo' },
				{ label: '空中课堂', value: 'airClassroom' },
				{ label: '用药调研', value: 'medicationSurvey' },
				{ label: '问卷调研', value: 'questionnaireSurvey' },
				{ label: '社群咨询', value: 'communityConsultation' },
				{ label: '健康问答', value: 'healthQA' }
			],
			taskStatusOptions: [
				{ label: '未完成', value: 'uncompleted' },
				{ label: '待审核', value: 'pendingReview' },
				{ label: '已驳回', value: 'rejected' },
				{ label: '已完成', value: 'completed' },
				{ label: '已完结', value: 'finished' }
			],
			tempSelectedTaskType: 'academicLecture',
			tempSelectedTaskStatus: '',
			summaryData: {
				taskCount: 6,
				totalPoints: 300
			},
			tableData: [
				{ taskType: '用药调研', points: '20', applicant: '王*明', status: 'uncompleted', statusText: '未完成', receiveTime: '2025-09-25' },
				{ taskType: '科普短视频', points: '20', applicant: '王*明', status: 'uncompleted', statusText: '未完成', receiveTime: '2025-09-25' },
				{ taskType: '用药调研', points: '100', applicant: '王*明', status: 'uncompleted', statusText: '未完成', receiveTime: '2025-09-25' },
				{ taskType: '科普短视频', points: '20', applicant: '王*明', status: 'uncompleted', statusText: '未完成', receiveTime: '2025-09-25' },
				{ taskType: '用药调研', points: '20', applicant: '王*明', status: 'uncompleted', statusText: '未完成', receiveTime: '2025-09-25' },
				{ taskType: '科普短视频', points: '20', applicant: '王*明', status: 'uncompleted', statusText: '未完成', receiveTime: '2025-09-25' },
				{ taskType: '用药调研', points: '20', applicant: '王*明', status: 'uncompleted', statusText: '未完成', receiveTime: '2025-09-25' },
				{ taskType: '科普短视频', points: '20', applicant: '王*明', status: 'uncompleted', statusText: '未完成', receiveTime: '2025-09-25' },
				{ taskType: '用药调研', points: '20', applicant: '王*明', status: 'uncompleted', statusText: '未完成', receiveTime: '2025-09-25' },
				{ taskType: '科普短视频', points: '20', applicant: '王*明', status: 'uncompleted', statusText: '未完成', receiveTime: '2025-09-25' }
			]
		}
	},
	computed: {
		dateRangeText() {
			return `${this.dateRange.startDate} 至 ${this.dateRange.endDate}`
		}
	},
	watch: {
		showFilter(newVal) {
			if (newVal) {
				// 打开弹窗时，同步临时选择值
				this.tempSelectedTaskType = this.selectedTaskType
				this.tempSelectedTaskStatus = this.selectedTaskStatus
			}
		}
	},
	onLoad() {
		this.tempSelectedTaskType = this.selectedTaskType
		this.tempSelectedTaskStatus = this.selectedTaskStatus
		//this.loadData()
	},
	onReachBottom() {
		this.loadMore()
	},
	methods: {
		goBack() {
			uni.navigateBack()
		},
		onStartDateChange(e) {
			this.tempDateRange.startDate = e.detail.value
		},
		onEndDateChange(e) {
			this.tempDateRange.endDate = e.detail.value
		},
		confirmDateRange() {
			if (!this.tempDateRange.startDate || !this.tempDateRange.endDate) {
				uni.showToast({ icon: 'none', title: '请选择完整的日期范围' })
				return
			}
			if (new Date(this.tempDateRange.startDate) > new Date(this.tempDateRange.endDate)) {
				uni.showToast({ icon: 'none', title: '开始日期不能大于结束日期' })
				return
			}
			this.dateRange = { ...this.tempDateRange }
			this.showDatePicker = false
			this.loadData()
		},
		closeFilter() {
			// 关闭弹窗时，恢复临时选择值为当前选择值
			this.tempSelectedTaskType = this.selectedTaskType
			this.tempSelectedTaskStatus = this.selectedTaskStatus
			this.showFilter = false
		},
		selectTaskType(value) {
			// 如果点击的是已选中的，则取消选择
			if (this.tempSelectedTaskType === value) {
				this.tempSelectedTaskType = ''
			} else {
				this.tempSelectedTaskType = value
			}
		},
		selectTaskStatus(value) {
			// 如果点击的是已选中的，则取消选择
			if (this.tempSelectedTaskStatus === value) {
				this.tempSelectedTaskStatus = ''
			} else {
				this.tempSelectedTaskStatus = value
			}
		},
		resetFilters() {
			this.tempSelectedTaskType = ''
			this.tempSelectedTaskStatus = ''
		},
		confirmFilters() {
			this.selectedTaskType = this.tempSelectedTaskType
			this.selectedTaskStatus = this.tempSelectedTaskStatus
			this.showFilter = false
			//this.loadData()
		},
		async loadData() {
			try {
				uni.showLoading({ title: '加载中...' })
				const res = await getStatisticsData({
					startDate: this.dateRange.startDate,
					endDate: this.dateRange.endDate,
					taskType: this.selectedTaskType,
					taskStatus: this.selectedTaskStatus
				})
				uni.hideLoading()
				if (res.code === 200 && res.data) {
					this.summaryData = {
						taskCount: res.data.taskCount || 6,
						totalPoints: res.data.totalPoints || 300
					}
					this.tableData = res.data.list || this.getDefaultData()
				} else {
					this.tableData = this.getDefaultData()
				}
			} catch (e) {
				uni.hideLoading()
				console.error('加载数据失败', e)
				this.tableData = this.getDefaultData()
			}
		},
		async loadMore() {
			// 加载更多数据
		},
		getDefaultData() {
			// 默认数据，根据图片中的示例
			return [
				{ taskType: '用药调研', points: '20', applicant: '王*明', status: 'uncompleted', statusText: '未完成', receiveTime: '2025-09-25' },
				{ taskType: '科普短视频', points: '20', applicant: '王*明', status: 'uncompleted', statusText: '未完成', receiveTime: '2025-09-25' },
				{ taskType: '用药调研', points: '100', applicant: '王*明', status: 'uncompleted', statusText: '未完成', receiveTime: '2025-09-25' },
				{ taskType: '科普短视频', points: '20', applicant: '王*明', status: 'uncompleted', statusText: '未完成', receiveTime: '2025-09-25' },
				{ taskType: '用药调研', points: '20', applicant: '王*明', status: 'uncompleted', statusText: '未完成', receiveTime: '2025-09-25' },
				{ taskType: '科普短视频', points: '20', applicant: '王*明', status: 'uncompleted', statusText: '未完成', receiveTime: '2025-09-25' },
				{ taskType: '用药调研', points: '20', applicant: '王*明', status: 'uncompleted', statusText: '未完成', receiveTime: '2025-09-25' },
				{ taskType: '科普短视频', points: '20', applicant: '王*明', status: 'uncompleted', statusText: '未完成', receiveTime: '2025-09-25' },
				{ taskType: '用药调研', points: '20', applicant: '王*明', status: 'uncompleted', statusText: '未完成', receiveTime: '2025-09-25' },
				{ taskType: '科普短视频', points: '20', applicant: '王*明', status: 'uncompleted', statusText: '未完成', receiveTime: '2025-09-25' }
			]
		}
	}
}
</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;
		}
	}
}

.date-filter-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24rpx;
	background: #fff;
	// border-bottom: 1rpx solid #f0f0f0;
	
	.date-range {
		display: flex;
		align-items: center;
		gap: 8rpx;
		
		.clock-icon {
			font-size: 28rpx;
		}
		
		.date-text {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
		}
		
		.arrow-down {
			font-size: 20rpx;
			color: #333333;
		}
	}
	
	.filter-btn {
		display: flex;
		align-items: center;
		gap: 8rpx;
		font-size: 28rpx;
		color: #333;
		
		.filter-icon {
			font-size: 24rpx;
		}
	}
}

.content {
	flex: 1;
	background: #fff;
}

.summary-section {
	background: #fff;
	padding:32rpx 24rpx;
	// margin-bottom: 32rpx;
	
	.summary-header {
		display: flex;
		align-items: center;
		// margin-bottom: 24rpx;
		
		.summary-indicator {
			width: 6rpx;
			height: 32rpx;
			background: #388BFF;
			border-radius: 3rpx;
			margin-right: 16rpx;
		}
		
		.summary-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}
	}
	
	.summary-stats {
		display: flex;
		gap: 48rpx;
		
		.stat-item {
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: 16rpx;
			
			.stat-label {
				font-size: 24rpx;
				color: #999;
			}
			
			.stat-value {
				font-size: 36rpx;
				font-weight: bold;
				color: #388BFF;
			}
		}
	}
}

.table-section {
	background: #fff;
	padding: 0 24rpx;
	.table-header {
		display: flex;
		background: #E3EFFF;
		padding: 24rpx 16rpx;
		
		.table-col {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #333333;
			line-height: 40rpx;
			text-align: left;
		}
	}
	
	.table-body {
		.table-row {
			display: flex;
			padding: 24rpx 16rpx;
			
			&:nth-child(2n) {
				background: #F7F8FA;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
			}
			
			.table-col {
				font-size: 26rpx;
				color: #333;
				display: flex;
				align-items: center;
				text-align: left;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				line-height: 40rpx;
				// .status-tag {
				// 	padding: 4rpx 12rpx;
				// 	border-radius: 4rpx;
				// 	font-size: 24rpx;
					
				// 	&.uncompleted {
				// 		background: #FFF3E0;
				// 		color: #FF9800;
				// 	}
					
				// 	&.completed {
				// 		background: #E8F5E9;
				// 		color: #4CAF50;
				// 	}
				// }
			}
		}
	}
}

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

.date-picker-popup {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 999;
	display: flex;
	align-items: flex-end;
}

.date-picker-content {
	width: 100%;
	background: #fff;
	border-radius: 24rpx 24rpx 0 0;
	
	.picker-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx;
		border-bottom: 1rpx solid #f0f0f0;
		
		.picker-cancel {
			font-size: 30rpx;
			color: #666;
		}
		
		.picker-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}
		
		.picker-confirm {
			font-size: 30rpx;
			color: #388BFF;
		}
	}
	
	.picker-body {
		padding: 24rpx;
		
		.date-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 24rpx 0;
			border-bottom: 1rpx solid #f0f0f0;
			
			&:last-child {
				border-bottom: none;
			}
			
			.date-label {
				font-size: 30rpx;
				color: #333;
			}
			
			.date-value {
				font-size: 30rpx;
				color: #388BFF;
			}
		}
	}
}

.filter-popup {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 999;
	display: flex;
	align-items: flex-end;
}

.filter-content {
	width: 100%;
	background: #fff;
	border-radius: 24rpx 24rpx 0 0;
	padding: 24rpx 32rpx;
	max-height: 80vh;
	overflow-y: auto;
	
	.filter-header {
		display: flex;
		align-items: center;
		justify-content: center;
		// padding: 32rpx 24rpx;
		position: relative;
		height: 80rpx;
		.filter-title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
		}
		
		.filter-close-btn {
			position: absolute;
			right:0;
			top: 50%;
			transform: translateY(-50%);
			font-size: 48rpx;
			color: #999;
			width: 48rpx;
			height: 48rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			line-height: 1;
		}
	}
	
	.filter-group {
		margin-bottom: 40rpx;
		
		&:last-of-type {
			margin-bottom: 0;
		}
		
		.group-label {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			margin-bottom: 24rpx;
		}
		
		.filter-tags {
			display: flex;
			flex-wrap: wrap;
			gap: 24rpx;
			
			.filter-tag {
				width: calc((100% - 48rpx) / 3);
				padding: 12rpx 24rpx;
				background: #F7F8FA;
				border-radius: 70rpx 70rpx 70rpx 70rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #666;
				border: 1rpx solid transparent;
				text-align: center;
				box-sizing: border-box;
				
				&.active {
					background: rgba(56,139,255,0.15);
					color: #388BFF;
					border-color: #388BFF;
				}
			}
		}
	}
	
	.filter-actions {
		display: flex;
		gap: 24rpx;
		margin-top: 40rpx;
		padding-top: 24rpx;
		
		.reset-btn,
		.confirm-btn {
			flex: 1;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border-radius: 8rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
		}
		
		.reset-btn {
			background: #fff;
			color: #388BFF;
			border-radius: 200rpx 200rpx 200rpx 200rpx;
			border: 2rpx solid #388BFF;
		}
		
		.confirm-btn {
			background: #388BFF;
			color: #fff;
			border-radius: 200rpx 200rpx 200rpx 200rpx;
			border: 2rpx solid #388BFF;
		}
	}
}
</style>