日程提醒

pages.json

@@ -20,6 +20,20 @@
 				"navigationBarTitleText": "新建日程",
 				"navigationStyle": "custom"
 			}
+		},
+		{
+			"path": "pages/reminder-setup/index",
+			"style": {
+				"navigationBarTitleText": "日程提醒",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/reminder-time-select/index",
+			"style": {
+				"navigationBarTitleText": "日程提醒",
+				"navigationStyle": "custom"
+			}
 		}
 	],
 

pages/add-event/index.vue

@@ -72,7 +72,7 @@
       </view>
 
       <!-- 提醒设置 -->
-      <view class="form-item clickable-item" @click="showReminderPicker = true">
+      <view class="form-item clickable-item" @click="openReminderSetup">
         <view class="reminder-icon">🔔</view>
         <text class="reminder-text">{{ reminderText }}</text>
         <text class="arrow">›</text>
@@ -232,34 +232,12 @@
       </view>
     </view>
 
-    <!-- 提醒选择弹窗 -->
-    <view v-if="showReminderPicker" class="modal-mask" @click="showReminderPicker = false">
-      <view class="modal-content" @click.stop>
-        <view class="modal-title">提醒设置</view>
-        <view class="reminder-options">
-          <view 
-            v-for="item in reminderOptions" 
-            :key="item.value"
-            class="reminder-option"
-            :class="{ active: formData.reminder === item.value }"
-            @click="selectReminder(item.value)"
-          >
-            <text>{{ item.label }}</text>
-            <text v-if="formData.reminder === item.value" class="check">✓</text>
-          </view>
-        </view>
-        <view class="modal-buttons">
-          <button class="modal-btn" @click="showReminderPicker = false">取消</button>
-          <button class="modal-btn primary" @click="showReminderPicker = false">确定</button>
-        </view>
-      </view>
-    </view>
   </view>
 </template>
 
 <script setup>
 import { ref, computed } from 'vue';
