cfc/cfc-frontend/pages/action/relationship-questionnaire.vue

<template>
  <view class="container">
    <view class="page-header">
      <text class="page-title">关系问卷</text>
      <text class="page-subtitle" v-if="memberName">为「{{ memberName }}」评估关系质量</text>
    </view>

    <!-- 加载状态 -->
    <view v-if="loading" class="loading-wrap">
      <text class="loading-text">AI 正在生成问卷...</text>
    </view>

    <!-- 问卷表单 -->
    <view v-else-if="questions.length > 0" class="questionnaire-form">
      <view class="question-item" v-for="(q, index) in questions" :key="q.id">
        <view class="question-header">
          <text class="question-dimension dimension-tag" :class="q.dimension">{{ dimensionLabels[q.dimension] }}</text>
          <text class="question-text">{{ q.question }}</text>
        </view>
        <view class="option-list">
          <view class="option-item" v-for="(opt, oi) in q.options" :key="oi"
                :class="{selected: answers[q.id] === opt}"
                @click="selectOption(q.id, opt)">
            <text class="option-letter">{{ optionLetters[oi] }}</text>
            <text class="option-text">{{ opt }}</text>
          </view>
        </view>
      </view>

      <view class="submit-bar">
        <button class="btn-submit" @click="onSubmit" :disabled="!allAnswered">提交问卷</button>
      </view>
    </view>

    <!-- 无问卷 -->
    <view v-else class="empty-wrap">
      <text class="empty-text">暂无可用问卷</text>
      <button class="btn-generate" @click="generateQuestionnaire">生成新问卷</button>
    </view>

    <!-- 结果展示 -->
    <view v-if="showResult" class="result-overlay" @click="showResult = false">
      <view class="result-card" @click.stop>
        <text class="result-title">关系质量评估结果</text>
        <view class="result-scores">
          <view class="result-score-item">
            <text class="result-score-label">信任</text>
            <view class="result-bar-bg">
              <view class="result-bar-fill trust" :style="{width: (result.trustScore || 0) + '%'}"></view>
            </view>
            <text class="result-score-value">{{ Math.round(result.trustScore || 0) }}</text>
          </view>
          <view class="result-score-item">
            <text class="result-score-label">亲密</text>
            <view class="result-bar-bg">
              <view class="result-bar-fill intimacy" :style="{width: (result.intimacyScore || 0) + '%'}"></view>
            </view>
            <text class="result-score-value">{{ Math.round(result.intimacyScore || 0) }}</text>
          </view>
          <view class="result-score-item">
            <text class="result-score-label">沟通</text>
            <view class="result-bar-bg">
              <view class="result-bar-fill communication" :style="{width: (result.communicationScore || 0) + '%'}"></view>
            </view>
            <text class="result-score-value">{{ Math.round(result.communicationScore || 0) }}</text>
          </view>
        </view>
        <button class="btn-close" @click="showResult = false">关闭</button>
      </view>
    </view>
  </view>
</template>

<script>
import { generateQuestionnaire, submitQuestionnaire, getQuestionnaireSnapshot } from '../../utils/api.js'

export default {
  data() {
    return {
      memberId: null,
      memberName: '',
      snapshotId: null,
      questions: [],
      answers: {},
      loading: false,
      showResult: false,
      result: {},
      dimensionLabels: {
        trust: '信任',
        intimacy: '亲密',
        communication: '沟通'
      },
      optionLetters: ['A', 'B', 'C', 'D', 'E']
    }
  },
  computed: {
    allAnswered() {
      return this.questions.length > 0 && this.questions.every(function(q) {
        return this.answers[q.id]
      }, this)
    }
  },
  onLoad(options) {
    if (options.memberId) {
      this.memberId = Number(options.memberId)
    }
    this.loadSnapshot()
  },
  methods: {
    async loadSnapshot() {
      if (!this.memberId) return
      this.loading = true
      try {
        var res = await getQuestionnaireSnapshot(this.memberId)
        if (res.code === 200 && res.data) {
          this.snapshotId = res.data.id
          this.memberName = res.data.memberName
          try {
            this.questions = JSON.parse(res.data.aiGeneratedJson || '[]')
          } catch (e) {
            this.questions = []
          }
        } else {
          // 没有问卷，生成新的
          await this.generateQuestionnaire()
        }
      } catch (e) {
        uni.showToast({ title: '加载失败', icon: 'none' })
      } finally {
        this.loading = false
      }
    },
    async generateQuestionnaire() {
      if (!this.memberId) return
      this.loading = true
      try {
        var res = await generateQuestionnaire(this.memberId)
        if (res.code === 200 && res.data) {
          this.snapshotId = res.data.id
          this.memberName = res.data.memberName
          try {
            this.questions = JSON.parse(res.data.aiGeneratedJson || '[]')
          } catch (e) {
            this.questions = []
          }
        } else {
          uni.showToast({ title: res.message || '生成失败', icon: 'none' })
        }
      } catch (e) {
        uni.showToast({ title: '生成失败', icon: 'none' })
      } finally {
        this.loading = false
      }
    },
    selectOption(questionId, option) {
      this.answers[questionId] = option
    },
    async onSubmit() {
      if (!this.allAnswered || !this.snapshotId) {
        uni.showToast({ title: '请回答所有问题', icon: 'none' })
        return
      }
      try {
        var answersJson = JSON.stringify(this.answers)
        var res = await submitQuestionnaire({
          snapshotId: this.snapshotId,
          answersJson: answersJson
        })
        if (res.code === 200 && res.data) {
          this.result = res.data
          this.showResult = true
        } else {
          uni.showToast({ title: res.message || '提交失败', icon: 'none' })
        }
      } catch (e) {
        uni.showToast({ title: '提交失败', icon: 'none' })
      }
    }
  }
}
</script>

