普通的题 流程走通

.env.dev

@@ -1,3 +1,4 @@
 CLI_MODE=dev
 NODE_ENV=development
 PUBLIC_PATH=/
+VUE_APP_API_PREFIX=http://192.168.20.55:8043

.env.test

@@ -1,3 +1,4 @@
 CLI_MODE=test
 NODE_ENV=production
 PUBLIC_PATH=/hotspot/
+VUE_APP_API_PREFIX=http://192.168.20.55:8043

src/api.js

@@ -0,0 +1,33 @@
+import axios from "axios"
+import store from "@/store/index.js"
+
+export default {
+  async getAnswerRecord() {
+    const lastToken = localStorage.getItem('token')
+    const res = await axios({
+      method: 'get',
+      url: `${process.env.VUE_APP_API_PREFIX}/api/cms/question/getListByUser`,
+      headers: {
+        token: lastToken,
+      }
+    })
+    return res.data.data
+  },
+  async submitAnswer(isCorrect, id, selectedOptions, badgeType) {
+    const lastToken = localStorage.getItem('token')
+    const res = await axios({
+      method: 'post',
+      url: `${process.env.VUE_APP_API_PREFIX}/api/cms/question/submit`,
+      headers: {
+        token: lastToken,
+      },
+      data: {
+        hasRight: isCorrect,
+        num: id,
+        options: JSON.stringify(selectedOptions),
+        type: badgeType.join(','),
+      }
+    })
+    return res.data.data
+  },
+}

src/store/index.js

@@ -5,14 +5,22 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {
-    questionInfo: {}
+    questionInfo: {},
+    answerRecord: null,
+    isSubmitted: false,
   },
   getters: {
   },
   mutations: {
     setQuestionInfo(state, value) {
       state.questionInfo = value
-    }
+    },
+    setAnswerRecord(state, value) {
+      state.answerRecord = value
+    },
+    setIsSubmitted(state, value) {
+      state.isSubmitted = value
+    },
   },
   actions: {
   },

src/utils/index.js

@@ -0,0 +1,26 @@
+import quizData from "@/quizData.js"
+import { topologyInfo } from "@/quizData"
+
+export default {
+  // 传参：只有一级编号：还没答过题，该答哪一道？有二级或更多编号：答了这道题，该答哪一道？
+  getNextQuestionId(currentId) {
+    const idPerLevel = currentId.split('.')
+    const targetLevel2Idx = idPerLevel.length > 1 ? Number(idPerLevel[1]) : 0
+    const targetTopologyInfoLevel2 = topologyInfo[Number(idPerLevel[0]) - 1][targetLevel2Idx]
+    if (Array.isArray(targetTopologyInfoLevel2)) {
+      return targetTopologyInfoLevel2[Math.floor(Math.random() * targetTopologyInfoLevel2.length)]
+    } else if (typeof targetTopologyInfoLevel2 === 'string') {
+      return targetTopologyInfoLevel2
+    } else {
+      return '' //没题可答了
+    }
+  },
+  getRemainingQuestionNumber(currentId) {
+    const idPerLevel = currentId.split('.')
+    if (idPerLevel.length === 1) {
+      return topologyInfo[Number(idPerLevel[0]) - 1].length
+    } else {
+      return topologyInfo[Number(idPerLevel[0]) - 1].length - idPerLevel[1]
+    }
+  }
+}

src/views/AnswerDesc.vue

