三力测试1

src/api/modules/exam.js

@@ -280,6 +280,14 @@ const exam = {
 			params
 		})
 
+	},
+	// 获取三力测试模拟考题
+	studentThreeForceSelectTestQuestionInfoList(){
+		return request({
+			url: `student/three/force/selectTestQuestionInfoList`,
+			method: "get",
+		
+		})
 	}
 }
 

src/components/countDown/index.vue

@@ -12,6 +12,7 @@
 </template>
 
 <script>
+let t
 export default {
   data() {
     return {
@@ -60,8 +61,12 @@ export default {
       this.privateTime = Number(newVal);
     },
   },
+  destroyed(){
+    clearInterval(t)
+
+  },
   mounted() {
-    let t = setInterval(() => {
+    t = setInterval(() => {
       this.privateTime = this.privateTime - 1000;
       //第一参数是剩余时间,第二个是过去的时间
       this.$emit("change", this.formatterTime(this.privateTime, "mm:ss"),this.formatterTime(this.time-this.privateTime, "mm:ss"));

src/otherPages/beforeThreeExam/index.vue

@@ -40,7 +40,10 @@
         </view>
       </view>
       <view class="mid1-submit">
-        <view class="mid1-submit-begin"> 开始考试</view>
+        <navigator url="/otherPages/threeExam/index">
+          <view class="mid1-submit-begin"> 开始考试</view>
+        </navigator>
+
         <view class="mid1-submit-continue">继续练习</view>
       </view>
     </view>

src/otherPages/threeExam/index.vue

@@ -8,77 +8,262 @@
       ></ad>
     </view>
     <view class="problem">
-      <text class="problem-type"> 判断题 </text>
-      <text class="problem-issue"
+      <!-- <text class="problem-type"> 判断题 </text> -->
+      <!-- <text class="problem-issue"
         >{{ problemListIndex + 1 }}、{{
           problemList[problemListIndex].question
         }}</text
-      >
+      > -->
+      <rich-text
+        style="font-size: 42rpx; vertical-align: top"
+        :nodes="
+          createProblemTypeHtml(problemList[problemListIndex].type) +
+          (problemListIndex + 1) +
+          '、' +
+          problemList[problemListIndex].question
+        "
+      ></rich-text>
       <view class="problem-radio">
-        <van-radio-group :value="problemList[problemListIndex].answer">
+        <van-radio-group
+          v-if="!problemList[problemListIndex].isComplete"
+          @change="changeUserAnswer"
+          :value="problemList[problemListIndex].userAnswer"
+        >
+          <view :key="index" v-for="(item, index) in anLength">
+            <van-radio
+              v-if="problemList[problemListIndex]['an' + (index + 1)]"
+              label-class="pl0"
+              custom-class="mt40"
+              use-icon-slot
+              :name="index + 1"
+            >
+              <view class="problem-radio-flex">
+                <view class="problem-radio-icon">
+                  <view class="problem-radio-letter">{{
+                    numberToLetter(index)
+                  }}</view>
+                </view>
+                <text
+                  style="
+                    font-size: 42rpx;
+                    font-weight: bold;
+                    margin-left: 20rpx;
+                  "
+                  >{{ problemList[problemListIndex]["an" + (index + 1)] }}</text
+                >
+              </view>
+            </van-radio>
+          </view>
+
+          <!-- <van-radio
+            v-if="problemList[problemListIndex].an2"
+            label-class="pl0"
+            custom-class="mt40"
+            use-icon-slot
+            :name="problemList[problemListIndex].an2"
+          >
+            <view class="problem-radio-flex">
+              <view class="problem-radio-icon">
+                <view class="problem-radio-letter">{{
+                  numberToLetter(1)
+                }}</view>
+              </view>
+              <text
+                style="font-size: 42rpx; font-weight: bold; margin-left: 20rpx"
+                >{{ problemList[problemListIndex].an2 }}</text
+              >
+            </view>
+          </van-radio>
           <van-radio
+            v-if="problemList[problemListIndex].an3"
             label-class="pl0"
             custom-class="mt40"
             use-icon-slot
-            name="1"
+            :name="problemList[problemListIndex].an3"
           >
             <view class="problem-radio-flex">
               <view class="problem-radio-icon">
                 <view class="problem-radio-letter">{{
-                  numberToLetter(0)
+                  numberToLetter(2)
                 }}</view>
               </view>
               <text
                 style="font-size: 42rpx; font-weight: bold; margin-left: 20rpx"
-                >正确</text
+                >{{ problemList[problemListIndex].an3 }}</text
               >
             </view>
           </van-radio>
           <van-radio
+            v-if="problemList[problemListIndex].an4"
             label-class="pl0"
             custom-class="mt40"
             use-icon-slot
-            name="1"
+            :name="problemList[problemListIndex].an4"
           >
             <view class="problem-radio-flex">
               <view class="problem-radio-icon">
                 <view class="problem-radio-letter">{{
-                  numberToLetter(1)
+                  numberToLetter(3)
                 }}</view>
               </view>
               <text
                 style="font-size: 42rpx; font-weight: bold; margin-left: 20rpx"
-                >错误</text
+                >{{ problemList[problemListIndex].an4 }}</text
               >
             </view>
           </van-radio>
+          <van-radio
+            v-if="problemList[problemListIndex].an5"
+            label-class="pl0"
+            custom-class="mt40"
+            use-icon-slot
+            :name="problemList[problemListIndex].an5"
+          >
+            <view class="problem-radio-flex">
+              <view class="problem-radio-icon">
+                <view class="problem-radio-letter">{{
+                  numberToLetter(4)
+                }}</view>
+              </view>
+              <text
+                style="font-size: 42rpx; font-weight: bold; margin-left: 20rpx"
+                >{{ problemList[problemListIndex].an5 }}</text
+              >
+            </view>
+          </van-radio>
+          <van-radio
+            v-if="problemList[problemListIndex].an6"
+            label-class="pl0"
+            custom-class="mt40"
+            use-icon-slot
+            :name="problemList[problemListIndex].an6"
+          >
+            <view class="problem-radio-flex">
+              <view class="problem-radio-icon">
+                <view class="problem-radio-letter">{{
+                  numberToLetter(5)
+                }}</view>
+              </view>
+              <text
+                style="font-size: 42rpx; font-weight: bold; margin-left: 20rpx"
+                >{{ problemList[problemListIndex].an6 }}</text
+              >
+            </view>
+          </van-radio>
+          <van-radio
+            v-if="problemList[problemListIndex].an7"
+            label-class="pl0"
+            custom-class="mt40"
+            use-icon-slot
+            :name="problemList[problemListIndex].an7"
+          >
+            <view class="problem-radio-flex">
+              <view class="problem-radio-icon">
+                <view class="problem-radio-letter">{{
+                  numberToLetter(6)
+                }}</view>
+              </view>
+              <text
+                style="font-size: 42rpx; font-weight: bold; margin-left: 20rpx"
+                >{{ problemList[problemListIndex].an7 }}</text
+              >
+            </view>
+          </van-radio> -->
+        </van-radio-group>
+        <van-radio-group
+          v-if="problemList[problemListIndex].isComplete"
+          :value="problemList[problemListIndex].userAnswer"
+        >
+          <view :key="index" v-for="(item, index) in anLength">
+            <van-radio
+              v-if="problemList[problemListIndex]['an' + (index + 1)]"
+              label-class="pl0"
+              custom-class="mt40"
+              use-icon-slot
+              :name="index + 1"
+            >
+              <view class="problem-radio-flex">
+                <view class="problem-radio-icon">
+                  <icon
+                    type="clear"
+                    v-if="
+                      index + 1 ==
+                        problemList[problemListIndex].userAnswerIndex &&
+                      problemList[problemListIndex].userAnswerIndex !=
+                        problemList[problemListIndex].answertrue
+                    "
+                    class="problem-radio-letter"
+                    color="red"
+                    size="60rpx"
+                  ></icon>
+                  <icon
+                    type="success"
+                    v-else-if="
+                      index + 1 ==
+                        problemList[problemListIndex].userAnswerIndex &&
+                      problemList[problemListIndex].userAnswerIndex ==
+                        problemList[problemListIndex].answertrue
+                    "
+                    class="problem-radio-letter"
+                    color="#33CDA4"
+                    size="60rpx"
+                  ></icon>
+                  <view v-else class="problem-radio-letter">{{
+                    numberToLetter(index)
+                  }}</view>
+                </view>
+                <text
+                  style="
+                    font-size: 42rpx;
+                    font-weight: bold;
+                    margin-left: 20rpx;
+                  "
+                  >{{ problemList[problemListIndex]["an" + (index + 1)] }}</text
+                >
+              </view>
+            </van-radio>
+          </view>
         </van-radio-group>
       </view>
+      <view class="problem-media">
+        <image
+          mode="widthFix"
+          v-if="getFileType(problemList[problemListIndex].mediaUrl) == 'image'"
+          :src="problemList[problemListIndex].mediaUrl"
+        ></image>
+        <video
+          :controls="false"
+          autoplay
+          loop
+          v-if="getFileType(problemList[problemListIndex].mediaUrl) == 'video'"
+          :src="problemList[problemListIndex].mediaUrl"
+        ></video>
+      </view>
     </view>
     <view class="bottom">
       <view class="switch">
-        <view class="pre"> 上一题</view>
-        <view class="next"> 下一题</view>
+        <view @click="prePage" class="pre"> 上一题</view>
+        <view @click="nextPage" class="next"> 下一题</view>
       </view>
       <view class="submit">
-        <view class="submit-button"> 交卷&nbsp;19:57 </view>
+        <view @click="submitExam" class="submit-button"><text>交卷</text><countDown @end="submitExam" background='' :time="examTime"></countDown> </view>
         <view class="count">
           <view class="col">
             <icon type="success" size="26rpx" color="#33CDA4"></icon>
-            <text style="font-size: 24rpx; color: #8a9099; margin-left: 8rpx"
-              >180</text
-            >
+            <text style="font-size: 24rpx; color: #8a9099; margin-left: 8rpx">{{
+              trueNum
+            }}</text>
           </view>
           <view class="col">
             <icon type="clear" size="26rpx" color="#FF4D53"></icon>
-            <text style="font-size: 24rpx; color: #8a9099; margin-left: 8rpx"
-              >20</text
-            >
+            <text style="font-size: 24rpx; color: #8a9099; margin-left: 8rpx">{{
+              falseNum
+            }}</text>
           </view>
           <view class="col">
             <van-icon name="description" />
             <text style="font-size: 24rpx; color: #8a9099; margin-left: 8rpx"
-              >100/180</text
+              >{{ problemListIndex + 1 }}/{{ problemList.length }}</text
             >
           </view>
         </view>
@@ -89,9 +274,12 @@
 
 <script>
 import api from "@/api";
+const dayjs = require("dayjs");
+import countDown from "@/components/countDown/index";
 export default {
   data() {
     return {
+      anLength: 7,
       problemList: [
         {
           an1: "红色",
@@ -128,25 +316,139 @@ export default {
           type: 2,
           videoUrl: "",
         },
+        {
+          id: 26855,
+          type: 2,
+          intnumber: "",
+          strtppe: "87",
+          strtypeL: "8701",
+          licensetype: "",
+          question: "100-6-6-6＝？",
+          an1: "82",
+          an2: "60",
+          an3: "76",
+          an4: "48",
+          an5: "",
+          an6: "",
+          an7: "",
+          answertrue: "1",
+          explain: "100-6-6-6＝82",
+          bestanswerid: "1333679685615247360",
+          kemu: 1,
+          jieshiFrom: "",
+          moretypes: "",
+          chapterid: 0,
+          sinaimg: "",
+          videoUrl: "",
+          diffDegree: 1,
+          cityid: 0,
+          gs: "test",
+          keyword: "",
+          errorRate: 0,
+          mediaUrl: "",
+          showOptionType: 0,
+          questionSource: 3,
+          bestExplainNew: "100-6-6-6＝82",
+        },
       ],
+      trueNum: 0,
+      falseNum: 0,
       problemListIndex: 0,
+      examTime: 1000 * 60 * 20
     };
   },
   onLoad() {
-    api.exam
-      .studentThreeForceList({
-        pageNum: 1,
-        pageSize: 20,
-      })
-      .then((res) => {
-        console.log(res);
-      });
+    api.exam.studentThreeForceSelectTestQuestionInfoList().then((res) => {
+      if (Array.isArray(res.rows) && res.rows.length > 0) {
+        res.rows.forEach((element) => {
+          element.userAnswerIndex = -1;
+          element.isComplete = false;
+        });
+        this.problemList = res.rows;
+      }
+    });
   },
   methods: {
+    submitExam(e){
+      uni.showModal({
+        title:"是否交卷",
+        success(res){
+          if(res.confirm){
+            uni.navigateTo({
+              url:""
+            })
+
+          }
+
+        }
+      })
+
+    },
+    getFileType(src) {
+      let suffix = src.substring(src.lastIndexOf(".") + 1);
+      let type = "";
+      switch (suffix) {
+        case "mp4":
+        case "WebM":
+        case "Ogg":
+          type = "video";
+          break;
+        case "png":
+        case "jpg":
+        case "webp":
+          type = "image";
+          break;
+        case "pdf":
+          type = "pdf";
+          break;
+        default:
+          type = "other";
+      }
+      return type;
+    },
+    changeUserAnswer(e) {
+      console.log(e);
+      this.problemList[this.problemListIndex].userAnswerIndex = e.detail;
+      this.problemList[this.problemListIndex].userAnswer =
+        this.problemList[this.problemListIndex]["an" + e.detail];
+
+      this.problemList[this.problemListIndex].isComplete = true;
+       this.problemList[this.problemListIndex].userAnswerIndex==this.problemList[this.problemListIndex].answertrue?this.trueNum++:this.falseNum++
+    },
+    prePage(e) {
+      if (this.problemListIndex <= 0) {
+        uni.showToast({
+          icon: "none",
+          title: "到底了",
+        });
+      } else {
+        this.problemListIndex = this.problemListIndex - 1;
+      }
+    },
+    nextPage(e) {
+      if (this.problemListIndex >= this.problemList.length - 1) {
+        uni.showToast({
+          icon: "none",
+          title: "到底了",
+        });
+      } else {
+        this.problemListIndex = this.problemListIndex + 1;
+      }
+    },
     numberToLetter(index) {
       index = Number(index);
       return String.fromCharCode(index + 65);
     },
+    createProblemTypeHtml(index) {
+      if (index == 1) {
+        return '<span style="font-size: 11px;color: #fff;background: #2878ff;padding: 3px 10px;border-radius: 4px;margin-right: 5px;vertical-align: middle;">判断题</span>';
+      } else {
+        return '<span style="font-size: 11px;color: #fff;background: #2878ff;padding: 3px 10px;border-radius: 4px;margin-right: 5px;vertical-align: middle;">选择题</span>';
+      }
+    },
+  },
+  components: {
+    countDown,
   },
 };
 </script>
@@ -159,12 +461,17 @@ export default {
   background: #fff;
   width: 100%;
   height: 100vh;
+  display: flex;
+  flex-direction: column;
 }
 .wxad {
   border: none;
 }
 .problem {
   padding: 0 30rpx;
+  height: 500rpx;
+  flex-grow: 1;
+  overflow-y: scroll;
 
   .problem-type {
     font-size: 22rpx;
@@ -210,10 +517,18 @@ export default {
       }
     }
   }
+  .problem-media {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    > image {
+      width: 100%;
+    }
+  }
 }
 .bottom {
-  position: absolute;
-  bottom: 0;
+  // position: absolute;
+  // bottom: 0;
   width: 100%;
   padding-bottom: constant(safe-area-inset-bottom);
   padding-bottom: env(safe-area-inset-bottom);
@@ -264,8 +579,10 @@ export default {
       opacity: 1;
       color: #fff;
       text-align: center;
-
+      display: flex;
       font-size: 24rpx;
+      padding: 0 16rpx;
+      justify-content: space-evenly;
     }
   }
   .count {

src/pages/user/index.vue

@@ -37,7 +37,7 @@
           title="三力测试"
           is-link
           center
-          url="/otherPages/threeExam/index"
+          url="/otherPages/beforeThreeExam/index"
         >
         </van-cell>