fix

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

@@ -0,0 +1,222 @@
+<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>