测试界面

src/router/index.js

@@ -31,6 +31,11 @@ const routes = [
     path: '/testTopic',
     component: () => import('../views/evaluation/testTopic.vue')
   },
+  // 测试提交
+  {
+    path: '/testSubmit',
+    component: () => import('../views/evaluation/testSubmit.vue')
+  },
   // 智能绘画
   {
     path: '/ai-painting',

src/views/evaluation/testList.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- 问卷列表 -->
   <div class="test-list">
-    <div class="box-title">
+    <div class="box-title" @click="goToHome">
       <el-icon><ArrowLeftBold /></el-icon>
       能力测评
     </div>
@@ -11,10 +11,11 @@
         <!-- 问卷标题 -->
         <div
           class="test-title"
-          @click="handleClick(item.id)"
+          @click="handleClick(item)"
           v-for="item in testList"
           :key="item.id"
         >
+          <img :src="testPaperIcon" class="test-icon" alt="test paper icon">
           {{ item.bqQuestionnaire }}
         </div>
       </div>
@@ -29,17 +30,25 @@ import { ArrowLeftBold } from '@element-plus/icons-vue'
 
 import { useRouter } from 'vue-router'
 
+import testPaperIcon from '@/assets/icon/test-paper.png'
+
 const router = useRouter()
 // 点击进入试题携带列表id
-const handleClick = (id) => {
+const handleClick = (item) => {
   router.push({
     path: '/testTopic',
     query: {
-      id: id
+      title: item.bqQuestionnaire,
+      id: item.id
     }
   })
 }
 
+// 返回列表
+const goToHome = ()=>{
+  router.push('/home')
+}
+
 // 问卷列表
 const testList = ref([])
 onMounted(() => {
@@ -97,18 +106,26 @@ const SearchInput = ref('')
   padding: rpx(10); /* 添加内边距 */
 }
 .test-title {
-  width: rpx(130); // 增加宽度以容纳文本
-  text-overflow: ellipsis; // 文本溢出时显示省略
+  width: rpx(130);
+  text-overflow: ellipsis;
   height: rpx(80);
   margin: rpx(11);
   border-radius: rpx(5);
+  font-size: rpx(8);
   border: 1px solid white;
   background-color: rgba(255, 255, 255, 0.5);
   cursor: pointer;
   padding: 0 rpx(10);
   display: flex;
+  text-align: left; // 文字靠左显示
   align-items: center;
-  justify-content: center; /* 添加水平居中 */
+  justify-content: flex-start; /* 修改为左对齐 */
+  gap: rpx(5); /* 添加图片和文字间距 */
+}
+/* 添加图片样式 */
+.test-icon {
+  width: rpx(30);
+  height: rpx(30);
 }
 .test-title:hover {
   box-shadow: 0 4px 8px rgba(255, 255, 255, 0.418);

src/views/evaluation/testSubmit.vue

@@ -0,0 +1,62 @@
+<template>
+  <!-- <div class="test-center"> -->
+    <div class="test-submit">
+      <div class="content-group">
+        <img :src="submit" alt="" />
+        <h2>提交成功</h2>
+      </div>
+      <button class="home-btn" @click="goTo">返回试题列表</button>
+    </div>
+  <!-- </div> -->
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import submit from '@/assets/icon/submit.png'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+const goTo = () => {
+  router.push('/evaluation')
+}
+</script>
+
+<style scoped lang="scss">
+@use 'sass:math';
+// 定义rpx转换函数
+@function rpx($px) {
+  @return math.div($px, 750) * 100vw;
+}
+// .test-center{
+//   width: 100%;
+//   height: 100%;
+// }
+.test-submit {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.content-group {
+  display: flex;
+  align-items: center;
+  gap: rpx(5);
+}
+.test-submit img {
+  width: rpx(20);
+  height: rpx(20);
+}
+.home-btn {
+  width: rpx(100);
+  margin-top: rpx(20);
+  margin-left: rpx(10);
+  background-color: #9e78e7;
+  color: white;
+  border: none;
+  border-radius: rpx(5);
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+.home-btn:hover {
+  border: none;
+}
+</style>

src/views/evaluation/testTopic.vue

@@ -3,7 +3,7 @@
     <!-- 测试标题 -->
     <div class="test-title" @click="handleClick">
       <el-icon><ArrowLeftBold /></el-icon>
-      在线测试
+      {{ topicTitle }}
     </div>
     <!-- 测试内容 -->
     <div class="test-content">
@@ -43,12 +43,12 @@
               @click="handlePrevQuestion"
               >上一题</el-button
             >
-            <!-- 修改下一题按钮样式 -->
+            <!-- 下一题按钮样式 最后一题显示为提交 -->
             <el-button
               type="primary"
               class="next-question-btn"
-              @click="handleNextQuestion"
-              >下一题</el-button
+              @click="currentQuestionIndex === questions.length - 1 ? handleSubmit() : handleNextQuestion()"
+              >{{ currentQuestionIndex === questions.length - 1 ? '提交' : '下一题' }}</el-button
             >
           </div>
         </div>
@@ -63,7 +63,10 @@
                 v-for="num in questions.length"
                 :key="num"
                 class="circle-btn"
-                :class="{ clicked: clickedNumbers.includes(num) }"
+                :class="{
+                  clicked: clickedNumbers.includes(num), 
+                  current: num === currentQuestionIndex + 1
+                }"
                 @click="handleButtonClick(num)"
                 >{{ num }}</el-button
               >
@@ -81,6 +84,7 @@ import { ArrowLeftBold } from '@element-plus/icons-vue'
 import { useRouter,useRoute } from 'vue-router'
 
 import { QuestionTopicList } from '@/api/question/test.js'
+import { ElMessage } from 'element-plus'
 
 const router = useRouter()
 const route = useRoute()
@@ -97,10 +101,13 @@ const handleClick = () => {
   })
 }
 
-// 添加题目数据
-const questions = ref([
-])
+// 渲染列表标题
+const topicTitle = ref(
+  route.query.title
+)
 
+// 添加题目数据
+const questions = ref([])
 onMounted(()=>{
   // 获取路由参数中的id
   const id = route.query.id
@@ -108,10 +115,11 @@ onMounted(()=>{
   if (id) {
     // 将id作为参数传递给QuestionTopicList接口
     QuestionTopicList({ qrId: id }).then(res=>{
-      console.log(res);
       // 将接口返回的题目数据赋值给questions
       questions.value = res.data.questionList || []
-     // 初始化currentQuestionIndex，防止越界
+      // 初始化用户答案数组
+      userAnswers.value = new Array(questions.value.length).fill(null)
+     // 初始化currentQuestionIndex
       if (questions.value.length > 0) {
         currentQuestionIndex.value = 0
       }
@@ -144,19 +152,28 @@ const handleNextQuestion = () => {
   }
 }
 
+// 提交
+const handleSubmit = () => {
+  // 保存最后一题答案
+  userAnswers.value[currentQuestionIndex.value] = selectedOption.value;
+  // 检查是否所有题目都已回答
+  const allAnswered = userAnswers.value.every(answer => answer !== null && answer !== undefined)
+  if(!allAnswered){
+    ElMessage.error('检测到有题目未完成，请回答所有题目后再提交')
+    return;
+  }
+  // 答完全部答完跳转到提交页面
+  router.push('/testSubmit')
+}
+
 // 答题卡
 const handleButtonClick = (num) => {
   // 切换到对应题目
   currentQuestionIndex.value = num - 1
   // 加载该题目的答案
   selectedOption.value = userAnswers.value[currentQuestionIndex.value] || null
-  // 答题卡选中状态切换逻辑
-  // if (clickedNumbers.value.includes(num)) {
-  //   clickedNumbers.value = clickedNumbers.value.filter(n => n !== num)
-  // } else {
-  //   clickedNumbers.value.push(num)
-  // }
 }
+
 // 监听选项变化，自动更新答题卡状态
 watch(selectedOption, (newVal) => {
   if (newVal !== null) {
@@ -373,6 +390,9 @@ watch(selectedOption, (newVal) => {
   color: #909090;
   min-width: auto; // 移除Element Plus按钮默认最小宽度
 }
+.circle-btn.current {
+  border: 2px solid #9e78e7;
+}
 
 .circle-btn:focus,
 .circle-btn:active,