cfc/cfc-frontend/pages/mind/traditional-mirror.vue

<template>
  <view class="mirror-container">
    <!-- 加载状态 -->
    <view class="loading-state" v-if="loading">
      <text>加载中...</text>
    </view>

    <template v-if="!loading && dataLoaded">
      <!-- 八字四柱 -->
      <view class="mirror-section">
        <view class="section-header">
          <text class="section-icon">&#x2637;</text>
          <text class="section-title">八字四柱</text>
        </view>
        <view class="bazi-grid" v-if="eightChars">
          <view class="bazi-column" v-for="(pillar, key) in eightChars" :key="key">
            <text class="bazi-pillar-label">{{ pillarLabel(key) }}</text>
            <text class="bazi-pillar-value">{{ pillar }}</text>
          </view>
        </view>
        <view class="empty-data" v-else>
          <text>暂未设置出生信息，无法排八字</text>
        </view>
      </view>

      <!-- 五行能量 -->
      <view class="mirror-section">
        <view class="section-header">
          <text class="section-icon">&#x267E;</text>
          <text class="section-title">五行能量</text>
        </view>
        <view class="wuxing-list" v-if="wuxingData">
          <view class="wuxing-item" v-for="wx in wuxingData" :key="wx.key">
            <text class="wuxing-label">{{ wx.label }}</text>
            <view class="wuxing-bar-track">
              <view class="wuxing-bar-fill" :style="{ width: wx.value + '%', background: wx.color }"></view>
            </view>
            <text class="wuxing-value">{{ wx.value }}%</text>
          </view>
        </view>

        <!-- 今日能量文 -->
        <view class="energy-card" v-if="wuxingReading">
          <view class="energy-header">
            <text class="energy-icon">&#x2728;</text>
            <text class="energy-label">今日能量文</text>
          </view>
          <view class="energy-divider"></view>
          <text class="energy-quote" v-if="wuxingReading.personalTrait">{{ wuxingReading.personalTrait }}</text>
          <text class="energy-advice" v-if="wuxingReading.mindGrowthAdvice">{{ wuxingReading.mindGrowthAdvice }}</text>
          <view class="energy-footer">
            <text class="energy-footer-dot"></text>
            <text class="energy-footer-dot"></text>
            <text class="energy-footer-dot"></text>
          </view>
        </view>
      </view>

      <!-- 太阳星座 -->
      <view class="mirror-section" v-if="zodiac">
        <view class="section-header">
          <text class="section-icon">&#x2600;</text>
          <text class="section-title">太阳星座</text>
        </view>
        <view class="zodiac-display">
          <text class="zodiac-name">{{ zodiac }}</text>
        </view>
      </view>

      <!-- 生命灵数 -->
      <view class="mirror-section" v-if="numSoulData">
        <view class="section-header">
          <text class="section-icon">&#x1F52E;</text>
          <text class="section-title">生命灵数</text>
        </view>
        <view class="numsoul-display">
          <view class="numsoul-number" :style="{ background: numSoulData.colorHex || '#FF6B9D' }">
            <text class="numsoul-num">{{ lifeNumber }}</text>
          </view>
          <view class="numsoul-info">
            <text class="numsoul-title">{{ numSoulData.title || '' }}</text>
            <text class="numsoul-keywords" v-if="numSoulData.keywords">{{ numSoulData.keywords }}</text>
            <text class="numsoul-advice" v-if="numSoulData.mindGrowthAdvice">{{ numSoulData.mindGrowthAdvice }}</text>
          </view>
        </view>
      </view>
    </template>

    <!-- 无数据 -->
    <view class="empty-state" v-if="!loading && !dataLoaded">
      <text class="empty-icon">&#x1F4AD;</text>
      <text class="empty-text">暂无传统文化数据</text>
    </view>
  </view>
</template>

<script>
import config from '../../config'

export default {
  data() {
    return {
      loading: true,
      dataLoaded: false,
      eightChars: null,
      wuxingElements: null,
      zodiac: '',
      lifeNumber: null,
      wuxingReading: null,
      numSoulData: null,
      wuxingConfig: {
        wood: { label: '木', color: '#10B981' },
        fire: { label: '火', color: '#FF6B9D' },
        earth: { label: '土', color: '#FF8C42' },
        metal: { label: '金', color: '#6366F1' },
        water: { label: '水', color: '#3B82F6' }
      },
      pillarLabels: { year: '年柱', month: '月柱', day: '日柱', hour: '时柱' }
    }
  },

  computed: {
    wuxingData() {
      if (!this.wuxingElements) return null
      var keys = ['wood', 'fire', 'earth', 'metal', 'water']
      var result = []
      for (var i = 0; i < keys.length; i++) {
        var k = keys[i]
        if (this.wuxingElements[k] !== undefined) {
          result.push({
            key: k,
            label: this.wuxingConfig[k].label,
            color: this.wuxingConfig[k].color,
            value: this.wuxingElements[k]
          })
        }
      }
      return result.sort(function(a, b) { return b.value - a.value })
    }
  },

  onLoad() {
    this.loadData()
  },

  methods: {
    loadData() {
      var self = this
      var memberId = this.$mp.query.memberId || uni.getStorageSync('currentChildId')
      if (!memberId) {
        // Try to get from storage
        memberId = uni.getStorageSync('currentChildId')
      }
      if (!memberId) {
        self.loading = false
        return
      }

      uni.request({
        url: config.API_BASE_URL + '/api/mind/traditional/mirror',
        method: 'POST',
        data: { memberId: memberId, memberType: 'child' },
        success: function(res) {
          self.loading = false
          if (res.data && res.data.code === 200 && res.data.data) {
            var d = res.data.data
            self.eightChars = d.eightCharacters || null
            self.wuxingElements = d.wuxingElements || null
            self.zodiac = d.zodiac || ''
            self.lifeNumber = d.lifeNumber || null
            self.wuxingReading = d.wuxingReading || null
            self.numSoulData = d.numSoul || null
            self.dataLoaded = !!(self.eightChars || self.wuxingElements || self.zodiac || self.numSoulData)
          } else {
            self.dataLoaded = false
          }
        },
        fail: function() {
          self.loading = false
        }
      })
    },

    pillarLabel(key) {
      return this.pillarLabels[key] || key
    }
  }
}
</script>

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

.loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120rpx 0;
  color: #999;
  font-size: 28rpx;
}

.mirror-section {
  margin: 24rpx 32rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 28rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04);
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.section-icon {
  font-size: 36rpx;
  margin-right: 12rpx;
}

.section-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
}

.bazi-grid {
  display: flex;
  justify-content: space-around;
  padding: 16rpx 0;
}

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

.bazi-pillar-label {
  font-size: 22rpx;
  color: #999;
  margin-bottom: 8rpx;
}

.bazi-pillar-value {
  font-size: 36rpx;
  font-weight: 700;
  color: #8B5CF6;
  background: #F5F0FF;
  padding: 12rpx 16rpx;
  border-radius: 12rpx;
}

.wuxing-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.wuxing-item {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.wuxing-label {
  font-size: 28rpx;
  font-weight: 600;
  width: 48rpx;
  text-align: center;
}

.wuxing-bar-track {
  flex: 1;
  height: 24rpx;
  background: #F0F0F0;
  border-radius: 12rpx;
  overflow: hidden;
}

.wuxing-bar-fill {
  height: 100%;
  border-radius: 12rpx;
}

.wuxing-value {
  font-size: 24rpx;
  color: #666;
  width: 60rpx;
  text-align: right;
}

.energy-card {
  margin-top: 24rpx;
  padding: 28rpx 24rpx;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  border-radius: 20rpx;
  position: relative;
  overflow: hidden;
}

.energy-card::before {
  content: '';
  position: absolute;
  top: -60rpx;
  right: -60rpx;
  width: 200rpx;
  height: 200rpx;
  background: radial-gradient(circle, rgba(255,215,0,0.15) 0%, transparent 70%);
  border-radius: 50%;
}

.energy-card::after {
  content: '';
  position: absolute;
  bottom: -40rpx;
  left: -40rpx;
  width: 160rpx;
  height: 160rpx;
  background: radial-gradient(circle, rgba(99,102,241,0.12) 0%, transparent 70%);
  border-radius: 50%;
}

.energy-header {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
  position: relative;
  z-index: 1;
}

.energy-icon {
  font-size: 36rpx;
  margin-right: 12rpx;
}

.energy-label {
  font-size: 30rpx;
  font-weight: 700;
  background: linear-gradient(135deg, #F59E0B, #FF6B9D);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.energy-divider {
  height: 2rpx;
  background: linear-gradient(90deg, rgba(255,215,0,0.5), rgba(255,107,157,0.3), transparent);
  margin-bottom: 20rpx;
  position: relative;
  z-index: 1;
}

.energy-quote {
  font-size: 28rpx;
  color: #E2E8F0;
  line-height: 1.8;
  display: block;
  margin-bottom: 16rpx;
  position: relative;
  z-index: 1;
  padding-left: 24rpx;
  letter-spacing: 1rpx;
}

.energy-quote::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4rpx;
  bottom: 4rpx;
  width: 4rpx;
  background: linear-gradient(180deg, #F59E0B, #FF6B9D);
  border-radius: 2rpx;
}

.energy-advice {
  font-size: 26rpx;
  color: #94A3B8;
  line-height: 1.7;
  display: block;
  position: relative;
  z-index: 1;
  padding: 16rpx 20rpx;
  background: rgba(255,255,255,0.05);
  border-radius: 12rpx;
  border: 1rpx solid rgba(255,255,255,0.08);
}

.energy-footer {
  display: flex;
  justify-content: center;
  gap: 12rpx;
  margin-top: 20rpx;
  position: relative;
  z-index: 1;
}

.energy-footer-dot {
  width: 8rpx;
  height: 8rpx;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
}

.energy-footer-dot:nth-child(2) {
  background: rgba(255,215,0,0.6);
  width: 10rpx;
  height: 10rpx;
}

.zodiac-display {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20rpx;
}

.zodiac-name {
  font-size: 40rpx;
  font-weight: 700;
  color: #F59E0B;
}

.numsoul-display {
  display: flex;
  gap: 24rpx;
  align-items: center;
}

.numsoul-number {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.numsoul-num {
  font-size: 44rpx;
  font-weight: 700;
  color: #fff;
}

.numsoul-info {
  flex: 1;
}

.numsoul-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
  display: block;
}

.numsoul-keywords {
  font-size: 24rpx;
  color: #666;
  display: block;
  margin-top: 6rpx;
}

.numsoul-advice {
  font-size: 24rpx;
  color: #8B5CF6;
  display: block;
  margin-top: 8rpx;
  line-height: 1.5;
}

.empty-data {
  padding: 20rpx;
  text-align: center;
  color: #999;
  font-size: 24rpx;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 120rpx 32rpx;
}

.empty-icon {
  font-size: 80rpx;
  margin-bottom: 20rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}
</style>