cfc/cfc-frontend/pages/tianpan/index.vue

<template>
  <view class="tianpan-container">
    <!-- 自定义导航栏 -->
    <view class="custom-nav">
      <view class="nav-header">
        <text class="nav-title">家庭天盘</text>
        <picker mode="selector" :range="yearOptions" :value="yearIndex" @change="onYearChange">
          <view class="year-picker">
            <text class="year-text">{{ currentYear }}</text>
            <text class="picker-icon">▼</text>
          </view>
        </picker>
      </view>
      <view class="family-name" v-if="familyName">{{ familyName }}</view>
    </view>

    <!-- 天盘画布 -->
    <view class="canvas-wrapper">
      <canvas 
        type="2d" 
        id="tianpanCanvas" 
        class="tianpan-canvas"
        @touchend="onCanvasTouchEnd"
      ></canvas>
    </view>

    <!-- 标签栏 -->
    <view class="tab-bar">
      <view 
        class="tab-item" 
        :class="{ active: currentTab === 0 }"
        @click="switchTab(0)"
      >
        <text>任务</text>
      </view>
      <view 
        class="tab-item" 
        :class="{ active: currentTab === 1 }"
        @click="switchTab(1)"
      >
        <text>测评</text>
      </view>
      <view 
        class="tab-item" 
        :class="{ active: currentTab === 2 }"
        @click="switchTab(2)"
      >
        <text>预警</text>
      </view>
      <view 
        class="tab-item" 
        :class="{ active: currentTab === 3 }"
        @click="switchTab(3)"
      >
        <text>里程碑</text>
      </view>
    </view>

    <!-- 相关事项列表 -->
    <view class="related-items-list">
      <view 
        class="item-card" 
        v-for="item in currentItems" 
        :key="item.id"
        @click="onItemClick(item)"
      >
        <view class="item-icon">{{ item.icon || '📋' }}</view>
        <view class="item-content">
          <text class="item-title">{{ item.title }}</text>
          <text class="item-desc">{{ item.description || '' }}</text>
        </view>
        <view class="item-arrow">›</view>
      </view>
      <view class="empty-state" v-if="currentItems.length === 0">
        <text>暂无相关事项</text>
      </view>
    </view>

    <!-- 每日运势卡片 -->
    <view class="fortune-card" @click="goToDailyFortune">
      <view class="fortune-header">
        <text class="fortune-title">今日运势</text>
        <text class="fortune-date">{{ currentDate }}</text>
      </view>
      <view class="fortune-content">
        <text class="fortune-text">{{ dailyFortuneText || '点击查看今日家庭能量运势' }}</text>
      </view>
      <view class="fortune-arrow">查看详情 ›</view>
    </view>

    <!-- 成员详情弹窗 -->
    <view class="member-popup" v-if="showMemberPopup" @touchmove.stop>
      <view class="popup-overlay" @click="closeMemberPopup"></view>
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">{{ selectedMember.nickname || selectedMember.name }}</text>
          <text class="popup-close" @click="closeMemberPopup">×</text>
        </view>
        <view class="popup-body">
          <view class="member-info-row">
            <text class="info-label">生肖:</text>
            <text class="info-value">{{ selectedMember.zodiac || '-' }}</text>
          </view>
          <view class="member-info-row">
            <text class="info-label">星座:</text>
            <text class="info-value">{{ selectedMember.westernSign || '-' }}</text>
          </view>
          <view class="member-info-row">
            <text class="info-label">代际:</text>
            <text class="info-value">{{ selectedMember.generation || '-' }}</text>
          </view>
          <view class="energy-bars">
            <view class="energy-bar-item" v-for="energy in selectedMember.energy" :key="energy.type">
              <text class="energy-label">{{ energy.label }}</text>
              <view class="energy-bar">
                <view class="energy-fill" :style="{ width: energy.value + '%' }"></view>
              </view>
              <text class="energy-value">{{ energy.value }}</text>
            </view>
          </view>
        </view>
        <view class="popup-footer">
          <button class="detail-btn" @click="goToMemberDetail">查看详情</button>
        </view>
      </view>
    </view>

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

<script>
import { mapState, mapGetters, mapActions } from 'vuex'

