cfc/cfc-frontend/pages/problem/survey.vue

<template>
  <view class="sv-wrap">
    <view class="sv-header">
      <text class="sv-title">专项调研</text>
      <text class="sv-sub">回答以下问题，我们为你推荐最适合的方案</text>
    </view>

    <view class="sv-loading" v-if="loading">加载中...</view>
    <view class="sv-empty" v-else-if="!questions || questions.length === 0">暂无问卷题目</view>

    <view class="sv-form" v-else>
      <view class="sv-q" v-for="(q, qi) in questions" :key="getQKey(qi)">
        <text class="sv-q-label">{{ qi + 1 }}. {{ q.text }}</text>
        <view class="sv-options">
          <view
            class="sv-opt"
            v-for="(o, oi) in q.options"
            :key="getOptKey(qi, oi)"
            :class="{ 'sv-opt-active': isSelected(qi, oi) }"
            @click="toggleOpt(qi, oi, q)">
            <text class="sv-opt-text">{{ o.text }}</text>
            <text class="sv-opt-check" v-if="isSelected(qi, oi)">✓</text>
          </view>
        </view>
      </view>

      <view class="sv-btn" @click="submitSurvey">
        <text class="sv-btn-text">提交调研</text>
      </view>
    </view>
  </view>
</template>

<script>
import { submitProblemSurvey } from '../../utils/api.js'

export default {
  data() {
    return {
      code: '',
      templateId: '',
      questions: [],
      answers: [],
      loading: false,
      submitting: false
    }
  },
  onLoad(options) {
    this.code = (options && options.code) || ''
    this.templateId = (options && options.templateId) || ''
    this.loadQuestions()
  },
  methods: {
    getQKey: function(qi) { return 'q' + qi },
    getOptKey: function(qi, oi) { return 'o' + qi + '_' + oi },
    isSelected(qi, oi) {
      var ans = this.answers[qi]
      return ans && ans.indexOf(oi) !== -1
    },
    toggleOpt(qi, oi, q) {
      var isMulti = q.multi !== false
      if (!this.answers[qi]) {
        this.answers[qi] = []
      }
      var arr = this.answers[qi]
      var idx = arr.indexOf(oi)
      if (idx !== -1) {
        arr.splice(idx, 1)
      } else {
        if (isMulti) {
          arr.push(oi)
        } else {
          this.answers[qi] = [oi]
        }
      }
      this.$forceUpdate()
    },
    loadQuestions() {
      var self = this
      self.loading = true
      uni.showLoading({ title: '加载中...', mask: true })
      // 从模板ID加载问卷，或通过问题域获取模板
      var api = require('../../utils/api.js')
      // 尝试加载模板列表找到匹配的
      var getSurveyTemplates = api.getSurveyTemplateList || api.getActiveTemplates
      if (getSurveyTemplates && self.templateId) {
        getSurveyTemplates().then(function(res) {
          uni.hideLoading()
          self.loading = false
          var list = res && res.data
          if (Array.isArray(list)) {
            var found = null
            for (var i = 0; i < list.length; i++) {
              var item = list[i]
              if (item.id == self.templateId || item.id === self.templateId) {
                found = item
                break
              }
            }
            if (found && found.questionsJson) {
              var parsed = typeof found.questionsJson === 'string' ? JSON.parse(found.questionsJson) : found.questionsJson
              self.questions = Array.isArray(parsed) ? parsed : []
            } else {
              self.questions = self.getFallbackQuestions()
            }
          } else {
            self.questions = self.getFallbackQuestions()
          }
        }).catch(function() {
          uni.hideLoading()
          self.loading = false
          self.questions = self.getFallbackQuestions()
        })
      } else {
        uni.hideLoading()
        self.loading = false
        self.questions = self.getFallbackQuestions()
      }
    },
    getFallbackQuestions() {
      return [
        { text: '请简单描述你的情况', options: [{ text: '了解中' }, { text: '已有初步了解' }], multi: false },
        { text: '你希望获得什么帮助？', options: [{ text: '了解方案' }, { text: '购买产品' }, { text: '咨询专家' }], multi: true }
      ]
    },
    submitSurvey() {
      var self = this
      // 检查是否至少答了一题
      var hasAnswer = false
      for (var i = 0; i < this.answers.length; i++) {
        if (this.answers[i] && this.answers[i].length > 0) {
          hasAnswer = true
          break
        }
      }
      if (!hasAnswer) {
        uni.showToast({ title: '请至少回答一题', icon: 'none' })
        return
      }
      if (self.submitting) return
      self.submitting = true
      uni.showLoading({ title: '提交中...', mask: true })

      var answerList = []
      for (var qi = 0; qi < this.questions.length; qi++) {
        var q = this.questions[qi]
        var selected = this.answers[qi] || []
        if (selected.length > 0) {
          var texts = []
          for (var si = 0; si < selected.length; si++) {
            var opt = q.options[selected[si]]
            if (opt) {
              texts.push(opt.text)
            }
          }
          answerList.push({
            questionText: q.text,
            optionTexts: texts
          })
        }
      }

      submitProblemSurvey({
        problemDomainCode: self.code,
        templateId: self.templateId || undefined,
        answers: answerList
      }).then(function(res) {
        uni.hideLoading()
        self.submitting = false
        uni.showToast({ title: '提交成功', icon: 'success' })
        setTimeout(function() {
          uni.navigateTo({
            url: '/pages/problem/package-match?code=' + self.code
          })
        }, 500)
      }).catch(function() {
        uni.hideLoading()
        self.submitting = false
        uni.showToast({ title: '提交失败，请重试', icon: 'none' })
      })
    }
  }
}
</script>

<style scoped>
.sv-wrap {
  min-height: 100vh;
  background: #FFF7ED;
  padding: 40rpx 32rpx 120rpx;
  box-sizing: border-box;
}

.sv-header {
  margin-bottom: 32rpx;
}

.sv-title {
  display: block;
  font-size: 38rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
}

.sv-sub {
  display: block;
  font-size: 26rpx;
  color: #999;
  text-align: center;
  margin-top: 10rpx;
}

.sv-loading, .sv-empty {
  text-align: center;
  font-size: 28rpx;
  color: #999;
  padding: 80rpx 0;
}

.sv-q {
  margin-bottom: 36rpx;
}

.sv-q-label {
  display: block;
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 16rpx;
}

.sv-options {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}

.sv-opt {
  display: flex;
  align-items: center;
  background: #fff;
  border: 2rpx solid #E5E7EB;
  border-radius: 16rpx;
  padding: 18rpx 24rpx;
  margin-right: 16rpx;
  margin-bottom: 12rpx;
}

.sv-opt-active {
  border-color: #F97316;
  background: #FFF7ED;
}

.sv-opt-text {
  font-size: 28rpx;
  color: #333;
}

.sv-opt-check {
  color: #F97316;
  font-size: 28rpx;
  font-weight: bold;
  margin-left: 8rpx;
}

.sv-btn {
  background: linear-gradient(135deg, #F97316, #FB923C);
  border-radius: 48rpx;
  padding: 26rpx 0;
  text-align: center;
  margin-top: 32rpx;
}

.sv-btn:active {
  opacity: 0.9;
}

.sv-btn-text {
  color: #fff;
  font-size: 32rpx;
  font-weight: 600;
}
</style>