cfc/cfc-frontend/pages/body/health-dimensions.vue

<template>
  <view class="hd-container">
    <view class="hd-header">
      <text class="hd-title">健康维度全景</text>
      <text class="hd-subtitle" v-if="memberName">{{ memberName }}的健康档案</text>
    </view>

    <view class="hd-health-index" v-if="healthData && healthData.healthIndex">
      <view class="index-circle">
        <text class="index-value">{{ healthData.healthIndex }}</text>
        <text class="index-label">健康指数</text>
      </view>
    </view>

    <view class="radar-section" v-if="healthData && healthData.dimensions">
      <view class="radar-title">七维健康雷达</view>
      <view class="radar-wrap">
        <view class="radar-center">
          <view class="radar-grid">
            <view class="grid-ring ring-3"></view>
            <view class="grid-ring ring-2"></view>
            <view class="grid-ring ring-1"></view>
          </view>
          <view class="radar-spokes">
            <view
              class="spoke-item"
              v-for="(dim, idx) in healthData.dimensions"
              :key="dim.dimension"
              :style="spokeStyles[idx]"
            >
              <view class="spoke-dot" :class="'level-' + dim.level"></view>
              <view class="spoke-label">{{ dim.label }}</view>
              <view class="spoke-score">{{ dim.score || '--' }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="dimension-list" v-if="healthData && healthData.dimensions">
      <view
        class="dim-card"
        v-for="dim in healthData.dimensions"
        :key="dim.dimension"
        @click="goDimDetail(dim)"
      >
        <view class="dim-header">
          <text class="dim-label">{{ dim.label }}</text>
          <text class="dim-score" :class="'score-' + dim.level">{{ dim.score || '--' }}分</text>
        </view>
        <view class="dim-bar-wrap">
          <view class="dim-bar-bg">
            <view
              class="dim-bar-fill"
              :class="'fill-' + dim.level"
              :style="{ width: (dim.score || 0) + '%' }"
            ></view>
          </view>
          <text class="dim-norms" v-if="dim.normMin && dim.normMax">
            正常范围 {{ dim.normMin }}-{{ dim.normMax }}
          </text>
        </view>
        <view class="dim-footer">
          <text class="dim-level-tag" :class="'tag-' + dim.level">{{ getLevelText(dim.level) }}</text>
          <text class="dim-source" v-if="dim.trend">{{ dim.trend === 'up' ? '↑ 上升' : dim.trend === 'down' ? '↓ 下降' : '→ 稳定' }}</text>
        </view>
      </view>
    </view>

    <view class="hd-empty" v-if="!healthData && !loading">
      <text class="empty-tip">暂无维度数据</text>
      <text class="empty-sub">上传健康报告或填写问卷后可查看</text>
    </view>

    <view class="loading-wrap" v-if="loading">
      <text class="loading-text">加载中...</text>
    </view>

    <view class="fab-upload" @click="showUploadModal">
      <text class="fab-icon">+</text>
    </view>

    <view class="modal-mask" v-if="showModal" @click="showModal = false">
      <view class="modal-content" @click.stop>
        <view class="modal-header">
          <text class="modal-title">录入维度评分</text>
          <text class="modal-close" @click="showModal = false">×</text>
        </view>
        <view class="modal-body">
          <view class="form-item">
            <text class="form-label">选择维度</text>
            <picker
              mode="selector"
              :range="dimensionOptions"
              range-key="label"
              @change="onDimensionChange"
            >
              <view class="picker-value">
                {{ selectedDimension.label || '请选择' }}
              </view>
            </picker>
          </view>
          <view class="form-item">
            <text class="form-label">评分 (0-100)</text>
            <input
              class="form-input"
              type="number"
              v-model="uploadForm.score"
              placeholder="请输入评分"
              min="0"
              max="100"
            />
          </view>
          <view class="form-item">
            <text class="form-label">数据来源</text>
            <picker
              mode="selector"
              :range="sourceOptions"
              @change="onSourceChange"
            >
              <view class="picker-value">
                {{ selectedSource.label || '请选择' }}
              </view>
            </picker>
          </view>
        </view>
        <view class="modal-footer">
          <view class="btn-cancel" @click="showModal = false">取消</view>
          <view class="btn-confirm" @click="submitUpload">确认提交</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getDimensionOverview, uploadDimensionScore } from '../../utils/api.js'