export default {
  data: function() {
    return {
      currentYear: new Date().getFullYear(),
      yearOptions: [],
      yearIndex: 0,
      currentTab: 0,
      showMemberPopup: false,
      selectedMember: {},
      canvasContext: null,
      canvasWidth: 375,
      canvasHeight: 375,
      members: [],
      relationships: [],
      relatedItems: [],
      dailyFortuneText: '',
      currentDate: ''
    }
  },
  computed: {
    ...mapGetters('tianpan', ['members', 'relationships', 'familyWuxing', 'familyName']),
    ...mapState('tianpan', ['loading', 'error']),
    currentItems: function() {
      var tabMap = ['tasks', 'assessments', 'alerts', 'milestones']
      var items = this.relatedItems && this.relatedItems[tabMap[this.currentTab]] ? this.relatedItems[tabMap[this.currentTab]] : []
      return items
    }
  },
  onLoad: function() {
    this.initYearOptions()
    this.loadDashboardData()
    this.loadDailyFortune()
    this.loadRelatedItems()
  },
  onReady: function() {
    var query = uni.createSelectorQuery()
    query.select('#tianpanCanvas')
      .fields({ node: true, size: true })
      .exec(this.onCanvasReady)
  },
  methods: {
    ...mapActions('tianpan', ['loadDashboard', 'loadDailyFortune', 'loadRelatedItems']),
    
    initYearOptions: function() {
      var current = new Date().getFullYear()
      for (var i = current - 2; i <= current + 2; i++) {
        this.yearOptions.push(i)
        if (i === current) {
          this.yearIndex = this.yearOptions.length - 1
        }
      }
      this.currentYear = current
    },
    
    onYearChange: function(e) {
      var index = e.detail.value
      var year = this.yearOptions[index]
      if (year !== this.currentYear) {
        this.currentYear = year
        this.loadDashboardData()
      }
    },
    
    loadDashboardData: function() {
      var familyId = uni.getStorageSync('familyId')
      if (!familyId) {
        return
      }
      this.loadDashboard({ familyId: familyId, year: this.currentYear, daysAhead: 7 })
        .then(this.drawCanvas)
    },
    
    onCanvasReady: function(res) {
      if (!res || !res[0] || !res[0].node) {
        return
      }
      var ctx = res[0].node.getContext('2d')
      var dpr = uni.getSystemInfoSync().pixelRatio
      this.canvasContext = ctx
      this.canvasContext.scale(dpr, dpr)
      this.drawCanvas()
    },
    
    drawCanvas: function() {
      if (!this.canvasContext) {
        return
      }
      var ctx = this.canvasContext
      var w = this.canvasWidth
      var h = this.canvasHeight
      var cx = w / 2
      var cy = h / 2
      
      // 清空画布
      ctx.clearRect(0, 0, w, h)
      ctx.fillStyle = '#FFF8F0'
      ctx.fillRect(0, 0, w, h)
      
      // 获取数据
      var members = this.members || []
      var relationships = this.relationships || []
      
      // R0: 中心五维能量雷达图
      this.drawRadar(ctx, cx, cy, w * 0.11, members)
      
      // R1: 内圈成员节点
      this.drawMemberNodes(ctx, cx, cy, w * 0.18, members)
      
      // R2-R3: 外圈相关事项
      this.drawRelatedItems(ctx, cx, cy, w * 0.32, w * 0.46, members)
      
      // 绘制关系连线
      this.drawRelationshipLines(ctx, cx, cy, relationships)
    },
    
    drawRadar: function(ctx, cx, cy, r, members) {
      var axes = ['木', '火', '土', '金', '水']
      var angleStep = (Math.PI * 2) / 5
      
      // 绘制五边形背景
      ctx.beginPath()
      for (var i = 0; i < 5; i++) {
        var angle = i * angleStep - Math.PI / 2
        var x = cx + r * Math.cos(angle)
        var y = cy + r * Math.sin(angle)
        if (i === 0) {
          ctx.moveTo(x, y)
        } else {
          ctx.lineTo(x, y)
        }
      }
      ctx.closePath()
      ctx.fillStyle = 'rgba(249, 114, 22, 0.1)'
      ctx.fill()
      ctx.strokeStyle = '#F97316'
      ctx.lineWidth = 1
      ctx.stroke()
      
      // 绘制轴线
      for (var j = 0; j < 5; j++) {
        var angle = j * angleStep - Math.PI / 2
        var x = cx + r * Math.cos(angle)
        var y = cy + r * Math.sin(angle)
        ctx.beginPath()
        ctx.moveTo(cx, cy)
        ctx.lineTo(x, y)
        ctx.strokeStyle = 'rgba(249, 114, 22, 0.3)'
        ctx.stroke()
        
        // 绘制轴标签
        var labelX = cx + (r + 15) * Math.cos(angle)
        var labelY = cy + (r + 15) * Math.sin(angle)
        ctx.fillStyle = '#F97316'
        ctx.font = '12px sans-serif'
        ctx.textAlign = 'center'
        ctx.textBaseline = 'middle'
        ctx.fillText(axes[j], labelX, labelY)
      }
    },
    
    drawMemberNodes: function(ctx, cx, cy, r, members) {
      var angleStep = (Math.PI * 2) / (members.length || 1)
      
      for (var i = 0; i < members.length; i++) {
        var member = members[i]
        var angle = i * angleStep - Math.PI / 2
        var x = cx + r * Math.cos(angle)
        var y = cy + r * Math.sin(angle)
        
        // 绘制圆形节点
        ctx.beginPath()
        ctx.arc(x, y, 15, 0, Math.PI * 2)
        ctx.fillStyle = this.getMemberColor(member.effectiveRole)
        ctx.fill()
        ctx.strokeStyle = '#FFF'
        ctx.lineWidth = 2
        ctx.stroke()
        
        // 绘制名字
        ctx.fillStyle = '#FFF'
        ctx.font = '10px sans-serif'
        ctx.textAlign = 'center'
        ctx.textBaseline = 'middle'
        ctx.fillText(member.nickname || member.name, x, y)
        
        // 存储点击区域
        if (!this.memberHitAreas) {
          this.memberHitAreas = []
        }
        this.memberHitAreas.push({
          type: 'member',
          data: member,
          x: x,
          y: y,
          r: 15
        })
      }
    },
    
    drawRelatedItems: function(ctx, cx, cy, rInner, rOuter, members) {
      var items = this.relatedItems && this.relatedItems.tasks ? this.relatedItems.tasks : []
      var angleStep = (Math.PI * 2) / (items.length || 1)
      var r = (rInner + rOuter) / 2
      
      for (var i = 0; i < items.length; i++) {
        var item = items[i]
        var angle = i * angleStep - Math.PI / 2
        var x = cx + r * Math.cos(angle)
        var y = cy + r * Math.sin(angle)
        
        // 绘制 emoji
        ctx.font = '16px sans-serif'
        ctx.textAlign = 'center'
        ctx.textBaseline = 'middle'
        ctx.fillText(item.icon || '📋', x, y)
        
        // 存储点击区域
        if (!this.itemHitAreas) {
          this.itemHitAreas = []
        }
        this.itemHitAreas.push({
          type: 'item',
          data: item,
          x: x,
          y: y,
          r: 12
        })
      }
    },
    
    drawRelationshipLines: function(ctx, cx, cy, relationships) {
      for (var i = 0; i < relationships.length; i++) {
        var rel = relationships[i]
        if (!rel.fromMember || !rel.toMember) {
          continue
        }
        
        // 计算起点和终点
        var memberCount = this.members.length || 1
        var angleStep = (Math.PI * 2) / memberCount
        var r = this.canvasWidth * 0.18
        
        var fromIndex = -1
        var toIndex = -1
        for (var j = 0; j < this.members.length; j++) {
          if (this.members[j].id === rel.fromMember.id) {
            fromIndex = j
          }
          if (this.members[j].id === rel.toMember.id) {
            toIndex = j
          }
        }
        
        if (fromIndex < 0 || toIndex < 0) {
          continue
        }
        
        var fromAngle = fromIndex * angleStep - Math.PI / 2
        var toAngle = toIndex * angleStep - Math.PI / 2
        
        var x1 = cx + r * Math.cos(fromAngle)
        var y1 = cy + r * Math.sin(fromAngle)
        var x2 = cx + r * Math.cos(toAngle)
        var y2 = cy + r * Math.sin(toAngle)
        
        // 贝塞尔曲线
        ctx.beginPath()
        ctx.moveTo(x1, y1)
        var cx1 = (x1 + x2) / 2 + (y2 - y1) * 0.2
        var cy1 = (y1 + y2) / 2 - (x2 - x1) * 0.2
        ctx.quadraticCurveTo(cx1, cy1, x2, y2)
        
        // 根据分数设置颜色
        var score = rel.score || 0
        if (score >= 80) {
          ctx.strokeStyle = '#10B981'
        } else if (score >= 60) {
          ctx.strokeStyle = '#F59E0B'
        } else {
          ctx.strokeStyle = '#EF4444'
        }
        ctx.lineWidth = 2
        ctx.stroke()
      }
    },
    
    getMemberColor: function(role) {
      var colorMap = {
        'parent': '#F97316',
        'child': '#3B82F6',
        'teacher': '#8B5CF6'
      }
      return colorMap[role] || '#6B7280'
    },
    
    onCanvasTouchEnd: function(e) {
      if (!e || !e.changedTouches || !e.changedTouches[0]) {
        return
      }
      var touch = e.changedTouches[0]
      var x = touch.x
      var y = touch.y
      
      // 检测成员点击
      if (this.memberHitAreas) {
        for (var i = 0; i < this.memberHitAreas.length; i++) {
          var area = this.memberHitAreas[i]
          var dx = x - area.x
          var dy = y - area.y
          if (dx * dx + dy * dy <= area.r * area.r) {
            this.showMemberDetail(area.data)
            return
          }
        }
      }
      
      // 检测事项点击
      if (this.itemHitAreas) {
        for (var j = 0; j < this.itemHitAreas.length; j++) {
          var itemArea = this.itemHitAreas[j]
          var dx2 = x - itemArea.x
          var dy2 = y - itemArea.y
          if (dx2 * dx2 + dy2 * dy2 <= itemArea.r * itemArea.r) {
            this.onItemClick(itemArea.data)
            return
          }
        }
      }
    },
    
    showMemberDetail: function(member) {
      this.selectedMember = member
      this.showMemberPopup = true
    },
    
    closeMemberPopup: function() {
      this.showMemberPopup = false
      this.selectedMember = {}
    },
    
    goToMemberDetail: function() {
      if (!this.selectedMember || !this.selectedMember.id) {
        return
      }
      uni.navigateTo({
        url: '/pages/tianpan/member-detail?id=' + this.selectedMember.id
      })
      this.closeMemberPopup()
    },
    
    switchTab: function(index) {
      this.currentTab = index
    },
    
    onItemClick: function(item) {
      if (!item || !item.id) {
        return
      }
      // 根据类型跳转
      if (item.type === 'task') {
        uni.navigateTo({ url: '/pages/tasks/detail?id=' + item.id })
      } else if (item.type === 'assessment') {
        uni.navigateTo({ url: '/pages/assessment/detail?id=' + item.id })
      } else if (item.type === 'alert') {
        uni.navigateTo({ url: '/pages/health/alert-detail?id=' + item.id })
      } else if (item.type === 'milestone') {
        uni.navigateTo({ url: '/pages/family/milestone-detail?id=' + item.id })
      }
    },
    
    goToDailyFortune: function() {
      uni.navigateTo({
        url: '/pages/tianpan/daily-fortune'
      })
    },
    
    loadDailyFortune: function() {
      var familyId = uni.getStorageSync('familyId')
      if (!familyId) {
        return
      }
      var today = new Date()
      var dateStr = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate()
      this.loadDailyFortune({ familyId: familyId, date: dateStr })
        .then(this.setFortuneText)
    },
    
    setFortuneText: function(data) {
      if (data && data.advice) {
        this.dailyFortuneText = data.advice
      }
      var today = new Date()
      this.currentDate = today.getFullYear() + '年' + (today.getMonth() + 1) + '月' + today.getDate() + '日'
    },
    
    loadRelatedItems: function() {
      var familyId = uni.getStorageSync('familyId')
      if (!familyId) {
        return
      }
      this.loadRelatedItems({ familyId: familyId })
    }
  },
  watch: {
    members: function(newVal) {
      if (newVal && this.canvasContext) {
        this.drawCanvas()
      }
    },
    relationships: function(newVal) {
      if (newVal && this.canvasContext) {
        this.drawCanvas()
      }
    }
  }
}
</script>