<style scoped>
.container {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 24rpx;
}
.page-header {
  padding: 20rpx 0 30rpx;
}
.page-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  display: block;
}
.page-subtitle {
  font-size: 26rpx;
  color: #999;
  margin-top: 8rpx;
  display: block;
}
.loading-wrap, .empty-wrap {
  text-align: center;
  padding: 100rpx 0;
}
.loading-text {
  font-size: 28rpx;
  color: #999;
}
.empty-text {
  font-size: 28rpx;
  color: #999;
  display: block;
  margin-bottom: 30rpx;
}
.btn-generate, .btn-submit {
  background: #F97316;
  color: #fff;
  border: none;
  border-radius: 12rpx;
  padding: 24rpx 60rpx;
  font-size: 30rpx;
}
.questionnaire-form {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}
.question-item {
  background: #fff;
  border-radius: 16rpx;
  padding: 28rpx;
}
.question-header {
  margin-bottom: 20rpx;
}
.dimension-tag {
  font-size: 22rpx;
  padding: 4rpx 12rpx;
  border-radius: 6rpx;
  margin-right: 12rpx;
}
.dimension-tag.trust { background: #D1FAE5; color: #059669; }
.dimension-tag.intimacy { background: #FCE7F3; color: #DB2777; }
.dimension-tag.communication { background: #E0E7FF; color: #4338CA; }
.question-text {
  font-size: 30rpx;
  color: #333;
  line-height: 1.6;
  display: block;
  margin-top: 12rpx;
}
.option-list {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}
.option-item {
  display: flex;
  align-items: center;
  gap: 16rpx;
  padding: 20rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 12rpx;
  background: #fafafa;
}
.option-item.selected {
  border-color: #F97316;
  background: #FFF7ED;
}
.option-letter {
  width: 44rpx;
  height: 44rpx;
  line-height: 44rpx;
  text-align: center;
  background: #f0f0f0;
  border-radius: 50%;
  font-size: 24rpx;
  color: #666;
}
.option-item.selected .option-letter {
  background: #F97316;
  color: #fff;
}
.option-text {
  flex: 1;
  font-size: 28rpx;
  color: #333;
}
.submit-bar {
  margin-top: 20rpx;
}
.btn-submit {
  width: 100%;
}
.btn-submit[disabled] {
  background: #ccc;
}
.result-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.result-card {
  width: 600rpx;
  background: #fff;
  border-radius: 24rpx;
  padding: 40rpx;
}
.result-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  display: block;
  text-align: center;
  margin-bottom: 30rpx;
}
.result-scores {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  margin-bottom: 30rpx;
}
.result-score-item {
  display: flex;
  align-items: center;
  gap: 12rpx;
}
.result-score-label {
  width: 60rpx;
  font-size: 26rpx;
  color: #666;
}
.result-bar-bg {
  flex: 1;
  height: 16rpx;
  background: #f0f0f0;
  border-radius: 8rpx;
  overflow: hidden;
}
.result-bar-fill {
  height: 100%;
  border-radius: 8rpx;
}
.result-bar-fill.trust { background: #10B981; }
.result-bar-fill.intimacy { background: #FF6B9D; }
.result-bar-fill.communication { background: #6366F1; }
.result-score-value {
  width: 50rpx;
  font-size: 26rpx;
  color: #333;
  text-align: right;
}
.btn-close {
  width: 100%;
  background: #F97316;
  color: #fff;
  border: none;
  border-radius: 12rpx;
  padding: 20rpx 0;
  font-size: 30rpx;
}
</style>