cfc/cfc-frontend/pages/tianpan/relation-detail.vue

<template>
  <view class="relation-detail-container">
    <!-- 自定义导航栏 -->
    <view class="custom-nav">
      <view class="nav-back" @click="goBack">‹ 返回</view>
      <text class="nav-title">关系详情</text>
    </view>

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

    <!-- 错误状态 -->
    <view class="error-state" v-if="error && !loading">
      <text>{{ error }}</text>
      <button class="retry-btn" @click="loadData">重试</button>
    </view>

    <!-- 详情内容 -->
    <view class="detail-content" v-if="relation && !loading">
      <!-- 关系评分卡片 -->
      <view class="score-card">
        <view class="score-circle">
          <canvas id="scoreCanvas" class="score-canvas"></canvas>
          <view class="score-content">
            <text class="score-value" :class="getScoreClass(relation.score)">{{ relation.score }}</text>
            <text class="score-label">关系质量分</text>
          </view>
        </view>
        <view class="score-level">
          <text class="level-text">{{ getScoreLevel(relation.score) }}</text>
        </view>
      </view>

      <!-- 双方信息 -->
      <view class="members-card">
        <view class="card-header">
          <text class="card-title">关系双方</text>
        </view>
        <view class="members-row">
          <view class="member-item">
            <view class="member-avatar" :style="{ backgroundColor: member1Color }">
              <text class="member-avatar-text">{{ relation.fromMemberName ? relation.fromMemberName.charAt(0) : 'A' }}</text>
            </view>
            <text class="member-name">{{ relation.fromMemberName }}</text>
            <text class="member-role">{{ getRoleText(relation.fromMemberRole) }}</text>
          </view>
          <view class="relation-icon">
            <text>↔</text>
          </view>
          <view class="member-item">
            <view class="member-avatar" :style="{ backgroundColor: member2Color }">
              <text class="member-avatar-text">{{ relation.toMemberName ? relation.toMemberName.charAt(0) : 'B' }}</text>
            </view>
            <text class="member-name">{{ relation.toMemberName }}</text>
            <text class="member-role">{{ getRoleText(relation.toMemberRole) }}</text>
          </view>
        </view>
      </view>

      <!-- 维度分解 -->
      <view class="dimensions-card">
        <view class="card-header">
          <text class="card-title">维度分解</text>
        </view>
        <view class="dimension-list">
          <view class="dimension-item" v-for="dim in dimensions" :key="dim.type">
            <view class="dim-info">
              <text class="dim-label">{{ dim.label }}</text>
              <text class="dim-desc">{{ dim.description }}</text>
            </view>
            <view class="dim-bar">
              <view class="dim-fill" :style="{ width: dim.value + '%', backgroundColor: dim.color }"></view>
            </view>
            <text class="dim-value">{{ dim.value }}</text>
          </view>
        </view>
      </view>

      <!-- 关系趋势 -->
      <view class="trend-card" v-if="relation.trend && relation.trend.length > 0">
        <view class="card-header">
          <text class="card-title">关系趋势</text>
        </view>
        <view class="trend-chart">
          <canvas id="trendCanvas" class="trend-canvas"></canvas>
        </view>
      </view>

      <!-- 改进建议 -->
      <view class="advice-card" v-if="relation.advice">
        <view class="card-header">
          <text class="card-title">改进建议</text>
        </view>
        <view class="advice-content">
          <text class="advice-text">{{ relation.advice }}</text>
        </view>
      </view>

      <!-- 操作按钮 -->
      <view class="action-buttons">
        <button class="action-btn primary" @click="startQuestionnaire">填写关系问卷</button>
        <button class="action-btn secondary" @click="viewInteractionLog">查看互动记录</button>
      </view>
    </view>
  </view>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  data: function() {
    return {
      memberId: '',
      relation: null,
      loading: false,
      error: null,
      scoreCanvasContext: null,
      trendCanvasContext: null
    }
  },
  computed: {
    member1Color: function() {
      if (!this.relation || !this.relation.fromMemberRole) {
        return '#6B7280'
      }
      var colorMap = {
        'parent': '#F97316',
        'child': '#3B82F6',
        'teacher': '#8B5CF6'
      }
      return colorMap[this.relation.fromMemberRole] || '#6B7280'
    },
    member2Color: function() {
      if (!this.relation || !this.relation.toMemberRole) {
        return '#6B7280'
      }
      var colorMap = {
        'parent': '#F97316',
        'child': '#3B82F6',
        'teacher': '#8B5CF6'
      }
      return colorMap[this.relation.toMemberRole] || '#6B7280'
    },
    dimensions: function() {
      if (!this.relation || !this.relation.dimensions) {
        return []
      }
      var dimMap = {
        'communication': { label: '沟通', description: '沟通频率与质量', color: '#10B981' },
        'trust': { label: '信任', description: '相互信任程度', color: '#3B82F6' },
        'understanding': { label: '理解', description: '相互理解程度', color: '#8B5CF6' },
        'support': { label: '支持', description: '相互支持力度', color: '#F59E0B' },
        'harmony': { label: '和谐', description: '关系和谐度', color: '#F97316' }
      }
      var result = []
      for (var key in this.relation.dimensions) {
        var value = this.relation.dimensions[key]
        var info = dimMap[key] || { label: key, description: '', color: '#6B7280' }
        result.push({
          type: key,
          label: info.label,
          description: info.description,
          value: value,
          color: info.color
        })
      }
      return result
    }
  },
  onLoad: function(options) {
    if (options && options.memberId) {
      this.memberId = options.memberId
      this.loadData()
    }
  },
  onReady: function() {
    if (!this.loading && this.relation) {
      this.drawScoreCanvas()
      this.drawTrendCanvas()
    }
  },
  methods: {
    ...mapActions('tianpan', ['loadCompatibility']),

    loadData: function() {
      this.loading = true
      this.error = null
      var familyId = uni.getStorageSync('familyId')
      if (!familyId || !this.memberId) {
        this.error = '参数错误'
        this.loading = false
        return
      }
      this.loadCompatibility({ familyId: familyId, memberId: this.memberId })
        .then(this.setRelationData)
        .catch(this.handleError)
        .finally(function() {
          this.loading = false
        }.bind(this))
    },

    setRelationData: function(data) {
      if (data) {
        this.relation = data
        this.$nextTick(function() {
          this.drawScoreCanvas()
          this.drawTrendCanvas()
        }.bind(this))
      }
    },

    handleError: function(e) {
      this.error = e.message || '加载失败'
    },

    drawScoreCanvas: function() {
      var query = uni.createSelectorQuery()
      query.select('#scoreCanvas')
        .fields({ node: true, size: true })
        .exec(this.onScoreCanvasReady)
    },

    onScoreCanvasReady: function(res) {
      if (!res || !res[0] || !res[0].node) {
        return
      }
      var ctx = res[0].node.getContext('2d')
      var dpr = uni.getSystemInfoSync().pixelRatio
      this.scoreCanvasContext = ctx
      this.scoreCanvasContext.scale(dpr, dpr)
      
      var w = res[0].width / dpr
      var h = res[0].height / dpr
      var cx = w / 2
      var cy = h / 2
      var r = Math.min(w, h) / 2 - 10
      
      // 清空画布
      ctx.clearRect(0, 0, w, h)
      
      // 绘制背景圆
      ctx.beginPath()
      ctx.arc(cx, cy, r, 0, Math.PI * 2)
      ctx.strokeStyle = '#E5E7EB'
      ctx.lineWidth = 20
      ctx.stroke()
      
      // 绘制进度圆
      var score = this.relation && this.relation.score ? this.relation.score : 0
      var startAngle = -Math.PI / 2
      var endAngle = startAngle + (score / 100) * Math.PI * 2
      
      ctx.beginPath()
      ctx.arc(cx, cy, r, startAngle, endAngle)
      ctx.strokeStyle = this.getScoreColor(score)
      ctx.lineWidth = 20
      ctx.lineCap = 'round'
      ctx.stroke()
    },

    drawTrendCanvas: function() {
      if (!this.relation || !this.relation.trend || this.relation.trend.length === 0) {
        return
      }
      var query = uni.createSelectorQuery()
      query.select('#trendCanvas')
        .fields({ node: true, size: true })
        .exec(this.onTrendCanvasReady)
    },

    onTrendCanvasReady: function(res) {
      if (!res || !res[0] || !res[0].node) {
        return
      }
      var ctx = res[0].node.getContext('2d')
      var dpr = uni.getSystemInfoSync().pixelRatio
      this.trendCanvasContext = ctx
      this.trendCanvasContext.scale(dpr, dpr)
      
      var w = res[0].width / dpr
      var h = res[0].height / dpr
      
      // 清空画布
      ctx.clearRect(0, 0, w, h)
      
      var trend = this.relation.trend
      var padding = 20
      var chartW = w - padding * 2
      var chartH = h - padding * 2
      
      // 绘制坐标轴
      ctx.beginPath()
      ctx.moveTo(padding, padding)
      ctx.lineTo(padding, h - padding)
      ctx.lineTo(w - padding, h - padding)
      ctx.strokeStyle = '#E5E7EB'
      ctx.lineWidth = 1
      ctx.stroke()
      
      // 绘制折线
      if (trend.length < 2) {
        return
      }
      
      var stepX = chartW / (trend.length - 1)
      var maxScore = 100
      
      ctx.beginPath()
      for (var i = 0; i < trend.length; i++) {
        var point = trend[i]
        var x = padding + i * stepX
        var y = h - padding - (point.score / maxScore) * chartH
        
        if (i === 0) {
          ctx.moveTo(x, y)
        } else {
          ctx.lineTo(x, y)
        }
      }
      ctx.strokeStyle = '#F97316'
      ctx.lineWidth = 2
      ctx.stroke()
      
      // 绘制数据点
      for (var j = 0; j < trend.length; j++) {
        var point2 = trend[j]
        var x2 = padding + j * stepX
        var y2 = h - padding - (point2.score / maxScore) * chartH
        
        ctx.beginPath()
        ctx.arc(x2, y2, 4, 0, Math.PI * 2)
        ctx.fillStyle = '#F97316'
        ctx.fill()
      }
    },

    getScoreColor: function(score) {
      if (!score) {
        return '#6B7280'
      }
      if (score >= 80) {
        return '#10B981'
      } else if (score >= 60) {
        return '#F59E0B'
      } else {
        return '#EF4444'
      }
    },

    getScoreClass: function(score) {
      if (!score) {
        return ''
      }
      if (score >= 80) {
        return 'score-good'
      } else if (score >= 60) {
        return 'score-medium'
      } else {
        return 'score-low'
      }
    },

    getScoreLevel: function(score) {
      if (!score) {
        return '未知'
      }
      if (score >= 90) {
        return '卓越'
      } else if (score >= 80) {
        return '优秀'
      } else if (score >= 70) {
        return '良好'
      } else if (score >= 60) {
        return '合格'
      } else {
        return '待改善'
      }
    },

    getRoleText: function(role) {
      var roleMap = {
        'parent': '家长',
        'child': '孩子',
        'teacher': '规划师'
      }
      return roleMap[role] || role
    },

    goBack: function() {
      uni.navigateBack()
    },

    startQuestionnaire: function() {
      uni.navigateTo({
        url: '/pages/family/questionnaire?memberId=' + this.memberId
      })
    },

    viewInteractionLog: function() {
      uni.navigateTo({
        url: '/pages/family/interaction-log?memberId=' + this.memberId
      })
    }
  }
}
</script>

