1

src/components/subject/answer.vue

+<template>
+  <view>
+    <van-nav-bar fixed>
+      <template #left>
+        <van-icon name="cross" style="font-size: 32rpx; color: #111" />
+      </template>
+      <template #title>
+        <view
+          style="
+            font-size: 32rpx;
+            color: #111;
+            font-family: PingFang SC;
+            font-weight: 800;
+          "
+          >答题卡</view
+        >
+      </template>
+    </van-nav-bar>
+    <view class="answer-sheets">
+      <view v-for="(item, index) in questionList" :key="index" class="item">
+        <view class="name">
+          {{ changeNumToHan(index + 1) }}、{{ item.GroupName }}</view
+        >
+        <view class="flex flex_wrap">
+          <view
+            v-for="(item1, index1) in item.DetailsList"
+            :key="index1"
+            class="flex flex_wrap"
+          >
+            <view
+              class="item1-1"
+              v-if="
+                item1.QuestionTypeKey === 'reading-comprehensio' ||
+                item1.QuestionTypeKey === 'listening'
+              "
+              >{{ index1 + 1 }}.</view
+            >
+            <view class="item1" v-else @click="jumpPage(index, index1)">{{
+              index1 + 1
+            }}</view>
+
+            <view
+              v-if="
+                item1.QuestionTypeKey === 'reading-comprehensio' ||
+                item1.QuestionTypeKey === 'listening'
+              "
+              class="flex flex_wrap"
+            >
+              <view
+                v-for="(item2, index2) in item1.QuestionContentObj"
+                :key="index2"
+              >
+                <view class="item1">{{ index2 + 1 }}</view>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+    <view class="submitBox">
+      <view class="submit">立即提交</view>
+    </view>
+    <van-toast id="van-toast" />
+  </view>
+</template>
+
+<script>
+import {
+  ref,
+  reactive,
+  toRefs,
+  toRef,
+  getCurrentInstance,
+  watch,
+  computed,
+  onMounted,
+} from "vue";
+import { changeNumToHan } from "../../utils/index";
+export default {
+  setup() {
+    let paperData = uni.getStorageSync("paperData");
+    console.log(66, paperData);
+    let Gid = uni.getStorageSync("userInfo").Id;
+    let data = reactive({
+      msg: { GuestId: Gid, PaperId: 5, PublishId: 1 },
+      questionList: paperData.Paper.GroupList,
+    });
+    let methods = {
+      changeNumToHan,
+      jumpPage(index, index1) {
+        uni.navigateTo({
+          url:
+            "/pages/exam/examPaper?index=" + index + "&&index1=" + (index1 + 1),
+        });
+      },
+
+      // async getPaperDetail() {
+      //   let res = await getPaperDetail(data.msg);
+      //   if (res) {
+      //     data.questionList = res.Data.Paper.GroupList;
+      //     console.log(90, res.Data.Paper.GroupList);
+      //   }
+      // },
+    };
+    return {
+      ...toRefs(data),
+      ...methods,
+    };
+  },
+  //   onLoad() {
+  //     uni.setNavigationBarTitle({
+  //       title: "答题卡",
+  //     });
+  //   },
+};
+</script>
+
+<style scoped>
+.answer-sheets {
+  box-sizing: border-box;
+  padding: 30rpx;
+  height: calc(100vh - 300rpx);
+  overflow-y: auto;
+}
+.name,
+.num {
+  font-size: 28rpx;
+  font-family: PingFang SC;
+  font-weight: 800;
+  color: #111111;
+}
+.num {
+  width: 100rpx;
+  text-align: center;
+}
+.item {
+  margin-bottom: 20rpx;
+}
+.item1-1 {
+  width: 690rpx;
+  margin: 22rpx 0 0 0;
+  font-size: 26rpx;
+  font-family: PingFang SC;
+  font-weight: 600;
+  color: #111111;
+}
+.item1 {
+  width: 44rpx;
+  height: 44rpx;
+  border: 1px solid #e2e2e2;
+  border-radius: 50%;
+  margin: 22rpx;
+  font-size: 26rpx;
+  font-family: PingFang SC;
+  font-weight: 600;
+  color: #111111;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+}
+.item2 {
+  width: 44rpx;
+  height: 44rpx;
+  border: 1px solid #e2e2e2;
+  border-radius: 50%;
+  text-align: center;
+  line-height: 44rpx;
+  margin-right: 55rpx;
+  font-size: 26rpx;
+  font-family: PingFang SC;
+  font-weight: bold;
+  color: #111111;
+}
+.choose {
+  background-color: #00acf9 !important;
+  color: #ffffff !important;
+}
+.submitBox {
+  width: 750rpx;
+  height: 150rpx;
+  background-color: #e2e2e2;
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  box-sizing: border-box;
+  padding-top: 40rpx;
+}
+.submit {
+  width: 600rpx;
+  height: 70rpx;
+  border-radius: 35rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #00acf9;
+  font-size: 28rpx;
+  font-family: PingFang SC;
+  font-weight: bold;
+  color: #fff;
+  margin: 0 auto;
+}
+</style>

src/pages/exam/examPaper.vue

@@ -3,7 +3,7 @@
     <view style="height: 100rpx"></view>
     <van-nav-bar fixed>
       <template #left>
-        <van-icon name="cross" size="30rpx" @click="back" />
+        <van-icon name="cross" size="32rpx" @click="back" />
       </template>
       <template #title>
         <view class="flex" style="justify-content: center" @click="start">
@@ -23,13 +23,13 @@
         </view>
       </template>
     </van-nav-bar>
-    <view class="exam-con">
+    <view class="exam-con" v-if="!isShowAnswer">
       <view v-for="(item, index) in peaperDetail.Paper.GroupList" :key="index">
-		<i
-		  class="iconfont icon-caidanzu answerSheet"
-		  style="position:absolute;right:15px;top:85px;"
-		  @click="jumpAnswerSheet"
-		></i>
+        <i
+          class="iconfont icon-caidanzu answerSheet"
+          style="position: absolute; right: 15px; top: 85px"
+          @click="showAnswerSheet"
+        ></i>
         <!-- 数字单选题 -->
         <SingleChoiceNumber
           :startIndex="item.startIndex"
@@ -261,6 +261,9 @@
         />
       </view>
     </view>
+    <view class="answer-con" v-if="isShowAnswer">
+      <Answer :paperData="peaperDetail" />
+    </view>
     <van-toast id="van-toast" />
   </view>
 </template>
@@ -299,6 +302,7 @@ import Dataquestion from "../../components/subject/Dataquestion.vue";
 import SortingProblem from "../../components/subject/SortingProblem.vue";
 import Connect from "../../components/subject/Connect.vue"; //"连线题"
 import SharingChoose from "../../components/subject/SharingChoose.vue";
+import Answer from "../../components/subject/answer.vue"; //答题卡
 export default {
   components: {
     SingleChoiceNumber,
@@ -320,6 +324,7 @@ export default {
     EntryProblem,
     SharingChoose,
     Connect,
+    Answer,
   },
   setup(props, context) {
     let Gid = uni.getStorageSync("userInfo").Id;
@@ -333,9 +338,10 @@ export default {
       changeIndex: 0, //大题序号
       changeIndexSub: 1, //小题序号
       isLast: false, //用于判断是否从后往前翻
+      isShowAnswer: false, //是否显示答题卡
     });
     let methods = {
-	  changeNumToHan,
+      changeNumToHan,
       jumpPage() {
         uni.navigateTo({
           url: "/pages/exam/examPaper",
@@ -352,11 +358,6 @@ export default {
         if (res) {
           callback(res);
           data.peaperDetail = res.Data;
-          uni.setStorage({
-            key: "paperData",
-            data: data.peaperDetail,
-          });
-          // console.log(90, res.Data.Paper.GroupList);
         }
       },
       //往后翻
@@ -369,11 +370,10 @@ export default {
         this.changeIndex--;
         this.isLast = true;
       },
-	  jumpAnswerSheet() {
-	    uni.navigateTo({
-	      url: "/pages/exam/answerSheet",
-	    });
-	  },
+      //显示答题卡
+      showAnswerSheet() {
+        data.isShowAnswer = true;
+      },
     };
     onMounted(() => {
       console.log(366, data.peaperDetail);