cfc/cfc-frontend/pages/health/survey-questionnaire.vue

<template>
  <view class="container">
    <view class="header-card">
      <text class="header-title">{{ templateTitle }}</text>
      <text class="header-dimension" v-if="templateDimension">适用维度: {{ templateDimension }}</text>
      <text class="header-period" v-if="periodStart || periodEnd">周期: {{ periodStart && formatDate(periodStart) }} - {{ periodEnd && formatDate(periodEnd) }}</text>
    </view>
    <view class="question-section" v-for="(q, qIdx) in questions" :key="getQuestionKey(q)">
      <view class="question-header">
        <text class="question-num">Q{{ qIdx + 1 }}</text>
        <text class="question-text">{{ q.text }}</text>
      </view>
      <view class="options-list">
        <view class="option-item" :class="answers[qIdx] === opt ? 'option-selected' : ''" v-for="(opt, oIdx) in q.options" :key="getOptionKey(q, opt)" @click="selectOption(qIdx, opt)">
          <view class="option-radio" :class="answers[qIdx] === opt ? 'radio-checked' : ''"></view>
          <text class="option-text">{{ opt }}</text>
        </view>
      </view>
    </view>
    <view class="footer-area">
      <button class="btn-submit" :disabled="isSubmitting" @click="handleSubmit">{{ isSubmitting ? '提交中...' : '提交答案' }}</button>
    </view>
  </view>
</template>
<script>
import { getActiveTemplates, submitSurvey } from '../../utils/api.js'
export default {
  data() { return { templateId: null, templateTitle: '定期调研', templateDimension: '', questions: [], answers: {}, periodStart: '', periodEnd: '', isSubmitting: false } },
  onLoad(options) {
    if (options.templateId) this.templateId = parseInt(options.templateId)
    if (options.templateTitle) this.templateTitle = decodeURIComponent(options.templateTitle)
    if (options.templateDimension) this.templateDimension = options.templateDimension
    if (options.periodStart) this.periodStart = options.periodStart
    if (options.periodEnd) this.periodEnd = options.periodEnd
    if (options.questions) { try { this.questions = JSON.parse(decodeURIComponent(options.questions)) } catch(e) { this.questions = [] } }
    if (this.templateId && !this.questions.length) this.loadTemplate()
  },
  methods: {
    getQuestionKey(q) { return q && q.text ? q.text : 'q-' + Math.random() },
    getOptionKey(q, opt) { return q && q.text ? q.text + '-' + opt : 'opt-' + Math.random() },
    formatDate(s) { return s ? s.substring(0, 10) : '' },
    selectOption(qIdx, opt) { this.$set(this.answers, qIdx, opt) },
    async loadTemplate() {
      try {
        var res = await getActiveTemplates()
        if (res.code === 200 && res.data) {
          for (var i = 0; i < res.data.length; i++) {
            var t = res.data[i]
            if (t && t.id === this.templateId) {
              this.templateTitle = t.title || '定期调研'
              this.templateDimension = t.dimension || ''
              if (t.questionsJson) { try { this.questions = JSON.parse(t.questionsJson) } catch(e) {} }
              break
            }
          }
        }
      } catch(e) { console.error('加载模板失败', e) }
    },
    async handleSubmit() {
      var self = this
      var ui = uni.getStorageSync('userInfo') || {}
      var memberId = ui.currentMemberId || ui.memberId
      var answersArr = []
      for (var i = 0; i < this.questions.length; i++) answersArr.push(this.answers[i] || '')
      var answersJson = JSON.stringify(answersArr)
      if (!answersJson) { uni.showToast({ title: '请至少选择一道题', icon: 'none' }); return }
      this.isSubmitting = true
      try {
        var d = { memberId: memberId, templateId: this.templateId, answersJson: answersJson }
        if (this.periodStart) d.periodStart = this.periodStart
        if (this.periodEnd) d.periodEnd = this.periodEnd
        var res = await submitSurvey(d)
        if (res.code === 200) { uni.showToast({ title: '提交成功', icon: 'success' }); setTimeout(function(){ uni.navigateTo({ url: '/pages/health/survey-history?memberId=' + (memberId || '') }) }, 1200) }
      } catch(e) { uni.showToast({ title: e.message || '提交失败', icon: 'none' }) }
      finally { this.isSubmitting = false }
    }
  }
}
</script>
<style scoped>
.container{background:#FFF7ED;min-height:100vh;padding-bottom:120rpx}
.header-card{background:#fff;margin:20rpx 24rpx;border-radius:20rpx;padding:28rpx;box-shadow:0 2rpx 12rpx rgba(0,0,0,0.06)}
.header-title{font-size:32rpx;font-weight:bold;color:#333;display:block;margin-bottom:8rpx}
.header-dimension{font-size:24rpx;color:#999;display:block;margin-bottom:4rpx}
.header-period{font-size:24rpx;color:#F97316;display:block}
.question-section{background:#fff;margin:16rpx 24rpx;border-radius:20rpx;padding:24rpx;box-shadow:0 2rpx 12rpx rgba(0,0,0,0.06)}
.question-header{display:flex;align-items:flex-start;margin-bottom:16rpx}
.question-num{font-size:24rpx;font-weight:bold;color:#F97316;margin-right:12rpx;flex-shrink:0}
.question-text{font-size:26rpx;color:#333;flex:1}
.option-item{display:flex;align-items:center;padding:16rpx 0;border-bottom:1rpx solid #f0f0f0}
.option-item:last-child{border-bottom:none}
.option-radio{width:28rpx;height:28rpx;border-radius:50%;border:2rpx solid #ddd;margin-right:16rpx;flex-shrink:0}
.radio-checked{border-color:#F97316;background:#F97316}
.option-text{font-size:26rpx;color:#333}
.option-selected .option-text{color:#F97316;font-weight:bold}
.footer-area{padding:20rpx 24rpx}
.btn-submit{background:#F97316;color:#fff;border:none;border-radius:16rpx;font-size:30rpx;font-weight:bold;height:80rpx;line-height:80rpx}
.btn-submit[disabled]{background:#ffb47a}
</style>