fix bug

answer/src/views/contest.vue

@@ -1,7 +1,7 @@
 <template>
 <div>
     <img class="bg" :src="bg" alt="">
-    <div class="top" v-if="!submitState">
+    <div class="top" v-if="submitState!==2">
         <div class="top-message">
             您还有
             <div class="time">09:44</div>
@@ -36,8 +36,9 @@
         </div>
         <div class="bounced" :style="conTop" v-if="submitState">
             <img :src="icon" alt="">
-            <div class="bounced-message">提交已成功！</div>
-            <div class="bounced-button">返回</div>
+            <div class="bounced-message">{{submitState===1?'您未答完全部题，确认提交吗？':'提交已成功！'}}</div>
+            <div class="bounced-button" @click="submit(true)" v-if="submitState===1">提交</div>
+            <div class="bounced-button" v-else>返回</div>
         </div>
     </div>
 </div>
@@ -45,96 +46,100 @@
 
 <script>
 export default {
-  data () {
-    return {
-      bg: require('../../public/img/contest/bg.png'),
-      conTop: {
-        backgroundImage: 'url(' + require('../../public/img/contest/confirm-bg.png') + ')',
-        backgroundRepeat: 'no-repeat',
-        backgroundSize: 'cover'
-      },
-      icon: require('../../public/img/contest/success.png'),
-      page: 1,
-      questions: [],
-      chooseList: [],
-      paperId: null,
-      timer: null,
-      paperDuration: 0,
-      submitState: false
-    }
-  },
-  computed: {
-    answerList () {
-      let {
-        questions,
-        page
-      } = this.$data
-      return questions.filter((itx, num) => num >= (page - 1) * 10 && num < page * 10)
-    }
-  },
-  watch: {
-    page () {
-      document.body.scrollIntoView()
-    }
-  },
-  methods: {
-    getAttendContest () {
-      this.$api.post('/mCompetition/attendContest', {
-        userId: 7
-      }).then(r => {
-        this.questions = r.object.questions
-        this.paperId = r.object.paperId
-      })
+    data() {
+        return {
+            bg: require('../../public/img/contest/bg.png'),
+            conTop: {
+                backgroundImage: 'url(' + require('../../public/img/contest/confirm-bg.png') + ')',
+                backgroundRepeat: 'no-repeat',
+                backgroundSize: 'cover'
+            },
+            icon: require('../../public/img/contest/success.png'),
+            page: 1,
+            questions: [],
+            chooseList: [],
+            paperId: null,
+            timer: null,
+            paperDuration: 0,
+            submitState: 0 // 0 正常 1 警告 2 完成
+        }
     },
-    // 问题下标 选择答案下标
-    clickChoose (q, a) {
-      this.$set(this.chooseList, q, a)
+    computed: {
+        answerList() {
+            let {
+                questions,
+                page
+            } = this.$data
+            return this.submitState ? [] : questions.filter((itx, num) => num >= (page - 1) * 10 && num < page * 10)
+        }
+    },
+    watch: {
+        page() {
+            document.body.scrollIntoView()
+        }
     },
-    submit () {
-      let paperScore = 0
-      let questionWrong = []
-      let {
-        paperDuration,
-        paperId,
-        questions,
-        chooseList
-      } = this.$data
-      questions.forEach((item, index) => {
-        (chooseList[index] || chooseList[index] === 0) && item.options[chooseList[index]].optionAnswer
-          ? paperScore += 2
-          : questionWrong.push({
-            [item.id]: (chooseList[index] || chooseList[index] === 0) ? item.options[chooseList[index]].optionId : ''
-          })
-      })
-      this.$api.post('/mCompetition/submitUserAnswer', {
-        reqdata: {
-          paperId,
-          paperDuration,
-          paperScore,
-          questionWrong: JSON.stringify(questionWrong),
-          userId: 7
+    methods: {
+        getAttendContest() {
+            this.$api.post('/mCompetition/attendContest', {
+                userId: 7
+            }).then(r => {
+                this.questions = r.object.questions
+                this.paperId = r.object.paperId
+            })
         },
-        userId: 7
-      }).then(r => {
-        this.submitState = true
-        clearInterval(this.timer)
-        this.questions = []
-        this.chooseList = []
-      })
+        // q 问题下标 a 选择答案下标
+        clickChoose(q, a) {
+            this.$set(this.chooseList, q, a)
+        },
+        // false 需确认 true 直接请求
+        submit(type) {
+            if (!type) {
+                if (!this.chooseList.every(item => item || item === 0)) {
+                    return this.submitState = 1
+                }
+            }
+            let paperScore = 0
+            let questionWrong = []
+            let {
+                paperDuration,
+                paperId,
+                questions,
+                chooseList
+            } = this.$data
+            questions.forEach((item, index) => {
+                (chooseList[index] || chooseList[index] === 0) && item.options[chooseList[index]].optionAnswer ?
+                    paperScore += 2 :
+                    questionWrong.push({
+                        [item.id]: (chooseList[index] || chooseList[index] === 0) ? item.options[chooseList[index]].optionId : ''
+                    })
+            })
+            this.$api.post('/mCompetition/submitUserAnswer', {
+                reqdata: {
+                    paperId,
+                    paperDuration,
+                    paperScore,
+                    questionWrong: JSON.stringify(questionWrong),
+                    userId: 7
+                },
+                userId: 7
+            }).then(r => {
+                this.submitState = 2
+                clearInterval(this.timer)
+            })
+        }
+    },
+    mounted() {
+        this.getAttendContest()
+    },
+    created() {
+        this.timer = setInterval(() => {
+            this.paperDuration += 1
+            console.log(this.paperDuration)
+        }, 1000)
+    },
+    beforeDestroy() {
+        this.timer && clearInterval(this.timer)
     }
-  },
-  mounted () {
-    this.getAttendContest()
-  },
-  created () {
-    this.timer = setInterval(() => {
-      this.paperDuration += 1
-      console.log(this.paperDuration)
-    }, 1000)
-  },
-  beforeDestroy () {
-    this.timer && clearInterval(this.timer)
-  }
 }
 </script>