1

src/components/subject/SharingChoose.vue

 <template>
   <!-- 计算题 -->
   <view>
-		<view class="item" style="padding:0 20px;">
+    <view class="item" style="padding: 0 20px">
       <view class="name">
         <view>
           {{ changeNumToHan(sortIndex) }}、{{ data.GroupName }}
-					<text style="color:#999999;">（共{{data.DetailsList.length}}道,{{data.GScore}}分）</text>
+          <text style="color: #999999"
+            >（共{{ data.DetailsList.length }}道,{{ data.GScore }}分）</text
+          >
         </view>
         <view>
-					<text class="Single_Before">{{ExamIndex}}</text>/
-					<text class="Exam_Total">{{data.DetailsList.length}}</text>
+          <text class="Single_Before">{{ ExamIndex }}</text
+          >/
+          <text class="Exam_Total">{{ data.DetailsList.length }}</text>
         </view>
       </view>
-			<swiper class="swiper-box" :autoplay="autoplay" :current="current" @change="onchange">
+      <swiper
+        class="swiper-box"
+        :autoplay="autoplay"
+        :current="current"
+        @change="onchange"
+      >
         <swiper-item v-if="sortIndex != 1"></swiper-item>
-				<swiper-item v-for="(item1, index1) in data.DetailsList" :key="item1.id">
+        <swiper-item
+          v-for="(item1, index1) in data.DetailsList"
+          :key="item1.id"
+        >
           <view class="item1">
             <view class="flex flex_start_center">
-							<template v-if="item1.QuestionContentObj[1]&& item1.QuestionContentObj[1].length>0">
+              <template
+                v-if="
+                  item1.QuestionContentObj[1] &&
+                  item1.QuestionContentObj[1].length > 0
+                "
+              >
                 <view class="num">(1)</view>
-								<view class="num">-({{item1.QuestionContentObj[1].length}})题共用备选答案：</view>
+                <view class="num"
+                  >-({{
+                    item1.QuestionContentObj[1].length
+                  }})题共用备选答案：</view
+                >
               </template>
             </view>
-						<template v-if="item1.QuestionContentObj[0]&&item1.QuestionContentObj[0].length>0">
-							<view v-for="(item2, index2) in item1.QuestionContentObj[0]" :key="index2">
+            <template
+              v-if="
+                item1.QuestionContentObj[0] &&
+                item1.QuestionContentObj[0].length > 0
+              "
+            >
+              <view
+                v-for="(item2, index2) in item1.QuestionContentObj[0]"
+                :key="index2"
+              >
                 <view class="flex item2 flex_start_center">
-									<view class="num">{{item2.Name}}</view>
-									<view style="margin-left:5px;" class="chooseName" v-html="item2.Content"></view>
+                  <view class="num">{{ item2.Name }}</view>
+                  <view
+                    style="margin-left: 5px"
+                    class="chooseName"
+                    v-html="item2.Content"
+                  ></view>
                 </view>
               </view>
             </template>
-						<template v-if="item1.QuestionContentObj[1]&&item1.QuestionContentObj[1].length>0">
-							<view v-for="(item3, index3) in item1.QuestionContentObj[1]" :key="index3">
+            <template
+              v-if="
+                item1.QuestionContentObj[1] &&
+                item1.QuestionContentObj[1].length > 0
+              "
+            >
+              <view
+                v-for="(item3, index3) in item1.QuestionContentObj[1]"
+                :key="index3"
+              >
                 <view class="flex item2 flex_start_center">
-									<view>{{index3+1}}</view>
+                  <view>{{ index3 + 1 }}</view>
                   <view v-html="item3.Content"></view>
                 </view>
-								<van-button type="primary" @click="alertMenu(item3)">弹出菜单</van-button>
-								{{item3.isShow}}
-								<van-action-sheet :value="item3.isShow" :actions="item1.QuestionContentObj[0]" @select="onSelect"/>
+                <van-button type="primary" @click="alertMenu(item3)"
+                  >弹出菜单</van-button
+                >
+                {{ item3.isShow }}
+                <van-action-sheet
+                  :value="item3.isShow"
+                  :actions="item1.QuestionContentObj[0]"
+                  @select="onSelect"
+                />
               </view>
             </template>
           </view>
@@ -51,7 +97,7 @@
 </template>
 
 <script>
