cfc/cfc-frontend/pages/family/self-check.vue

<template>
  <view class="sc-page">
    <!-- 顶部说明 -->
    <view class="sc-hero">
      <text class="sc-hero-title">五维家庭自检</text>
      <text class="sc-hero-sub">15题 · 约5分钟 · 生成五行相生寻源建议</text>
    </view>

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

    <template v-else>
      <!-- 维度导航 -->
      <view class="sc-dim-nav">
        <view v-for="dim in dimensions" :key="dim.code" class="sc-dim-nav-item">
          <view class="sc-dim-nav-dot" :style="{ background: dim.color }">
            <text class="sc-dim-nav-char">{{ dim.name }}</text>
          </view>
          <view class="sc-dim-nav-dots">
            <view
              v-for="q in dim.questions"
              :key="q.id"
              class="sc-dim-nav-dot-mini"
              :class="{ done: answers[q.id] }"
              :style="answers[q.id] ? 'background:' + dim.color : 'background:transparent'"
            ></view>
          </view>
        </view>
      </view>

      <!-- 进度条 -->
      <view class="sc-progress-row">
        <text class="sc-progress-text">已完成 {{ answeredCount }}/{{ questions.length }} 题</text>
        <text class="sc-progress-pct">{{ progress }}%</text>
      </view>
      <view class="sc-progress-bar">
        <view class="sc-progress-fill" :style="{ width: progress + '%' }"></view>
      </view>

      <!-- 题目分组（按维度） -->
      <view v-for="dim in dimensions" :key="dim.code" class="sc-section">
        <view class="sc-section-header" :style="{ borderLeftColor: dim.color }">
          <text class="sc-section-name">{{ dim.name }}</text>
          <text class="sc-section-element" :style="{ color: dim.color }">{{ dim.element }}</text>
          <text class="sc-section-slogan">{{ dim.slogan }}</text>
          <text class="sc-section-count">{{ dim.answeredCount }}/{{ dim.questions.length }}</text>
        </view>

        <view v-for="q in dim.questions" :key="q.id" class="sc-question">
          <text class="sc-q-text">{{ q.text }}</text>
          <view class="sc-opts">
            <view
              v-for="opt in q.options"
              :key="opt.value"
              class="sc-opt"
              :class="{ 'sc-opt-sel': answers[q.id] === opt.value }"
              @click="selectOption(q.id, opt.value)"
            >
              <text class="sc-opt-label">{{ opt.label }}</text>
              <view class="sc-opt-radio" :class="{ 'sc-opt-radio-on': answers[q.id] === opt.value }"></view>
            </view>
          </view>
        </view>
      </view>

      <!-- 提交 -->
      <view class="sc-footer">
        <button class="sc-submit-btn" :disabled="!canSubmit || submitLoading" @click="submit">
          {{ submitLoading ? '提交中...' : '提交自检' }}
        </button>
        <text class="sc-submit-tip" v-if="!canSubmit && !submitLoading">至少完成10题，且每个维度至少回答1题</text>
      </view>
    </template>
  </view>
</template>

<script>
import { getSelfCheckQuestions, submitSelfCheck } from '@/utils/api'

export default {
  data() {
    return {
      loading: true,
      submitLoading: false,
      questions: [],
      answers: {},
      dimMeta: {
        body: { name: '身', element: '土', color: '#FF8C42', slogan: '主动健康' },
        wisdom: { name: '智', element: '金', color: '#6366F1', slogan: '赋能未来' },
        wealth: { name: '富', element: '水', color: '#F59E0B', slogan: '利他创富' },
        action: { name: '行', element: '木', color: '#10B981', slogan: '人际和谐' },
        mind: { name: '心', element: '火', color: '#FF6B9D', slogan: '大爱相随' }
      }
    }
  },
  computed: {
    dimensions: function() {
      var order = ['body', 'wisdom', 'wealth', 'action', 'mind']
      var meta = this.dimMeta
      var result = []
      for (var i = 0; i < order.length; i++) {
        var code = order[i]
        var dimQuestions = this.questions.filter(function(q) { return q.dimension === code })
        if (dimQuestions.length === 0) {
          continue
        }
        var self = this
        var answered = dimQuestions.filter(function(q) { return self.answers[q.id] }).length
        var m = meta[code] || {}
        result.push({
          code: code,
          name: m.name || dimQuestions[0].dimensionName || code,
          element: m.element || dimQuestions[0].element || '',
          color: m.color || dimQuestions[0].color || '#F97316',
          slogan: m.slogan || '',
          questions: dimQuestions,
          answeredCount: answered
        })
      }
      return result
    },
    answeredCount: function() {
      return Object.keys(this.answers).length
    },
    progress: function() {
      if (!this.questions.length) {
        return 0
      }
      return Math.round(this.answeredCount / this.questions.length * 100)
    },
    canSubmit: function() {
      if (this.answeredCount < 10) {
        return false
      }
      var dims = this.dimensions
      for (var i = 0; i < dims.length; i++) {
        if (dims[i].answeredCount < 1) {
          return false
        }
      }
      return true
    }
  },
  methods: {
    loadQuestions: function() {
      var self = this
      getSelfCheckQuestions().then(function(res) {
        self.loading = false
        if (res.code === 200 && res.data) {
          self.questions = res.data || []
        } else {
          uni.showToast({ title: (res && res.message) || '加载失败', icon: 'none' })
        }
      }).catch(function() {
        self.loading = false
        uni.showToast({ title: '网络异常，请重试', icon: 'none' })
      })
    },
    selectOption: function(questionId, value) {
      var next = {}
      var keys = Object.keys(this.answers)
      for (var i = 0; i < keys.length; i++) {
        next[keys[i]] = this.answers[keys[i]]
      }
      next[questionId] = value
      this.answers = next
    },
    submit: function() {
      var self = this
      if (!this.canSubmit || this.submitLoading) {
        return
      }
      this.submitLoading = true
      var answersList = []
      var ids = Object.keys(this.answers)
      for (var i = 0; i < ids.length; i++) {
        answersList.push({ questionId: Number(ids[i]), answer: this.answers[ids[i]] })
      }
      submitSelfCheck({ answers: answersList }).then(function(res) {
        self.submitLoading = false
        if (res.code === 200 && res.data) {
          uni.setStorageSync('lastSelfCheckResult', res.data)
          uni.navigateTo({ url: '/pages/family/self-check-result?id=' + res.data.id })
        } else {
          uni.showToast({ title: (res && res.message) || '提交失败', icon: 'none' })
        }
      }).catch(function() {
        self.submitLoading = false
        uni.showToast({ title: '提交失败，请重试', icon: 'none' })
      })
    }
  },
  onLoad: function() {
    this.loadQuestions()
  }
}
</script>

