WindowBird/OfficeSystem
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

点击查看日程详细

Browse Source
This commit is contained in:
WindowBird 2025-11-05 10:07:59 +08:00
parent 345610da3d
commit 1247dc1dd9
3 changed files with 409 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
components/ScheduleBlock.vue
View File

@ -1,5 +1,5 @@
<template>
<view class="event-block" :style="{background: event.color||'#e3fae6'}">
<view class="event-block" :style="{background: event.color||'#e3fae6'}" @click="handleClick">
<view class="event-time">{{ event.startHour }}:{{ event.startMin || '00' }}</view>
<view class="event-title">{{ event.title }}</view>
</view>
@ -11,6 +11,17 @@ const props = defineProps({
required: true
}
});
// 点击事件，跳转到详情页
const handleClick = () => {
// 将事件数据存储到本地存储中
uni.setStorageSync('eventDetailData', props.event);
// 跳转到详情页
uni.navigateTo({
url: '/pages/event-detail/index'
});
};
</script>
<style scoped lang="scss">
.event-block {
@ -22,6 +33,12 @@ const props = defineProps({
color: #3a3a3a;
display: flex;
align-items: center;
cursor: pointer;
transition: opacity 0.2s;
}
.event-block:active {
opacity: 0.7;
}
.event-time {
color: #fa5e5e;

7
pages.json
View File

@ -34,6 +34,13 @@
"navigationBarTitleText": "日程提醒",
"navigationStyle": "custom"
}
},
{
"path": "pages/event-detail/index",
"style": {
"navigationBarTitleText": "日程详情",
"navigationStyle": "custom"
}
}
],

384
pages/event-detail/index.vue Normal file
View File

