385 lines
9.4 KiB
Vue
385 lines
9.4 KiB
Vue
<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>
|
|
|