cfc/cfc-frontend/components/TaskReminder.vue

<template>
  <view class="reminder-card" v-if="hasReminders">
    <view class="reminder-header">
      <text class="reminder-title">{{ title }}</text>
      <text class="reminder-count">{{ count }}项</text>
    </view>
    <view class="reminder-list">
      <view class="reminder-item" v-for="task in tasks" :key="task.id" @click="goToTask(task)">
        <text class="task-name">{{ task.title }}</text>
        <text class="task-deadline">截止: {{ formatTime(task.deadline) }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    title: { type: String, default: '待提醒任务' },
    tasks: { type: Array, default: () => [] }
  },
  computed: {
    hasReminders() {
      return this.tasks && this.tasks.length > 0
    },
    count() {
      return this.tasks ? this.tasks.length : 0
    }
  },
  methods: {
    formatTime(dateStr) {
      if (!dateStr) return ''
      const d = new Date(dateStr)
      const h = d.getHours().toString().padStart(2, '0')
      const m = d.getMinutes().toString().padStart(2, '0')
      return h + ':' + m
    },
    goToTask(task) {
      uni.navigateTo({ url: '/pages/tasks/tasks?highlight=' + task.id })
    }
  }
}
</script>

<style scoped>
.reminder-card {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border-radius: 16rpx;
  padding: 20rpx 24rpx;
  margin-bottom: 16rpx;
}
.reminder-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12rpx;
}
.reminder-title {
  font-size: 26rpx;
  font-weight: bold;
  color: #92400e;
}
.reminder-count {
  font-size: 22rpx;
  color: #92400e;
  background: rgba(255,255,255,0.5);
  padding: 4rpx 16rpx;
  border-radius: 20rpx;
}
.reminder-list {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}
.reminder-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255,255,255,0.6);
  border-radius: 10rpx;
  padding: 12rpx 16rpx;
}
.task-name {
  font-size: 24rpx;
  color: #333;
  flex: 1;
}
.task-deadline {
  font-size: 20rpx;
  color: #b45309;
}
</style>