training-wx/src/views/Questionnaire.vue

<template>
  <div class="question-wrapper">
    <QuestionnHome
      :show="showFirstScreen"
      :content="questionnaireContent"
      @confirm="showFirstScreen = false"
    />

    <van-dialog v-model="showPopup" title="确定提交答案吗" show-cancel-button @confirm="submitForm()">
      <p style="margin: 2em">确定要提交答案吗？</p>
    </van-dialog>

    <!-- 页面标题 -->
    <div class="VSTD_box" v-if="questionList.length > 0">
      <!-- 题的表单 -->
      <!-- 绑定表单的数据 ruleForm -->
      <!-- 绑定题的数组 ruleForm.resource[index] -->

      <van-form class="demo-ruleForm">
        <!-- 循环后端  的所有题 -->
        <div class="VSTD_box_item">
          <question
            :step="step + 1"
            :steps="total"
            v-model="currentQuestion"
            @next="step++"
            @prev="step--"
            @submit="showPopup = true"
          ></question>
        </div>
      </van-form>
    </div>

    <!-- 如果没题就提示没题 -->

    <div v-else>
      <div class="none" style="margin-left: 0px">
        <div class="none_img"></div>
        <h3>暂无试题</h3>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'
import { getQuestionnaire, getQuestion, answerQuestionnaire } from '@/util/api'

export default {
  name: 'QuestionDetail',
  components: {
    Question: () => import('./components/Question'),
    Popup: () => import('./components/Questionnaire/Popup.vue'),
    QuestionnHome: () => import('./components/QuestionnHome.vue')
  },
  props: {},
  data() {
    return {
      showFirstScreen: true,
      questionnaireContent: {},

      showPopup: false,
      step: 0,
      total: 0,
      questionList: []
    }
  },
  computed: {
    currentQuestion: {
      get: function () {
        return this.questionList[this.step]
      },
      set: function (val) {
        this.$set(this.questionList, this.step, val)
      }
    }
  },
  watch: {
    '$route.query.id': {
      handler(v) {
        this.loadData('f5a47d178019bda33a370d7a6ed1e4c3')
      },
      immediate: true
    }
  },
  methods: {
    loadData(id) {
      // 问卷信息
      getQuestionnaire(id).then((e) => {
        this.questionnaireContent = e || {}
      })

      // 问题列表
      getQuestion(id).then((res) => {
        console.log('题目列表', res)
        const { records, total } = res
        this.questionList = records || []
        this.total = total
      })
      // let sum = 0
    },

    submitForm(e) {
      const toast = Toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '请稍后...'
      })
      answerQuestionnaire(this.$route.query.id, this.questionList)
        .then((e) => {
          toast.clear()
          Toast.success('感谢您的参与')
          this.questionnaireContent.isAnswered = true
          this.showFirstScreen = true
        })
        .catch((e) => {
          toast.clear()
          Toast.fail(e.message)
        })
    }
  }
}
</script>




<style lang="less" scoped>
.question-wrapper {
  background-image: url('~@/assets/userImag/backImag.png');
  background-size: 100%;
  background-repeat: no-repeat;
}

.ImagStyle {
  width: 100%;
}

.VSTD_box {
  .demo-ruleForm {
    width: 80%;
    display: flex;
    margin: 0 auto;
    .VSTD_box_item {
      display: flex;
      flex-direction: column;
      align-items: center;

      .but-box {
        width: 62vw;
        .but-box-form-item {
          text-align: center;

          width: 100%;
          margin: 0 auto;
          top: -5vh;
          position: relative;
        }
        .butsize {
          height: 43px;
          margin: 0 10px;
        }
      }
    }
  }
}
</style>