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, getProblemSurveyQuestions } 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 },
    getOptId: function(q, oi) {
      var opt = q.options && q.options[oi]
      return opt ? (opt.id != null ? opt.id : oi) : oi
    },
    isSelected(qi, oi) {
      var ans = this.answers[qi]
      if (!ans) return false
      var q = this.questions[qi]
      return ans.indexOf(this.getOptId(q, oi)) !== -1
    },
    toggleOpt(qi, oi, q) {
      var optId = this.getOptId(q, oi)
      var isMulti = q.multi !== false
      if (!this.answers[qi]) {
        this.answers[qi] = []
      }
      var arr = this.answers[qi]
      var idx = arr.indexOf(optId)
      if (idx !== -1) {
        arr.splice(idx, 1)
      } else {
        if (isMulti) {
          arr.push(optId)
        } else {
          this.answers[qi] = [optId]
        }
      }
      this.$forceUpdate()
    },
    loadQuestions() {
      var self = this
      self.loading = true
      uni.showLoading({ title: '加载中...', mask: true })
      // 优先按问题域 code 拉取问卷（后端未绑定模板时返回内置默认问卷）
      if (self.code) {
        getProblemSurveyQuestions(self.code).then(function(res) {
          uni.hideLoading()
          self.loading = false
          var data = res && res.data
          if (data && Array.isArray(data.questions) && data.questions.length > 0) {
            self.questions = data.questions
            if (data.templateId) self.templateId = data.templateId
          } 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 [
        { id: 'q1', text: '请简单描述你的情况', multi: false, options: [{ id: 'o1', text: '了解中' }, { id: 'o2', text: '已有初步了解' }] },
        { id: 'q2', text: '你希望获得什么帮助？', multi: true, options: [{ id: 'o1', text: '了解方案' }, { id: 'o2', text: '购买产品' }, { id: 'o3', text: '咨询专家' }] }
      ]
    },
    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 })

      // 统一契约: [{questionId, optionIds}]
      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) {
          answerList.push({
            questionId: q.id != null ? q.id : ('q' + (qi + 1)),
            optionIds: selected
          })
        }
      }

      submitProblemSurvey({
        problemDomainCode: self.code,
        surveyTemplateId: 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>