vue+vant 实现移动端问卷答题

迷路大叔

已于 2023-04-06 18:00:23 修改

阅读量3.4k

点赞数 5

分类专栏： vue 文章标签： vue.js

于 2021-03-09 11:40:07 首次发布

本文链接：https://blog.csdn.net/weixin_43132005/article/details/114578705

版权

vue 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

因为工作需要，写一个类似驾考宝典答题的功能，使用 vue+vant

待答题页面

<template>
  <div>
    <van-nav-bar title="问卷调查" right-text="提交" right-arrow @click-right="save" />
    <van-notice-bar left-icon="volume-o" text="活动时间: 2020年12月4日 至2020年12月8日  奖品设置: 参与答卷有机会获取30元手机话费,每人有两次答题机会。" />
    <div class="maintext">
      <div class="subject" v-for="(item, i) in questionList" :key="i">
        <div class="question">{{ item.question }}</div>
        <van-radio-group v-if="item.type === 'radio'" v-model="result[i].value">
          <van-radio name="A">{{ item.A }}</van-radio>
          <van-radio name="B">{{ item.B }}</van-radio>
          <van-radio name="C">{{ item.C }}</van-radio>
          <van-radio name="D">{{ item.D }}</van-radio>
        </van-radio-group>
        <van-checkbox-group v-if="item.type === 'checkbox'" v-model="result[i].value">
          <van-checkbox name="A" shape="square">{{ item.A }}</van-checkbox>
          <van-checkbox name="B" shape="square">{{ item.B }}</van-checkbox>
          <van-checkbox name="C" shape="square">{{ item.C }}</van-checkbox>
          <van-checkbox name="D" shape="square">{{ item.D }}</van-checkbox>
        </van-checkbox-group>
      </div>
    </div>
  </div>
</template>

<script>
import { Dialog } from 'vant'
export default {
  data() {
    return {
      questionList: [
        {
          type: 'radio',
          question: '1、（单选题）选出这学期线性代数课任教',
          A: 'A.周星星',
          B: 'B.蔡徐坤',
          C: 'C.张梁柱',
          D: 'D.梁静茹',
        },
        {
          type: 'checkbox',
          question: '2、(多选题)以下哪些食品，是您会选择作为礼品送给菜需捆的？',
          A: 'A.茶叶',
          B: 'B.牛粪',
          C: 'C.水果',
          D: 'D.狗屎',
        },
        {
          type: 'radio',
          question: '3、（单选题）你喜欢什么季节？',
          A: 'A.春季',
          B: 'B.夏季',
          C: 'C.秋季',
          D: 'D.冬季',
        },
        {
          type: 'checkbox',
          question: '4、（多选题）四大名著你喜欢哪本？',
          A: 'A.西游记',
          B: 'B.三国演义',
          C: 'C.水浒传',
          D: 'D.红楼梦',
        },
      ],
      result: [],
      personalAnswer: [],
    }
  },
  created() {
    this.setResult()
  },
  methods: {
    // 根据问题列表生成 result 结构
    setResult() {
      let result = []
      if (!this.questionList.length) {
        result = [{}]
      } else {
        for (let i = 0; i < this.questionList.length; i++) {
          if (this.questionList[i].type === 'radio') {
            result.push({ index: i + 1, value: '' })
          } else {
            result.push({ index: i + 1, value: [] })
          }
        }
      }
      console.log('result==>', result)
      this.result = result
    },
    save() {
      this.result.forEach((item) => {
        if (!item.value.length > 0) {
          Dialog({ message: '请把所有题都答完' })
        } else {
          // 多选
          if (item.value.length > 1) {
            this.personalAnswer.push(item.value.toString())
          } else {
            this.personalAnswer.push(item.value)
          }
          console.log('personalAnswer==>', personalAnswer)
        }
      })
    },
  },
}
</script>

<style scoped>
.subject {
  padding: 10px 16px;
  font-size: 14px;
  border-bottom: 1px solid #f0f0f0;
}
.van-radio,
.van-checkbox {
  padding-top: 10px;
}
</style>

回显页面