<style>
.tianpan-container {
  min-height: 100vh;
  background: linear-gradient(180deg, #FFF8F0 0%, #FFFFFF 100%);
  padding-bottom: 20px;
}

/* 自定义导航栏 */
.custom-nav {
  background: linear-gradient(135deg, #F97316 0%, #FB923C 100%);
  padding: 44px 16px 12px;
  color: #FFFFFF;
}

.nav-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-title {
  font-size: 20px;
  font-weight: bold;
}

.year-picker {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.2);
  padding: 4px 12px;
  border-radius: 16px;
}

.year-text {
  font-size: 14px;
  margin-right: 4px;
}

.picker-icon {
  font-size: 10px;
}

.family-name {
  text-align: center;
  margin-top: 8px;
  font-size: 14px;
  opacity: 0.9;
}

/* 画布区域 */
.canvas-wrapper {
  display: flex;
  justify-content: center;
  padding: 20px 0;
}

.tianpan-canvas {
  width: 375px;
  height: 375px;
  background: #FFF8F0;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(249, 114, 22, 0.1);
}

/* 标签栏 */
.tab-bar {
  display: flex;
  justify-content: space-around;
  background: #FFFFFF;
  margin: 0 16px;
  padding: 12px 0;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.tab-item {
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 14px;
  color: #6B7280;
}

.tab-item.active {
  background: #F97316;
  color: #FFFFFF;
}

/* 相关事项列表 */
.related-items-list {
  padding: 16px;
}

.item-card {
  display: flex;
  align-items: center;
  background: #FFFFFF;
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.item-icon {
  font-size: 28px;
  margin-right: 12px;
}

.item-content {
  flex: 1;
}

.item-title {
  font-size: 16px;
  font-weight: 500;
  color: #1F2937;
  display: block;
  margin-bottom: 4px;
}

.item-desc {
  font-size: 12px;
  color: #9CA3AF;
  display: block;
}

.item-arrow {
  font-size: 20px;
  color: #D1D5DB;
}

.empty-state {
  text-align: center;
  padding: 40px 0;
  color: #9CA3AF;
  font-size: 14px;
}

/* 每日运势卡片 */
.fortune-card {
  margin: 16px;
  padding: 20px;
  background: linear-gradient(135deg, #FED7AA 0%, #FDBA74 100%);
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(249, 114, 22, 0.2);
}

.fortune-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.fortune-title {
  font-size: 18px;
  font-weight: bold;
  color: #7C2D12;
}

.fortune-date {
  font-size: 12px;
  color: #9A3412;
}

.fortune-content {
  margin-bottom: 12px;
}

.fortune-text {
  font-size: 14px;
  color: #9A3412;
  line-height: 1.6;
}

.fortune-arrow {
  text-align: right;
  font-size: 12px;
  color: #7C2D12;
}

/* 成员弹窗 */
.member-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
}

.popup-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

.popup-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #FFFFFF;
  border-radius: 20px 20px 0 0;
  padding: 24px;
  max-height: 70vh;
  overflow-y: auto;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.popup-title {
  font-size: 20px;
  font-weight: bold;
  color: #1F2937;
}

.popup-close {
  font-size: 28px;
  color: #9CA3AF;
  line-height: 1;
}

.popup-body {
  margin-bottom: 20px;
}

.member-info-row {
  display: flex;
  margin-bottom: 12px;
}

.info-label {
  width: 80px;
  color: #6B7280;
  font-size: 14px;
}

.info-value {
  flex: 1;
  color: #1F2937;
  font-size: 14px;
}

.energy-bars {
  margin-top: 20px;
}

.energy-bar-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.energy-label {
  width: 40px;
  color: #6B7280;
  font-size: 14px;
}

.energy-bar {
  flex: 1;
  height: 8px;
  background: #E5E7EB;
  border-radius: 4px;
  margin: 0 12px;
  overflow: hidden;
}

.energy-fill {
  height: 100%;
  background: linear-gradient(90deg, #F97316 0%, #FB923C 100%);
  border-radius: 4px;
}

.energy-value {
  width: 30px;
  text-align: right;
  color: #1F2937;
  font-size: 14px;
}

.popup-footer {
  display: flex;
  justify-content: center;
}

.detail-btn {
  background: linear-gradient(135deg, #F97316 0%, #FB923C 100%);
  color: #FFFFFF;
  border: none;
  padding: 12px 48px;
  border-radius: 24px;
  font-size: 16px;
}

/* 加载状态 */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #E5E7EB;
  border-top-color: #F97316;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
</style>