@@ -38,6 +38,7 @@ export default {
   width: calc(100% - 170px * 2);
   margin-top: 10px;
   overflow: auto;
+  padding-right: 8px;
   > .type {
     font-size: 24px;
     font-family: Source Han Sans CN-Bold, Source Han Sans CN;

src/views/HomeWeb.vue

@@ -41,32 +41,65 @@ export default {
     }
   },
   async mounted() {
-    await this.getData()
-    if (this.hotspotData && this.hotspotData.content) {
+    let url = `https://super.4dage.com/data/${this.$route.query.id}/hot/js/data.js?time=${Math.random()}`
+    let result = (await this.$http.get(url)).data
+    this.hotspotData = result[this.$route.query.m]
+    if (!this.hotspotData) {
+      return alert("热点解析错误")
+    }
+    console.log('热点数据：', this.hotspotData)
+    // this.bgAudioUrl = this.hotspotData.backgroundMusic
+
+    const answerRecord = await globalApi.getAnswerRecord()
+
+    let recordOnThisHotspot = []
+    if (answerRecord.length) {
+      recordOnThisHotspot = answerRecord.filter((item) => {
+        return item.num.split('.')[0] === this.hotspotData.content
+      })
+    }
+
+    if (recordOnThisHotspot.length === 0 ) { //没答过这个点位的题
+      const newId = globalUtils.getNextQuestionId(this.hotspotData.content)
       const quizInfo = quizData.find((item) => {
-        return item.id === this.hotspotData.content
+        return item.id === newId
       })
       this.setQuestionInfo(quizInfo)
-      if (quizInfo.questionType === '判断题') {
+      this.$router.push({ name: 'QuestionJudge' })
+    } else { //答过这个点位的题，可能要找到最近答的那道题，恢复现场
+      const latestRecord = recordOnThisHotspot.reduce((accu, curr) => {
+        if (new Date(accu.updateTime).getTime() <= new Date(curr.updateTime).getTime()) {
+          return curr
+        } else {
+          return accu
+        }
+      })
+      if (!globalUtils.getRemainingQuestionNumber(latestRecord.num)) { // 上次答的是最后一题，重新回到第一题
+        const newId = globalUtils.getNextQuestionId(this.hotspotData.content)
+        const quizInfo = quizData.find((item) => {
+          return item.id === newId
+        })
+        this.setQuestionInfo(quizInfo)
+        this.$router.push({ name: 'QuestionJudge' })
+      } else {
+        const quizInfo = quizData.find((item) => {
+          return item.id === latestRecord.num
+        })
+
+        this.setAnswerRecord(latestRecord)
+        this.setIsSubmitted(true)
+        this.setQuestionInfo(quizInfo)
+        // if (quizInfo.questionType === '判断题') {
         this.$router.push({ name: 'QuestionJudge' })
       }
     }
   },
   methods: {
     ...globalMapMutations([
-      'setQuestionInfo'
+      'setQuestionInfo',
+      'setAnswerRecord',
+      'setIsSubmitted',
     ]),
-    async getData() {
-      let url = `https://super.4dage.com/data/${this.$route.query.id}/hot/js/data.js?time=${Math.random()}`
-      let result = (await this.$http.get(url)).data
-      this.hotspotData = result[this.$route.query.m]
-      if (!this.hotspotData) {
-        return alert("热点解析错误")
-      }
-      console.log('热点数据：', this.hotspotData)
-
-      // this.bgAudioUrl = this.hotspotData.backgroundMusic
-    },
   }
 }
 </script>

src/views/QuestionJudge.vue

@@ -18,7 +18,6 @@
     <QuestionPending
       v-show="!isShowDesc"
       ref="question-pending"
-      :is-submitted="isSubmitted"
       @submit="onSubmit"
     />
     <AnswerDesc
@@ -41,16 +40,24 @@
       >
         答案解析
       </button>
-      <button class="next">
-        下一题（2）
+      <button
+        v-if="remainingQuestionNumber"
+        class="next"
+        @click="onClickNext"
+      >
+        下一题（{{ remainingQuestionNumber }}）
       </button>
     </div>
     <div
       v-show="!isShowDesc && isSubmitted && !$refs['question-pending']?.isCorrect"
       class="button-wrapper-wrong"
     >
-      <button class="next">
-        下一题（2）
+      <button
+        v-if="remainingQuestionNumber"
+        class="next"
+        @click="onClickNext"
+      >
+        下一题（{{ remainingQuestionNumber }}）
       </button>
       <button
         class="retry"
@@ -79,45 +86,74 @@
 // import browser from "@/utils/browser";
 import QuestionPending from "@/views/QuestionPending.vue"
 import AnswerDesc from "@/views/AnswerDesc.vue"
+import quizData from "@/quizData.js"
 
 export default {
   components: {
     QuestionPending,
     AnswerDesc,
   },
+  props: [
+  ],
   data() {
     return {
-      isSubmitted: false,
       isShowDesc: false,
     }
   },
   computed: {
     ...globalMapState([
       'questionInfo',
-    ])
+      'isSubmitted',
+    ]),
+    remainingQuestionNumber() {
+      return globalUtils.getRemainingQuestionNumber(this.questionInfo.id)
+    }
   },
   watch: {
   },
   async mounted() {
   },
   methods: {
+    ...globalMapMutations([
+      'setIsSubmitted',
+      'setAnswerRecord',
+      'setQuestionInfo',
+    ]),
     onClickClose() {
       window.parent.document.getElementById('closepop').click()
     },
     onSubmit() {
       if (this.$refs['question-pending'].canSubmit > 0) {
-        this.isSubmitted = true
-        console.log('submit!')
+        this.setIsSubmitted(true)
+        globalApi.submitAnswer(
+          this.$refs['question-pending']?.isCorrect,
+          this.questionInfo.id,
+          this.$refs['question-pending']?.selectedIdxList,
+          this.questionInfo.badgeTypeCode,
+        )
       }
     },
     onClickWatchDesc() {
       this.isShowDesc = true
     },
     onClickRetry() {
-      this.isSubmitted = false
+      this.setIsSubmitted(false)
+      this.setAnswerRecord(null)
       this.isShowDesc = false
       this.$refs['question-pending'].selectedIdxList = []
-    }
+    },
+    onClickNext() {
+      this.setIsSubmitted(false)
+      this.setAnswerRecord(null)
+      this.isShowDesc = false
+      this.$refs['question-pending'].selectedIdxList = []
+
+      const newId = globalUtils.getNextQuestionId(this.questionInfo.id)
+      const quizInfo = quizData.find((item) => {
+        return item.id === newId
+      })
+      this.setQuestionInfo(quizInfo)
+    },
   }
 }
 </script>

