327 lines
6.9 KiB
Vue
327 lines
6.9 KiB
Vue
|
<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>
|
|||
|
|
|