分数的变成弹窗

src/components/mask/beforeSubmitMask.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="mask" v-show="show">
+    <div>
+      <div class="dialog">
+        <div class="title">
+          <span>考试确认窗口</span>
+        </div>
+        <div class="mid">
+          <div class="mid-line1">操作提示：</div>
+          <div class="mid-line2">
+            你当前考试答对{{ correctScore }}题，答错{{ errorScore }}题，未答{{
+              total - correctScore - errorScore
+            }}题
+          </div>
+          <div class="mid-line3">
+            <span>1.点击【确认交卷】,将提交考试成绩,结束考试！</span>
+          </div>
+          <div class="mid-line4">
+            <span>1.点击【继续考试】,将关闭本窗口,继续考试！</span>
+          </div>
+        </div>
+        <div class="bottom">
+          <button @click="sendPaper">确认交卷</button>
+          <button @click="cancelSubmit">继续考试</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineProps, reactive, toRefs } from 'vue';
+
+export default {
+  setup(props, { emit }) {
+    const state = reactive({
+      count: 0,
+    });
+    const sendPaper = () => {
+        emit("confirm");
+
+    };
+    const cancelSubmit=()=>{
+        emit("cancel");
+
+    }
+
+    return {
+      ...toRefs(state),
+      props,
+      sendPaper,
+      cancelSubmit
+    };
+  },
+  props: {
+    show: {
+        type:Boolean,
+        required:true,
+        default:false
+    },
+    correctScore: {
+      type: Number,
+      required: true,
+      default: 0,
+    },
+    errorScore: {
+      type: Number,
+      required: true,
+      default: 0,
+    },
+    total: {
+      type: Number,
+      required: true,
+      default: 0,
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.mask {
+  position: fixed;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgb(0, 0, 0, 0.65);
+  z-index: 10;
+  display: flex;
+  align-content: center;
+  align-items: center;
+  justify-content: center;
+  .dialog {
+    width: 400px;
+    height: 210px;
+    background: #fff;
+    .title {
+      width: 100%;
+      line-height: 40px;
+      height: 40px;
+      background: #498ef5;
+      color: #fff;
+      font-size: 14px;
+    }
+    .mid {
+      width: 100%;
+      background: #fff;
+      height: 120px;
+      padding-left: 10px;
+      padding-right: 10px;
+      .mid-line1 {
+        line-height: 25px;
+        height: 25px;
+        text-align: left;
+      }
+      .mid-line2 {
+        text-align: left;
+        line-height: 30px;
+      }
+      .mid-line3 {
+        text-align: left;
+        line-height: 30px;
+      }
+      .mid-line4 {
+        text-align: left;
+        line-height: 30px;
+      }
+    }
+    .bottom {
+      background: #498ef5;
+      width: 100%;
+      height: 50px;
+      display: flex;
+      justify-content: center;
+      align-content: center;
+      align-items: center;
+      button:nth-child(1) {
+        height: 30px;
+        margin-right: 30px;
+      }
+      button:nth-child(2) {
+        height: 30px;
+      }
+    }
+  }
+}
+</style>

src/components/mask/submitMask.vue

@@ -0,0 +1,176 @@
+<template>
+  <div class="mask">
+    <div>
+      <div class="dialog">
+        <div class="title">
+          <span>信息提示</span>
+        </div>
+        <div class="mid">
+          <div class="mid-line1">亲爱的考生：</div>
+          <div class="mid-line2">
+            您本次模拟考试得{{ correctScore }}分。<span v-if="correctScore >= 90">及格</span
+            ><span v-else>不及格</span>，祝你下次
+          </div>
+          <div class="mid-line3" v-if="correctScore >= 90">再接再励</div>
+          <div class="mid-line3" v-else>考试成功</div>
+        </div>
+        <div class="bottom">
+          <button
+            @click="
+              () => {
+                router.push({
+                  name: 'examBegin',
+                  query: {
+                    ...router.currentRoute.value.query,
+                  },
+                });
+              }
+            "
+          >
+            关闭
+          </button>
+          <div class="bottom-line">页面将在{{ time }}s内返回</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineProps, reactive, toRefs, ref } from 'vue';
+import router from '@/router/';
+export default {
+  setup(props, { emit }) {
+    const state = reactive({
+      count: 0,
+    });
+    const time = ref(8);
+    const timer = window.setInterval((e) => {
+      time.value = time.value - 1;
+      if (time.value === 0) {
+        window.clearInterval(timer);
+        router.push({
+          name: 'examBegin',
+          query: {
+            ...router.currentRoute.value.query,
+          },
+        });
+      }
+    }, 1000);
+    const sendPaper = () => {
+      emit('confirm');
+    };
+    const cancelSubmit = () => {
+      emit('cancel');
+    };
+
+    return {
+      ...toRefs(state),
+      props,
+      sendPaper,
+      cancelSubmit,
+      time,
+      timer,
+      router,
+    };
+  },
+  beforeDestroy() {
+    window.clearInterval(this.timer);
+  },
+  props: {
+    correctScore: {
+      type: Number,
+      required: true,
+      default: 0,
+    },
+    errorScore: {
+      type: Number,
+      required: true,
+      default: 0,
+    },
+    total: {
+      type: Number,
+      required: true,
+      default: 0,
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.mask {
+  position: fixed;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgb(0, 0, 0, 0.65);
+  z-index: 10;
+  display: flex;
+  align-content: center;
+  align-items: center;
+  justify-content: center;
+  .dialog {
+    width: 400px;
+    height: 210px;
+    background: #fff;
+    .title {
+      width: 100%;
+      line-height: 40px;
+      height: 40px;
+      background: #498ef5;
+      color: #fff;
+      font-size: 14px;
+    }
+    .mid {
+      width: 100%;
+      background: #fff;
+      height: 100px;
+      padding-left: 10px;
+      padding-right: 10px;
+      .mid-line1 {
+        line-height: 25px;
+        height: 25px;
+        text-align: left;
+      }
+      .mid-line2 {
+        text-align: left;
+        line-height: 30px;
+      }
+      .mid-line3 {
+        text-align: left;
+        line-height: 30px;
+      }
+      .mid-line4 {
+        text-align: left;
+        line-height: 30px;
+      }
+    }
+    .bottom {
+      background: #498ef5;
+      width: 100%;
+      height: 70px;
+      display: flex;
+      justify-content: center;
+      flex-wrap: wrap;
+      align-items: flex-start;
+      align-content: flex-start;
+
+      button:nth-child(1) {
+        height: 30px;
+        margin-top: 10px;
+      }
+      .bottom-line {
+        width: 100%;
+        text-align: center;
+        font-size: 14px;
+        color: #fff;
+        font-size: 12px;
+        margin-top: 5px;
+      }
+      button:nth-child(2) {
+        height: 30px;
+      }
+    }
+  }
+}
+</style>

src/hooks/examTest.ts

@@ -427,21 +427,23 @@ export function useExamTest() {
             userAnswer: '',
         },
     ]);
+    let correctScore = ref(0)
+    let errorScore = ref(0)
+    let beforeSubmitVisible = ref(false)
+    let submitVisible = ref(false)
     let submitScore = () => {
-        let score = 0
         list.value.forEach(item => {
-            score += item.answer == item.userAnswer ? 1 : 0
+            correctScore.value += item.answer == item.userAnswer ? 1 : 0
+            if (item.userAnswer) {
+                errorScore.value += item.answer == item.userAnswer ? 0 : 1
+            }
+
         })
+        beforeSubmitVisible.value = true
         store.commit('SET_ENDTIME', {
             endTime: `${dayjs().format('MM-DD HH:mm:ss')}`,
         });
-        router.push({
-            name: 'examScore',
-            query: {
-                score: score,
-                total: list.value.length
-            },
-        });
+
 
     }
     let listIndex = ref(0);
@@ -512,7 +514,11 @@ export function useExamTest() {
         nextTopic,
         getPgae,
         listIndex,
-        list
+        list,
+        correctScore,
+        errorScore,
+        beforeSubmitVisible,
+        submitVisible
 
 
 

src/store/state.ts

@@ -5,7 +5,7 @@ export interface State {
 }
 
 export const state: State = {
-  title: 'Vue(v3) 与 tsx 的结合~',
+  title: '导航页面',
   beginTime:"",
   endTime:""
 };

src/views/Home.tsx

@@ -1,4 +1,5 @@
 import { defineComponent } from 'vue';
+import { RouterLink } from 'vue-router';
 import { useStore } from 'vuex';
 
 export default defineComponent({
@@ -8,7 +9,7 @@ export default defineComponent({
 
     return () => (
       <>
-        <h1>Home</h1>
+        <RouterLink to={'/exam/begin'}>前往模拟考试</RouterLink>
         <h1>{store.state.title}</h1>
       </>
     );

src/views/exam/test.vue

@@ -1,5 +1,19 @@
 <template>
   <div class="center">
+    <beforeSubmitMask
+      :show="beforeSubmitVisible"
+      @cancel="() => {
+        beforeSubmitVisible=false
+      }"
+      :correctScore="correctScore"
+      :errorScore="errorScore"
+      :total="list.length"
+      @confirm="() => {
+         beforeSubmitVisible=false
+         submitVisible=true
+      }"
+    ></beforeSubmitMask>
+    <submitMask  v-if="submitVisible" :correctScore="correctScore"></submitMask>
     <div class="box">
       <div class="main">
         <div class="container1">
@@ -84,20 +98,27 @@
                 {{ index + 1 }}行
               </div>
             </div> -->
-            <table border="0"  class="coll-table-topic">
+            <table border="0" class="coll-table-topic">
               <tr>
-                <td  class="coll-table-topic-item bg-498ef5"><div class="coll-table-topic-item coll-header1-row bg-498ef5">题目</div></td>
-                <td  class="coll-table-topic-item bg-498ef5" v-for="(item, index) in 10" :key="index">
-                  <div class="coll-table-topic-item coll-header1-row bg-498ef5">{{ index + 1 }}列</div>
+                <td class="coll-table-topic-item bg-498ef5">
+                  <div class="coll-table-topic-item coll-header1-row bg-498ef5">题目</div>
+                </td>
+                <td
+                  class="coll-table-topic-item bg-498ef5"
+                  v-for="(item, index) in 10"
+                  :key="index"
+                >
+                  <div class="coll-table-topic-item coll-header1-row bg-498ef5">
+                    {{ index + 1 }}列
+                  </div>
                 </td>
               </tr>
 
               <tr :key="index" v-for="(item, index) in list.length / 10">
                 <td class="coll-table-topic-item bg-498ef5">
-                  <div  style="white-space:nowrap;" >{{ index+1 }}行</div>
+                  <div style="white-space: nowrap">{{ index + 1 }}行</div>
                 </td>
                 <td
-                 
                   v-for="(_item, _index) in 10"
                   :class="{
                     collselected: index * 10 + _index == listIndex,
@@ -106,7 +127,13 @@
                   :key="_index"
                   @click="changeListIndex"
                 >
-                  <div  style="white-space:nowrap;" :data-key="index * 10 + _index + 1" class="coll-table-topic-item">{{ index * 10 + _index + 1 }}</div>
+                  <div
+                    style="white-space: nowrap"
+                    :data-key="index * 10 + _index + 1"
+                    class="coll-table-topic-item"
+                  >
+                    {{ index * 10 + _index + 1 }}
+                  </div>
                 </td>
               </tr>
             </table>
@@ -132,6 +159,8 @@
 <script lang="ts">
 import { defineComponent, reactive, ref, onMounted } from 'vue';
 import dayjs from 'dayjs';
+import beforeSubmitMask from '@/components/mask/beforeSubmitMask.vue';
+import submitMask from "@/components/mask/submitMask.vue"
 // import Api from '@/api/api';
 import { countdownTime, countdown, countdownTimer } from '@/hooks/countdown';
 import { useStore } from 'vuex';
@@ -151,6 +180,7 @@ export default defineComponent({
     let carType = carTypeMap[useRoute().query?.type as string];
     let {
       list,
+      beforeSubmitVisible,
       listIndex,
       submitScore,
       changeListIndex,
@@ -158,6 +188,9 @@ export default defineComponent({
       beforeTopic,
       nextTopic,
       getPgae,
+      correctScore,
+      errorScore,
+      submitVisible
     } = useExamTest();
     //设置开始时间
     store.commit('SET_BEGINTIME', {
@@ -658,12 +691,20 @@ export default defineComponent({
       countdownTime,
       store,
       submitScore,
+      beforeSubmitVisible,
+      submitVisible,
+      correctScore,
+      errorScore,
       headimg,
       subject,
       username,
       carType,
     };
   },
+  components: {
+    beforeSubmitMask,
+    submitMask
+  },
 });
 </script>
 
@@ -671,10 +712,8 @@ export default defineComponent({
 .border-none {
   border: none;
 }
-.bg-498ef5{
+.bg-498ef5 {
   background: #498ef5;
- 
-
 }
 .bottom {
   margin-top: 14px;
@@ -744,7 +783,6 @@ export default defineComponent({
   display: flex;
 }
 .container3 {
-
   flex: 1;
 }
 .container2 {
@@ -818,10 +856,9 @@ export default defineComponent({
       font-size: 12px;
       .coll-table-topic-item {
         border: none;
-     
-    
+
         white-space: nowrap;
-        div{
+        div {
           white-space: nowrap;
         }
       }