优化日程界面
This commit is contained in:
@@ -0,0 +1,321 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user