refactor: 答题卡&&试题详解重构

src/components/answer-explanation/index.vue

@@ -2,9 +2,7 @@
   <view class="card">
     <view slot="head" class="u-flex head">
       <view class="blue"></view>
-      <view class="title">
-        {{ title }}
-      </view>
+      <view class="title">试题详解：</view>
     </view>
     <view class="u-flex content" slot="body">
       <view class="lists">正确答案：{{ answer }}</view>
@@ -17,10 +15,6 @@
 export default {
   name: 'answerSheet',
   props: {
-    type: {
-      type: String,
-      default: 'wrong',
-    },
     answer: {
       type: String,
       default: '',
@@ -30,21 +24,12 @@ export default {
       default: '',
     },
   },
-  computed: {
-    title() {
-      return '试题详解：'
-    }
-  },
-  data() {
-    return {
-    }
-  }
 }
 </script>
 <style lang="scss" scoped>
 .card {
   padding: 20rpx 10rpx 20rpx 5rpx;
-  border: 2px solid #E8EBF3;
+  border: 2px solid #e8ebf3;
   border-radius: 10rpx;
   .head {
     font-size: 32rpx;
@@ -53,7 +38,7 @@ export default {
     .blue {
       width: 4rpx;
       height: 34rpx;
-      background: #2953FF;
+      background: #2953ff;
       position: relative;
       left: -8rpx;
     }
@@ -72,7 +57,7 @@ export default {
       line-height: 50rpx;
     }
     .lists:nth-of-type(1) {
-      color: #2953FF;
+      color: #2953ff;
     }
   }
 }

src/components/answer-sheet/index.vue

@@ -6,11 +6,15 @@
       :key="index"
       @click="select(index)"
     >
-      <view class="icons">
-        <u-icon name="checkmark-circle" :color="item.checked ? '#409eff' : inherit" size="40"></u-icon>
+      <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 class="text">{{ item.text }}</view>
     </view>
+    <view class="btn" v-if="rightKey.length > 1">
+      <view :class="['confirm', {'active': getCheckedNum}]" @click="confirmMultiple">确定</view>
+    </view>
   </view>
 </template>
 
@@ -26,10 +30,15 @@ export default {
       type: Boolean,
       default: false,
     },
+    rightKey: {
+      type: Array,
+      default: []
+    }
   },
   data() {
     return {
-      lists: []
+      lists: [],
+      submitStatus: false,
     }
   },
   watch: {
@@ -38,6 +47,7 @@ export default {
         if (newValue.length > 0) {
           this.lists = newValue.map((v) => {
             v.checked = false
+            v.confirm = false
             return v
           })
         }
@@ -45,20 +55,39 @@ export default {
       immediate:true
     }
   },
-  created() {
-    
+  computed: {
+    getCheckedNum() {
+      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 => {
-          v.checked = false
+          v.checked = false // 勾选
+          v.confirm = false // 确认答案
         })
+        this.$set(this.lists[index], 'confirm', true)
       }
       this.$set(this.lists[index], 'checked', !this.lists[index].checked)
-
-      const lists = this.lists.filter(v => v.checked)
-      this.$emit('change', lists)
+      if (!this.multiple) this.submitAnswer()
+    },
+    // 确认多选答案
+    confirmMultiple() {
+      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)
+        })
+        this.submitAnswer()
+      }
+    },
+    submitAnswer() {
+      this.submitStatus = true
+      this.$emit('change')
     }
   },
 }
