sweet-hut-ui/src/components/Plan/PlanCard.vue

<template>
  <div class="plan-card card-item" :class="{ 'plan-complete': props.plan.completed }">
    <div v-if="props.plan?.completed"
         class="ribbon" style="background-color: #80c480">
      <span>已完成</span>
    </div>
    <div v-else-if="props.plan?.isTop"
         class="ribbon" style="background-color: #D14D49">
      <span>置顶</span>
    </div>
    <div v-else-if="props.plan?.priority === 0"
         class="ribbon" style="background-color: #D14D49">
      <span>高</span>
    </div>
    <div v-else-if="props.plan?.priority === 1"
         class="ribbon" style="background-color: #009FA8">
      <span>中</span>
    </div>

    <div class="plan-check">
      <el-checkbox v-model="props.plan.completed"
                   :true-value="1" :false-value="0"
                   @change="changeCompleteEvent"/>
    </div>

    <div class="plan-body" @click="editPlanClick">
      <span class="plan-title">{{ props.plan.title }}</span>

      <span v-if="props.plan?.content" class="plan-content">
        {{ props.plan.content }}
      </span>

      <div v-if="props.plan?.date" class="plan-time">
        <div class="time"
             :style="{'color': isBeforeToday(props.plan.date) ? '#FF0000' : '#009FA8'}">
          <span v-if="props.plan.date">
            {{ props.plan.date }}
          </span>
          <span v-if="props.plan.startTime">
            {{ props.plan.startTime }}
          </span>
          <span v-if="props.plan.endTime">
            ~ {{ props.plan.endTime }}
          </span>
        </div>
        <el-icon v-if=" props.plan?.alterTime">
          <el-tooltip effect="dark" :content="props.plan.alterTime" placement="bottom">
            <AlarmClock/>
          </el-tooltip>
        </el-icon>
        <div v-if=" props.plan?.date" class="remain">
          <el-tooltip effect="dark" :content="getRemainDays(props.plan.date)" placement="bottom">
            <el-icon><Clock/></el-icon>
          </el-tooltip>
        </div>
      </div>

      <div v-if=" props.plan?.tag" class="plan-tag">
        <el-tag>{{ props.plan.tag }}</el-tag>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, PropType } from 'vue'
import { AlarmClock, Clock } from '@element-plus/icons-vue'
import { IPlanInfo } from '@/types/plan.ts'
import { getRemainDays, isBeforeToday } from '@/utils/home/planUtil.ts'
import { usePlanStore } from '@/store/plan.ts'
import { useRouter } from 'vue-router'
import { commonElMessageBox } from 'vue3-common/utils/elUtil'

const planStore = usePlanStore()
const router = useRouter()

const props = defineProps({
  plan: {
    required: true,
    type: Object as PropType<IPlanInfo>
  }
})

const editPlanClick = async () => {
  planStore.planApiType = 'UPDATE'
  planStore.currentPlan = props.plan as IPlanInfo
  await router.push({ name: 'PlanDetailId', params: { id: planStore.currentPlan.id } })
}

const changeCompleteEvent = (value: boolean) => {
  if (value) {
    commonElMessageBox('请确认已经完成该计划？').then(() => {
      planStore.setPlanStatus(props.plan?.id as number, value)
    }).catch(() => {
      planStore.refreshInfo()
    })
  } else {
    planStore.setPlanStatus(props.plan?.id as number, value)
  }
}
</script>

<style lang="scss">
$plan-card-height: 70px;

.plan-complete {
  background-color: #808080;
  opacity: 0.5;
}

.plan-card {
  position: relative;
  min-height: $plan-card-height;
  padding: 10px;
  display: flex;
  overflow: hidden;

  .plan-check {
    align-self: center;
    width: 30px;

    .el-checkbox {
      .el-checkbox__inner {
        height: 20px;
        width: 20px;
      }

      .el-checkbox__inner:after {
        height: 10px;
        width: 6px;
      }
      // transform: scale(1.5);
    }
  }

  .plan-body {
    flex-grow: 1;

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1vh;

    .plan-title {
      font-weight: bold;
      font-size: large;
    }

    .plan-content {
      font-size: small;
      color: darkgrey;
    }

    .plan-time {
      display: flex;
      align-items: center;
      gap: 10px;

      .time {
        display: flex;
        gap: 5px;
        font-size: small;
      }

      .remain {
        display: flex;
        align-items: center;
        gap: 5px;

        span {
          font-size: small;
          color: darkgrey;
        }
      }
    }

    .plan-tag {
      display: flex;
      align-items: center;
      gap: 10px;
    }
  }

  .ribbon {
    overflow: hidden;
    white-space: nowrap;
    position: absolute;
    right: -45px;
    top: 10px;
    transform: rotate(45deg);
    box-shadow: 3px 3px 3px #CFCFCF;

    span {
      color: #FFFFFF;
      display: block;
      font-weight: bold;
      padding: 5px 50px;
      text-align: center;
      text-shadow: 0 0 5px #444;
    }
  }
}

.plan-card:hover {
  cursor: pointer;
}
</style>