<style>
.relation-detail-container {
  min-height: 100vh;
  background: #F9FAFB;
  padding-bottom: 20px;
}

.custom-nav {
  background: linear-gradient(135deg, #F97316 0%, #FB923C 100%);
  padding: 44px 16px 16px;
  display: flex;
  align-items: center;
}

.nav-back {
  color: #FFFFFF;
  font-size: 14px;
  margin-right: 16px;
}

.nav-title {
  color: #FFFFFF;
  font-size: 18px;
  font-weight: bold;
}

.loading-state, .error-state {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 80px 20px;
  text-align: center;
}

.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);
  }
}

.retry-btn {
  margin-top: 16px;
  background: #F97316;
  color: #FFFFFF;
  border: none;
  padding: 10px 32px;
  border-radius: 20px;
  font-size: 14px;
}

.detail-content {
  padding: 16px;
}

.score-card {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 32px 20px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  text-align: center;
}

.score-circle {
  position: relative;
  width: 180px;
  height: 180px;
  margin: 0 auto 16px;
}

.score-canvas {
  width: 180px;
  height: 180px;
}

.score-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.score-value {
  display: block;
  font-size: 48px;
  font-weight: bold;
  line-height: 1;
}

.score-label {
  display: block;
  font-size: 12px;
  color: #9CA3AF;
  margin-top: 8px;
}