-import { onLoad } from '@dcloudio/uni-app';
+import { onLoad, onShow } from '@dcloudio/uni-app';
 
 // 表单数据
 const formData = ref({
@@ -274,7 +252,7 @@ const formData = ref({
   repeat: 'none',
   description: '',
   color: '#B3D9FF',
-  reminder: 15 // 提前多少分钟提醒
+  reminders: [] // 提醒列表，支持多个提醒
 });
 
 // 显示状态
@@ -285,7 +263,6 @@ const showEndDatePicker = ref(false);
 const showDescInput = ref(false);
 const showColorPicker = ref(false);
 const showRepeatPicker = ref(false);
-const showReminderPicker = ref(false);
 
 // 临时数据（用于弹窗暂存）
 const tempRepeat = ref('none');
@@ -321,16 +298,6 @@ const repeatOptions = [
   { label: '每年', value: 'yearly' }
 ];
 
-// 提醒选项
-const reminderOptions = [
-  { label: '不提醒', value: 0 },
-  { label: '开始时', value: 0 },
-  { label: '开始前5分钟', value: 5 },
-  { label: '开始前15分钟', value: 15 },
-  { label: '开始前30分钟', value: 30 },
-  { label: '开始前1小时', value: 60 },
-  { label: '开始前1天', value: 1440 }
-];
 
 // 格式化时间
 const formatTime = (hour, min) => {
@@ -403,17 +370,38 @@ const closeEndPicker = () => {
   showEndTimePicker.value = false;
 };
 
+// 格式化提醒时间文本
+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 (formData.value.reminder === 0) {
+  if (formData.value.reminders.length === 0) {
     return '不提醒';
   }
-  if (formData.value.reminder === 1440) {
+  if (formData.value.reminders.length === 1) {
-    return '开始前1天,应用弹窗提醒我';
+    const reminder = formData.value.reminders[0];
+    const timeText = formatReminderTime(reminder);
+    return `${timeText},应用弹窗提醒我`;
   }
-  if (formData.value.reminder === 60) {
+  return `${formData.value.reminders.length}个提醒,应用弹窗提醒我`;
-    return `开始前1小时,应用弹窗提醒我`;
-  }
-  return `开始前${formData.value.reminder}分钟,应用弹窗提醒我`;
 });
 
 const repeatText = computed(() => {
@@ -577,9 +565,14 @@ const handleConfirmRepeat = () => {
   showRepeatPicker.value = false;
 };
 
-// 选择提醒
+// 打开提醒设置页面
-const selectReminder = (value) => {
+const openReminderSetup = () => {
-  formData.value.reminder = value;
+  // 将当前提醒列表保存到存储中
+  uni.setStorageSync('reminderList', formData.value.reminders);
+  
+  uni.navigateTo({
+    url: '/pages/reminder-setup/index'
+  });
 };
 
 // 取消
@@ -609,7 +602,7 @@ const handleSave = () => {
     allDay: formData.value.allDay,
     repeat: formData.value.repeat,
     description: formData.value.description,
-    reminder: formData.value.reminder
+    reminders: formData.value.reminders
   };
 
   // 使用全局存储传递数据，在首页的 onShow 中读取
@@ -624,6 +617,15 @@ onLoad((options) => {
   const dateStr = options?.date || '';
   initDates(dateStr);
 });
+
+// 页面显示时，从提醒设置页面接收更新的提醒列表
+onShow(() => {
+  // 从存储中获取更新后的提醒列表
+  const savedReminders = uni.getStorageSync('reminderList');
+  if (savedReminders && Array.isArray(savedReminders)) {
+    formData.value.reminders = [...savedReminders];
+  }
+});
 </script>
 
 <style lang="scss" scoped>

pages/reminder-setup/index.vue

@@ -0,0 +1,283 @@
+<template>
+  <view class="reminder-setup-page">
+    <!-- 自定义导航栏 -->
+    <view class="custom-navbar">
+      <view class="navbar-content">
+        <text class="nav-btn" @click="handleCancel">‹</text>
+        <text class="nav-title">日程提醒</text>
+        <text class="nav-btn nav-btn-primary" @click="handleDone">完成</text>
+      </view>
+    </view>
+
+    <!-- 提醒列表 -->
+    <scroll-view class="content-scroll" scroll-y>
+      <view class="reminder-list">
+        <view 
+          v-for="(reminder, index) in reminders" 
+          :key="index"
+          class="reminder-item"
+        >
+          <view class="reminder-content" @click="editReminder(index)">
+            <text class="reminder-name">提醒{{ index + 1 }}</text>
+            <text class="reminder-time">{{ formatReminderTime(reminder) }}</text>
+            <text class="arrow">›</text>
+          </view>
+          <view class="reminder-actions">
+            <text class="delete-btn" @click.stop="deleteReminder(index)">删除</text>
+          </view>
+        </view>
+
+        <!-- 添加提醒按钮 -->
+        <view class="add-reminder-btn" @click="addReminder">
+          <text class="add-icon">+</text>
+          <text class="add-text">添加提醒</text>
+        </view>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { onLoad, onShow } from '@dcloudio/uni-app';
+
+// 提醒列表数据
+const reminders = ref([]);
+
+// 格式化提醒时间文本
+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 addReminder = () => {
+  uni.navigateTo({
+    url: '/pages/reminder-time-select/index?action=add&index=' + reminders.value.length
+  });
+};
+
+// 编辑提醒
+const editReminder = (index) => {
+  const reminder = reminders.value[index];
+  const params = {
+    action: 'edit',
+    index: index,
+    minutes: reminder.minutes || 0,
+    type: reminder.type || 'preset'
+  };
+  
+  if (reminder.type === 'custom') {
+    params.customText = reminder.customText || '';
+    params.customMinutes = reminder.customMinutes || 0;
+  }
+  
+  const queryString = Object.keys(params)
+    .map(key => `${key}=${encodeURIComponent(params[key])}`)
+    .join('&');
+  
+  uni.navigateTo({
+    url: '/pages/reminder-time-select/index?' + queryString
+  });
+};
+
+// 删除提醒
+const deleteReminder = (index) => {
+  uni.showModal({
+    title: '确认删除',
+    content: '确定要删除这个提醒吗？',
+    success: (res) => {
+      if (res.confirm) {
+        reminders.value.splice(index, 1);
+        saveReminders();
+      }
+    }
+  });
+};
+
+// 保存提醒列表
+const saveReminders = () => {
+  // 通过存储传递数据回上一页
+  uni.setStorageSync('reminderList', reminders.value);
+};
+
+// 取消
+const handleCancel = () => {
+  uni.navigateBack();
+};
+
+// 完成
+const handleDone = () => {
+  saveReminders();
+  uni.navigateBack();
+};
+
+// 页面加载和显示
+onLoad((options) => {
+  // 从存储中获取提醒列表
+  const savedReminders = uni.getStorageSync('reminderList');
+  if (savedReminders && Array.isArray(savedReminders) && savedReminders.length > 0) {
+    reminders.value = [...savedReminders];
+  } else {
+    // 如果没有提醒列表，添加默认的提前15分钟提醒
+    reminders.value = [{
+      type: 'preset',
+      minutes: 15
+    }];
+    saveReminders();
+  }
+});
+
+onShow(() => {
+  // 从存储中获取更新的提醒（如果从时间选择页面返回）
+  const updatedReminder = uni.getStorageSync('updatedReminder');
+  if (updatedReminder) {
+    uni.removeStorageSync('updatedReminder');
+    
+    if (updatedReminder.action === 'add') {
+      reminders.value.push(updatedReminder.reminder);
+    } else if (updatedReminder.action === 'edit') {
+      reminders.value[updatedReminder.index] = updatedReminder.reminder;
+    }
+    
+    // 保存更新后的提醒列表
+    saveReminders();
+  } else {
+    // 如果没有更新的提醒，从存储中重新获取提醒列表（以防其他页面修改）
+    const savedReminders = uni.getStorageSync('reminderList');
+    if (savedReminders && Array.isArray(savedReminders) && savedReminders.length > 0) {
+      reminders.value = [...savedReminders];
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.reminder-setup-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: 20px;
+  color: #333;
+  padding: 8px;
+  min-width: 44px;
+}
+
+.nav-btn-primary {
+  color: #2885ff;
+  font-size: 16px;
+}
+
+.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);
+}
+
+.reminder-list {
+  padding: 0;
+}
+
+.reminder-item {
+  display: flex;
+  align-items: center;
+  padding: 16px;
+  border-bottom: 1px solid #f5f5f5;
+}
+
+.reminder-content {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.reminder-name {
+  font-size: 16px;
+  color: #333;
+  min-width: 60px;
+}
+
+.reminder-time {
+  flex: 1;
+  font-size: 16px;
+  color: #666;
+}
+
+.arrow {
+  font-size: 20px;
+  color: #ccc;
+  margin-left: auto;
+}
+
+.reminder-actions {
+  margin-left: 12px;
+}
+
+.delete-btn {
+  font-size: 16px;
+  color: #ff4444;
+  padding: 8px 12px;
+}
+
+.add-reminder-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px 16px;
+  color: #2885ff;
+  gap: 8px;
+}
+
+.add-icon {
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.add-text {
+  font-size: 16px;
+}
+</style>
+

pages/reminder-time-select/index.vue

@@ -0,0 +1,326 @@
+<template>
+  <view class="reminder-time-select-page">
+    <!-- 自定义导航栏 -->
+    <view class="custom-navbar">
+      <view class="navbar-content">
+        <text class="nav-btn" @click="handleCancel">‹</text>
+        <text class="nav-title">日程提醒</text>
+        <text class="nav-btn" style="opacity: 0; min-width: 44px;"></text>
+      </view>
+    </view>
+
+    <!-- 时间选项列表 -->
+    <scroll-view class="content-scroll" scroll-y>
+      <view class="time-options">
+        <view 
+          v-for="option in timeOptions" 
+          :key="option.value"
+          class="time-option"
+          :class="{ active: selectedValue === option.value && !isCustom }"
+          @click="selectTime(option.value)"
+        >
+          <text class="time-label">{{ option.label }}</text>
+          <text v-if="selectedValue === option.value && !isCustom" class="check">✓</text>
+        </view>
+
+        <!-- 自定义时间 -->
+        <view 
+          class="time-option custom-option"
+          :class="{ active: isCustom }"
+          @click="openCustomTime"
+        >
+          <text class="time-label">自定义时间</text>
+          <text class="arrow">›</text>
+        </view>
+      </view>
+    </scroll-view>
+
+    <!-- 自定义时间弹窗 -->
+    <view v-if="showCustomModal" class="modal-mask" @click="showCustomModal = false">
+      <view class="modal-content" @click.stop>
+        <view class="modal-title">自定义时间</view>
+        <view class="custom-time-content">
+          <view class="custom-input-group">
+            <text class="input-label">提前时间（分钟）</text>
+            <input 
+              v-model="customMinutes" 
+              type="number" 
+              class="custom-input"
+              placeholder="请输入分钟数"
+            />
+          </view>
+          <view class="custom-input-group">
+            <text class="input-label">显示文本</text>
+            <input 
+              v-model="customText" 
+              class="custom-input"
+              placeholder="例如：开始前2小时"
+            />
+          </view>
+        </view>
+        <view class="modal-buttons">
+          <button class="modal-btn" @click="showCustomModal = false">取消</button>
+          <button class="modal-btn primary" @click="confirmCustomTime">确定</button>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { onLoad } from '@dcloudio/uni-app';
+
+// 时间选项
+const timeOptions = [
+  { 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 selectedValue = ref(15);
+const isCustom = ref(false);
+const showCustomModal = ref(false);
+const customMinutes = ref('');
+const customText = ref('');
+const action = ref('add'); // add 或 edit
+const reminderIndex = ref(0);
+
+// 选择时间
+const selectTime = (value) => {
+  selectedValue.value = value;
+  isCustom.value = false;
+  // 立即保存并返回
+  saveAndReturn();
+};
+
+// 打开自定义时间
+const openCustomTime = () => {
+  showCustomModal.value = true;
+  // 如果已经是自定义，填充现有值（从 onLoad 中已设置）
+};
+
+// 确认自定义时间
+const confirmCustomTime = () => {
+  if (!customMinutes.value || !customText.value.trim()) {
+    uni.showToast({
+      title: '请填写完整信息',
+      icon: 'none'
+    });
+    return;
+  }
+  
+  isCustom.value = true;
+  selectedValue.value = parseInt(customMinutes.value);
+  showCustomModal.value = false;
+  // 保存并返回
+  saveAndReturn();
+};
+
+// 保存并返回
+const saveAndReturn = () => {
+  const reminder = {
+    type: isCustom.value ? 'custom' : 'preset',
+    minutes: selectedValue.value
+  };
+  
+  if (isCustom.value) {
+    reminder.customText = customText.value;
+    reminder.customMinutes = parseInt(customMinutes.value);
+  }
+  
+  // 通过存储传递数据
+  uni.setStorageSync('updatedReminder', {
+    action: action.value,
+    index: reminderIndex.value,
+    reminder: reminder
+  });
+  
+  uni.navigateBack();
+};
+
+// 取消
+const handleCancel = () => {
+  uni.navigateBack();
+};
+
+// 页面加载
+onLoad((options) => {
+  action.value = options.action || 'add';
+  reminderIndex.value = parseInt(options.index || 0);
+  
+  if (options.type === 'custom') {
+    isCustom.value = true;
+    customMinutes.value = options.customMinutes || '';
+    customText.value = options.customText || '';
+    selectedValue.value = parseInt(options.customMinutes || 0);
+  } else {
+    selectedValue.value = parseInt(options.minutes || 15);
+    isCustom.value = false;
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.reminder-time-select-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: 20px;
+  color: #333;
+  padding: 8px;
+  min-width: 44px;
+}
+
+.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);
+}
+
+.time-options {
+  padding: 0;
+}
+
+.time-option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+  border-bottom: 1px solid #f5f5f5;
+}
+
+.time-option.active {
+  color: #2885ff;
+}
+
+.time-label {
+  font-size: 16px;
+  color: #333;
+}
+
+.time-option.active .time-label {
+  color: #2885ff;
+}
+
+.check {
+  color: #2885ff;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.arrow {
+  font-size: 20px;
+  color: #ccc;
+}
+
+.custom-option.active .arrow {
+  color: #2885ff;
+}
+
+/* 弹窗样式 */
+.modal-mask {
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2000;
+}
+
+.modal-content {
+  background: #fff;
+  border-radius: 12px;
+  padding: 24px;
+  width: 80%;
+  max-width: 500px;
+}
+
+.modal-title {
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: 20px;
+  text-align: center;
+}
+
+.custom-time-content {
+  margin-bottom: 20px;
+}
+
+.custom-input-group {
+  margin-bottom: 16px;
+}
+
+.input-label {
+  display: block;
+  font-size: 14px;
+  color: #666;
+  margin-bottom: 8px;
+}
+
+.custom-input {
+  width: 100%;
+  padding: 12px;
+  border: 1px solid #e5e5e5;
+  border-radius: 8px;
+  font-size: 16px;
+}
+
+.modal-buttons {
+  display: flex;
+  justify-content: flex-end;
+  gap: 16px;
+  margin-top: 20px;
+}
+
+.modal-btn {
+  padding: 10px 24px;
+  border: none;
+  background: #f5f5f5;
+  border-radius: 8px;
+  font-size: 16px;
+  color: #333;
+}
+
+.modal-btn.primary {
+  background: #2885ff;
+  color: #fff;
+}
+</style>
+