From 1f258721dfa19f09d2a4e0514a3a0faeb4df0131 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=84=86=E7=9A=AE=E9=B8=AD?= <1003092440@qq.com>
Date: Mon, 14 Aug 2023 00:38:55 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .hbuilderx/launch.json                        |  16 +
 .../questionBank/components/Question.vue      | 644 ++++++++++++++----
 2 files changed, 528 insertions(+), 132 deletions(-)
 create mode 100644 .hbuilderx/launch.json

diff --git a/.hbuilderx/launch.json b/.hbuilderx/launch.json
new file mode 100644
index 0000000..81f13f4
--- /dev/null
+++ b/.hbuilderx/launch.json
@@ -0,0 +1,16 @@
+{ // launch.json 配置了启动调试时相关设置，configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/
+  // launchtype项可配置值为local或remote, local代表前端连本地云函数，remote代表前端连云端云函数
+    "version": "0.0",
+    "configurations": [{
+     	"default" : 
+     	{
+     		"launchtype" : "local"
+     	},
+     	"mp-weixin" : 
+     	{
+     		"launchtype" : "local"
+     	},
+     	"type" : "uniCloud"
+     }
+    ]
+}
diff --git a/src/pages/questionBank/components/Question.vue b/src/pages/questionBank/components/Question.vue
index 48b0915..9706002 100644
--- a/src/pages/questionBank/components/Question.vue
+++ b/src/pages/questionBank/components/Question.vue
@@ -1,146 +1,526 @@
 <template>
