cfc/cfc-frontend/pages/mind-detail/duo-compatibility.vue

<template>
  <view class="duo-container">
    <view class="loading-state" v-if="loading">
      <text>加载中...</text>
    </view>

    <template v-if="!loading && dataLoaded">
      <!-- 双人头像区 -->
      <view class="duo-header">
        <view class="person-card">
          <view class="person-avatar">{{ name1.charAt(0) }}</view>
          <text class="person-name">{{ name1 }}</text>
        </view>
        <view class="compatibility-badge">
          <text class="compatibility-score">{{ overallScore }}</text>
          <text class="compatibility-label">兼容分</text>
        </view>
        <view class="person-card">
          <view class="person-avatar">{{ name2.charAt(0) }}</view>
          <text class="person-name">{{ name2 }}</text>
        </view>
      </view>

      <!-- 维度评分条 -->
      <view class="dimension-summary">
        <view class="dimension-item" v-for="dim in dimensions" :key="dim.key" @click="activeTab = dim.key">
          <text class="dimension-label">{{ dim.label }}</text>
          <view class="dimension-bar-track">
            <view class="dimension-bar-fill" :style="{ width: dim.score + '%', background: dim.color }"></view>
          </view>
          <text class="dimension-score">{{ dim.score }}</text>
        </view>
      </view>

      <!-- Tab 切换 -->
      <view class="tab-bar">
        <view
          class="tab-item"
          v-for="tab in tabs"
          :key="tab.key"
          :class="activeTab === tab.key ? 'tab-active' : ''"
          @click="activeTab = tab.key">
          <text>{{ tab.label }}</text>
        </view>
      </view>

      <!-- 八字合盘 Tab -->
      <view class="tab-content" v-if="activeTab === 'zodiac'">
        <view class="info-card">
          <view class="info-row" v-if="data.baziPairingSummary">
            <text class="info-label">合盘摘要</text>
            <text class="info-value">{{ data.baziPairingSummary }}</text>
          </view>
        </view>
      </view>

      <!-- 五行互补 Tab -->
      <view class="tab-content" v-if="activeTab === 'wuxing'">
        <view class="wuxing-grid">
          <view
            class="wuxing-card"
            v-for="wx in wuxingData"
            :key="wx.element"
            :style="{ background: wx.color + '18', borderColor: wx.color }">
            <text class="wuxing-card-elem">{{ wx.elementLabel }}</text>
            <view class="wuxing-card-bars">
              <view class="wuxing-bar-pair">
                <text class="wuxing-bar-label">{{ name1 }}</text>
                <view class="wuxing-bar-track-s">
                  <view class="wuxing-bar-fill-s" :style="{ width: wx.v1 + '%', background: wx.color }"></view>
                </view>
                <text class="wuxing-bar-val">{{ wx.v1 }}</text>
              </view>
              <view class="wuxing-bar-pair">
                <text class="wuxing-bar-label">{{ name2 }}</text>
                <view class="wuxing-bar-track-s">
                  <view class="wuxing-bar-fill-s" :style="{ width: wx.v2 + '%', background: wx.color }"></view>
                </view>
                <text class="wuxing-bar-val">{{ wx.v2 }}</text>
              </view>
            </view>
            <text class="wuxing-card-desc">{{ wx.description }}</text>
          </view>
        </view>
        <view class="info-card" v-if="data.wuxingComplementarity">
          <text class="info-label">五行互补分析</text>
          <text class="info-value" style="margin-top:12rpx">{{ data.wuxingComplementarity.analysis }}</text>
        </view>
      </view>

      <!-- 生肖配对 Tab -->
      <view class="tab-content" v-if="activeTab === 'zodiac'">
        <view class="info-card" v-if="data.zodiacCompatibility">
          <view class="info-row">
            <text class="info-label">生肖配对</text>
            <text class="info-value">{{ zodLabel1 }} & {{ zodLabel2 }}</text>
          </view>
          <view class="info-row" v-if="data.zodiacCompatibility.affinityType">
            <text class="info-label">配对关系</text>
            <text class="info-value">{{ data.zodiacCompatibility.affinityType }}</text>
          </view>
          <view class="info-row" v-if="data.zodiacCompatibility.description">
            <text class="info-label">详解</text>
            <text class="info-value">{{ data.zodiacCompatibility.description }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">得分</text>
            <text class="info-value score-high">{{ data.zodiacCompatibility.score }}</text>
          </view>
        </view>
      </view>

      <!-- 灵数关系 Tab -->
      <view class="tab-content" v-if="activeTab === 'lifenumber'">
        <view class="info-card" v-if="data.lifeNumberRelationship">
          <view class="info-row">
            <text class="info-label">{{ name1 }} 灵数</text>
            <text class="info-value">{{ data.lifeNumberRelationship.lifeNumber1 }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">{{ name2 }} 灵数</text>
            <text class="info-value">{{ data.lifeNumberRelationship.lifeNumber2 }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">关系数</text>
            <text class="info-value score-primary">{{ data.lifeNumberRelationship.relationshipNumber }}</text>
          </view>
          <view class="info-row" v-if="data.lifeNumberRelationship.relationshipType">
            <text class="info-label">关系类型</text>
            <text class="info-value">{{ data.lifeNumberRelationship.relationshipType }}</text>
          </view>
          <view class="info-row" v-if="data.lifeNumberRelationship.description">
            <text class="info-label">详解</text>
            <text class="info-value">{{ data.lifeNumberRelationship.description }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">得分</text>
            <text class="info-value score-high">{{ data.lifeNumberRelationship.score }}</text>
          </view>
        </view>
      </view>
    </template>

    <view class="empty-state" v-if="!loading && !dataLoaded">
      <text>暂无兼容数据</text>
    </view>
  </view>
</template>

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

export default {
  data() {
    return {
      loading: true,
      dataLoaded: false,
      memberId1: null,
      memberId2: null,
      name1: '',
      name2: '',
      overallScore: 0,
      data: {},
      activeTab: 'wuxing',
      tabs: [
        { key: 'bazi', label: '八字合盘' },
        { key: 'wuxing', label: '五行互补' },
        { key: 'zodiac', label: '生肖配对' },
        { key: 'lifenumber', label: '灵数关系' }
      ],
      dimensions: [],
      wuxingColors: {
        wood: '#10B981',
        fire: '#FF6B9D',
        earth: '#FF8C42',
        metal: '#6366F1',
        water: '#3B82F6'
      },
      wuxingLabels: {
        wood: '木', fire: '火', earth: '土', metal: '金', water: '水'
      },
      zodiacNames: {
        rat: '鼠', ox: '牛', tiger: '虎', rabbit: '兔', dragon: '龙',
        snake: '蛇', horse: '马', sheep: '羊', monkey: '猴',
        rooster: '鸡', dog: '狗', pig: '猪'
      },
      wuxingElements: ['wood', 'fire', 'earth', 'metal', 'water']
    }
  },

  computed: {
    zodLabel1() {
      var z = this.data.zodiacCompatibility
      return z ? (this.zodiacNames[z.zodiac1] || z.zodiac1) : ''
    },
    zodLabel2() {
      var z = this.data.zodiacCompatibility
      return z ? (this.zodiacNames[z.zodiac2] || z.zodiac2) : ''
    },
    wuxingData() {
      var wc = this.data.wuxingComplementarity
      if (!wc || !wc.elementScores) return []
      var arr = []
      for (var i = 0; i < this.wuxingElements.length; i++) {
        var elem = this.wuxingElements[i]
        var es = wc.elementScores[elem]
        if (es === undefined) continue
        arr.push({
          element: elem,
          elementLabel: this.wuxingLabels[elem],
          color: this.wuxingColors[elem],
          v1: wc.member1Elements[elem] || 0,
          v2: wc.member2Elements[elem] || 0,
          score: es,
          description: this.wuxingDesc(elem, es)
        })
      }
      return arr.sort(function(a, b) { return b.score - a.score })
    }
  },

  onLoad(params) {
    this.memberId1 = params.memberId1
    this.memberId2 = params.memberId2
    this.loadData()
  },

  methods: {
    loadData() {
      var self = this

      uni.request({
        url: config.API_BASE_URL + '/api/mind/traditional/compatibility',
        method: 'POST',
        data: {
          memberId1: self.memberId1,
          memberId2: self.memberId2,
          memberType1: 'child',
          memberType2: 'child'
        },
        success: function(res) {
          self.loading = false
          if (res.data && res.data.code === 200 && res.data.data) {
            var d = res.data.data
            self.data = d
            self.overallScore = d.overallScore || 0
            self.name1 = d.memberName1 || '成员1'
            self.name2 = d.memberName2 || '成员2'
            self.buildDimensions(d)
            self.dataLoaded = true
          } else {
            self.dataLoaded = false
          }
        },
        fail: function() {
          self.loading = false
          self.dataLoaded = false
        }
      })
    },

    buildDimensions(d) {
      var dims = []
      if (d.zodiacCompatibility && d.zodiacCompatibility.score !== undefined) {
        dims.push({ key: 'zodiac', label: '生肖配对', score: d.zodiacCompatibility.score, color: '#8B5CF6' })
      }
      if (d.wuxingComplementarity && d.wuxingComplementarity.score !== undefined) {
        dims.push({ key: 'wuxing', label: '五行互补', score: d.wuxingComplementarity.score, color: '#10B981' })
      }
      if (d.wuxingComplementarity && d.wuxingComplementarity.bloodTypeScore !== undefined) {
        dims.push({ key: 'blood', label: '血型兼容', score: d.wuxingComplementarity.bloodTypeScore, color: '#FF6B9D' })
      }
      if (d.lifeNumberRelationship && d.lifeNumberRelationship.score !== undefined) {
        dims.push({ key: 'lifenumber', label: '灵数关系', score: d.lifeNumberRelationship.score, color: '#F59E0B' })
      }
      this.dimensions = dims
    },

    wuxingDesc(elem, score) {
      if (score >= 70) return '互补良好'
      if (score >= 50) return '较为平衡'
      return '有待加强'
    }
  }
}
</script>

<style scoped>
.duo-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;
}
.duo-header {
  background: linear-gradient(135deg, #8B5CF6, #A78BFA);
  padding: 40rpx 32rpx;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.person-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.person-avatar {
  width: 88rpx;
  height: 88rpx;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36rpx;
  font-weight: 700;
  color: #fff;
  text-align: center;
  line-height: 88rpx;
}
.person-name {
  font-size: 26rpx;
  color: rgba(255,255,255,0.9);
  margin-top: 12rpx;
}
.compatibility-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.compatibility-score {
  font-size: 64rpx;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}
.compatibility-label {
  font-size: 22rpx;
  color: rgba(255,255,255,0.7);
  margin-top: 8rpx;
}
.dimension-summary {
  margin: 24rpx 32rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx 28rpx;
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}
.dimension-item {
  display: flex;
  align-items: center;
  gap: 12rpx;
}
.dimension-label {
  font-size: 24rpx;
  font-weight: 500;
  color: #666;
  width: 96rpx;
  flex-shrink: 0;
}
.dimension-bar-track {
  flex: 1;
  height: 16rpx;
  background: #F0F0F0;
  border-radius: 8rpx;
  overflow: hidden;
}
.dimension-bar-fill {
  height: 100%;
  border-radius: 8rpx;
  transition: width 0.3s;
}
.dimension-score {
  font-size: 24rpx;
  font-weight: 600;
  color: #333;
  width: 56rpx;
  text-align: right;
}
.tab-bar {
  display: flex;
  margin: 0 32rpx;
  background: #fff;
  border-radius: 20rpx 20rpx 0 0;
  overflow: hidden;
}
.tab-item {
  flex: 1;
  padding: 20rpx 0;
  text-align: center;
  font-size: 26rpx;
  color: #999;
  border-bottom: 4rpx solid transparent;
}
.tab-active {
  color: #8B5CF6;
  border-bottom-color: #8B5CF6;
  font-weight: 600;
}
.tab-content {
  margin: 0 32rpx;
  background: #fff;
  border-radius: 0 0 20rpx 20rpx;
  padding: 28rpx;
}
.info-card {
  padding: 20rpx;
  background: #FAFAFA;
  border-radius: 16rpx;
}
.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12rpx 0;
  border-bottom: 1rpx solid #F0F0F0;
}
.info-row:last-child {
  border-bottom: none;
}
.info-label {
  font-size: 26rpx;
  color: #666;
}
.info-value {
  font-size: 26rpx;
  color: #333;
  font-weight: 500;
  text-align: right;
  max-width: 60%;
}
.score-high {
  color: #10B981;
  font-weight: 700;
  font-size: 32rpx;
}
.score-primary {
  color: #8B5CF6;
  font-weight: 700;
  font-size: 32rpx;
}
.wuxing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16rpx;
  margin-bottom: 20rpx;
}
.wuxing-card {
  padding: 20rpx;
  border-radius: 16rpx;
  border: 2rpx solid;
}
.wuxing-card-elem {
  font-size: 28rpx;
  font-weight: 700;
  margin-bottom: 12rpx;
  display: block;
}
.wuxing-card-bars {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}
.wuxing-bar-pair {
  display: flex;
  align-items: center;
  gap: 8rpx;
}
.wuxing-bar-label {
  font-size: 20rpx;
  color: #999;
  width: 60rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wuxing-bar-track-s {
  flex: 1;
  height: 12rpx;
  background: #F0F0F0;
  border-radius: 6rpx;
  overflow: hidden;
}
.wuxing-bar-fill-s {
  height: 100%;
  border-radius: 6rpx;
}
.wuxing-bar-val {
  font-size: 20rpx;
  color: #666;
  width: 36rpx;
  text-align: right;
}
.wuxing-card-desc {
  font-size: 22rpx;
  color: #666;
  margin-top: 8rpx;
  display: block;
}
.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120rpx 0;
  color: #999;
  font-size: 28rpx;
}
</style>