Merge branch 'dev-v1.0.0' of https://git.banshouhui.com/wuzhenzhe/study into dev-v1.0.0

src/components/answer-sheet/index.vue

@@ -6,25 +6,46 @@
       :key="index"
       @click="select(index)"
     >
-      <view v-if="!item.confirm" :class="['icons', {'checked': item.checked}]">
+      <view v-if="!item.confirm" :class="['icons', { checked: item.checked }]">
         {{ item.sort }}
       </view>
-      <view v-else :class="[rightKey.includes(item.sort) === true ? 'success' : 'error']"></view>
+      <view
+        v-else
+        :class="[rightKey.includes(item.sort) ? 'success' : 'error']"
+      ></view>
       <view class="text">{{ item.text }}</view>
     </view>
     <view class="btn" v-if="rightKey.length > 1">
-      <view :class="['confirm', {'active': getCheckedNum}]" @click="confirmMultiple">确定</view>
+      <view
+        :class="['confirm', { active: getCheckedNum }]"
+        @click="confirmMultiple"
+        >确定</view
+      >
     </view>
   </view>
 </template>
 
 <script>
+const equar = (a, b) => {
+  // 判断数组的长度
+  if (a.length !== b.length) {
+    return false
+  } else {
+    // 循环遍历数组的值进行比较
+    for (let i = 0; i < a.length; i++) {
+      if (a[i] !== b[i]) {
+        return false
+      }
+    }
+    return true
+  }
+}
 export default {
   name: 'answerSheet',
   props: {
     answerList: {
       type: Array,
-      default: []
+      default: [],
     },
     multiple: {
       type: Boolean,
@@ -32,18 +53,19 @@ export default {
     },
     rightKey: {
       type: Array,
-      default: []
-    }
+      default: [],
+    },
   },
   data() {
     return {
       lists: [],
       submitStatus: false,
+      answer: '',
     }
   },
   watch: {
     answerList: {
-      handler:function (newValue, oldValue) {
+      handler: function(newValue, oldValue) {
         if (newValue.length > 0) {
           this.lists = newValue.map((v) => {
             v.checked = false
@@ -52,43 +74,53 @@ export default {
           })
         }
       },
-      immediate:true
-    }
+      immediate: true,
+    },
   },
   computed: {
     getCheckedNum() {
-      const num = this.lists.filter(v => v.checked)
+      const num = this.lists.filter((v) => v.checked)
       return num.length > 1 ? true : false
-    }
+    },
   },
   methods: {
     select(index) {
+      // 已选定
       if (this.submitStatus) return
       if (!this.multiple) {
-        this.lists.forEach(v => {
+        // 非多选处理
+        this.lists.forEach((v) => {
           v.checked = false // 勾选
           v.confirm = false // 确认答案
         })
         this.$set(this.lists[index], 'confirm', true)
+        // 判断所选答案是否正确
+        this.answer = this.rightKey.includes(this.lists[index].sort) ? 'pass' : 'fail'
       }
+
       this.$set(this.lists[index], 'checked', !this.lists[index].checked)
+      // 单选、判断提交答案
       if (!this.multiple) this.submitAnswer()
     },
-    // 确认多选答案
+    // 多选提交答案
     confirmMultiple() {
-      const num = this.lists.filter(v => v.checked)
+      const num = this.lists.filter((v) => v.checked)
       if (num.length > 1) {
-        this.lists.forEach(v => {
-          if(this.rightKey.includes(v.sort)) this.$set(v, 'checked', true)
-          if(v.checked) this.$set(v, 'confirm', true)
+        // 判断所选答案是否正确
+        const checkedList = num.map((v) => v.sort)
+        this.answer = equar(checkedList, this.rightKey) ? 'pass' : 'fail'
+        // 处理显示逻辑
+        this.lists.forEach((v) => {
+          if (this.rightKey.includes(v.sort)) this.$set(v, 'checked', true)
+          if (v.checked) this.$set(v, 'confirm', true)
         })
         this.submitAnswer()
       }
     },
     submitAnswer() {
       this.submitStatus = true
-      this.$emit('change')
-    }
+      this.$emit('change', this.answer)
+    },
   },
 }
 </script>
@@ -100,8 +132,8 @@ export default {
     width: 100%;
     .icons {
       font-size: 28rpx;
-      color: #191C27;
-      border: 2rpx solid #9EA5BB;
+      color: #191c27;
+      border: 2rpx solid #9ea5bb;
       text-align: center;
       width: 40rpx;
       height: 40rpx;
@@ -109,8 +141,8 @@ export default {
       border-radius: 10rpx;
     }
     .checked {
-      background: #2953FF;
-      border: 2rpx solid #2953FF;
+      background: #2953ff;
+      border: 2rpx solid #2953ff;
       color: #fff;
     }
     .success {
@@ -118,8 +150,8 @@ export default {
       height: 40rpx;
       line-height: 40rpx;
       border-radius: 10rpx;
-      background: #2953FF;
-      border: 2rpx solid #2953FF;
+      background: #2953ff;
+      border: 2rpx solid #2953ff;
       text-align: center;
     }
     .success:before {
@@ -131,8 +163,8 @@ export default {
       height: 40rpx;
       line-height: 40rpx;
       border-radius: 10rpx;
-      background: #FA5A49;
-      border: 2rpx solid #FA5A49;
+      background: #fa5a49;
+      border: 2rpx solid #fa5a49;
       text-align: center;
     }
     .error:before {
@@ -151,7 +183,7 @@ export default {
       width: 400rpx;
       height: 100rpx;
       line-height: 100rpx;
-      background: #D4D7DF;
+      background: #d4d7df;
       color: #fff;
       border-radius: 50rpx;
       font-size: 32rpx;
@@ -159,9 +191,8 @@ export default {
       text-align: center;
     }
     .active {
-      background: #2953FF;
+      background: #2953ff;
     }
   }
-  
 }
 </style>

src/components/swiper-limited-load/index.vue

 <template>
-  <view>
+  <view class="swipers">
     <swiper
-      style="height: 80vh;"
+      style="flex: 1;"
       :duration="swiperDuration"
       :current="swiperCurrent"
       @change="swiperChange"
@@ -9,7 +9,7 @@
     >
       <swiper-item v-for="(item, index) in swiperList" :key="index">
         <view class="u-flex subject">
-          <view class="title"><text>{{ type[item.type - 1] }}</text>{{ item.title }}</view>
+          <view class="title"><text>{{ titleType[item.type - 1] }}</text>{{ item.title }}</view>
           <view class="content">
             <answer-sheet
               ref="answerSheet"
@@ -19,8 +19,8 @@
               @change="answerChange"
             ></answer-sheet>
           </view>
-          <view class="explain">
-            <answer-explanation :answer="item.answer" :explain="item.explain"></answer-explanation>
+          <view class="explain" v-if="type === 1">
+            <answer-explanation v-show="model === 2 || errShow" :answer="item.answer" :explain="item.explain"></answer-explanation>
           </view>
         </view>
       </swiper-item>
@@ -57,6 +57,14 @@ export default {
       type: Number,
       default: 0
     },
+    type: {
+      type: Number,
+      default: 1
+    },
+    model: {
+      type: Number,
+      default: 1
+    },
     // 值为0禁止切换动画
     swiperDuration: {
       type: String,
@@ -70,13 +78,15 @@ export default {
   },
   data() {
     return {
-      type: ['单选题', '判断题', '多选题'],
+      titleType: ['单选题', '判断题', '多选题'],
       // 滑动到的位置
       swiperIndex: 0,
       // 此值控制swiper的位置
       swiperCurrent: 0,
       // 当前swiper渲染的items
-      swiperList: []
+      swiperList: [],
+      // 错题显示解释
+      errShow: false
     }
   },
   watch: {
@@ -115,15 +125,15 @@ export default {
     answerChange(e) {
       // this.swiperCurrent = this.swiperCurrent + 1
       this.$emit("answerChange", e)
-    },
-    confirmMultiple(index) {
-      this.$refs.answerSheet[index].confirmMultiple()
+      this.errShow = e === 'fail'
+      console.log("e", e)
     },
     clear () {
       this.list = []
       this.swiperList = []
     },
     swiperChange: function (e) {
+      this.errShow = false
       let current = e.detail.current
       let lastIndex = this.swiperIndex
       let currentItem = this.swiperList[current]
@@ -223,6 +233,13 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+.swipers {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  swiper-item {
+    overflow: auto;
+  }
   .subject {
     flex-flow: column;
     padding: 20rpx;
@@ -252,4 +269,5 @@ export default {
       padding-top: 50rpx;
     }
   }
+}
 </style>

src/pages/learn/answer.vue

@@ -24,6 +24,8 @@
         :swiperDuration="swiperDuration"
         :list="list"
         :current="current"
+        :type="type"
+        :model="model"
         @answerChange="answerChange"
         @change="swiperChange"
       >
@@ -37,11 +39,11 @@
         </view>
       </view>
       <view class="u-flex">
-        <view class="c-list" v-if="type === 1">
+        <view class="c-list" v-if="type === 1" @click="collection">
           <u-icon name="star" color="#5A6073" size="40"></u-icon>
           <text>收藏</text>
         </view>
-        <view class="c-list" v-else>
+        <view class="c-list" v-else @click="handPapers">
           <u-icon name="file-text" color="#5A6073" size="40"></u-icon>
           <text>交卷</text>
         </view>
@@ -198,9 +200,20 @@ export default {
     changeModel(i) {
       this.model = i
     },
+    collection() {
+      console.log("this.list[this.currentIndex]", this.list[this.currentIndex])
+      console.log("收藏")
+    },
+    // 作答完毕
     answerChange(e) {
       console.log('e', e)
     },
+    // 交卷
+    handPapers() {
+      this.visible = true
+      console.log("交卷")
+    },
+    // 提前交卷
     submit() {
       console.log("提前交卷")
     }
@@ -217,7 +230,7 @@ export default {
   background-repeat: no-repeat;
   .head {
     width: 100%;
-    flex: 1;
+    height: 90rpx;
     .tab {
       margin:10rpx auto;
       border: 2rpx solid #2953FF;
@@ -235,7 +248,7 @@ export default {
       }
     }
     .count-down {
-      color: #5A6073;
+      color: #5A6073; 
       font-size: 32rpx;
       margin:10rpx auto;
       width: 230rpx;
@@ -243,7 +256,7 @@ export default {
   }
   .swiper {
     width: 100%;
-    flex: 1;
+    flex: 1; 
   }
   .bottom {
     width: 100%;