cfc/cfc-frontend/pages/energy/detail.vue

<template>
  <view class="container">
    <!-- 头部：维度信息 -->
    <view class="dim-header" v-if="dimInfo">
      <view class="dim-icon-wrap" :class="'dim-icon--' + elementColor">
        <text class="dim-icon">{{ dimInfo.icon }}</text>
      </view>
      <text class="dim-name">{{ dimInfo.name }}</text>
      <text class="dim-element">{{ dimInfo.element }} · {{ dimInfo.code }}</text>
      <view class="dim-energy">
        <text class="dim-energy-value">{{ dimEnergy }}</text>
        <text class="dim-energy-label">能量值</text>
      </view>
    </view>

    <!-- 加载状态 -->
    <BaseLoading :loading="loading" text="加载中..." />

    <!-- 流水列表 -->
    <view class="logs-section" v-if="!loading">
      <view class="section-header">
        <text class="section-title">📋 能量流水</text>
      </view>

      <view class="log-item" v-for="(log, idx) in logs" :key="idx" v-if="logs.length > 0">
        <view class="log-left">
          <text :class="log.amount > 0 ? 'log-amount earn' : 'log-amount spend'">
            {{ log.amount > 0 ? '+' : '' }}{{ log.amount }}
          </text>
          <text class="log-desc">{{ log.description || '能量变动' }}</text>
        </view>
        <view class="log-right">
          <text class="log-balance">余额 {{ log.balanceAfter }}</text>
          <text class="log-time">{{ formatTime(log.createdAt) }}</text>
        </view>
      </view>

      <BaseEmpty v-if="logs.length === 0" icon="💧" title="暂无能量流水" description="完成任务可以获取能量值" />

      <view class="load-more" v-if="hasMore" @click="loadMore">
        <text>加载更多...</text>
      </view>
    </view>
  </view>
</template>

<script>
import { getEnergyLogs } from '../../utils/api.js'
import BaseLoading from '../../components/BaseLoading.vue'
import BaseEmpty from '../../components/BaseEmpty.vue'

var ELEMENT_MAP = {
  'mind': 'fire', 'body': 'earth', 'wisdom': 'metal',
  'action': 'wood', 'wealth': 'water'
}

export default {
  components: { BaseLoading, BaseEmpty },
  data() {
    return {
      childId: '',
      code: '',
      dimInfo: null,
      dimEnergy: 0,
      loading: true,
      logs: [],
      page: 1,
      pageSize: 20,
      hasMore: true,
      elementColor: 'fire'
    }
  },
  onLoad(options) {
    if (options.childId) this.childId = options.childId
    if (options.code) {
      this.code = options.code
      this.elementColor = ELEMENT_MAP[options.code] || 'fire'
    }
    // 如果有传入 dimData（URL编码的JSON），解析维度信息
    if (options.dimData) {
      try {
        var parsed = JSON.parse(decodeURIComponent(options.dimData))
        if (parsed) {
          this.dimInfo = parsed
          this.dimEnergy = parsed.energy || 0
        }
      } catch (e) { /* ignore */ }
    }
    this.loadLogs()
  },
  methods: {
    async loadLogs() {
      this.loading = true
      try {
        var res = await getEnergyLogs(this.childId, this.code, this.page, this.pageSize)
        if (res && res.data) {
          var records = res.data.records || []
          if (this.page === 1) {
            this.logs = records
          } else {
            this.logs = this.logs.concat(records)
          }
          this.hasMore = records.length >= this.pageSize
        }
      } catch (e) {
        console.log('获取能量流水失败', e)
      } finally {
        this.loading = false
      }
    },
    loadMore() {
      this.page++
      this.loadLogs()
    },
    formatTime(dateStr) {
      if (!dateStr) return ''
      var d = new Date(dateStr)
      var month = d.getMonth() + 1
      var day = d.getDate()
      var hour = d.getHours()
      var min = d.getMinutes()
      if (month < 10) month = '0' + month
      if (day < 10) day = '0' + day
      if (hour < 10) hour = '0' + hour
      if (min < 10) min = '0' + min
      return month + '-' + day + ' ' + hour + ':' + min
    }
  }
}
</script>

<style scoped>
.container {
  min-height: 100vh;
  background: #0F1B2D;
  padding-bottom: 40rpx;
}

/* ---- 头部 ---- */
.dim-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60rpx 0 40rpx;
  position: relative;
}
.dim-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10%;
  width: 80%;
  height: 1rpx;
  background: linear-gradient(90deg, transparent, rgba(143,197,232,0.2), transparent);
}
.dim-icon-wrap {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16rpx;
  box-shadow: 0 0 40rpx rgba(255,255,255,0.15);
}
.dim-icon--fire { background: linear-gradient(135deg, #FF6B35, #E65100); }
.dim-icon--water { background: linear-gradient(135deg, #42A5F5, #1565C0); }
.dim-icon--earth { background: linear-gradient(135deg, #8D6E63, #5D4037); }
.dim-icon--metal { background: linear-gradient(135deg, #FFD700, #FF8F00); }
.dim-icon--wood { background: linear-gradient(135deg, #4CAF50, #2E7D32); }
.dim-icon { font-size: 44rpx; }
.dim-name { font-size: 36rpx; font-weight: bold; color: #FFFFFF; }
.dim-element { font-size: 22rpx; color: rgba(143,197,232,0.5); margin-top: 6rpx; }
.dim-energy {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20rpx;
}
.dim-energy-value { font-size: 56rpx; font-weight: bold; color: #F97316; }
.dim-energy-label { font-size: 20rpx; color: rgba(143,197,232,0.4); }

/* ---- 流水 ---- */
.logs-section {
  padding: 30rpx 30rpx 0;
}
.section-header { margin-bottom: 20rpx; }
.section-title { font-size: 28rpx; font-weight: bold; color: #8FC5E8; }

.log-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 20rpx;
  background: rgba(255,255,255,0.04);
  border-radius: 16rpx;
  margin-bottom: 12rpx;
}
.log-left { display: flex; flex-direction: column; }
.log-amount { font-size: 32rpx; font-weight: bold; }
.log-amount.earn { color: #4CAF50; }
.log-amount.spend { color: #FF6B35; }
.log-desc { font-size: 22rpx; color: rgba(255,255,255,0.5); margin-top: 4rpx; }
.log-right { display: flex; flex-direction: column; align-items: flex-end; }
.log-balance { font-size: 22rpx; color: rgba(255,255,255,0.4); }
.log-time { font-size: 20rpx; color: rgba(255,255,255,0.25); margin-top: 4rpx; }

.load-more {
  text-align: center;
  padding: 24rpx;
  color: rgba(143,197,232,0.4);
  font-size: 24rpx;
}
</style>