src/views/QuestionPending.vue

@@ -56,7 +56,6 @@
 
 export default {
   props: [
-    'isSubmitted',
   ],
   data() {
     return {
@@ -66,18 +65,26 @@ export default {
   computed: {
     ...globalMapState([
       'questionInfo',
+      'isSubmitted',
+      'answerRecord',
     ]),
     canSubmit() {
-      const selectedCount = this.selectedIdxList.reduce((accumulator, currentValue) => {
-        return accumulator + currentValue
-      })
-      return selectedCount > 0
+      if (this.questionInfo.questionType === '单选题' || this.questionInfo.questionType === '判断题') {
+        return this.selectedIdxList.filter((item) => {
+          return !!item
+        }).length > 0
+      } else if (this.questionInfo.questionType === '多选题') {
+        return this.selectedIdxList.filter((item) => {
+          return !!item
+        }).length > 1
+      } else {
+        return false
+      }
     },
     isCorrect() {
-      const selectedCount = this.selectedIdxList.reduce((accumulator, currentValue) => {
-        return accumulator + currentValue
-      })
-      if (!this.questionInfo.rightOptionIdx.length === selectedCount) {
+      if (this.questionInfo.rightOptionIdx.length !== this.selectedIdxList.filter((item) => {
+        return !!item
+      }).length) {
         return false
       }
       for (const iterator of this.questionInfo.rightOptionIdx) {
@@ -91,20 +98,30 @@ export default {
   watch: {
   },
   async mounted() {
-    this.selectedIdxList = new Array(this.questionInfo.answerOptions.length)
+    if (this.answerRecord) {
+      // this.selectedIdxList = []
+      this.selectedIdxList = [...JSON.parse(this.answerRecord.options)]
+    } else {
+      this.selectedIdxList = new Array(this.questionInfo.answerOptions.length)
+      this.selectedIdxList.forEach(element => {
+        return !!element
+      })
+    }
   },
   methods: {
+    ...globalMapMutations([
+      'setIsSubmitted',
+    ]),
     onClickOption(idx) {
-      if (this.questionInfo.questionType === '单选题') {
+      if (this.questionInfo.questionType === '单选题' || this.questionInfo.questionType === '判断题') {
         this.selectedIdxList = new Array(this.questionInfo.answerOptions.length)
+        this.selectedIdxList.forEach(element => {
+          return !!element
+        })
         this.$set(this.selectedIdxList, idx, true)
         this.$emit('submit')
       } else if (this.questionInfo.questionType === '多选题') {
         this.$set(this.selectedIdxList, idx, !this.selectedIdxList[idx])
-      } else if (this.questionInfo.questionType === '判断题') {
-        this.selectedIdxList = new Array(this.questionInfo.answerOptions.length)
-        this.$set(this.selectedIdxList, idx, true)
-        this.$emit('submit')
       }
     }
   }