322 lines
6.7 KiB
Vue
322 lines
6.7 KiB
Vue
<template>
|
|
<view class="page">
|
|
<view v-if="loading" class="state-box">
|
|
<text class="state-text">加载中...</text>
|
|
</view>
|
|
<template v-else-if="item">
|
|
<view class="detail-card">
|
|
<view class="content-block">
|
|
<view class="content-header">
|
|
<text class="info-label">日程内容</text>
|
|
<view class="status-tag" :class="item.completed ? 'done' : 'pending'">
|
|
<text>{{ item.completed ? '已完成' : '待办' }}</text>
|
|
</view>
|
|
</view>
|
|
<text class="content-text">{{ item.content || '无内容' }}</text>
|
|
</view>
|
|
|
|
<view class="info-row">
|
|
<text class="info-label">发生时间</text>
|
|
<text class="info-value">{{ formatDate(item.datetime, true) }}</text>
|
|
</view>
|
|
|
|
<view class="info-row channel-row">
|
|
<text class="info-label">提醒渠道</text>
|
|
<view class="channel-tags">
|
|
<text
|
|
v-for="channel in item.remindChannels"
|
|
:key="channel"
|
|
class="channel-tag"
|
|
>{{ getRemindChannelLabel(channel) }}</text>
|
|
<text v-if="!item.remindChannels?.length" class="info-value muted">未设置</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="info-row">
|
|
<text class="info-label">提前提醒时间</text>
|
|
<text class="info-value">{{ remindText }}</text>
|
|
</view>
|
|
|
|
<view class="meta-row">
|
|
<text>创建于 {{ formatDate(item.createdAt, true) }}</text>
|
|
<text v-if="item.updatedAt !== item.createdAt">更新于 {{ formatDate(item.updatedAt, true) }}</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<view v-if="item" class="footer">
|
|
<view class="btn-complete" @tap="onToggleComplete">
|
|
<FaIcon :name="item.completed ? 'rotate-left' : 'check'" :color="item.completed ? '#606266' : '#3c9cff'" :size="16" />
|
|
<text>{{ item.completed ? '标为待办' : '标记完成' }}</text>
|
|
</view>
|
|
<view v-if="!item.completed" class="btn-edit" @tap="openEdit">
|
|
<FaIcon name="pen-to-square" color="#3c9cff" :size="16" />
|
|
<text>编辑</text>
|
|
</view>
|
|
<view class="btn-delete" @tap="onDelete">
|
|
<FaIcon name="trash-can" color="#f56c6c" :size="16" />
|
|
<text>删除</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed } from 'vue'
|
|
import { onLoad, onShow } from '@dcloudio/uni-app'
|
|
import {
|
|
getSchedule,
|
|
deleteSchedule,
|
|
toggleScheduleComplete,
|
|
getRemindChannelLabel,
|
|
getRemindMinutesLabel
|
|
} from '@/api/schedule.js'
|
|
import { formatDate } from '@/utils/date.js'
|
|
|
|
const scheduleId = ref('')
|
|
const item = ref(null)
|
|
const loading = ref(false)
|
|
|
|
const remindText = computed(() => {
|
|
if (!item.value) return ''
|
|
return getRemindMinutesLabel(item.value.remindMinutes)
|
|
})
|
|
|
|
onLoad((query) => {
|
|
if (query?.id) {
|
|
scheduleId.value = query.id
|
|
loadDetail()
|
|
}
|
|
})
|
|
|
|
onShow(() => {
|
|
if (scheduleId.value) loadDetail()
|
|
})
|
|
|
|
async function loadDetail() {
|
|
loading.value = true
|
|
try {
|
|
const data = await getSchedule(scheduleId.value)
|
|
if (!data) {
|
|
uni.showToast({ title: '日程不存在', icon: 'none' })
|
|
setTimeout(() => uni.navigateBack(), 800)
|
|
return
|
|
}
|
|
item.value = data
|
|
} catch (e) {
|
|
uni.showToast({ title: '加载失败', icon: 'none' })
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
function openEdit() {
|
|
uni.navigateTo({ url: `/pages/tools/schedule/edit?id=${scheduleId.value}` })
|
|
}
|
|
|
|
async function onToggleComplete() {
|
|
if (!item.value) return
|
|
try {
|
|
const updated = await toggleScheduleComplete(item.value.id)
|
|
item.value = updated
|
|
uni.showToast({
|
|
title: updated.completed ? '已标记完成' : '已标为待办',
|
|
icon: 'none'
|
|
})
|
|
} catch (e) {
|
|
uni.showToast({ title: '操作失败', icon: 'none' })
|
|
}
|
|
}
|
|
|
|
function onDelete() {
|
|
const summary = (item.value?.content || '').split('\n')[0] || '该日程'
|
|
uni.showModal({
|
|
title: '删除日程',
|
|
content: `确定删除「${summary}」吗？`,
|
|
success: async (res) => {
|
|
if (!res.confirm) return
|
|
try {
|
|
await deleteSchedule(scheduleId.value)
|
|
uni.showToast({ title: '已删除', icon: 'success' })
|
|
setTimeout(() => uni.navigateBack(), 400)
|
|
} catch (e) {
|
|
uni.showToast({ title: '删除失败', icon: 'none' })
|
|
}
|
|
}
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '@/src/styles/page-common.scss';
|
|
|
|
.page {
|
|
min-height: 100vh;
|
|
background: $color-bg-page;
|
|
padding: 24rpx $page-padding-x;
|
|
padding-bottom: calc(180rpx + env(safe-area-inset-bottom));
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.detail-card {
|
|
@include card;
|
|
padding: 32rpx 28rpx;
|
|
}
|
|
|
|
.content-block {
|
|
padding-bottom: 24rpx;
|
|
margin-bottom: 8rpx;
|
|
|
|
.info-label {
|
|
display: block;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
}
|
|
|
|
.content-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
.status-tag {
|
|
padding: 4rpx 12rpx;
|
|
border-radius: $radius-sm;
|
|
font-size: 22rpx;
|
|
font-weight: 500;
|
|
|
|
&.pending {
|
|
background: $color-primary-bg;
|
|
color: $color-primary;
|
|
}
|
|
|
|
&.done {
|
|
background: #f0f9eb;
|
|
color: #67c23a;
|
|
}
|
|
}
|
|
|
|
.content-text {
|
|
display: block;
|
|
font-size: 30rpx;
|
|
color: $color-text;
|
|
line-height: 1.7;
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.info-row {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 24rpx;
|
|
padding: 20rpx 0;
|
|
border-top: 1rpx solid $color-divider;
|
|
}
|
|
|
|
.channel-row {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.info-label {
|
|
font-size: 26rpx;
|
|
color: $color-text-muted;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.info-value {
|
|
font-size: 28rpx;
|
|
color: $color-text;
|
|
text-align: right;
|
|
|
|
&.muted {
|
|
color: $color-text-muted;
|
|
}
|
|
}
|
|
|
|
.channel-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
gap: 10rpx;
|
|
flex: 1;
|
|
}
|
|
|
|
.channel-tag {
|
|
font-size: 24rpx;
|
|
color: $color-primary;
|
|
background: $color-primary-bg;
|
|
padding: 6rpx 16rpx;
|
|
border-radius: $radius-sm;
|
|
}
|
|
|
|
.meta-row {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8rpx;
|
|
padding-top: 24rpx;
|
|
margin-top: 8rpx;
|
|
border-top: 1rpx solid $color-divider;
|
|
font-size: 24rpx;
|
|
color: $color-text-muted;
|
|
}
|
|
|
|
.footer {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
display: flex;
|
|
gap: 16rpx;
|
|
padding: 20rpx $page-padding-x;
|
|
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
|
background: $color-card;
|
|
border-top: 1rpx solid $color-border;
|
|
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
.btn-complete,
|
|
.btn-edit,
|
|
.btn-delete {
|
|
flex: 1;
|
|
height: 88rpx;
|
|
border-radius: $radius-md;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.btn-complete {
|
|
background: $color-primary-bg;
|
|
color: $color-primary;
|
|
}
|
|
|
|
.btn-edit {
|
|
background: $color-bg-page;
|
|
color: $color-primary;
|
|
border: 1rpx solid $color-primary-bg;
|
|
}
|
|
|
|
.btn-delete {
|
|
background: $color-bg-page;
|
|
color: #f56c6c;
|
|
border: 1rpx solid #fde2e2;
|
|
}
|
|
|
|
.state-box {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 160rpx 0;
|
|
}
|
|
|
|
.state-text {
|
|
font-size: 28rpx;
|
|
color: $color-text-muted;
|
|
}
|
|
</style>
|