GCLS_Page_Mobile/pages/tabbar/task/index.vue

<template>
	<view>
		<navbar />
		<view style="height:92rpx;"></view>
		<view class="calendar-box">
			<button type="button" @click="open">{{selectedDate===''?todayDate:selectedDate}}
				<SvgIcon :size="12" icon-class="third-tone" />
			</button>
		</view>

		<view class="exercise_items_box">
			<view class="exercise_items" v-for="(item, index) in pageList" :key="index">
				<uni-list>
					<uni-list-item thumb="" :title="time_type_list[item.time_type].label.replace('任务', '')+'：'+item.name"
						:note="item.course_name+'\n\r'+item.time_space_view_txt" showArrow thumb-size="sm" clickable
						@click="pageRedirection(item.time_type,item.exercise_share_record_id,item.id)"
						:rightText="isEnable(item.is_finished)?'已完成':''" />
				</uni-list>
			</view>
			<!-- <uni-load-more :status="status" :icon-size="14" :content-text="contentText" v-if="pageList.length > 0" /> -->
			<view style="height:130rpx;"></view>
		</view>
		<uni-calendar ref="calendar" class="uni-calendar--hook" :selected="info.selected" :clear-date="info.clear"
			:insert="info.insert" @confirm="confirm" @monthSwitch="monthSwitch" />
	</view>
</template>

<script>
	import {
		PageQueryPageQueryMyTaskList,
		TaskQueryGetMyTaskList,
		GetShareRecordInfo,
		SubmitAnswer,
		GetMyTaskDailyDistribution
	} from '@/api/exercise.js';
	import {
		isEnable,
		answer_mode_list,
		time_type_list
	} from '@/pages/answer_question/common/data/common.js';
	export default {
		data() {
			return {
				isEnable,
				answer_mode_list,
				time_type_list,
				isStudent: this.$store.getters.isStudent,
				pageList: [],
				taskQueryData: {
					time_unit: 'DAY',
					date_stamp: '',
					time_type: -1,
				},
				today: new Date(),
				selectedDate: '',
				showCalendar: false,
				info: {
					clear: false,
					insert: false,
					selected: [],
				}
			}
		},
		computed: {
			todayDate() {
				const month = this.today.toLocaleString('default', {
					month: 'short'
				});
				const day = this.today.getDate();
				return `${month}${day}日`;
			},
			// 格式化为 "YYYY-MM-DD"
			parseDate() {
				// 创建一个 Date 对象
				var date = new Date();
				// 获取年份、月份和日期
				var year = date.getFullYear();
				// 月份是从 0 开始的，所以要加 1
				var month = (date.getMonth() + 1).toString().padStart(2, '0');
				var day = date.getDate().toString().padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
		},
		onLoad(options) {
			if (options.date) {
				this.taskQueryData.date_stamp = options.date;
				const date = new Date(options.date);
				const month = date.getMonth() + 1; // 月份从 0 开始，所以要加 1
				const day = date.getDate();
				this.selectedDate = `${month}月${day}日`;
			}
			this.loadMoreData();
		},
		methods: {
			//加载数据
			loadMoreData() {
				if (!this.taskQueryData.date_stamp) {
					this.taskQueryData.date_stamp = this.parseDate;
				}
				TaskQueryGetMyTaskList(this.taskQueryData).then((res) => {
					if (res.status) {
						console.log(res);
						this.pageList = res.task_group_list.flatMap(group => group.task_list);
					}
				});
			},
			pageRedirection(time_type, exercise_share_record_id, id) {
				if (this.isStudent && time_type_list[time_type].label === '练习任务') {
					this.getShareRecordInfo(exercise_share_record_id);
				} else {
					//任务详情页面
					uni.navigateTo({
						url: '/pages/tabbar/task/TaskDetails?task_id=' + id + '&date=' + this.taskQueryData.date_stamp,
					})
				}
			},
			//得到分享记录信息
			getShareRecordInfo(exercise_share_record_id) {
				GetShareRecordInfo({
					'share_record_id': exercise_share_record_id
				}).then((res) => {
					if (res.status) {
						// 存在答题记录流程同练习，否则去答题
						if (isEnable(res.user_answer_record_info.is_exist_answer_record)) {
							uni.navigateTo({
								url: '/pages/common/AnswerReport?answer_record_id=' + res.user_answer_record_info
									.answer_record_id + '&answer_mode=' + res.share_record.answer_mode +
									'&exercise_share_record_id=' + res.share_record.exercise_id + '&isTask=true' + '&date=' +
									this.taskQueryData.date_stamp
							})
						} else {
							uni.navigateTo({
								url: '/pages/answer_question/answer/index?share_record_id=' + exercise_share_record_id +
									'&isTask=true' + '&date=' + this.taskQueryData.date_stamp
							})
						}
					}
				})
			},
			open() {
				this.$refs.calendar.open();
				const date = new Date(this.taskQueryData.date_stamp);
				const year = date.getFullYear();
				const month = date.getMonth() + 1; // 月份从 0 开始，所以要加 1
				let month_stamp = year + '-' + month;
				this.getMyTaskDailyDistribution(month_stamp);
			},
			monthSwitch(e) {
				let month_stamp = e.year + '-' + e.month;
				this.getMyTaskDailyDistribution(month_stamp);
			},
			getMyTaskDailyDistribution(month_stamp) {
				GetMyTaskDailyDistribution({
					'month_stamp': month_stamp
				}).then((res) => {
					if (res.status) {
						let dates = Object.keys(res);
						dates = dates.splice(0, dates.length - 1);
						let selected = [];
						dates.map(p => {
							selected.push({
								date: p,
								type: "abnormal",
								info: ''
							})
						});
						this.info.selected = selected;
					}
				})
			},
			confirm(e) {
				this.selectedDate = `${parseInt(e.month, 10).toString()}月${e.date}日`;
				this.taskQueryData.date_stamp = e.fulldate;
				this.loadMoreData();
			},
		}
	}
</script>

<style lang="scss">
	.calendar-box {
		uni-button {
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 18px;

			svg {
				padding-left: 10px;
			}
		}
	}

	.uni-calendar {
		/deep/.uni-calendar--fixed {
			bottom: 0;
			z-index: 999;
		}
	}

	.exercise_items_box {
		height: auto;
		padding: 8rpx 16rpx;

		.exercise_items {
			padding: 8rpx 0;

			/deep/ .uni-list {
				border-radius: 16rpx !important;

				.uni-list-item {
					padding: 16rpx 0;
					border-radius: 16rpx !important;

					.uni-list-item__content-title {
						color: #000;
						font-weight: 500;
						font-size: 36rpx;
					}

					.uni-list-item__content-note {
						font-weight: 400;
						font-size: 24rpx;
					}

					.uni-list-item__extra-text {
						color: #3ACB85;
						margin-top: -3px;
					}
				}

				.uni-icons {
					color: #000 !important;
					font-size: 24rpx !important;
				}
			}
		}
	}
</style>