738 lines
16 KiB
Vue
738 lines
16 KiB
Vue
<template>
|
|
<view class="page">
|
|
<scroll-view class="body" scroll-y :show-scrollbar="false">
|
|
<view class="body-inner">
|
|
<!-- 本周概览横幅 -->
|
|
<view class="hero-banner">
|
|
<view class="hero-info">
|
|
<view class="hero-title-row">
|
|
<text class="hero-title">本周日程</text>
|
|
<text class="hero-unit">(项)</text>
|
|
<text class="hero-count">{{ weekCount }}</text>
|
|
</view>
|
|
<text class="hero-sub">{{ heroRangeLabel }}</text>
|
|
</view>
|
|
<view class="hero-icon">
|
|
<FaIcon name="calendar-check" color="#ffffff" :size="26" />
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 可收缩日历 -->
|
|
<view class="cal-card">
|
|
<view v-if="expanded" class="cal-head">
|
|
<text class="cal-title">{{ monthLabel }}</text>
|
|
<view class="cal-head-right">
|
|
<view class="cal-nav" @tap="shiftMonth(-1)">
|
|
<FaIcon name="chevron-left" color="#475569" :size="13" />
|
|
</view>
|
|
<view class="cal-today-btn" @tap="goToday">
|
|
<text>今天</text>
|
|
</view>
|
|
<view class="cal-nav" @tap="shiftMonth(1)">
|
|
<FaIcon name="chevron-right" color="#475569" :size="13" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="cal-week">
|
|
<text v-for="w in WEEK_LABELS" :key="w" class="cal-week-item">{{ w }}</text>
|
|
</view>
|
|
|
|
<view class="cal-grid">
|
|
<view
|
|
v-for="cell in gridCells"
|
|
:key="cell.key"
|
|
class="cal-cell"
|
|
@tap="pickDay(cell)"
|
|
>
|
|
<view
|
|
class="cal-day"
|
|
:class="{
|
|
dim: !cell.inMonth,
|
|
today: cell.isToday && cell.key !== selectedKey,
|
|
selected: cell.key === selectedKey
|
|
}"
|
|
>{{ cell.day }}</view>
|
|
<view class="cal-dots">
|
|
<view
|
|
v-for="n in dotCount(cell.key)"
|
|
:key="n"
|
|
class="cal-dot"
|
|
:class="{ on: cell.key === selectedKey }"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="cal-toggle" @tap="expanded = !expanded">
|
|
<text>{{ expanded ? '收起' : '展开' }}</text>
|
|
<FaIcon :name="expanded ? 'chevron-up' : 'chevron-down'" color="#94a3b8" :size="11" />
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 选中日期的日程 -->
|
|
<view class="day-head">
|
|
<text class="day-title">{{ selectedLabel }}</text>
|
|
<text class="day-count">{{ dayItems.length }} 项</text>
|
|
</view>
|
|
|
|
<u-empty
|
|
v-if="!loading && dayItems.length === 0"
|
|
mode="list"
|
|
:icon-size="72"
|
|
text="当天暂无日程"
|
|
/>
|
|
|
|
<view
|
|
v-for="item in dayItems"
|
|
:key="item.id"
|
|
class="sched-card"
|
|
:class="{ done: item.completed }"
|
|
>
|
|
<view class="sched-main" @tap="openDetail(item.id)">
|
|
<view class="sched-left">
|
|
<text class="sched-day">{{ dayLabel(item.datetime) }}</text>
|
|
<text class="sched-time">{{ timeText(item.datetime) }}</text>
|
|
</view>
|
|
<view class="sched-sep" />
|
|
<view class="sched-right">
|
|
<view class="sched-title-row">
|
|
<text class="sched-content">{{ item.content || item.title }}</text>
|
|
<view class="status-chip" :class="item.completed ? 'done' : 'pending'">
|
|
<text>{{ item.completed ? '已完成' : '待办' }}</text>
|
|
</view>
|
|
</view>
|
|
<view v-if="item.remindChannels.length" class="sched-meta">
|
|
<FaIcon name="bell" color="#94a3b8" :size="11" />
|
|
<text>{{ getRemindMinutesLabel(item.remindMinutes) }}</text>
|
|
<text v-if="item.repeatIntervalMinutes > 0">· 每 {{ item.repeatIntervalMinutes }} 分钟</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="action-row">
|
|
<view class="action-btn" @tap="onToggleComplete(item)">
|
|
<FaIcon :name="item.completed ? 'rotate-left' : 'check'" color="#8a94ad" :size="12" />
|
|
<text>{{ item.completed ? '标为待办' : '标记完成' }}</text>
|
|
</view>
|
|
<view class="action-btn" @tap="openEdit(item.id)">
|
|
<FaIcon name="pen" color="#8a94ad" :size="12" />
|
|
<text>编辑</text>
|
|
</view>
|
|
<view class="action-btn danger" @tap="onDelete(item)">
|
|
<FaIcon name="trash" color="#f56c6c" :size="12" />
|
|
<text>删除</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="bottom-space" />
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<view class="fab" @tap="createSchedule">
|
|
<FaIcon name="plus" color="#ffffff" :size="22" />
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, onMounted } from 'vue'
|
|
import { onShow } from '@dcloudio/uni-app'
|
|
import {
|
|
fetchSchedules,
|
|
deleteSchedule,
|
|
toggleScheduleComplete,
|
|
getRemindMinutesLabel
|
|
} from '@/api/schedule.js'
|
|
import { pad, startOfDay, isToday, isTomorrow, dayLabel } from '@/utils/date.js'
|
|
import { isLoggedIn } from '@/utils/auth.js'
|
|
|
|
/** 周一为一周第一天 */
|
|
const WEEK_LABELS = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
|
|
|
const schedules = ref([])
|
|
const loading = ref(false)
|
|
/** 默认收缩，仅显示选中日所在周的一行 */
|
|
const expanded = ref(false)
|
|
const monthCursor = ref(new Date(new Date().getFullYear(), new Date().getMonth(), 1))
|
|
const selectedDate = ref(startOfDay(new Date()))
|
|
|
|
function dateKey(value) {
|
|
const d = value instanceof Date ? value : new Date(value)
|
|
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
|
|
}
|
|
|
|
const monthLabel = computed(
|
|
() => `${monthCursor.value.getFullYear()}年${monthCursor.value.getMonth() + 1}月`
|
|
)
|
|
|
|
const selectedKey = computed(() => dateKey(selectedDate.value))
|
|
|
|
/** 选中日所在周（周一~周日）的 7 个单元格 */
|
|
const weekCells = computed(() => {
|
|
const base = selectedDate.value
|
|
const offset = (base.getDay() + 6) % 7
|
|
const cells = []
|
|
for (let i = 0; i < 7; i++) {
|
|
const d = new Date(base.getFullYear(), base.getMonth(), base.getDate() - offset + i)
|
|
cells.push({
|
|
key: dateKey(d),
|
|
date: d,
|
|
day: d.getDate(),
|
|
inMonth: true,
|
|
isToday: isToday(d)
|
|
})
|
|
}
|
|
return cells
|
|
})
|
|
|
|
/** 月历 6×7 单元格，含上下月补齐日期 */
|
|
const monthCells = computed(() => {
|
|
const year = monthCursor.value.getFullYear()
|
|
const month = monthCursor.value.getMonth()
|
|
const offset = (new Date(year, month, 1).getDay() + 6) % 7
|
|
const start = new Date(year, month, 1 - offset)
|
|
const cells = []
|
|
for (let i = 0; i < 42; i++) {
|
|
const d = new Date(start.getFullYear(), start.getMonth(), start.getDate() + i)
|
|
cells.push({
|
|
key: dateKey(d),
|
|
date: d,
|
|
day: d.getDate(),
|
|
inMonth: d.getMonth() === month,
|
|
isToday: isToday(d)
|
|
})
|
|
}
|
|
return cells
|
|
})
|
|
|
|
const gridCells = computed(() => (expanded.value ? monthCells.value : weekCells.value))
|
|
|
|
/** 日程按日期聚合，key 为 YYYY-MM-DD */
|
|
const dayMap = computed(() => {
|
|
const map = {}
|
|
schedules.value.forEach((item) => {
|
|
if (!item.datetime) return
|
|
const key = dateKey(new Date(item.datetime))
|
|
if (!map[key]) map[key] = []
|
|
map[key].push(item)
|
|
})
|
|
return map
|
|
})
|
|
|
|
/** 选中日期的日程，按时间升序 */
|
|
const dayItems = computed(() => {
|
|
const list = dayMap.value[selectedKey.value] || []
|
|
return list.slice().sort((a, b) => a.datetime - b.datetime)
|
|
})
|
|
|
|
/** 本周（周一~周日）范围与日程数 */
|
|
const weekRange = computed(() => {
|
|
const now = startOfDay(new Date())
|
|
const offset = (now.getDay() + 6) % 7
|
|
const start = new Date(now.getFullYear(), now.getMonth(), now.getDate() - offset)
|
|
const end = new Date(start.getFullYear(), start.getMonth(), start.getDate() + 7)
|
|
return { start, end }
|
|
})
|
|
|
|
const weekCount = computed(() => {
|
|
const { start, end } = weekRange.value
|
|
return schedules.value.filter((item) => {
|
|
if (!item.datetime) return false
|
|
const d = new Date(item.datetime)
|
|
return d >= start && d < end
|
|
}).length
|
|
})
|
|
|
|
const heroRangeLabel = computed(() => {
|
|
const { start, end } = weekRange.value
|
|
const last = new Date(end.getFullYear(), end.getMonth(), end.getDate() - 1)
|
|
return `${start.getMonth() + 1}月${start.getDate()}日 - ${last.getMonth() + 1}月${last.getDate()}日`
|
|
})
|
|
|
|
const selectedLabel = computed(() => {
|
|
const d = selectedDate.value
|
|
const week = `周${WEEK_LABELS[(d.getDay() + 6) % 7].slice(1)}`
|
|
if (isToday(d)) return `今天 ${d.getMonth() + 1}月${d.getDate()}日`
|
|
if (isTomorrow(d)) return `明天 ${d.getMonth() + 1}月${d.getDate()}日`
|
|
return `${d.getMonth() + 1}月${d.getDate()}日 ${week}`
|
|
})
|
|
|
|
function dotCount(key) {
|
|
return Math.min(3, (dayMap.value[key] || []).length)
|
|
}
|
|
|
|
function timeText(timestamp) {
|
|
const d = new Date(timestamp)
|
|
return `${pad(d.getHours())}:${pad(d.getMinutes())}`
|
|
}
|
|
|
|
function shiftMonth(step) {
|
|
const cur = monthCursor.value
|
|
monthCursor.value = new Date(cur.getFullYear(), cur.getMonth() + step, 1)
|
|
}
|
|
|
|
function goToday() {
|
|
const now = new Date()
|
|
monthCursor.value = new Date(now.getFullYear(), now.getMonth(), 1)
|
|
selectedDate.value = startOfDay(now)
|
|
}
|
|
|
|
function pickDay(cell) {
|
|
selectedDate.value = startOfDay(cell.date)
|
|
monthCursor.value = new Date(cell.date.getFullYear(), cell.date.getMonth(), 1)
|
|
// 月历里选完日期后自动收回周栏
|
|
if (expanded.value) expanded.value = false
|
|
}
|
|
|
|
onMounted(() => {
|
|
if (!isLoggedIn()) {
|
|
uni.reLaunch({ url: '/pages/login/login' })
|
|
return
|
|
}
|
|
loadSchedules()
|
|
})
|
|
|
|
onShow(() => {
|
|
if (isLoggedIn()) loadSchedules()
|
|
})
|
|
|
|
async function loadSchedules() {
|
|
loading.value = true
|
|
try {
|
|
// 后端暂不支持按日期区间过滤，取最近一页在端上按月/按天聚合
|
|
const res = await fetchSchedules({ pageSize: 100 })
|
|
schedules.value = res.list
|
|
} catch (e) {
|
|
uni.showToast({ title: '加载失败', icon: 'none' })
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
function createSchedule() {
|
|
uni.navigateTo({ url: '/pages/tools/schedule/edit' })
|
|
}
|
|
|
|
function openDetail(id) {
|
|
uni.navigateTo({ url: `/pages/tools/schedule/detail?id=${id}` })
|
|
}
|
|
|
|
function openEdit(id) {
|
|
uni.navigateTo({ url: `/pages/tools/schedule/edit?id=${id}` })
|
|
}
|
|
|
|
async function onToggleComplete(item) {
|
|
try {
|
|
await toggleScheduleComplete(item.id)
|
|
await loadSchedules()
|
|
uni.showToast({
|
|
title: item.completed ? '已标为待办' : '已标记完成',
|
|
icon: 'none'
|
|
})
|
|
} catch (e) {
|
|
uni.showToast({ title: '操作失败', icon: 'none' })
|
|
}
|
|
}
|
|
|
|
function onDelete(item) {
|
|
uni.showModal({
|
|
title: '删除日程',
|
|
content: '删除后该日程及其提醒将一并移除，确定继续吗？',
|
|
confirmText: '删除',
|
|
cancelText: '取消',
|
|
success: async (res) => {
|
|
if (!res.confirm) return
|
|
try {
|
|
await deleteSchedule(item.id)
|
|
uni.showToast({ title: '已删除', icon: 'none' })
|
|
await loadSchedules()
|
|
} catch (e) {
|
|
uni.showToast({ title: '删除失败', icon: 'none' })
|
|
}
|
|
}
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '@/src/styles/page-common.scss';
|
|
|
|
.page {
|
|
height: 100vh;
|
|
background: $color-bg-page;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.body {
|
|
flex: 1;
|
|
min-height: 0;
|
|
}
|
|
|
|
.body-inner {
|
|
padding: 20rpx $page-padding-x 0;
|
|
}
|
|
|
|
/* ---------- 本周概览横幅 ---------- */
|
|
.hero-banner {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 28rpx 32rpx;
|
|
border-radius: $radius-lg;
|
|
background: $hero-gradient;
|
|
box-shadow: 0 10rpx 28rpx rgba(37, 99, 235, 0.28);
|
|
}
|
|
|
|
.hero-info {
|
|
min-width: 0;
|
|
}
|
|
|
|
.hero-title-row {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 8rpx;
|
|
}
|
|
|
|
.hero-title {
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.hero-unit {
|
|
font-size: 24rpx;
|
|
color: rgba(255, 255, 255, 0.85);
|
|
}
|
|
|
|
.hero-count {
|
|
margin-left: 8rpx;
|
|
font-size: 44rpx;
|
|
font-weight: 700;
|
|
color: #ffffff;
|
|
line-height: 1;
|
|
}
|
|
|
|
.hero-sub {
|
|
display: block;
|
|
margin-top: 8rpx;
|
|
font-size: 23rpx;
|
|
color: rgba(255, 255, 255, 0.75);
|
|
}
|
|
|
|
.hero-icon {
|
|
width: 84rpx;
|
|
height: 84rpx;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.16);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* ---------- 可收缩日历 ---------- */
|
|
.cal-card {
|
|
margin-top: 20rpx;
|
|
padding: 16rpx 16rpx 8rpx;
|
|
background: $color-card;
|
|
border-radius: $radius-lg;
|
|
box-shadow: $shadow-card;
|
|
}
|
|
|
|
.cal-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 4rpx 8rpx 12rpx;
|
|
}
|
|
|
|
.cal-title {
|
|
font-size: 30rpx;
|
|
font-weight: 600;
|
|
color: $color-text;
|
|
}
|
|
|
|
.cal-head-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12rpx;
|
|
}
|
|
|
|
.cal-nav {
|
|
width: 52rpx;
|
|
height: 52rpx;
|
|
border-radius: 50%;
|
|
background: $color-bg-page;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
&:active {
|
|
background: $color-primary-bg;
|
|
}
|
|
}
|
|
|
|
.cal-today-btn {
|
|
height: 52rpx;
|
|
padding: 0 20rpx;
|
|
border-radius: $radius-full;
|
|
background: $color-primary-bg;
|
|
color: $color-primary;
|
|
font-size: 24rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&:active {
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
.cal-week {
|
|
display: flex;
|
|
padding: 4rpx 0 8rpx;
|
|
}
|
|
|
|
.cal-week-item {
|
|
flex: 1;
|
|
text-align: center;
|
|
font-size: 23rpx;
|
|
color: $color-text-muted;
|
|
}
|
|
|
|
.cal-grid {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.cal-cell {
|
|
flex: 0 0 14.2857%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 6rpx 0;
|
|
}
|
|
|
|
.cal-day {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 27rpx;
|
|
color: $color-text;
|
|
box-sizing: border-box;
|
|
|
|
&.dim {
|
|
color: $color-text-muted;
|
|
opacity: 0.55;
|
|
}
|
|
|
|
&.today {
|
|
color: $color-primary;
|
|
font-weight: 600;
|
|
}
|
|
|
|
&.selected {
|
|
background: $color-primary;
|
|
color: #ffffff;
|
|
font-weight: 600;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.cal-dots {
|
|
height: 12rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4rpx;
|
|
}
|
|
|
|
.cal-dot {
|
|
width: 8rpx;
|
|
height: 8rpx;
|
|
border-radius: 50%;
|
|
background: $color-primary;
|
|
|
|
&.on {
|
|
background: #ffffff;
|
|
}
|
|
}
|
|
|
|
.cal-toggle {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8rpx;
|
|
padding: 14rpx 0 10rpx;
|
|
font-size: 24rpx;
|
|
color: $color-text-muted;
|
|
|
|
&:active {
|
|
opacity: 0.7;
|
|
}
|
|
}
|
|
|
|
/* ---------- 当日日程 ---------- */
|
|
.day-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin: 28rpx 0 16rpx;
|
|
}
|
|
|
|
.day-title {
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
color: $color-text;
|
|
}
|
|
|
|
.day-count {
|
|
font-size: 24rpx;
|
|
color: $color-text-muted;
|
|
}
|
|
|
|
.sched-card {
|
|
@include card;
|
|
margin-bottom: 16rpx;
|
|
overflow: hidden;
|
|
|
|
&.done .sched-content {
|
|
text-decoration: line-through;
|
|
color: $color-text-muted;
|
|
}
|
|
}
|
|
|
|
.sched-main {
|
|
display: flex;
|
|
align-items: stretch;
|
|
padding: 24rpx 8rpx;
|
|
|
|
&:active {
|
|
background: $color-bg-page;
|
|
}
|
|
}
|
|
|
|
.sched-left {
|
|
width: 128rpx;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6rpx;
|
|
}
|
|
|
|
.sched-day {
|
|
font-size: 22rpx;
|
|
color: $color-text-muted;
|
|
}
|
|
|
|
.sched-time {
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
color: $color-text;
|
|
}
|
|
|
|
.sched-sep {
|
|
width: 1rpx;
|
|
margin: 4rpx 20rpx;
|
|
background: $color-divider;
|
|
}
|
|
|
|
.sched-right {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.sched-title-row {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 12rpx;
|
|
}
|
|
|
|
.sched-content {
|
|
flex: 1;
|
|
min-width: 0;
|
|
font-size: 28rpx;
|
|
line-height: 1.5;
|
|
color: $color-text;
|
|
word-break: break-all;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.status-chip {
|
|
@include chip;
|
|
flex-shrink: 0;
|
|
|
|
&.done {
|
|
background: #ecfdf5;
|
|
color: $color-success;
|
|
}
|
|
}
|
|
|
|
.sched-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 8rpx;
|
|
margin-top: 10rpx;
|
|
font-size: 23rpx;
|
|
color: $color-text-muted;
|
|
}
|
|
|
|
.action-row {
|
|
display: flex;
|
|
border-top: 1rpx solid $color-divider;
|
|
}
|
|
|
|
.action-btn {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8rpx;
|
|
padding: 18rpx 0;
|
|
font-size: 24rpx;
|
|
color: $color-text-secondary;
|
|
|
|
&:active {
|
|
background: $color-bg-page;
|
|
}
|
|
|
|
&.danger {
|
|
color: #f56c6c;
|
|
}
|
|
}
|
|
|
|
.bottom-space {
|
|
height: 160rpx;
|
|
}
|
|
|
|
.fab {
|
|
position: fixed;
|
|
right: 40rpx;
|
|
bottom: calc(60rpx + env(safe-area-inset-bottom));
|
|
width: 104rpx;
|
|
height: 104rpx;
|
|
border-radius: 50%;
|
|
background: $color-primary;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 10rpx 28rpx rgba(37, 99, 235, 0.35);
|
|
z-index: 20;
|
|
|
|
&:active {
|
|
opacity: 0.9;
|
|
}
|
|
}
|
|
</style>
|