OfficeSystem/pages/event/reminder-setup/index.vue

<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/event/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/event/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>