feat: 答题模式切换&&倒计时

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

@@ -9,8 +9,7 @@
     >
       <swiper-item v-for="(item, index) in swiperList" :key="index">
         <view class="u-flex subject">
-          <view class="type">{{ type[item.type - 1] }}</view>
-          <view class="title">{{ item.title }}</view>
+          <view class="title"><text>{{ type[item.type - 1] }}</text>{{ item.title }}</view>
           <view class="content">
             <answer-sheet
               ref="answerSheet"
@@ -239,6 +238,14 @@ export default {
       font-weight: bold;
       width: 100%;
       text-align: left;
+      text {
+        background: #9EA5BB;
+        color: #fff;
+        padding: 8rpx 20rpx;
+        margin-right: 10rpx;
+        font-size: 20rpx;
+        border-radius: 50rpx;
+      }
     }
     .content, .explain, .btn {
       width: 100%;

src/pages/learn/answer.vue

@@ -8,15 +8,25 @@
       title="答题"
       title-bold
     ></u-navbar>
+    <view class="head">
+      <view class="u-flex tab" v-if="type === 1">
+        <view :class="['tab-list', {'active': model === 1}]" @click="changeModel(1)">答题模式</view>
+        <view :class="['tab-list', {'active': model === 2}]" @click="changeModel(2)">学习模式</view>
+      </view>
+      <view class="u-flex count-down" v-if="type === 2">
+        <view>倒计时：<u-count-down :timestamp="timestamp" bg-color="" :show-hours="false"></u-count-down></view>
+      </view>
+    </view>
     <view class="swiper">
-      <swiper-limited-load 
+      <swiper-limited-load
         ref="swiper"
         :swiperHeight="500"
         :swiperDuration="swiperDuration"
         :list="list"
         :current="current"
         @answerChange="answerChange"
-        @change="swiperChange">
+        @change="swiperChange"
+      >
       </swiper-limited-load>
     </view>
     <view class="u-flex u-row-around bottom">
@@ -39,12 +49,21 @@
     </view>
 
     <answer-operation-tips :show.sync="show" />
+    <answer-complete-pop
+      :numberList="[1, 2, 3]"
+      type="fail"
+      :visible.sync="visible"
+      @cancel="visible = false"
+      @submit="submit"
+    >
+    </answer-complete-pop>
   </view>
 </template>
 
 <script>
 import swiperLimitedLoad from '@/components/swiper-limited-load/index.vue'
 import answerOperationTips from '@/components/answer-operation-tips/index.vue'
+import answerCompletePop from '@/components/answer-complete-pop/index.vue'
 
 const NO_PREV_PAGE = -1
 const NO_NEXT_PAGE = -2
@@ -52,24 +71,25 @@ const app = getApp()
 export default {
   components: {
     swiperLimitedLoad,
-    answerOperationTips
+    answerOperationTips,
+    answerCompletePop,
   },
   data() {
     return {
+      visible: false,
       show: false,
-      type: 1,
-      dataLength: 0,
-      index: 0,
-      lists: [],
-      answerList: [],
+      // 1 练习 2 考试
+      type: 1, 
+      // 1 答题模式 2 学习模式
+      model: 1,
+      timestamp: 60 * 60,
       list: [],
       current: 0,
       currentIndex: 0,
-      swiperDuration: "0"
+      swiperDuration: '0',
     }
   },
-  computed: {
-  },
+  computed: {},
   created() {
     const lists = [
       {
@@ -86,13 +106,15 @@ export default {
           },
         ],
         answer: 'A',
-        explain: '极性电介质在外电场作用下，由偶极子分子的转向形成的极化称为偶极子式极化。',
+        explain:
+          '极性电介质在外电场作用下，由偶极子分子的转向形成的极化称为偶极子式极化。',
         index: 0,
-        rightKey: ['A']
+        rightKey: ['A'],
       },
       {
         type: 2,
-        title: '空气间隙的操作冲击击穿电压数值大小不仅与间隙距离、电极形状、电极极性有关,而且与操作冲击电压波的波前时间的长短有关。',
+        title:
+          '空气间隙的操作冲击击穿电压数值大小不仅与间隙距离、电极形状、电极极性有关,而且与操作冲击电压波的波前时间的长短有关。',
         answerList: [
           {
             sort: 'A',
@@ -104,9 +126,10 @@ export default {
           },
         ],
         answer: 'B',
-        explain: '极性电介质在外电场作用下，由偶极子分子的转向形成的极化称为偶极子式极化。',
+        explain:
+          '极性电介质在外电场作用下，由偶极子分子的转向形成的极化称为偶极子式极化。',
         index: 1,
-        rightKey: ['B']
+        rightKey: ['B'],
       },
       {
         type: 3,
@@ -130,10 +153,11 @@ export default {
           },
         ],
         answer: 'B，C',
-        explain: '双臂电桥是在单臂电桥的基础上增加特殊机构，以消除测试时连接线和接线柱接触电阻对测量结果的影响。',
+        explain:
+          '双臂电桥是在单臂电桥的基础上增加特殊机构，以消除测试时连接线和接线柱接触电阻对测量结果的影响。',
         index: 2,
-        rightKey: ['B','C']
-      }
+        rightKey: ['B', 'C'],
+      },
     ]
 
     this.requestQuestionInfo(lists)
@@ -144,36 +168,41 @@ export default {
       this.list = lists
       setTimeout(() => {
         // 比如上次答到了第20题
-        this.$refs.swiper.init(0);
+        this.$refs.swiper.init(0)
         // 初始化后再把动画弄出来，否则初始的current不是0，界面会自动跳动到当前位置，体验不太好
         this.swiperDuration = '250'
 
         // 全局记一下list, 答题卡页暂时就直接用了
         app.globalData.questionList = lists
       }, 1000)
-      
     },
     swiperChange(e) {
       let current = e.current
       this.currentIndex = current
       if (current == NO_PREV_PAGE) {
         uni.showToast({
-          title: "已经是第一题了",
-          icon: "none"
+          title: '已经是第一题了',
+          icon: 'none',
         })
         return
       }
 
       if (current == NO_NEXT_PAGE) {
         uni.showModal({
-          title: "提示",
-          content: "您已经答完所有题，是否退出？",
+          title: '提示',
+          content: '您已经答完所有题，是否退出？',
         })
         return
       }
     },
+    changeModel(i) {
+      this.model = i
+    },
     answerChange(e) {
-      console.log("e", e)
+      console.log('e', e)
+    },
+    submit() {
+      console.log("提前交卷")
     }
   },
 }
@@ -186,6 +215,32 @@ export default {
   background-image: linear-gradient(to top, #f8fafd 0%, #e9f3ff 50%);
   background-size: 100% 520rpx;
   background-repeat: no-repeat;
+  .head {
+    width: 100%;
+    flex: 1;
+    .tab {
+      margin:10rpx auto;
+      border: 2rpx solid #2953FF;
+      border-radius: 10rpx;
+      width: 300rpx;
+      .tab-list {
+        flex: 1;
+        padding: 10rpx 25rpx;
+        font-size: 24rpx;
+        color: #191C27;
+      }
+      .active {
+        background: #2953FF;
+        color: #fff;
+      }
+    }
+    .count-down {
+      color: #5A6073;
+      font-size: 32rpx;
+      margin:10rpx auto;
+      width: 230rpx;
+    }
+  }
   .swiper {
     width: 100%;
     flex: 1;