cfc/cfc-frontend/pages/tianpan/daily-fortune.vue

<template>
<view class="daily-fortune-page">
  <view class="nav-bar">
    <text class="nav-back" @click="goBack">←</text>
    <text class="nav-title">每日宜忌</text>
    <view class="nav-right"></view>
  </view>
  <view v-if="loading" class="loading-state"><text>加载中...</text></view>
  <view v-else-if="error" class="error-state"><text class="error-text">{{ error }}</text></view>
  <view v-else-if="fortune" class="content">
    <view class="date-banner">
      <text class="date-text">{{ fortune.date || todayStr }}</text>
      <text class="date-lunar" v-if="fortune.lunarDate">{{ fortune.lunarDate }}</text>
    </view>
    <view class="info-card" v-if="fortune.fiveElements">
      <view class="card-title-bar"><text class="card-title">今日五行</text></view>
      <view class="five-elements-display">
        <text class="fe-main">{{ fortune.fiveElements.main || '' }}</text>
        <text class="fe-detail" v-if="fortune.fiveElements.detail">{{ fortune.fiveElements.detail }}</text>
      </view>
    </view>
    <view class="info-card" v-if="fortune.auspicious && fortune.auspicious.length > 0">
      <view class="card-title-bar auspicious-bar"><text class="card-title">宜</text></view>
      <view class="item-tags">
        <view v-for="(item, idx) in fortune.auspicious" :key="idx" class="tag-item good">
          <text class="tag-text">{{ item }}</text>
        </view>
      </view>
    </view>
    <view class="info-card" v-if="fortune.inauspicious && fortune.inauspicious.length > 0">
      <view class="card-title-bar inauspicious-bar"><text class="card-title">忌</text></view>
      <view class="item-tags">
        <view v-for="(item, idx) in fortune.inauspicious" :key="idx" class="tag-item bad">
          <text class="tag-text">{{ item }}</text>
        </view>
      </view>
    </view>
    <view class="info-card" v-if="fortune.familyAdvice">
      <view class="card-title-bar"><text class="card-title">家庭建议</text></view>
      <view class="advice-content"><text class="advice-text">{{ fortune.familyAdvice }}</text></view>
    </view>
    <view class="info-card" v-if="fortune.focusMember">
      <view class="card-title-bar"><text class="card-title">今日关注</text></view>
      <view class="focus-member-card">
        <text class="focus-name">{{ fortune.focusMember.name }}</text>
        <text class="focus-tip">{{ fortune.focusMember.tip }}</text>
        <view v-if="fortune.focusMember.wuxingTip" class="focus-wuxing">
          <text class="wuxing-tip-text">{{ fortune.focusMember.wuxingTip }}</text>
        </view>
      </view>
    </view>
  </view>
</view>
</template>
<script>
export default {
  data: function() { return { fortune: null, loading: false, error: null, todayStr: '' } },
  onLoad: function() {
    var now = new Date()
    this.todayStr = now.getFullYear() + '-' + String(now.getMonth() + 1).padStart(2, '0') + '-' + String(now.getDate()).padStart(2, '0')
    this.loadDailyFortune()
  },
  methods: {
    loadDailyFortune: function() {
      var self = this
      self.loading = true; self.error = null
      self.$store.dispatch('tianpan/loadDailyFortune', { date: self.todayStr })
        .then(function(data) { self.fortune = data })
        .catch(function(e) { self.error = e.message || '加载失败' })
        .finally(function() { self.loading = false })
    },
    goBack: function() { uni.navigateBack() }
  }
}
</script>
<style scoped>
.daily-fortune-page { min-height: 100vh; background: #F3F4F6; }
.nav-bar { display: flex; align-items: center; justify-content: space-between; padding: 20px 16px 10px; background: #F97316; }
.nav-back { font-size: 18px; color: #FFF; }
.nav-title { font-size: 17px; font-weight: bold; color: #FFF; }
.nav-right { width: 40px; }
.loading-state, .error-state { padding: 60px 20px; display: flex; justify-content: center; align-items: center; }
.error-text { color: #EF4444; font-size: 14px; }
.content { padding: 12px; }
.date-banner { background: linear-gradient(135deg, #F97316, #FB923C); border-radius: 12px; padding: 20px; margin-bottom: 12px; text-align: center; }
.date-text { font-size: 22px; font-weight: bold; color: #FFF; display: block; }
.date-lunar { font-size: 13px; color: rgba(255,255,255,0.8); display: block; margin-top: 4px; }
.info-card { background: #FFF; border-radius: 12px; padding: 16px; margin-bottom: 12px; }
.card-title-bar { margin-bottom: 12px; border-bottom: 1px solid #F3F4F6; padding-bottom: 8px; display: flex; align-items: center; }
.auspicious-bar .card-title { color: #10B981; font-size: 15px; font-weight: bold; }
.inauspicious-bar .card-title { color: #EF4444; font-size: 15px; font-weight: bold; }
.card-title { font-size: 15px; font-weight: bold; color: #1F2937; }
.five-elements-display { text-align: center; padding: 8px 0; }
.fe-main { font-size: 28px; font-weight: bold; color: #F97316; display: block; }
.fe-detail { font-size: 13px; color: #9CA3AF; display: block; margin-top: 4px; }
.item-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-item { padding: 6px 14px; border-radius: 16px; }
.tag-item.good { background: #DCFCE7; }
.tag-item.bad { background: #FEE2E2; }
.tag-text { font-size: 13px; }
.tag-item.good .tag-text { color: #166534; }
.tag-item.bad .tag-text { color: #991B1B; }
.advice-content { padding: 4px 0; }
.advice-text { font-size: 14px; color: #374151; line-height: 1.7; }
.focus-member-card { display: flex; flex-direction: column; }
.focus-name { font-size: 16px; font-weight: bold; color: #F97316; margin-bottom: 4px; }
.focus-tip { font-size: 13px; color: #374151; line-height: 1.5; }
.focus-wuxing { margin-top: 8px; background: #FFF7ED; border-radius: 8px; padding: 8px; }
.wuxing-tip-text { font-size: 12px; color: #9CA3AF; }
</style>