EmailBill/Web/src/views/budgetV2/modules/SavingsBudgetContent.vue

<template>
  <!-- 存款计划列表 -->
  <div class="budget-list">
    <template v-if="budgets?.length > 0">
      <BudgetCard
        v-for="budget in budgets"
        :key="budget.id"
        :budget="budget"
        :progress-color="getProgressColor(budget)"
        :percent-class="{ income: budget.current / budget.limit >= 1 }"
        :period-label="getPeriodLabel(budget.type)"
        style="margin: 0 12px 12px"
      >
        <template #amount-info>
          <div class="info-item">
            <div class="label">
              已存
            </div>
            <div class="value income">
              ¥{{ formatMoney(budget.current) }}
            </div>
          </div>
          <div class="info-item">
            <div class="label">
              计划存款
            </div>
            <div class="value">
              ¥{{ formatMoney(budget.limit) }}
            </div>
          </div>
          <div class="info-item">
            <div class="label">
              还差
            </div>
            <div class="value expense">
              ¥{{ formatMoney(Math.max(0, budget.limit - budget.current)) }}
            </div>
          </div>
        </template>

        <template #footer>
          <div class="card-footer-actions">
            <van-button
              size="small"
              icon="arrow-left"
              plain
              type="primary"
              @click.stop="$emit('savings-nav', budget, -1)"
            />
            <span class="current-date-label">
              {{ getSavingsDateLabel(budget) }}
            </span>
            <van-button
              size="small"
              icon="arrow"
              plain
              type="primary"
              icon-position="right"
              :disabled="disabledSavingsNextNav(budget)"
              @click.stop="$emit('savings-nav', budget, 1)"
            />
          </div>
        </template>
      </BudgetCard>
    </template>
    <van-empty
      v-else
      description="暂无存款计划"
    />
  </div>
</template>

<script setup>
import BudgetCard from '@/components/Budget/BudgetCard.vue'
import { BudgetPeriodType } from '@/constants/enums'

// Props
defineProps({
  budgets: {
    type: Array,
    default: () => []
  }
})

// Emits
defineEmits(['savings-nav'])

// 辅助函数
const formatMoney = (val) => {
  return parseFloat(val || 0).toLocaleString(undefined, {
    minimumFractionDigits: 0,
    maximumFractionDigits: 0
  })
}

const getPeriodLabel = (type) => {
  if (type === BudgetPeriodType.Month) {
    return '月度'
  }
  if (type === BudgetPeriodType.Year) {
    return '年度'
  }
  return '周期'
}

const getSavingsDateLabel = (budget) => {
  if (!budget.periodStart) {
    return ''
  }
  const date = new Date(budget.periodStart)
  if (budget.type === BudgetPeriodType.Year) {
    return `${date.getFullYear()}年`
  } else {
    return `${date.getFullYear()}年${date.getMonth() + 1}月`
  }
}

const disabledSavingsNextNav = (budget) => {
  if (!budget.periodStart) {
    return true
  }
  const date = new Date(budget.periodStart)
  const now = new Date()
  if (budget.type === BudgetPeriodType.Year) {
    return date.getFullYear() === now.getFullYear()
  } else {
    return date.getFullYear() === now.getFullYear() && date.getMonth() === now.getMonth()
  }
}

const getProgressColor = (budget) => {
  if (!budget.limit || budget.limit === 0) {
    return 'var(--van-primary-color)'
  }

  const ratio = Math.min(Math.max(budget.current / budget.limit, 0), 1)

  const interpolate = (start, end, t) => {
    return Math.round(start + (end - start) * t)
  }

  const getGradientColor = (value, stops) => {
    let startStop = stops[0]
    let endStop = stops[stops.length - 1]

    for (let i = 0; i < stops.length - 1; i++) {
      if (value >= stops[i].p && value <= stops[i + 1].p) {
        startStop = stops[i]
        endStop = stops[i + 1]
        break
      }
    }

    const range = endStop.p - startStop.p
    const t = (value - startStop.p) / range

    const r = interpolate(startStop.c.r, endStop.c.r, t)
    const g = interpolate(startStop.c.g, endStop.c.g, t)
    const b = interpolate(startStop.c.b, endStop.c.b, t)

    return `rgb(${r}, ${g}, ${b})`
  }

  const stops = [
    { p: 0, c: { r: 245, g: 34, b: 45 } },
    { p: 0.45, c: { r: 255, g: 204, b: 204 } },
    { p: 0.5, c: { r: 240, g: 242, b: 245 } },
    { p: 0.55, c: { r: 186, g: 231, b: 255 } },
    { p: 1, c: { r: 24, g: 144, b: 255 } }
  ]

  return getGradientColor(ratio, stops)
}
</script>

<style scoped lang="scss">
.budget-list {
  padding-top: 8px;
  padding-bottom: 20px;
}

.card-footer-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--van-border-color);
}

.current-date-label {
  font-size: 14px;
  font-weight: bold;
  color: var(--van-text-color);
}

.info-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.info-item .label {
  font-size: 12px;
  color: var(--van-text-color-2);
  margin-bottom: 4px;
}

.info-item .value {
  font-size: 16px;
  font-weight: 600;
  font-family: DIN Alternate, system-ui;
}

.info-item .value.expense {
  color: var(--van-danger-color);
}

.info-item .value.income {
  color: var(--van-success-color);
}
</style>