-	import {
+import {
   ref,
   reactive,
   toRefs,
@@ -60,25 +106,25 @@
   watch,
   computed,
   onMounted,
-	} from "vue";
-	import {
-		changeNumToHan
-	} from "../../utils/index";
-	export default {
+} from "vue";
+import { changeNumToHan } from "../../utils/index";
+export default {
   props: {
     paperData: Object,
     sort: Number,
     sortTotal: Number,
-			isLast: Boolean
+    isLast: Boolean,
   },
   setup(props, context) {
-			let {ctx} = getCurrentInstance();
-			if(props.paperData.DetailsList&&props.paperData.DetailsList.length>0){
-				props.paperData.DetailsList[0].QuestionContentObj[1].forEach((item, index) => {
-					item.isShow=false;
-				});
+    let { ctx } = getCurrentInstance();
+    if (props.paperData.DetailsList && props.paperData.DetailsList.length > 0) {
+      props.paperData.DetailsList[0].QuestionContentObj[1].forEach(
+        (item, index) => {
+          item.isShow = false;
+        }
+      );
     }
-			console.log(props.paperData,'paperData');
+    console.log(props.paperData, "paperData");
     let data = reactive({
       data: props.paperData,
       autoplay: false,
@@ -101,19 +147,19 @@
       onchange(e) {
         data.ExamIndex = e.detail.current;
         if (data.ExamIndex === data.data.DetailsList.length + 1) {
-						console.log('进入')
-						this.$emit('getAfterTopic');
+          console.log("进入");
+          this.$emit("getAfterTopic");
         }
         if (e.detail.current == 0) {
-						this.$emit('getBeforeTopic');
+          this.$emit("getBeforeTopic");
         }
       },
-				alertMenu(item){
-					item.isShow=true;
+      alertMenu(item) {
+        item.isShow = true;
         this.$forceUpdate();
-					console.log(item,'item');
+        console.log(item, "item");
       },
-				onSelect(item){
+      onSelect(item) {
         console.log(item);
         //  this.show = false;
         //  this.$toast({
@@ -126,17 +172,17 @@
       if (props.isLast) {
         data.current = props.paperData.DetailsList.length;
       }
-			})
+    });
     let that = methods;
     return {
       ...toRefs(data),
       ...methods,
     };
   },
-	};
+};
 </script>
 <style scoped>
-	.name {
+.name {
   height: 90rpx;
   font-size: 28rpx;
   font-family: PingFang SC;
@@ -145,44 +191,44 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-	}
+}
 
-	.Single_Before {
+.Single_Before {
   font-size: 28rpx;
   font-weight: bold;
-		color: #DA7878;
-	}
-	.swiper-box {
+  color: #da7878;
+}
+.swiper-box {
   height: calc(100vh - 270rpx);
   box-sizing: border-box;
-	}
-	.num {
+}
+.num {
   font-size: 26rpx;
   font-family: PingFang SC;
   font-weight: bold;
   color: #111111;
-	}
+}
 
-	.item {
+.item {
   margin-bottom: 40rpx;
-	}
+}
 
-	.item1 {
+.item1 {
   margin: 25rpx 0;
   align-items: center;
-	}
+}
 
-	.item2 {
+.item2 {
   /* padding-left: 25rpx; */
   margin: 30rpx 0;
-	}
+}
 
-	.choose {
+.choose {
   background-color: #00acf9 !important;
   color: #ffffff !important;
-	}
+}
 
-	.chooseNum {
+.chooseNum {
   width: 40rpx;
   height: 40rpx;
   text-align: center;
@@ -194,32 +240,32 @@
   font-family: PingFang SC;
   font-weight: bold;
   color: #111111;
-	}
+}
 
-	.chooseName {
+.chooseName {
   font-size: 24rpx;
   font-family: PingFang SC;
   font-weight: 500;
   color: #111111;
-	}
+}
 
-	.input {
+.input {
   box-sizing: border-box;
   width: 690rpx;
   border-bottom: 2rpx solid #000;
   color: #000;
   font-size: 22rpx;
-	}
+}
 
-	.textarea {
+.textarea {
   box-sizing: border-box;
   padding: 20rpx 0;
-	}
+}
 
-	/deep/.textarea-placeholder {
+/deep/.textarea-placeholder {
   font-size: 20rpx;
   font-family: PingFang SC;
   font-weight: 500;
   color: #cccccc;
-	}
+}
 </style>

src/components/subject/SingleChoice.vue

@@ -3,7 +3,7 @@
   <view>
     <view class="item" style="padding: 0 20px">
       <view class="name">
-        <view>
+        <view class="grow">
           {{ changeNumToHan(sortIndex) }}、{{ data.GroupName }}
           <text style="color: #999999"
             >（共{{ data.DetailsList.length }}道,{{ data.GScore }}分）</text
@@ -13,6 +13,10 @@
           <text class="Single_Before">{{ ExamIndex }}</text
           >/<text class="Exam_Total">{{ data.DetailsList.length }}</text>
         </view>
+        <i
+          class="iconfont icon-caidanzu answerSheet"
+          @click="jumpAnswerSheet"
+        ></i>
       </view>
       <swiper
         class="swiper-box"
@@ -120,6 +124,11 @@ export default {
           this.$emit("getBeforeTopic");
         }
       },
+      jumpAnswerSheet() {
+        uni.navigateTo({
+          url: "/pages/exam/answerSheet",
+        });
+      },
     };
     onMounted(() => {
       if (props.isLast) {
@@ -157,6 +166,12 @@ export default {
   color: gray;
 }
 
+.answerSheet {
+  font-size: 30rpx;
+  margin-left: 20rpx;
+  color: #000;
+}
+
 .swiper-box {
   height: calc(100vh - 270rpx);
   box-sizing: border-box;

src/pages/exam/answerSheet.vue

 <template>
   <view class="answer-sheets">
     <view v-for="(item, index) in questionList" :key="index" class="item">
-      <view class="name">{{ item.name }}</view>
-      <view
-        v-for="(item1, index1) in item.children"
-        :key="item1.id"
-        class="flex item1"
-      >
-        <view class="num">{{ item1.num }}、</view>
-        <view
-          v-for="(item2, index2) in item1.children"
-          :key="item2.id"
-          class="item2"
-          :class="{ choose: item1.choose === item2 }"
-          @click="change(item.type, index, index1, index2)"
-          v-if="item.type === 1"
+      <view class="name">
+        {{ changeNumToHan(index + 1) }}、{{ item.GroupName }}</view
       >
-          {{ item2 }}
-        </view>
+      <view class="flex flex_wrap">
         <view
-          v-for="(item2, index2) in item1.children"
-          :key="item2.id"
-          class="item2"
-          :class="{ choose: item1.choose.find((e) => e == item2) }"
-          @click="change(item.type, index, index1, index2)"
-          v-if="item.type === 2"
+          v-for="(item1, index1) in item.DetailsList"
+          :key="index1"
+          class="flex item1"
         >
-          {{ item2 }}
+          {{ index1 + 1 }}
         </view>
       </view>
     </view>
@@ -45,74 +29,29 @@ import {
   computed,
   onMounted,
 } from "vue";
+import { getPaperDetail } from "../../api/exam";
+import { changeNumToHan } from "../../utils/index";
 export default {
   setup() {
+    let Gid = uni.getStorageSync("userInfo").Id;
     let data = reactive({
-      questionList: [
-        {
-          name: "一、单选题",
-          type: 1,
-          children: [
-            {
-              num: 1,
-              choose: 1,
-              children: [1, 2, 3, 4, 5],
-            },
-            {
-              num: 2,
-              choose: 0,
-              children: [1, 2, 3, 4, 5],
-            },
-            {
-              num: 3,
-              choose: 0,
-              children: [1, 2, 3, 4, 5],
-            },
-          ],
-        },
-        {
-          name: "二、多选题",
-          type: 2,
-          children: [
-            {
-              num: 1,
-              choose: [1, 2],
-              children: [1, 2, 3, 4, 5],
-            },
-            {
-              num: 2,
-              choose: [],
-              children: [1, 2, 3, 4, 5],
-            },
-            {
-              num: 3,
-              choose: [],
-              children: [1, 2, 3, 4, 5],
-            },
-          ],
-        },
-      ],
+      msg: { GuestId: Gid, PaperId: 5, PublishId: 1 },
+      questionList: [],
     });
     let methods = {
+      changeNumToHan,
       jumpPage() {
         uni.navigateTo({
           url: "/pages/exam/examPaper",
         });
       },
       //选题
-      change(type, index, index1, index2) {
-        if (type === 1) {
-          data.questionList[index].children[index1].choose =
-            data.questionList[index].children[index1].children[index2];
-        } else if (type === 2) {
-          let choose = data.questionList[index].children[index1].choose;
-          let res = data.questionList[index].children[index1].children[index2];
-          let find = choose.indexOf(res);
-          if (find == -1) {
-            choose.push(res);
-          } else {
-            choose.splice(find, 1);
-          }
+      change(type, index, index1, index2) {},
+      async getPaperDetail() {
+        let res = await getPaperDetail(data.msg);
+        if (res) {
+          data.questionList = res.Data.Paper.GroupList;
+          console.log(90, res.Data.Paper.GroupList);
         }
       },
     };
@@ -125,6 +64,7 @@ export default {
     uni.setNavigationBarTitle({
       title: "答题卡",
     });
+    this.getPaperDetail();
   },
 };
 </script>
@@ -149,8 +89,17 @@ export default {
   margin-bottom: 40rpx;
 }
 .item1 {
-  margin: 25rpx 0;
-  align-items: center;
+  width: 44rpx;
+  height: 44rpx;
+  background-color: #00acf9;
+  border-radius: 50%;
+  margin: 22rpx;
+  text-align: center;
+  line-height: 44rpx;
+  font-size: 26rpx;
+  font-family: PingFang SC;
+  font-weight: bold;
+  color: #111111;
 }
 .item2 {
   width: 44rpx;