From 1247dc1dd9c8fb24390553de7fc808371c96944a Mon Sep 17 00:00:00 2001
From: WindowBird <13870814+windows-bird@user.noreply.gitee.com>
Date: Wed, 5 Nov 2025 10:07:59 +0800
Subject: [PATCH] =?UTF-8?q?=E7=82=B9=E5=87=BB=E6=9F=A5=E7=9C=8B=E6=97=A5?=
 =?UTF-8?q?=E7=A8=8B=E8=AF=A6=E7=BB=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/ScheduleBlock.vue |  19 +-
 pages.json                   |   7 +
 pages/event-detail/index.vue | 384 +++++++++++++++++++++++++++++++++++
 3 files changed, 409 insertions(+), 1 deletion(-)
 create mode 100644 pages/event-detail/index.vue

diff --git a/components/ScheduleBlock.vue b/components/ScheduleBlock.vue
index 45dc1f8..84b2c8b 100644
--- a/components/ScheduleBlock.vue
+++ b/components/ScheduleBlock.vue
@@ -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;
diff --git a/pages.json b/pages.json
index f449907..f83a889 100644
--- a/pages.json
+++ b/pages.json
@@ -34,6 +34,13 @@
 				"navigationBarTitleText": "日程提醒",
 				"navigationStyle": "custom"
 			}
+		},
+		{
+			"path": "pages/event-detail/index",
+			"style": {
+				"navigationBarTitleText": "日程详情",
+				"navigationStyle": "custom"
+			}
 		}
 	],
 
diff --git a/pages/event-detail/index.vue b/pages/event-detail/index.vue
new file mode 100644
index 0000000..be1806a
--- /dev/null
+++ b/pages/event-detail/index.vue
@@ -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>
+