@@ -70,11 +99,69 @@ export default {
     padding: 10rpx 0;
     width: 100%;
     .icons {
-      padding: 5rpx 20rpx 0rpx 0;
+      font-size: 28rpx;
+      color: #191C27;
+      border: 2rpx solid #9EA5BB;
+      text-align: center;
+      width: 40rpx;
+      height: 40rpx;
+      line-height: 40rpx;
+      border-radius: 10rpx;
+    }
+    .checked {
+      background: #2953FF;
+      border: 2rpx solid #2953FF;
+      color: #fff;
+    }
+    .success {
+      width: 40rpx;
+      height: 40rpx;
+      line-height: 40rpx;
+      border-radius: 10rpx;
+      background: #2953FF;
+      border: 2rpx solid #2953FF;
+      text-align: center;
+    }
+    .success:before {
+      content: '\2714';
+      color: #fff;
+    }
+    .error {
+      width: 40rpx;
+      height: 40rpx;
+      line-height: 40rpx;
+      border-radius: 10rpx;
+      background: #FA5A49;
+      border: 2rpx solid #FA5A49;
+      text-align: center;
+    }
+    .error:before {
+      content: '\2716';
+      color: #fff;
     }
     .text {
+      padding-left: 20rpx;
       flex: 1;
     }
   }
+  .btn {
+    text-align: center;
+    margin-top: 50rpx;
+    .confirm {
+      width: 400rpx;
+      height: 100rpx;
+      line-height: 100rpx;
+      background: #D4D7DF;
+      color: #fff;
+      border-radius: 50rpx;
+      font-size: 32rpx;
+      font-weight: bold;
+      text-align: center;
+    }
+    .active {
+      background: #2953FF;
+    }
+  }
+  
 }
 </style>

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

@@ -13,14 +13,13 @@
           <view class="title">{{ item.title }}</view>
           <view class="content">
             <answer-sheet
+              ref="answerSheet"
               :answerList="item.answerList"
+              :rightKey="item.rightKey"
               :multiple="item.type === 3"
               @change="answerChange"
             ></answer-sheet>
           </view>
-          <view class="btn" v-if="item.type === 3">
-            <u-button type="primary" size="medium" shape="circle">确定</u-button>
-          </view>
           <view class="explain">
             <answer-explanation :answer="item.answer" :explain="item.explain"></answer-explanation>
           </view>
@@ -115,7 +114,11 @@ export default {
       this.swiperCurrent = current
     },
     answerChange(e) {
-      this.swiperCurrent = this.swiperCurrent + 1
+      // this.swiperCurrent = this.swiperCurrent + 1
+      this.$emit("answerChange", e)
+    },
+    confirmMultiple(index) {
+      this.$refs.answerSheet[index].confirmMultiple()
     },
     clear () {
       this.list = []
@@ -234,26 +237,12 @@ export default {
       font-size: 32rpx;
       line-height: 50rpx;
       font-weight: bold;
+      width: 100%;
+      text-align: left;
     }
     .content, .explain, .btn {
-      /deep/ .u-card {
-        background: transparent;
-      }
       width: 100%;
       padding-top: 50rpx;
     }
-    .btn {
-      text-align: center;
-      /deep/ button {
-        width: 260rpx;
-        height: 80rpx;
-      }
-    }
-    .disabled {
-      /deep/ button {
-        background: #D4D7DF;
-        color: #fff;
-      }
-    }
   }
 </style>

src/pages/learn/answer.vue

@@ -15,6 +15,7 @@
         :swiperDuration="swiperDuration"
         :list="list"
         :current="current"
+        @answerChange="answerChange"
         @change="swiperChange">
       </swiper-limited-load>
     </view>
@@ -26,37 +27,37 @@
         </view>
       </view>
       <view class="u-flex">
-        <view class="c-list ">
-          <u-icon name="close-circle" color="#FA5A49" size="40"></u-icon>
-          <text>0</text>
-        </view>
-        <view class="c-list u-padding-left-30">
-          <u-icon name="checkmark-circle" color="#2953FF" size="40"></u-icon>
-          <text>0</text>
-        </view>
-      </view>
-      <view class="u-flex">
-        <view class="c-list">
+        <view class="c-list" v-if="type === 1">
           <u-icon name="star" color="#5A6073" size="40"></u-icon>
           <text>收藏</text>
         </view>