.score-level {
  margin-top: 12px;
}

.level-text {
  font-size: 18px;
  font-weight: bold;
  color: #1F2937;
}

.score-good {
  color: #10B981;
}

.score-medium {
  color: #F59E0B;
}

.score-low {
  color: #EF4444;
}

.members-card, .dimensions-card, .trend-card, .advice-card {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.card-header {
  margin-bottom: 16px;
}

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

.members-row {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.member-item {
  text-align: center;
  flex: 1;
}

.member-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 8px;
}

.member-avatar-text {
  color: #FFFFFF;
  font-size: 24px;
  font-weight: bold;
}

.member-name {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #1F2937;
}

.member-role {
  display: block;
  font-size: 12px;
  color: #9CA3AF;
  margin-top: 2px;
}

.relation-icon {
  font-size: 24px;
  color: #D1D5DB;
  padding: 0 8px;
}

.dimension-list {
  margin-top: 16px;
}

.dimension-item {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.dim-info {
  width: 80px;
}

.dim-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #1F2937;
}

.dim-desc {
  display: block;
  font-size: 12px;
  color: #9CA3AF;
  margin-top: 2px;
}

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

.dim-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.dim-value {
  width: 32px;
  text-align: right;
  font-size: 14px;
  font-weight: bold;
  color: #1F2937;
}

.trend-chart {
  height: 150px;
}

.trend-canvas {
  width: 100%;
  height: 100%;
}

.advice-content {
  padding: 12px;
  background: #FFF8F0;
  border-radius: 8px;
}

.advice-text {
  font-size: 14px;
  line-height: 1.6;
  color: #7C2D12;
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

.action-btn {
  padding: 14px 24px;
  border-radius: 12px;
  font-size: 16px;
  border: none;
}

.action-btn.primary {
  background: linear-gradient(135deg, #F97316 0%, #FB923C 100%);
  color: #FFFFFF;
}

.action-btn.secondary {
  background: #FFFFFF;
  color: #F97316;
  border: 2px solid #F97316;
}
</style>