<template>
  <div>
    <van-nav-bar title="答题结果" />
    <van-collapse v-model="activeNames" accordion>
      <van-collapse-item title="颜色解释" name="1">
        <div>以选项为对象：</div>
        <div>1、是正确答案</div>
        <div>(1)、用户选了  选对了，绿色</div>
        <div>(2)、用户没选  为了提示正确答案，蓝色</div>
        <div>2、不是正确答案</div>
        <div>(1)、用户选了  选错了，红色</div>
        <div>(2)、用户没选  没有选中状态，白色</div>
      </van-collapse-item>
    </van-collapse>
    <div class="maintext">
      <div class="subject" v-for="(item, i) in questionList" :key="i">
        <div class="question">{{ item.question }}</div>
        <div class="checkbox-group">
          <!-- 单选 -->
          <template v-if="rightAnswerList[i].length === 1">
            <!-- A 是正确答案， 用户选 A -->
            <template v-if="rightAnswerList[i] === 'A' && personalAnswer[i] === 'A'">
              <van-checkbox v-model="checked" checked-color="#07c160">{{ item.A }}</van-checkbox>
            </template>
            <!-- A 是正确答案是， 用户没选 A -->
            <template v-if="rightAnswerList[i] === 'A' && personalAnswer[i] !== 'A'">
              <van-checkbox v-model="checked" checked-color="#1989fa">{{ item.A }}</van-checkbox>
            </template>
            <!-- A 不是正确答案， 用户选 A -->
            <template v-if="rightAnswerList[i] !== 'A' && personalAnswer[i] === 'A'">
              <van-checkbox v-model="checked">
                <template #icon>
                  <van-icon name="cross" style="line-height: 19px; border-color: #ee0a24; background-color: #ee0a24" />
                </template>
                {{ item.A }}
              </van-checkbox>
            </template>
            <!-- A 不是正确答案， 用户没选 A -->
            <template v-if="rightAnswerList[i] !== 'A' && personalAnswer[i] !== 'A'">
              <van-checkbox>{{ item.A }}</van-checkbox>
            </template>

            <!-- B 是正确答案， 用户选 B -->
            <template v-if="rightAnswerList[i] === 'B' && personalAnswer[i] === 'B'">
              <van-checkbox v-model="checked" checked-color="#07c160">{{ item.B }}</van-checkbox>
            </template>
            <!-- B 是正确答案， 用户没选 B -->
            <template v-if="rightAnswerList[i] === 'B' && personalAnswer[i] !== 'B'">
              <van-checkbox v-model="checked" checked-color="#1989fa">{{ item.B }}</van-checkbox>
            </template>
            <!-- B 不是正确答案， 用户选 B -->
            <template v-if="rightAnswerList[i] !== 'B' && personalAnswer[i] === 'B'">
              <van-checkbox v-model="checked">
                <template #icon>
                  <van-icon name="cross" style="line-height: 19px; border-color: #ee0a24; background-color: #ee0a24" />
                </template>
                {{ item.B }}
              </van-checkbox>
            </template>
            <!-- B 不是正确答案， 用户没选 B -->
            <template v-if="rightAnswerList[i] !== 'B' && personalAnswer[i] !== 'B'">
              <van-checkbox>{{ item.B }}</van-checkbox>
            </template>

            <!-- C 是正确答案， 用户选 C -->
            <template v-if="rightAnswerList[i] === 'C' && personalAnswer[i] === 'C'">
              <van-checkbox v-model="checked" checked-color="#07c160">{{ item.C }}</van-checkbox>
            </template>
            <!-- C 是正确答案， 用户没选 C -->
            <template v-if="rightAnswerList[i] === 'C' && personalAnswer[i] !== 'C'">
              <van-checkbox v-model="checked" checked-color="#1989fa">{{ item.C }}</van-checkbox>
            </template>
            <!-- C 不是正确答案， 用户选 C -->
            <template v-if="rightAnswerList[i] !== 'C' && personalAnswer[i] === 'C'">
              <van-checkbox v-model="checked">
                <template #icon>
                  <van-icon name="cross" style="line-height: 19px; border-color: #ee0a24; background-color: #ee0a24" />
                </template>
                {{ item.C }}
              </van-checkbox>
            </template>
            <!-- C 不是正确答案， 用户没选 C -->
            <template v-if="rightAnswerList[i] !== 'C' && personalAnswer[i] !== 'C'">
              <van-checkbox>{{ item.C }}</van-checkbox>
            </template>

            <!-- D 是正确答案， 用户选 D -->
            <template v-if="rightAnswerList[i] === 'D' && personalAnswer[i] === 'D'">
              <van-checkbox v-model="checked" checked-color="#07c160">{{ item.D }}</van-checkbox>
            </template>
            <!-- D 是正确答案， 用户没选 D -->
            <template v-if="rightAnswerList[i] === 'D' && personalAnswer[i] !== 'D'">
              <van-checkbox v-model="checked" checked-color="#1989fa">{{ item.D }}</van-checkbox>
            </template>
            <!-- D 不是正确答案， 用户选 D -->
            <template v-if="rightAnswerList[i] !== 'D' && personalAnswer[i] === 'D'">
              <van-checkbox v-model="checked">
                <template #icon>
                  <van-icon name="cross" style="line-height: 19px; border-color: #ee0a24; background-color: #ee0a24" />
                </template>
                {{ item.D }}
              </van-checkbox>
            </template>
            <!-- D 不是正确答案， 用户没选 D -->
            <template v-if="rightAnswerList[i] !== 'D' && personalAnswer[i] !== 'D'">
              <van-checkbox>{{ item.D }}</van-checkbox>
            </template>
          </template>

          <!-- 多选 -->
          <template v-if="rightAnswerList[i].length > 1">
            <!-- A 是正确答案， 用户选 A -->
            <template v-if="rightAnswerList[i].indexOf('A') > -1 && personalAnswer[i].indexOf('A') > -1">
              <van-checkbox v-model="checked" checked-color="#07c160" shape="square">{{ item.A }}</van-checkbox>
            </template>
            <!-- A 是正确答案是， 用户没选 A -->
            <template v-if="rightAnswerList[i].indexOf('A') > -1 && personalAnswer[i].indexOf('A') === -1">
              <van-checkbox v-model="checked" checked-color="#1989fa" shape="square">{{ item.A }}</van-checkbox>
            </template>
            <!-- A 不是正确答案， 用户选 A -->
            <template v-if="rightAnswerList[i].indexOf('A') === -1 && personalAnswer[i].indexOf('A') > -1">
              <van-checkbox v-model="checked" shape="square">
                <template #icon>
                  <van-icon name="cross" style="line-height: 19px; border-color: #ee0a24; background-color: #ee0a24" />
                </template>
                {{ item.A }}
              </van-checkbox>
            </template>
            <!-- A 不是正确答案， 用户没选 A -->
            <template v-if="rightAnswerList[i].indexOf('A') === -1 && personalAnswer[i].indexOf('A') === -1">
              <van-checkbox shape="square">{{ item.A }}</van-checkbox>
            </template>

            <!-- B 是正确答案， 用户选 B -->
            <template v-if="rightAnswerList[i].indexOf('B') > -1 && personalAnswer[i].indexOf('B') > -1">
              <van-checkbox v-model="checked" checked-color="#07c160" shape="square">{{ item.B }}</van-checkbox>
            </template>
            <!-- B 是正确答案是， 用户没选 B -->
            <template v-if="rightAnswerList[i].indexOf('B') > -1 && personalAnswer[i].indexOf('B') === -1">
              <van-checkbox v-model="checked" checked-color="#1989fa" shape="square">{{ item.B }}</van-checkbox>
            </template>
            <!-- B 不是正确答案， 用户选 B -->
            <template v-if="rightAnswerList[i].indexOf('B') === -1 && personalAnswer[i].indexOf('B') > -1">
              <van-checkbox v-model="checked" shape="square">
                <template #icon>
                  <van-icon name="cross" style="line-height: 19px; border-color: #ee0a24; background-color: #ee0a24" />
                </template>
                {{ item.B }}
              </van-checkbox>
            </template>
            <!-- B 不是正确答案， 用户没选 B -->
            <template v-if="rightAnswerList[i].indexOf('B') === -1 && personalAnswer[i].indexOf('B') === -1">
              <van-checkbox shape="square">{{ item.B }}</van-checkbox>
            </template>

            <!-- C 是正确答案， 用户选 C -->
            <template v-if="rightAnswerList[i].indexOf('C') > -1 && personalAnswer[i].indexOf('C') > -1">
              <van-checkbox v-model="checked" checked-color="#07c160" shape="square">{{ item.C }}</van-checkbox>
            </template>
            <!-- C 是正确答案是， 用户没选 C -->
            <template v-if="rightAnswerList[i].indexOf('C') > -1 && personalAnswer[i].indexOf('C') === -1">
              <van-checkbox v-model="checked" checked-color="#1989fa" shape="square">{{ item.C }}</van-checkbox>
            </template>
            <!-- C 不是正确答案， 用户选 C -->
            <template v-if="rightAnswerList[i].indexOf('C') === -1 && personalAnswer[i].indexOf('C') > -1">
              <van-checkbox v-model="checked" shape="square">
                <template #icon>
                  <van-icon name="cross" style="line-height: 19px; border-color: #ee0a24; background-color: #ee0a24" />
                </template>
                {{ item.C }}
              </van-checkbox>
            </template>
            <!-- C 不是正确答案， 用户没选 C -->
            <template v-if="rightAnswerList[i].indexOf('C') === -1 && personalAnswer[i].indexOf('C') === -1">
              <van-checkbox shape="square">{{ item.C }}</van-checkbox>
            </template>

            <!-- D 是正确答案， 用户选 D -->
            <template v-if="rightAnswerList[i].indexOf('D') > -1 && personalAnswer[i].indexOf('D') > -1">
              <van-checkbox v-model="checked" checked-color="#07c160" shape="square">{{ item.D }}</van-checkbox>
            </template>
            <!-- D 是正确答案是， 用户没选 D -->
            <template v-if="rightAnswerList[i].indexOf('D') > -1 && personalAnswer[i].indexOf('D') === -1">
              <van-checkbox v-model="checked" checked-color="#1989fa" shape="square">{{ item.D }}</van-checkbox>
            </template>
            <!-- D 不是正确答案， 用户选 D -->
            <template v-if="rightAnswerList[i].indexOf('D') === -1 && personalAnswer[i].indexOf('D') > -1">
              <van-checkbox v-model="checked" shape="square">
                <template #icon>
                  <van-icon name="cross" style="line-height: 19px; border-color: #ee0a24; background-color: #ee0a24" />
                </template>
                {{ item.D }}
              </van-checkbox>
            </template>
            <!-- D 不是正确答案， 用户没选 D -->
            <template v-if="rightAnswerList[i].indexOf('D') === -1 && personalAnswer[i].indexOf('D') === -1">
              <van-checkbox shape="square">{{ item.D }}</van-checkbox>
            </template>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/**
 *  题目数组 正确答案数组 用户答案数组 三个数组长度相等且元素一一对应
 *
 *  颜色对照 蓝：#1989fa，绿：#07c160，红：#ee0a24
 */
