tra-app/src/pages/index/components/todo.vue

<template>
	<view class="module_title_div">
		<view class="icon icon_1">
			<!-- <image class="img" :src="icon"></image> -->
		</view>
		<view class="text font_pf">我的待办</view>
	</view>
	<view class="cont-box">
		<!-- {{activeDate}} -->
		<calendarCom @change="changeDate" />
		<view class="table-list">
			<todoItem v-for="(item, index) in tableData" :dataInfo="item"
				:class="index === tableData.length -1 ?'last-item':''" @click="handleDetail(item)"></todoItem>
			<view class="empty-box" v-show="tableData.length === 0">暂无数据</view>
		</view>
		<view class="more-btn" v-show="showMoreBtn" @click="getMoreData">点击加载更多</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		computed
	} from 'vue'
	import calendarCom from './calendar.vue'
	import todoItem from './todo-item.vue'
	import common from '@/common/common.js'
	import {
		queryHaveToDo
	} from '@/api/index'
	import {
		queryTraExamPapersByPapersId
	} from '@/api/examination.js';
	import {
		queryTestPapers
	} from '@/api/competition.js';
	import {
		checkTraPartnerInfoById
	} from '@/api/sparring.js'
	import { queryTraUserAnonyByUserId } from '@/api/user.js';
	const activeDate = ref('')
	const tableData = ref([])
	const pageObj = ref({
		totalNum: 0,
		page: 1,
		limit: 10
	})
	const changeDate = (date) => {
		activeDate.value = date
		getDataList(date, 1)
	}
	const showMoreBtn = computed(() => {
		return pageObj.value.totalNum > pageObj.value.page * pageObj.value.limit
	})
	const getMoreData = () => {
		pageObj.value.page += 1
		getDataList(activeDate.value)
	}
	const getDataList = (date, flag) => {
		common.loading();
		if (flag === 1) {
			tableData.value = []
			pageObj.value = {
				totalNum: 0,
				page: 1,
				limit: 10
			}
		}
		queryHaveToDo({
			date,
			...pageObj.value
		}).then(res => {
			let _arr = res.body || []
			pageObj.value.totalNum = res.total
			tableData.value = tableData.value.concat(_arr)
		}).finally(() => {
			common.hideLoading();
		});
	}
	const handleDetail = (item) => {
		console.log(item)
		switch (item.type) {
			case '00':
				common.navigateTo('/pages/courseDetail/index?crsId=' + item.id)
				break;
			case '01':
				toSparringDetail(item)
				break;
			case '02':
				toPKDetail(item)
				break;
			case '03':
				toExaminationDetail(item)
				break;
			case '04':
				common.setPageCache('learning_tasks_details', {
					...item,
					taskId: item.id,
					taskName: item.name
				});
				common.navigateTo('/pages/learningTasks/details?taskId=' + item.id);
				break;
			default:
				break;
		}
	}
	// 去PK
	const toPKDetail = async (item) => {
		common.loading();
		queryTestPapers({
				comId: item.id
			})
			.then((res) => {
				common.setPageCache('competition_list', {
					papersId: res.body.papersId, // 试卷id
					isAnony: res.body.isAnony, // 是否匿名 Y是N否
					ruleDesc: res.body.ruleDesc, // 规则说明
					comName: item.name, // 标题
					comId: item.id
				});
				queryTraUserAnonyByUserId().then(res2=>{
					common.setValue('orgTree', res2.body ?? []);
					common.navigateTo(`/pages/competition/matching?papersId=${res.body.papersId}&comId=${item.id}`);
				})
			})
			.finally(() => {
				common.hideLoading();
			});
	};
	// 去考试
	const toExaminationDetail = async (item) => {
		common.loading();
		queryTraExamPapersByPapersId({
				papersId: item.id
			})
			.then((res) => {
				common.setPageCache('testing_hall_details',res.body);
				common.navigateTo('/pages/testingHall/details');
			})
			.catch(() => {})
			.finally(() => {
				common.hideLoading();
			});
	};
	// 跳转 课程详情
	const toSparringDetail = item => {
		if (item.id) {
			checkTraPartnerInfoById({
				traId: item.id
			}).then(res => {
				if (res.body.inRange) {
					common.navigateTo('/pages/sparring/detail?traId=' + item.id)
				} else {
					common.show('提示', res.body.message, false)
				}
			})
		}
	}
</script>

<style lang="scss" scoped>
	$bg-margin-left: 30rpx;

	.module_title_div {
		display: flex;
		margin: 30rpx $bg-margin-left;
		align-items: center;

		.icon {
			margin-right: 6rpx;
		}

		.icon_1 {
			.img {
				width: 31rpx;
				height: 36rpx;
			}
		}

		.icon_2 {
			margin-top: 10rpx;

			.img {
				width: 38rpx;
				height: 38rpx;
			}
		}

		.icon_3 {

			// margin-top: 10rpx;
			.img {
				width: 38rpx;
				height: 31rpx;
			}
		}

		.title {
			font-size: 34rpx;
			color: #323e57;
			font-weight: 700;
			line-height: 46rpx;
			text-align: left;
		}
	}

	.cont-box {
		margin: 0 $bg-margin-left;
		background-color: #fff;
		border-radius: 22rpx;
		padding: 20rpx;

		.table-list {
			padding: 16rpx;

			.last-item {
				border-bottom: 0 !important;
			}
		}

		.more-btn {
			color: rgb(144, 147, 153);
			text-align: center;
			font-size: 23rpx;
		}
	}

	.empty-box {
		text-align: center;
		color: #999;
		font-size: 24rpx;
		line-height: 120rpx;
	}
</style>