export default {
  data() {
    return {
      memberId: null,
      memberName: '',
      healthData: null,
      loading: false,
      showModal: false,
      selectedDimension: {},
      selectedSource: {},
      uploadForm: {
        memberId: null,
        dimension: '',
        score: '',
        dataSource: ''
      },
      dimensionOptions: [
        { code: 'growth', label: '生长发育' },
        { code: 'sleep', label: '睡眠质量' },
        { code: 'vision', label: '视力健康' },
        { code: 'immunity', label: '免疫力' },
        { code: 'nutrition', label: '营养均衡' },
        { code: 'gut', label: '肠胃健康' },
        { code: 'exercise', label: '运动活力' }
      ],
      sourceOptions: [
        { code: 'MANUAL', label: '手动录入' },
        { code: 'REPORT', label: '健康报告' },
        { code: 'PHOTO', label: '照片' },
        { code: 'VOICE', label: '语音' }
      ]
    }
  },
  computed: {
    spokeStyles: function() {
      if (!this.healthData || !this.healthData.dimensions) return []
      var cache = []
      var dims = this.healthData.dimensions
      for (var i = 0; i < dims.length; i++) {
        var angle = i * 51.4 - 90
        var radius = 85
        var normalizedScore = (dims[i].score || 0) / 100
        var translateY = -radius * normalizedScore
        cache.push({
          transform: 'rotate(' + angle + 'deg) translateY(' + translateY + 'px)',
          '-webkit-transform': 'rotate(' + angle + 'deg) translateY(' + translateY + 'px)'
        })
      }
      return cache
    }
  },
  onLoad: function(options) {
    var childId = options.childId || uni.getStorageSync('currentChildId')
    var childName = options.name || ''
    this.memberId = Number(childId)
    this.memberName = childName
    this.uploadForm.memberId = this.memberId
    if (this.memberId) {
      this.loadDimensionData()
    }
  },
  onShow: function() {
    if (this.memberId) {
      this.loadDimensionData()
    }
  },
  methods: {
    loadDimensionData: function() {
      var self = this
      self.loading = true
      getDimensionOverview({ memberId: this.memberId }).then(function(res) {
        self.loading = false
        if (res.code === 200 && res.data) {
          self.healthData = res.data
        }
      }).catch(function(e) {
        self.loading = false
        console.log('获取维度数据失败', e)
      })
    },
    getLevelText: function(level) {
      var map = {
        'excellent': '优秀',
        'good': '良好',
        'fair': '一般',
        'poor': '较差',
        'none': '暂无数据'
      }
      return map[level] || ''
    },
    goDimDetail: function(dim) {
      if (!dim || !dim.dimension) return
      var childId = this.memberId || uni.getStorageSync('currentChildId') || ''
      uni.navigateTo({
        url: '/pages/body/dimension-detail?dimension=' + dim.dimension + '&childId=' + childId
      })
    },
    showUploadModal: function() {
      this.showModal = true
      this.selectedDimension = {}
      this.selectedSource = {}
      this.uploadForm.dimension = ''
      this.uploadForm.score = ''
      this.uploadForm.dataSource = ''
    },
    onDimensionChange: function(e) {
      var idx = e.detail.value
      this.selectedDimension = this.dimensionOptions[idx]
      this.uploadForm.dimension = this.selectedDimension.code
    },
    onSourceChange: function(e) {
      var idx = e.detail.value
      this.selectedSource = this.sourceOptions[idx]
      this.uploadForm.dataSource = this.selectedSource.code
    },
    submitUpload: function() {
      if (!this.uploadForm.dimension) {
        uni.showToast({ title: '请选择维度', icon: 'none' })
        return
      }
      if (!this.uploadForm.score || this.uploadForm.score < 0 || this.uploadForm.score > 100) {
        uni.showToast({ title: '评分需在0-100之间', icon: 'none' })
        return
      }
      if (!this.uploadForm.dataSource) {
        uni.showToast({ title: '请选择数据来源', icon: 'none' })
        return
      }
      var self = this
      var payload = {
        memberId: this.memberId,
        dimension: this.uploadForm.dimension,
        score: Number(this.uploadForm.score),
        sourceType: this.uploadForm.dataSource
      }
      uploadDimensionScore(payload).then(function(res) {
        if (res.code === 200) {
          uni.showToast({ title: '提交成功', icon: 'success' })
          self.showModal = false
          self.loadDimensionData()
        }
      }).catch(function(e) {
        console.log('提交失败', e)
      })
    }
  }
}
</script>