export default {
  data() {
    return {
      activeNames: '1',
      checked: true,
      // 问题列表
      questionList: [
        {
          type: 'radio',
          question: '1、（单选题）选出这学期线性代数课任教',
          A: 'A.周星星',
          B: 'B.蔡徐坤',
          C: 'C.张梁柱',
          D: 'D.梁静茹',
        },
        {
          type: 'checkbox',
          question: '2、(多选题)以下哪些食品，是您会选择作为礼品送给菜需捆的？',
          A: 'A.茶叶',
          B: 'B.牛粪',
          C: 'C.水果',
          D: 'D.狗屎',
        },
        {
          type: 'radio',
          question: '3、（单选题）你喜欢什么季节？',
          A: 'A.春季',
          B: 'B.夏季',
          C: 'C.秋季',
          D: 'D.冬季',
        },
        {
          type: 'checkbox',
          question: '4、（多选题）四大名著你喜欢哪本？',
          A: 'A.西游记',
          B: 'B.三国演义',
          C: 'C.水浒传',
          D: 'D.红楼梦',
        },
      ],
      // 用户答案列表
      personalAnswer: ['A', 'A,B,C', 'B', 'A,B,D'],
      // 正确答案列表
      rightAnswerList: ['A', 'A,B,D', 'C', 'A,B,C'],
    }
  },
  watch: {
    checked(v) {
      // 保持选中，模拟不可选中
      this.checked = true
    },
  },
  mounted() {},
  methods: {},
}
</script>

<style scoped>
.subject {
  padding: 10px 16px;
  font-size: 14px;
  border-bottom: 1px solid #f0f0f0;
}
.van-radio,
.van-checkbox {
  padding-top: 10px;
}
</style>