@ -0,0 +1,384 @@
<template>
<view class="event-detail-page">
<!-- 自定义导航栏 -->
<view class="custom-navbar">
<view class="navbar-content">
<text class="nav-btn" @click="handleBack">返回</text>
<text class="nav-title">日程详情</text>
<text class="nav-btn" style="opacity: 0;">占位</text>
</view>
</view>
<!-- 内容区域 -->
<scroll-view class="content-scroll" scroll-y>
<!-- 标题显示 -->
<view class="form-item">
<text class="title-text">{{ eventData.title || '无标题' }}</text>
</view>
<!-- 时间日期显示 -->
<view class="form-item time-section">
<view class="time-item">
<view class="time-icon">🕐</view>
<view class="time-content">
<text class="time-value">{{ startTime }}</text>
<text class="time-date">{{ startDateText }}</text>
</view>
</view>
<text class="time-separator">----</text>
<view class="time-item">
<view class="time-icon">🕐</view>
<view class="time-content">
<text class="time-value">{{ endTime }}</text>
<text class="time-date">{{ endDateText }}</text>
</view>
</view>
</view>
<!-- 全天显示 -->
<view class="form-item">
<text class="label">全天</text>
<text class="value-text">{{ eventData.allDay ? '是' : '否' }}</text>
</view>
<!-- 重复显示 -->
<view class="form-item">
<text class="label">重复</text>
<text class="value-text">{{ repeatText }}</text>
</view>
<!-- 描述显示 -->
<view class="form-item" v-if="eventData.description">
<view class="desc-icon">📄</view>
<view class="desc-content">
<text class="desc-text">{{ eventData.description }}</text>
</view>
</view>
<view class="form-item" v-else>
<view class="desc-icon">📄</view>
<view class="desc-content">
<text class="desc-placeholder">无描述</text>
</view>
</view>
<!-- 日程颜色显示 -->
<view class="form-item">
<view class="color-dot" :style="{ backgroundColor: eventData.color || '#B3D9FF' }"></view>
<text class="label">日程颜色</text>
</view>
<!-- 提醒设置显示 -->
<view class="form-item">
<view class="reminder-icon">🔔</view>
<text class="reminder-text">{{ reminderText }}</text>
</view>
</scroll-view>
</view>
</template>
<script setup>
import { ref, computed } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
// 事件数据
const eventData = ref({
title: '',
date: '',
startDate: '',
startHour: 0,
startMin: 0,
endDate: '',
endHour: 0,
endMin: 0,
allDay: false,
repeat: 'none',
description: '',
color: '#B3D9FF',
reminders: []
});
// 格式化时间
const formatTime = (hour, min) => {
const h = String(hour).padStart(2, '0');
const m = String(min || 0).padStart(2, '0');
return `${h}:${m}`;
};
// 格式化日期文本
const formatDateText = (dateStr) => {
if (!dateStr) return '';
const date = new Date(dateStr);
const month = date.getMonth() + 1;
const day = date.getDate();
const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
const weekday = weekdays[date.getDay()];
return `${month}月${day}日 ${weekday}`;
};
// 计算属性
const startTime = computed(() => {
return eventData.value.allDay ? '全天' : formatTime(eventData.value.startHour, eventData.value.startMin);
});
const endTime = computed(() => {
if (eventData.value.allDay) {
return '';
}
// 如果没有结束时间，使用开始时间+1小时
if (eventData.value.endHour === undefined && eventData.value.endMin === undefined) {
const startTotalMin = eventData.value.startHour * 60 + (eventData.value.startMin || 0);
const endTotalMin = startTotalMin + 60;
const endHour = Math.floor(endTotalMin / 60) % 24;
const endMin = endTotalMin % 60;
return formatTime(endHour, endMin);
}
return formatTime(eventData.value.endHour || eventData.value.startHour, eventData.value.endMin || eventData.value.startMin);
});
const startDateText = computed(() => {
const date = eventData.value.startDate || eventData.value.date;
return formatDateText(date);
});
const endDateText = computed(() => {
const date = eventData.value.endDate || eventData.value.startDate || eventData.value.date;
return formatDateText(date);
});
// 格式化提醒时间文本
const formatReminderTime = (reminder) => {
if (reminder.type === 'custom') {
return reminder.customText || '自定义时间';
}
const options = [
{ label: '开始时', value: 0 },
{ label: '开始前5分钟', value: 5 },
{ label: '开始前15分钟', value: 15 },
{ label: '开始前30分钟', value: 30 },
{ label: '开始前1小时', value: 60 },
{ label: '开始前2小时', value: 120 },
{ label: '开始前1天', value: 1440 },
{ label: '开始前2天', value: 2880 },
{ label: '开始前3天', value: 4320 }
];
const option = options.find(opt => opt.value === reminder.minutes);
return option ? option.label : `开始前${reminder.minutes}分钟`;
};
const reminderText = computed(() => {
if (!eventData.value.reminders || eventData.value.reminders.length === 0) {
return '不提醒';
}
if (eventData.value.reminders.length === 1) {
const reminder = eventData.value.reminders[0];
const timeText = formatReminderTime(reminder);
return `${timeText},应用弹窗提醒我`;
}
return `${eventData.value.reminders.length}个提醒,应用弹窗提醒我`;
});
// 重复选项
const repeatOptions = [
{ label: '不重复', value: 'none' },
{ label: '每天', value: 'daily' },
{ label: '每周', value: 'weekly' },
{ label: '每月', value: 'monthly' },
{ label: '每年', value: 'yearly' }
];
const repeatText = computed(() => {
const option = repeatOptions.find(opt => opt.value === eventData.value.repeat);
return option ? option.label : '不重复';
});
// 返回
const handleBack = () => {
uni.navigateBack();
};
// 页面加载时接收参数
onLoad((options) => {
// 从存储中获取事件数据
const storedEvent = uni.getStorageSync('eventDetailData');
if (storedEvent) {
// 处理事件数据，确保所有字段都有默认值
eventData.value = {
title: storedEvent.title || '',
date: storedEvent.date || storedEvent.startDate || '',
startDate: storedEvent.startDate || storedEvent.date || '',
startHour: storedEvent.startHour !== undefined ? storedEvent.startHour : 0,
startMin: storedEvent.startMin !== undefined ? storedEvent.startMin : 0,
endDate: storedEvent.endDate || storedEvent.startDate || storedEvent.date || '',
endHour: storedEvent.endHour !== undefined ? storedEvent.endHour : (storedEvent.startHour !== undefined ? storedEvent.startHour + 1 : 0),
endMin: storedEvent.endMin !== undefined ? storedEvent.endMin : (storedEvent.startMin !== undefined ? storedEvent.startMin : 0),
allDay: storedEvent.allDay || false,
repeat: storedEvent.repeat || 'none',
description: storedEvent.description || '',
color: storedEvent.color || '#B3D9FF',
reminders: storedEvent.reminders || []
};
// 清除存储
uni.removeStorageSync('eventDetailData');
} else {
// 如果没有数据，返回上一页
uni.showToast({
title: '未找到日程信息',
icon: 'none'
});
setTimeout(() => {
uni.navigateBack();
}, 1500);
}
});
</script>
<style lang="scss" scoped>
.event-detail-page {
min-height: 100vh;
background: #fff;
}
.custom-navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: #fff;
border-bottom: 1px solid #e5e5e5;
padding-top: var(--status-bar-height, 0);
}
.navbar-content {
height: 44px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
}
.nav-btn {
font-size: 16px;
color: #333;
padding: 8px;
}
.nav-title {
font-size: 17px;
font-weight: 600;
color: #333;
}
.content-scroll {
margin-top: calc(var(--status-bar-height, 0) + 45px);
height: calc(100vh - var(--status-bar-height, 0) - 45px);
}
.form-item {
padding: 16px;
border-bottom: 1px solid #f5f5f5;
display: flex;
align-items: center;
}
.title-text {
font-size: 18px;
font-weight: 500;
color: #333;
width: 100%;
}
.time-section {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 16px;
}
.time-item {
flex: 1;
display: flex;
align-items: center;
gap: 12px;
}
.time-icon {
font-size: 20px;
}
.time-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
}
.time-value {
font-size: 24px;
font-weight: 600;
color: #333;
}
.time-date {
font-size: 12px;
color: #999;
}
.time-separator {
margin: 0 16px;
font-size: 20px;
color: #ccc;
}
.label {
font-size: 16px;
color: #333;
flex: 1;
}
.value-text {
font-size: 16px;
color: #666;
}
.desc-icon {
font-size: 20px;
margin-right: 12px;
}
.desc-content {
flex: 1;
}
.desc-text {
font-size: 16px;
color: #333;
line-height: 1.5;
}
.desc-placeholder {
font-size: 16px;
color: #999;
}
.color-dot {
width: 20px;
height: 20px;
border-radius: 50%;
margin-right: 12px;
}
.reminder-icon {
font-size: 20px;
margin-right: 12px;
}
.reminder-text {
flex: 1;
font-size: 16px;
color: #333;
}
</style>