<style scoped>
.sc-page {
  min-height: 100vh;
  background: #F5FAFE;
  padding: 24rpx 30rpx 120rpx;
  box-sizing: border-box;
}
.sc-hero {
  padding: 30rpx 10rpx 20rpx;
}
.sc-hero-title {
  display: block;
  font-size: 40rpx;
  font-weight: 700;
  color: #333;
}
.sc-hero-sub {
  display: block;
  font-size: 24rpx;
  color: #999;
  margin-top: 8rpx;
}
.sc-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50vh;
}
.sc-loading-text {
  font-size: 28rpx;
  color: #999;
}

/* 维度导航 */
.sc-dim-nav {
  display: flex;
  justify-content: space-between;
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx 20rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}
.sc-dim-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sc-dim-nav-dot {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sc-dim-nav-char {
  color: #fff;
  font-size: 26rpx;
  font-weight: 600;
}
.sc-dim-nav-dots {
  display: flex;
  margin-top: 10rpx;
}
.sc-dim-nav-dot-mini {
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;
  background: #E5E7EB;
  margin: 0 4rpx;
}
.sc-dim-nav-dot-mini.done {
  background: #F97316;
}

/* 进度 */
.sc-progress-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}
.sc-progress-text {
  font-size: 24rpx;
  color: #666;
}
.sc-progress-pct {
  font-size: 24rpx;
  color: #F97316;
  font-weight: 600;
}
.sc-progress-bar {
  height: 10rpx;
  background: #E8E8E8;
  border-radius: 5rpx;
  margin-bottom: 30rpx;
  overflow: hidden;
}
.sc-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #F97316, #FF8C42);
  border-radius: 5rpx;
  transition: width 0.3s ease;
}

/* 维度分组 */
.sc-section {
  margin-bottom: 30rpx;
}
.sc-section-header {
  display: flex;
  align-items: center;
  background: #fff;
  border-left: 8rpx solid #F97316;
  border-radius: 12rpx;
  padding: 20rpx 24rpx;
  margin-bottom: 16rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.04);
}
.sc-section-name {
  font-size: 32rpx;
  font-weight: 700;
  color: #333;
  margin-right: 12rpx;
}
.sc-section-element {
  font-size: 26rpx;
  font-weight: 600;
  margin-right: 16rpx;
}
.sc-section-slogan {
  flex: 1;
  font-size: 24rpx;
  color: #999;
}
.sc-section-count {
  font-size: 24rpx;
  color: #F97316;
  font-weight: 600;
}

/* 题目卡片 */
.sc-question {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx 26rpx 26rpx;
  margin-bottom: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}
.sc-q-text {
  display: block;
  font-size: 30rpx;
  font-weight: 500;
  color: #333;
  line-height: 1.5;
}
.sc-opts {
  margin-top: 24rpx;
}
.sc-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22rpx 24rpx;
  border: 2rpx solid #E5E7EB;
  border-radius: 14rpx;
  margin-bottom: 14rpx;
  transition: all 0.2s;
}
.sc-opt-sel {
  border-color: #F97316;
  background: #FFF7ED;
}
.sc-opt-label {
  flex: 1;
  font-size: 28rpx;
  color: #333;
  line-height: 1.4;
}
.sc-opt-radio {
  width: 36rpx;
  height: 36rpx;
  border: 2rpx solid #D1D5DB;
  border-radius: 50%;
  margin-left: 20rpx;
  box-sizing: border-box;
}
.sc-opt-radio-on {
  border: 10rpx solid #F97316;
}

/* 提交 */
.sc-footer {
  margin-top: 20rpx;
}
.sc-submit-btn {
  height: 92rpx;
  line-height: 92rpx;
  background: linear-gradient(135deg, #F97316, #FF8C42);
  color: #fff;
  font-size: 32rpx;
  font-weight: 600;
  border-radius: 46rpx;
  border: none;
  text-align: center;
}
.sc-submit-btn[disabled] {
  opacity: 0.5;
}
.sc-submit-tip {
  display: block;
  text-align: center;
  font-size: 24rpx;
  color: #999;
  margin-top: 16rpx;
}
</style>