<style scoped>
.hd-container {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 120rpx;
}
.hd-header {
  background: linear-gradient(135deg, #FF8C42, #FF6B35);
  padding: 40rpx 30rpx 30rpx;
  color: #fff;
}
.hd-title {
  font-size: 40rpx;
  font-weight: bold;
  display: block;
}
.hd-subtitle {
  font-size: 26rpx;
  opacity: 0.9;
  display: block;
  margin-top: 8rpx;
}
.hd-health-index {
  display: flex;
  justify-content: center;
  padding: 30rpx;
  background: #fff;
}
.index-circle {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF8C42, #FF6B35);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.index-value {
  font-size: 48rpx;
  font-weight: bold;
  line-height: 1;
}
.index-label {
  font-size: 22rpx;
  opacity: 0.9;
  margin-top: 8rpx;
}
.radar-section {
  background: #fff;
  margin-top: 20rpx;
  padding: 30rpx;
}
.radar-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
  text-align: center;
}
.radar-wrap {
  display: flex;
  justify-content: center;
}
.radar-center {
  width: 440rpx;
  height: 440rpx;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.radar-grid {
  position: absolute;
  width: 100%;
  height: 100%;
}
.grid-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid #ddd;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.ring-1 { width: 33%; height: 33%; }
.ring-2 { width: 66%; height: 66%; }
.ring-3 { width: 100%; height: 100%; }
.radar-spokes {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.spoke-item {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-origin: center center;
  width: 80rpx;
  margin-left: -40rpx;
  top: 10rpx;
}
.spoke-dot {
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  background: #FF8C42;
  margin-bottom: 6rpx;
}
.spoke-dot.level-excellent { background: #10B981; }
.spoke-dot.level-good { background: #3B82F6; }
.spoke-dot.level-fair { background: #F59E0B; }
.spoke-dot.level-poor { background: #EF4444; }
.spoke-dot.level-none { background: #ddd; }
.spoke-label {
  font-size: 22rpx;
  color: #333;
  white-space: nowrap;
}
.spoke-score {
  font-size: 20rpx;
  color: #666;
  margin-top: 2rpx;
}
.dimension-list {
  padding: 20rpx 30rpx;
}
.dim-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
}
.dim-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}
.dim-label {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}
.dim-score {
  font-size: 36rpx;
  font-weight: bold;
  color: #FF8C42;
}
.dim-score.score-excellent { color: #10B981; }
.dim-score.score-good { color: #3B82F6; }
.dim-score.score-fair { color: #F59E0B; }
.dim-score.score-poor { color: #EF4444; }
.dim-bar-wrap {
  margin-bottom: 12rpx;
}
.dim-bar-bg {
  height: 16rpx;
  background: #f0f0f0;
  border-radius: 8rpx;
  overflow: hidden;
  margin-bottom: 6rpx;
}
.dim-bar-fill {
  height: 100%;
  border-radius: 8rpx;
  background: #FF8C42;
  transition: width 0.3s;
}
.dim-bar-fill.fill-excellent { background: #10B981; }
.dim-bar-fill.fill-good { background: #3B82F6; }
.dim-bar-fill.fill-fair { background: #F59E0B; }
.dim-bar-fill.fill-poor { background: #EF4444; }
.dim-norms {
  font-size: 22rpx;
  color: #999;
}
.dim-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dim-level-tag {
  font-size: 22rpx;
  padding: 4rpx 16rpx;
  border-radius: 20rpx;
  background: #f0f0f0;
  color: #666;
}
.dim-level-tag.tag-excellent { background: #D1FAE5; color: #10B981; }
.dim-level-tag.tag-good { background: #DBEAFE; color: #3B82F6; }
.dim-level-tag.tag-fair { background: #FEF3C7; color: #F59E0B; }
.dim-level-tag.tag-poor { background: #FEE2E2; color: #EF4444; }
.dim-source {
  font-size: 22rpx;
  color: #999;
}
.hd-empty {
  padding: 100rpx 30rpx;
  text-align: center;
}
.empty-tip {
  font-size: 30rpx;
  color: #999;
  display: block;
  margin-bottom: 16rpx;
}
.empty-sub {
  font-size: 24rpx;
  color: #ccc;
  display: block;
}
.loading-wrap {
  padding: 80rpx 30rpx;
  text-align: center;
}
.loading-text {
  font-size: 28rpx;
  color: #999;
}
.fab-upload {
  position: fixed;
  right: 40rpx;
  bottom: 60rpx;
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF8C42, #FF6B35);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 24rpx rgba(255, 140, 66, 0.4);
}
.fab-icon {
  font-size: 48rpx;
  color: #fff;
  font-weight: bold;
  line-height: 1;
}
.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.modal-content {
  width: 100%;
  background: #fff;
  border-radius: 24rpx 24rpx 0 0;
  padding-bottom: 60rpx;
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1px solid #f0f0f0;
}
.modal-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}
.modal-close {
  font-size: 48rpx;
  color: #999;
  line-height: 1;
}
.modal-body {
  padding: 30rpx;
}
.form-item {
  margin-bottom: 30rpx;
}
.form-label {
  font-size: 28rpx;
  color: #666;
  display: block;
  margin-bottom: 12rpx;
}
.picker-value {
  height: 80rpx;
  line-height: 80rpx;
  border: 1px solid #e0e0e0;
  border-radius: 12rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #333;
}
.form-input {
  height: 80rpx;
  border: 1px solid #e0e0e0;
  border-radius: 12rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
}
.modal-footer {
  display: flex;
  padding: 0 30rpx;
  gap: 20rpx;
}
.btn-cancel {
  flex: 1;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  background: #f0f0f0;
  border-radius: 44rpx;
  font-size: 30rpx;
  color: #666;
}
.btn-confirm {
  flex: 1;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  background: linear-gradient(135deg, #FF8C42, #FF6B35);
  border-radius: 44rpx;
  font-size: 30rpx;
  color: #fff;
}
</style>