-	<view style="margin-top: 100px;">
-		<view class="flex ai-c jc-c">
-			<view class="flex type_box">
-				<view class="type_item" :class="tCurrent==0?'checked':'unchecked'" @tap="sectionChange(0)">答题</view>
-				<view class="type_item" :class="tCurrent==1?'checked':'unchecked'" @tap="sectionChange(1)">背题</view>
-			</view>
-		</view>
-		<view class="m14lr">
-			<text class="tag_box">{{questionList[currentIndex].questionTypeDesc}}</text>
-			<text class="fs18">{{questionList[currentIndex].questionDesc}}</text>
-		</view>
-		<view class="flex m14lr ai-c mt20" v-for="(item,index) in questionList[currentIndex].optionList" :key="item.op">
-			<template v-if="clickAnswer&&item.op===questionList[currentIndex].rightAnswer">
-				<u-icon name="checkmark-circle-fill" color="#05C341" size="30"></u-icon>
-			</template>
-			<template v-else-if="clickAnswer===item.op&&item.op!==questionList[currentIndex].rightAnswer">
-				<u-icon name="close-circle-fill" color="red" size="30"></u-icon>
-			</template>
-			<template v-else-if="!clickAnswer">
-				<view class="option_item">{{item.op}}</view>
-			</template>
-			<text class="fs18">{{item.opDesc}}</text>
-		</view>
-	</view>
+  <view style="margin-top: 100px;">
+    <view class="flex ai-c jc-c">
+      <view class="flex type_box jc-sb ai-c">
+        <view class="type_item" :class="tCurrent==0?'checked':'unchecked'" @tap="sectionChange(0)">答题</view>
+        <view class="type_item" :class="tCurrent==1?'checked':'unchecked'" @tap="sectionChange(1)">背题</view>
+      </view>
+    </view>
+    <swiper class="swiper" :current="swiperIndex" :duration="duration" :autoplay="false" :disable-programmatic-animation="true"	@change="onChange" @animationfinish="onAnimationfinish">
+      <swiper-item v-for="(quesItem,quesIndex) in swiperList" :key="quesIndex">
+        <scroll-view scroll-y="true" class="swiper-scroll">
+          <view>
+            <view class="m14lr">
+              <text class="tag_box">{{quesItem.questionTypeDesc}}</text>
+              <text class="fs18">{{quesItem.questionDesc}}</text>
+            </view>
+            <view class="flex m14lr ai-c mt20" v-for="(item,index) in quesItem.optionList"
+                  :key="item.op" @tap="answerQues(item.op,index)">
+              <template
+                  v-if="quesItem.clickAnswer&&item.op===quesItem.rightOp">
+                <u-icon class="mr15" name="checkmark-circle-fill" color="#05C341" size="30"></u-icon>
+              </template>
+              <template
+                  v-else-if="quesItem.clickAnswer===item.op&&item.op!==quesItem.rightAnswer">
+                <u-icon class="mr15" name="close-circle-fill" color="red" size="30"></u-icon>
+              </template>
+              <template v-else-if="!item.chooseOption">
+                <view class="option_item">{{item.op}}</view>
+              </template>
+              <text class="fs18">{{item.opDesc}}</text>
+            </view>
+            <view class="m14lr mt30"
+                  v-if="quesItem.clickAnswer&&quesItem.clickAnswer!==quesItem.rightOp || tCurrent===1">
+              <view class="answer_box">
+                <text class="fs18 fw600 cor-000">答案:{{quesItem.rightOp}}</text>
+                <view class="fs18 cor-000" style="text-indent:2em;"> 这里是相关解释文字，这里是相关解释文字相关解释文字</view>
+              </view>
+            </view>
+          </view>
+        </scroll-view>
+      </swiper-item>
+    </swiper>
+    <u-modal :show="tipShow" :title="title" :content="content">
+      <template #confirmButton>
+        <view class="p10" >
+          <u-button :customStyle="{width:'100%',height:'68rpx',borderRadius:'34rpx'}">查看练题结果</u-button>
+        </view>
+      </template>
+    </u-modal>
+  </view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				tCurrent:0,
-				clickAnswer:undefined,
-				questionList:[],
-				currentIndex:0,
-			}
-		},
-		onshow(){
-			this.getQuestionList()
-		},
-		methods: {
-			sectionChange(index){
-				this.tCurrent=index
-			},
-			getQuestionList(){
-				this.questionList=[{
-					questionId:0,
-					questionTypeDesc:'单选',
-					questionDesc:'在实习期内驾驶机动车的，应当在车身后部粘贴或者悬挂哪种标志？',
-					optionList:[{
-						op:'A',
-						opDesc:'注意新手标志'
-					},{
-						op:'B',
-						opDesc:'注意新手标志'
-					},{
-						op:'C',
-						opDesc:'注意新手标志'
-					},{
-						op:'D',
-						opDesc:'注意新手标志'
-					}],
-					rightOp:'C',
-				},{
-					questionId:1,
-					questionDesc:'在实习期内驾驶机动车的，应当在车身后部粘贴或者悬挂哪种标志？',
-					optionList:[{
-						op:'A',
-						opDesc:'注意新手标志'
-					},{
-						op:'B',
-						opDesc:'注意新手标志'
-					},{
-						op:'C',
-						opDesc:'注意新手标志'
-					},{
-						op:'D',
-						opDesc:'注意新手标志'
-					}],
-					rightOp:'B',
-				},{
-					questionId:2,
-					questionDesc:'在实习期内驾驶机动车的，应当在车身后部粘贴或者悬挂哪种标志？',
-					optionList:[{
-						op:'A',
-						opDesc:'注意新手标志'
-					},{
-						op:'B',
-						opDesc:'注意新手标志'
-					},{
-						op:'C',
-						opDesc:'注意新手标志'
-					},{
-						op:'D',
-						opDesc:'注意新手标志'
-					}],
-					rightOp:'A',
-				}]
-			}
-		}
-	}
+export default {
+  data() {
+    return {
+      content:'太棒啦，已答完最后一题',
+      tipShow:false,
+      title:'提示',
+      tCurrent:0,
+      questionList: [],//数据源
+      swiperList: [], // 轮播图数据列表
+      swiperIndex: 0, // 轮播图当前位置
+      isChange: false, // 是否切换
+      topicIndex: 0, // 题目位置
+      duration: 200, // 动画过渡时长
+    }
+  },
+  onLoad() {
+    this.getQuestionList()
+    this.renderSwiper(0)
+  },
+  methods: {
+    // 渲染 swiper
+    renderSwiper(index) {
+      let list = [];
+      let current = 1;
+      if (this.questionList[index - 1]) {
+        list.push(this.questionList[index - 1]);
+      } else {
+        current = 0;
+      }
+
+      list.push(this.questionList[index])
+
+      if (this.questionList[index + 1]) {
+        list.push(this.questionList[index + 1]);
+      }
+
+      this.duration = 0;
+
+      setTimeout(() => {
+        this.swiperList = list;
+        this.swiperIndex = current;
+        setTimeout(() => {
+          this.duration = 200;
+        }, 100)
+      }, 50)
+    },
+
+    // 轮播图切换
+    onChange(e) {
+      // 非触摸事件不做轮播图状态更新
+      if (e.detail.source != "touch") return;
+
+      // 标识已切换
+      this.isChange = true;
+      // 轮播图当前位置大于原来时则表示为下一题
+      if (e.detail.current > this.swiperIndex) {
+        this.topicIndex++;
+      } else {
+        // 轮播图当前位置小于原来时则表示为上一题
+        this.topicIndex--;
+      }
+
+      // 更新轮播图位置数值，为更新时让 Vue 能监听到数据有改变
+      this.swiperIndex = e.detail.current;
+    },
+    // 轮播图动画结束
+    onAnimationfinish(e) {
+      if (!this.isChange) return;
+
+      this.isChange = false;
+      setTimeout(() => {
+        this.renderSwiper(this.topicIndex);
+      }, 10);
+    },
+    // 选择题目
+    pickerTopic(index) {
+      this.topicIndex = index;
+      this.renderSwiper(index);
+    },
+    //答题
+    answerQues(op, index) {
+      if (!this.questionList[this.topicIndex].clickAnswer) {
+        this.questionList[this.topicIndex].optionList[index].chooseOption = op
+        this.questionList[this.topicIndex].clickAnswer = op
+      }
+      if(this.tCurrent!==1){
+        if(this.questionList[this.topicIndex].clickAnswer===this.questionList[this.topicIndex].rightOp){
+          if(this.topicIndex<=this.questionList.length-1){
+            if(this.topicIndex===this.questionList.length-1){
+              this.tipShow=true
+            }else{
+              this.tipShow=false
+            }
+            this.topicIndex ++;
+            setTimeout(()=>{
+              this.renderSwiper(this.topicIndex);
+            },1000)
+          }
+        }
+      }
+    },
+    sectionChange(index) {
+      this.tCurrent = index
+      this.getQuestionList()
+      this.renderSwiper(0)
+    },
+    getQuestionList() {
+      this.questionList = [{
+        questionId: 0,
+        questionTypeDesc: '单选',
+        questionDesc: '第一题，在实习期内驾驶机动车的，应当在车身后部粘贴或者悬挂哪种标志？',
+        optionList: [{
+          op: 'A',
+          opDesc: '注意新手标志'
+        }, {
+          op: 'B',
+          opDesc: '注意新手标志'
+        }, {
+          op: 'C',
+          opDesc: '注意新手标志'
+        }, {
+          op: 'D',
+          opDesc: '注意新手标志'
+        }],
+        rightOp: 'C',
+      }, {
+        questionId: 1,
+        questionTypeDesc: '单选',
+        questionDesc: '第二题，在实习期内驾驶机动车的，应当在车身后部粘贴或者悬挂哪种标志？',
+        optionList: [{
+          op: 'A',
+          opDesc: '注意新手标志'
+        }, {
+          op: 'B',
+          opDesc: '注意新手标志'
+        }, {
+          op: 'C',
+          opDesc: '注意新手标志'
+        }, {
+          op: 'D',
+          opDesc: '注意新手标志'
+        }],
+        rightOp: 'B',
+      }, {
+        questionId: 2,
+        questionTypeDesc: '单选',
+        questionDesc: '第三题，在实习期内驾驶机动车的，应当在车身后部粘贴或者悬挂哪种标志？',
+        optionList: [{
+          op: 'A',
+          opDesc: '注意新手标志'
+        }, {
+          op: 'B',
+          opDesc: '注意新手标志'
+        }, {
+          op: 'C',
+          opDesc: '注意新手标志'
+        }, {
+          op: 'D',
+          opDesc: '注意新手标志'
+        }],
+        rightOp: 'A',
+      },
+        {
+          questionId: 3,
+          questionTypeDesc: '单选',
+          questionDesc: '第四题，在实习期内驾驶机动车的，应当在车身后部粘贴或者悬挂哪种标志？',
+          optionList: [{
+            op: 'A',
+            opDesc: '注意新手标志'
+          }, {
+            op: 'B',
+            opDesc: '注意新手标志'
+          }, {
+            op: 'C',
+            opDesc: '注意新手标志'
+          }, {
+            op: 'D',
+            opDesc: '注意新手标志'
+          }],
+          rightOp: 'A',
+        }, {
+          questionId: 4,
+          questionTypeDesc: '单选',
+          questionDesc: '第5题，在实习期内驾驶机动车的，应当在车身后部粘贴或者悬挂哪种标志？',
+          optionList: [{
+            op: 'A',
+            opDesc: '注意新手标志'
+          }, {
+            op: 'B',
+            opDesc: '注意新手标志'
+          }, {
+            op: 'C',
+            opDesc: '注意新手标志'
+          }, {
+            op: 'D',
+            opDesc: '注意新手标志'
+          }],
+          rightOp: 'A',
+        },
+        {
+          questionId: 5,
+          questionTypeDesc: '单选',
+          questionDesc: '第6题，在实习期内驾驶机动车的，应当在车身后部粘贴或者悬挂哪种标志？',
+          optionList: [{
+            op: 'A',
+            opDesc: '注意新手标志'
+          }, {
+            op: 'B',
+            opDesc: '注意新手标志'
+          }, {
+            op: 'C',
+            opDesc: '注意新手标志'
+          }, {
+            op: 'D',
+            opDesc: '注意新手标志'
+          }],
+          rightOp: 'A',
+        }, {
+          questionId: 6,
+          questionTypeDesc: '单选',
+          questionDesc: '第7题，在实习期内驾驶机动车的，应当在车身后部粘贴或者悬挂哪种标志？',
+          optionList: [{
+            op: 'A',
+            opDesc: '注意新手标志'
+          }, {
+            op: 'B',
+            opDesc: '注意新手标志'
+          }, {
+            op: 'C',
+            opDesc: '注意新手标志'
+          }, {
+            op: 'D',
+            opDesc: '注意新手标志'
+          }],
+          rightOp: 'A',
+        }, {
+          questionId: 7,
+          questionTypeDesc: '单选',
+          questionDesc: '第8题，在实习期内驾驶机动车的，应当在车身后部粘贴或者悬挂哪种标志？',
+          optionList: [{
+            op: 'A',
+            opDesc: '注意新手标志'
+          }, {
+            op: 'B',
+            opDesc: '注意新手标志'
+          }, {
+            op: 'C',
+            opDesc: '注意新手标志'
+          }, {
+            op: 'D',
+            opDesc: '注意新手标志'
+          }],
+          rightOp: 'A',
+        }, {
+          questionId: 8,
+          questionTypeDesc: '单选',
+          questionDesc: '第9题，在实习期内驾驶机动车的，应当在车身后部粘贴或者悬挂哪种标志？',
+          optionList: [{
+            op: 'A',
+            opDesc: '注意新手标志'
+          }, {
+            op: 'B',
+            opDesc: '注意新手标志'
+          }, {
+            op: 'C',
+            opDesc: '注意新手标志'
+          }, {
+            op: 'D',
+            opDesc: '注意新手标志'
+          }],
+          rightOp: 'C',
+        }, {
+          questionId: 9,
+          questionTypeDesc: '单选',
+          questionDesc: '第10题，在实习期内驾驶机动车的，应当在车身后部粘贴或者悬挂哪种标志？',
+          optionList: [{
+            op: 'A',
+            opDesc: '注意新手标志'
+          }, {
+            op: 'B',
+            opDesc: '注意新手标志'
+          }, {
+            op: 'C',
+            opDesc: '注意新手标志'
+          }, {
+            op: 'D',
+            opDesc: '注意新手标志'
+          }],
+          rightOp: 'B',
+        }, {
+          questionId: 10,
+          questionTypeDesc: '单选',
+          questionDesc: '第11题，在实习期内驾驶机动车的，应当在车身后部粘贴或者悬挂哪种标志？',
+          optionList: [{
+            op: 'A',
+            opDesc: '注意新手标志'
+          }, {
+            op: 'B',
+            opDesc: '注意新手标志'
+          }, {
+            op: 'C',
+            opDesc: '注意新手标志'
+          }, {
+            op: 'D',
+            opDesc: '注意新手标志'
+          }],
+          rightOp: 'A',
+        },
+        {
+          questionId: 11,
+          questionTypeDesc: '单选',
+          questionDesc: '第12题，在实习期内驾驶机动车的，应当在车身后部粘贴或者悬挂哪种标志？',
+          optionList: [{
+            op: 'A',
+            opDesc: '注意新手标志'
+          }, {
+            op: 'B',
+            opDesc: '注意新手标志'
+          }, {
+            op: 'C',
+            opDesc: '注意新手标志'
+          }, {
+            op: 'D',
+            opDesc: '注意新手标志'
+          }],
+          rightOp: 'A',
+        }, {
+          questionId: 12,
+          questionTypeDesc: '单选',
+          questionDesc: '第13题，在实习期内驾驶机动车的，应当在车身后部粘贴或者悬挂哪种标志？',
+          optionList: [{
+            op: 'A',
+            opDesc: '注意新手标志'
+          }, {
+            op: 'B',
+            opDesc: '注意新手标志'
+          }, {
+            op: 'C',
+            opDesc: '注意新手标志'
+          }, {
+            op: 'D',
+            opDesc: '注意新手标志'
+          }],
+          rightOp: 'A',
+        },
+        {
+          questionId: 13,
+          questionTypeDesc: '单选',
+          questionDesc: '第14题，在实习期内驾驶机动车的，应当在车身后部粘贴或者悬挂哪种标志？',
+          optionList: [{
+            op: 'A',
+            opDesc: '注意新手标志'
+          }, {
+            op: 'B',
+            opDesc: '注意新手标志'
+          }, {
+            op: 'C',
+            opDesc: '注意新手标志'
+          }, {
+            op: 'D',
+            opDesc: '注意新手标志'
+          }],
+          rightOp: 'A',
+        }, {
+          questionId: 14,
+          questionTypeDesc: '单选',
+          questionDesc: '第15题，在实习期内驾驶机动车的，应当在车身后部粘贴或者悬挂哪种标志？',
+          optionList: [{
+            op: 'A',
+            opDesc: '注意新手标志'
+          }, {
+            op: 'B',
+            opDesc: '注意新手标志'
+          }, {
+            op: 'C',
+            opDesc: '注意新手标志'
+          }, {
+            op: 'D',
+            opDesc: '注意新手标志'
+          }],
+          rightOp: 'A',
+        }, {
+          questionId: 15,
+          questionTypeDesc: '单选',
+          questionDesc: '第16题，在实习期内驾驶机动车的，应当在车身后部粘贴或者悬挂哪种标志？',
+          optionList: [{
+            op: 'A',
+            opDesc: '注意新手标志'
+          }, {
+            op: 'B',
+            opDesc: '注意新手标志'
+          }, {
+            op: 'C',
+            opDesc: '注意新手标志'
+          }, {
+            op: 'D',
+            opDesc: '注意新手标志'
+          }],
+          rightOp: 'A',
+        }
+      ]
+      if(this.tCurrent===1){
+        this.questionList=this.questionList.map(item=>{
+          return{
+            ...item,
+            clickAnswer:item.rightOp
+          }
+        })
+      }
+    }
+  }
+}
 </script>
 
 <style scoped>