+        <view class="c-list" v-else>
+          <u-icon name="file-text" color="#5A6073" size="40"></u-icon>
+          <text>交卷</text>
         </view>
       </view>
     </view>
+
+    <answer-operation-tips :show.sync="show" />
+  </view>
 </template>
 
 <script>
 import swiperLimitedLoad from '@/components/swiper-limited-load/index.vue'
+import answerOperationTips from '@/components/answer-operation-tips/index.vue'
+
 const NO_PREV_PAGE = -1
 const NO_NEXT_PAGE = -2
 const app = getApp()
 export default {
   components: {
     swiperLimitedLoad,
+    answerOperationTips
   },
   data() {
     return {
-      type: ['单选题', '判断题', '多选题'],
+      show: false,
+      type: 1,
       dataLength: 0,
       index: 0,
       lists: [],
@@ -76,51 +77,62 @@ export default {
         title: '采用QS1电桥测量tanδ的接线方式一般有差接线及和接线。',
         answerList: [
           {
-            text: 'A：正确',
+            sort: 'A',
+            text: '正确',
           },
           {
-            text: 'B：错误',
+            sort: 'B',
+            text: '错误',
           },
         ],
         answer: 'A',
         explain: '极性电介质在外电场作用下，由偶极子分子的转向形成的极化称为偶极子式极化。',
-        index: 0
+        index: 0,
+        rightKey: ['A']
       },
       {
         type: 2,
         title: '空气间隙的操作冲击击穿电压数值大小不仅与间隙距离、电极形状、电极极性有关,而且与操作冲击电压波的波前时间的长短有关。',
         answerList: [
           {
-            text: 'A：正确',
+            sort: 'A',
+            text: '正确',
           },
           {
-            text: 'B：错误',
+            sort: 'B',
+            text: '错误',
           },
         ],
         answer: 'B',
         explain: '极性电介质在外电场作用下，由偶极子分子的转向形成的极化称为偶极子式极化。',
-        index: 1
+        index: 1,
+        rightKey: ['B']
       },
       {
         type: 3,
         title: '西林电桥采用正接线及反接线时,其测试原理相同',
         answerList: [
           {
-            text: 'A：影响',
+            sort: 'A',
+            text: '影响',
           },
           {
-            text: 'B：影响很小',
+            sort: 'B',
+            text: '影响很小',
           },
           {
-            text: 'C：影响很大',
+            sort: 'C',
+            text: '影响很大',
           },
           {
-            text: 'D：无影响',
+            sort: 'D',
+            text: '无影响',
           },
         ],
         answer: 'B，C',
         explain: '双臂电桥是在单臂电桥的基础上增加特殊机构，以消除测试时连接线和接线柱接触电阻对测量结果的影响。',
-        index: 2
+        index: 2,
+        rightKey: ['B','C']
       }
     ]
 
@@ -159,6 +171,9 @@ export default {
         })
         return
       }
+    },
+    answerChange(e) {
+      console.log("e", e)
     }
   },
 }
@@ -174,41 +189,6 @@ export default {
   .swiper {
     width: 100%;
     flex: 1;
-    .subject {
-      flex-flow: column;
-      padding: 20rpx;
-      .type {
-        width: 100%;
-        text-align: left;
-        padding: 20rpx 0;
-      }
-      .title {
-        color: #191C27;
-        font-size: 32rpx;
-        line-height: 50rpx;
-        font-weight: bold;
-      }
-      .content, .explain, .btn {
-        /deep/ .u-card {
-          background: transparent;
-        }
-        width: 100%;
-        padding-top: 50rpx;
-      }
-      .btn {
-        text-align: center;
-        /deep/ button {
-          width: 260rpx;
-          height: 80rpx;
-        }
-      }
-      .disabled {
-        /deep/ button {
-          background: #D4D7DF;
-          color: #fff;
-        }
-      }
-    }
   }
   .bottom {
     width: 100%;