yunzerwebsiteallinone/uniapp/components/sub/SubTodo.vue

<template>
	<view class="page" :class="{ embedded }">
		<view v-if="!embedded" class="head" :style="headPad">
			<text class="head-title">{{ sub.title }} · 待办</text>
			<view class="kpi">
				<view class="kpi-item">
					<text class="kpi-value" :class="{ warn: overdue > 0 }">{{ pending.length }}</text>
					<text class="kpi-label">待处理</text>
				</view>
				<view class="kpi-item">
					<text class="kpi-value" :class="{ warn: overdue > 0 }">{{ overdue }}</text>
					<text class="kpi-label">已逾期</text>
				</view>
				<view class="kpi-item">
					<text class="kpi-value">{{ done }}</text>
					<text class="kpi-label">已完成</text>
				</view>
			</view>
		</view>

		<view class="body">
			<view class="block-head">
				<text class="block-title">日程待办</text>
				<view class="block-more" @tap="goSchedules">
					<text class="block-more-text">全部日程</text>
					<FaIcon name="chevron-right" color="#8a94ad" :size="11" />
				</view>
			</view>

			<view class="list-card">
				<view v-if="pending.length === 0" class="empty-box">
					<FaIcon name="circle-check" color="#c0c4cc" :size="28" />
					<text class="empty-text">暂无待办事项</text>
				</view>
				<view v-for="item in pending" :key="item.id" class="list-item" @tap="goSchedules">
					<view class="dot" :class="{ warn: isOverdue(item) }" />
					<view class="list-body">
						<text class="list-title">{{ item.content || item.title || '日程' }}</text>
						<text class="list-time" :class="{ warn: isOverdue(item) }">{{ item.schedule_time }}</text>
					</view>
					<FaIcon name="chevron-right" color="#c8cfdf" :size="12" />
				</view>
			</view>

			<view class="bottom-space" />
		</view>

		<AppTabbar v-if="!embedded" :group="slug" current="todo" />
	</view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { mpHeadPad } from '@/utils/mpHead.js'

const headPad = mpHeadPad()
import { onShow } from '@dcloudio/uni-app'
import { isLoggedIn } from '@/utils/auth.js'
import { request } from '@/api/request.js'
import { useSubsystem } from '@/utils/subsystem.js'
import AppTabbar from '@/components/AppTabbar.vue'

const props = defineProps({
	slug: { type: String, required: true },
	embedded: { type: Boolean, default: false }
})

const emit = defineEmits(['switch-tab', 'back'])

const { sub, loading, load } = useSubsystem(props.slug)
const pending = ref([])
const finished = ref([])

const overdue = computed(() => pending.value.filter((s) => isOverdue(s)).length)
const done = computed(() => finished.value.length)

async function loadTodo() {
	try {
		const [p, f] = await Promise.all([
			request({ url: '/api/schedule/list', data: { status: 'pending', pageSize: 50 } }),
			request({ url: '/api/schedule/list', data: { status: 'done', pageSize: 50 } })
		])
		pending.value = (p && p.list) || []
		finished.value = (f && f.list) || []
	} catch (e) {
		pending.value = []
		finished.value = []
	}
}

function isOverdue(item) {
	const t = String(item.schedule_time || item.created_at || '')
	return t.length >= 10 && t.slice(0, 10) < todayStr()
}

function todayStr() {
	const d = new Date()
	const p = (n) => String(n).padStart(2, '0')
	return d.getFullYear() + '-' + p(d.getMonth() + 1) + '-' + p(d.getDate())
}

function goBackNav() {
	if (props.embedded) {
		emit('back')
		return
	}
	uni.reLaunch({ url: '/pages/nav/nav' })
}

function goSchedules() {
	uni.navigateTo({ url: '/pages/tools/schedule/index' })
}

onMounted(() => {
	// 游客进入免登录模块：停留外壳，不拉受保护数据，也不强制跳登录
	if (!isLoggedIn()) return
	load()
	loadTodo()
})

onShow(() => {
	if (isLoggedIn() && !loading.value) loadTodo()
})
</script>

<style lang="scss" scoped>
@import '@/src/styles/page-common.scss';

.page {
	@include page-shell;

	// 嵌入模式下由父页（tabs.vue）的 scroll-view 统一滚动，这里改为自然高度
	&.embedded {
		height: auto;
	}
}

.head {
	flex-shrink: 0;
	padding: calc(var(--status-bar-height, 44px) + 20rpx) $page-padding-x 28rpx;
	/* #ifdef MP-WEIXIN */
	padding-top: calc(env(safe-area-inset-top, 25px) + 84rpx);
	/* #endif */
	background: $color-card;
	box-shadow: $shadow-header;
}

.head-title {
	display: block;
	/* 取消顶部返回按钮后，保留头部避让高度 */
	margin-top: 32rpx;
	font-size: 36rpx;
	font-weight: 600;
	color: $color-text;
}

.kpi {
	display: flex;
	margin-top: 26rpx;
	padding: 24rpx 0;
	background: $color-bg-page;
	border-radius: $radius-md;
}

.kpi-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4rpx;
	position: relative;

	& + &::before {
		content: '';
		position: absolute;
		left: 0;
		top: 4rpx;
		bottom: 4rpx;
		width: 1rpx;
		background: $color-border;
	}
}

.kpi-value {
	font-size: 36rpx;
	font-weight: 600;
	color: $color-text;

	&.warn {
		color: $color-danger;
	}
}

.kpi-label {
	font-size: 21rpx;
	color: $color-text-muted;
}

.body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 24rpx $page-padding-x 0;
}

.block-head {
	@include block-head;
}

.block-title {
	@include section-title;
}

.block-more {
	display: flex;
	align-items: center;
	gap: 4rpx;
}

.block-more-text {
	font-size: 24rpx;
	color: $color-text-muted;
}

.empty-box {
	padding: 60rpx 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14rpx;
}

.empty-text {
	font-size: 25rpx;
	color: $color-text-muted;
}

.list-card {
	@include card;
	overflow: hidden;
}

.list-item {
	display: flex;
	align-items: center;
	gap: 18rpx;
	padding: 26rpx 24rpx;

	& + & {
		border-top: 1rpx solid $color-divider;
	}

	&:active {
		background: $color-bg-page;
	}
}

.dot {
	width: 14rpx;
	height: 14rpx;
	border-radius: 50%;
	background: $color-primary;
	flex-shrink: 0;

	&.warn {
		background: $color-danger;
	}
}

.list-body {
	flex: 1;
	min-width: 0;
}

.list-title {
	display: block;
	font-size: 28rpx;
	color: $color-text;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.list-time {
	display: block;
	margin-top: 4rpx;
	font-size: 22rpx;
	color: $color-text-muted;

	&.warn {
		color: $color-danger;
	}
}

.bottom-space {
	height: 40rpx;
}
</style>