-.type_box{
-	width: 280rpx;
-	height: 72rpx;
-	background-color: #FFFFFF;
-	border-radius: 8rpx;
+.type_box {
+  width: 280rpx;
+  height: 72rpx;
+  background-color: #FFFFFF;
+  border-radius: 8rpx;
 }
-.type_item{
-	text-align: center;
-	line-height: 64rpx;
-	width: 126rpx;
-	height: 64rpx;
-	border-radius: 8rpx;
+
+.type_item {
+  text-align: center;
+  line-height: 64rpx;
+  width: 126rpx;
+  height: 64rpx;
+  border-radius: 8rpx;
 }
-.checked{
-	color: #fff;
-	background-color: #05C341;
+
+.checked {
+  color: #fff;
+  background-color: #05C341;
 }
-.unchecked{
-	color: #666;
+
+.unchecked {
+  color: #666;
 }
-.tag_box{
-	display: inline-block;
-	width: 78rpx;
-	height: 42rpx;
-	background: #05C341;
-	border-radius: 8rpx;
-	text-align: center;
-	line-height: 42rpx;
-	color: #fff;
-	font-size: 12px;
-	margin-right: 5px;
+
+.tag_box {
+  display: inline-block;
+  width: 78rpx;
+  height: 42rpx;
+  background: #05C341;
+  border-radius: 8rpx;
+  text-align: center;
+  line-height: 42rpx;
+  color: #fff;
+  font-size: 12px;
+  margin-right: 5px;
 }
-.option_item{
-	width: 60rpx;
-	height: 60rpx;
-	border: 1px solid #666;
-	border-radius: 50%;
-	text-align: center;
-	line-height: 60rpx;
-	margin-right: 30rpx;
+
+.option_item {
+  width: 60rpx;
+  height: 60rpx;
+  border: 1px solid #666;
+  border-radius: 50%;
+  text-align: center;
+  line-height: 60rpx;
+  margin-right: 30rpx;
+}
+
+.swiper {
+  height: 100vh;
+}
+
+.answer_box {
+  width: 100%;
+  padding: 30rpx;
+  background: #EEEEEE;
+  border-radius: 20rpx;
 }
 </style>