topfans/frontend/pages/dashboard/components/IncomeCurve.vue

<template>
  <view class="income-curve-card">
    <text class="curve-title">七日收益曲线</text>

    <!-- 错误态 -->
    <view v-if="error" class="error-box" @tap="$emit('retry')">
      <text class="error-text">加载失败，点击重试</text>
    </view>

    <!-- 骨架态 -->
    <view v-else-if="loading || !points || points.length === 0" class="skeleton-chart"></view>

    <!-- 图表 -->
    <view v-else class="chart-wrap">
      <view class="chart-header">
        <text class="chart-peak-value" v-if="peak">+ {{ peak.income }}</text>
        <text class="chart-peak-date" v-if="peak">{{ peak.date }}</text>
      </view>
      <view class="chart-canvas">
        <!-- #ifdef H5 -->
        <qiun-data-charts
          type="barline"
          :opts="chartOpts"
          :chartData="chartData"
          :ontouch="true"
          canvas2d
          :ontap="handleChartTap"
        />
        <!-- #endif -->
        <!-- #ifdef APP-PLUS || MP-WEIXIN -->
        <view class="chart-placeholder-fallback">
          <text>📊 {{ points.length }} 天数据</text>
          <text class="chart-fallback-sub">App 端图表组件配置中</text>
        </view>
        <!-- #endif -->
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  points: { type: Array, default: () => [] },
  loading: { type: Boolean, default: false },
  error: { type: String, default: null },
})
defineEmits(['retry'])

const peak = computed(() => props.points.find((p) => p.is_peak) || null)

let chartData = null
let chartOpts = null
// #ifdef H5
chartData = computed(() => {
  const categories = props.points.map((p) => p.date.slice(5))
  const barData = props.points.map((p) => p.income)
  const lineData = props.points.map((p) => p.income)
  return {
    categories,
    series: [
      { name: '收益', data: barData, color: '#FFDF77' },
      { name: '趋势', data: lineData, color: '#1BAFEE', type: 'line' },
    ],
  }
})

chartOpts = {
  color: ['#FFCC14', '#1BAFEE'],
  padding: [16, 16, 8, 16],
  dataLabel: false,
  legend: { show: false },
  xAxis: { disableGrid: true, axisLine: false, fontColor: '#FFFFFF', fontSize: 9 },
  yAxis: { data: [{ min: 0 }], disableGrid: true, axisLine: false, fontColor: '#FFFFFF', fontSize: 9 },
  extra: {
    bar: { type: 'group', width: 18, linear: true, color: ['#FFDF77', '#B984FF', '#FF8183'] },
    line: { type: 'curve', width: 2, activeType: 'hollow' },
  },
}
// #endif

function handleChartTap(e) {
  console.log('[IncomeCurve] chart tap', e)
}
</script>

<style lang="scss" scoped>
.income-curve-card {
  background: linear-gradient(135deg, #FFDF77 0%, #8E95E2 40%, #F48CFF 100%);
  border-radius: 22rpx;
  padding: 24rpx;
  margin: 24rpx 0;
  box-shadow: 0px 4px 4px rgba(189, 50, 50, 0.25);
  min-height: 360rpx;
}

.curve-title {
  display: block;
  font-size: 28rpx;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 16rpx;
  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
}

.chart-wrap {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 17rpx;
  padding: 16rpx;
  backdrop-filter: blur(10px);
}

.chart-header {
  display: flex;
  align-items: baseline;
  gap: 12rpx;
  margin-bottom: 12rpx;
}

.chart-peak-value {
  font-size: 40rpx;
  font-weight: 700;
  color: #FFFABD;
  text-shadow: -1px 1px 4px rgba(206, 9, 9, 0.84);
  font-family: 'Baloo Bhai', sans-serif;
}

.chart-peak-date {
  font-size: 18rpx;
  color: rgba(255, 255, 255, 0.8);
}

.chart-canvas {
  width: 100%;
  height: 240rpx;
}

.chart-placeholder-fallback {
  height: 240rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 28rpx;
}

.chart-fallback-sub {
  margin-top: 8rpx;
  font-size: 22rpx;
  opacity: 0.7;
}

.skeleton-chart {
  height: 360rpx;
  border-radius: 17rpx;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.1) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
}

.error-box {
  height: 360rpx;
  border-radius: 17rpx;
  background: rgba(255, 100, 100, 0.15);
  border: 2rpx solid rgba(255, 100, 100, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.error-text {
  color: #ff8080;
  font-size: 28rpx;
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
</style>