feat: 答题页面

src/components/answer-explanation/index.vue

 <template>
   <view class="card">
-    <u-card :title="title" padding="10" :thumb="thumb">
+    <u-card :title="title" padding="10" margin="0" :thumb="thumb">
       <view class="u-flex content" slot="body">
         <view class="lists">正确答案：{{ answer }}</view>
         <view class="lists">解释说明：{{ explain }}</view>
@@ -28,7 +28,7 @@ export default {
   },
   computed: {
     title() {
-      return this.type === 'right' ? '答对了' : '答错了'
+      return '试题详解：'
     }
   },
   data() {

src/components/answer-sheet/index.vue

@@ -32,11 +32,18 @@ export default {
       lists: []
     }
   },
+  watch: {
+    answerList(newValue, oldValue) {
+      if (newValue.length > 0) {
+        this.lists = newValue.map((v) => {
+          v.checked = false
+          return v
+        })
+      }
+    },
+  },
   created() {
-    this.lists = this.answerList ? this.answerList.map((v) => {
-      v.checked = false
-      return v
-    }) : []
+    
   },
   methods: {
     select(index) {
@@ -60,7 +67,7 @@ export default {
     padding: 10rpx 0;
     width: 100%;
     .icons {
-      padding: 5rpx 20rpx 0rpx 20rpx;
+      padding: 5rpx 20rpx 0rpx 0;
     }
     .text {
       flex: 1;

src/components/page-swiper/index.vue

@@ -14,7 +14,7 @@
       <block v-if="swiperType == 'lite'">
         <view
           class="pageSwiperItem"
-          :style="{ width: screenWidth + 'px', height: i != 1 ? '100vh' : '' }"
+          :style="{ width: screenWidth + 'px', height: i != 1 ? 'auto' : '' }"
           v-for="(item, i) in 3"
           :key="i"
           v-show="!waitShow"
@@ -249,7 +249,6 @@ export default {
   top: 0;
   width: 100%;
   height: 100%;
-  background: #f8f8f8;
 }
 .pyh-pageSwiperMask-text {
   width: 750rpx;

src/pages.json

@@ -48,6 +48,16 @@
 		{
 			"root": "pages/learn",
 			"pages": [
+				{
+					"path": "answer",
+					"name": "learnAnswer",
+					"style": {
+						"navigationBarTitleText": "答题",
+						"navigationStyle": "custom",
+						"enablePullDownRefresh": false,
+						"disableScroll": true
+					}
+				},
 				{
 					"path": "detail",
 					"name": "learnDetail",

src/pages/learn/answer.vue

+<template>
+  <view class="u-flex answer">
+    <u-navbar
+      back-icon-color="#333333"
+      background="transparent"
+      titleColor="#191C27"
+      :border-bottom="false"
+      title="答题"
+      title-bold
+    ></u-navbar>
+    <view class="swiper">
+      <page-swiper
+        ref="pageSwiper"
+        :dataLength="dataLength"
+        :initIndex="index"
+        @swiperChange="swiperChange"
+        :height="psHeight"
+      >
+        <view class="u-flex subject">
+          <view class="type">{{ type[lists[index].type - 1] }}</view>
+          <view class="title">{{ lists[index].title }}</view>
+          <view class="content">
+            <answer-sheet
+              :answerList="lists[index].answerList"
+              :multiple="lists[index].type === 3"
+              @change="answerChange"
+            ></answer-sheet>
+          </view>
+          <view class="btn" v-if="lists[index].type === 3">
+            <u-button type="primary" size="medium" shape="circle">确定</u-button>
+          </view>
+          <view class="explain">
+            <answer-explanation :answer="lists[index].answer" :explain="lists[index].explain"></answer-explanation>
+          </view>
+        </view>
+      </page-swiper>
+    </view>
+    <view class="u-flex u-row-around bottom">
+      <view class="u-flex">
+        <view class="c-list">
+          <u-icon name="grid" color="#5A6073" size="40"></u-icon>
+          <text>1/2887</text>
+        </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">
+          <u-icon name="star" color="#5A6073" size="40"></u-icon>
+          <text>收藏</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import pageSwiper from '@/components/page-swiper/index.vue'
+import answerSheet from '@/components/answer-sheet/index.vue'
+import answerExplanation from '@/components/answer-explanation/index.vue'
+export default {
+  components: {
+    pageSwiper,
+    answerSheet,
+    answerExplanation
+  },
+  data() {
+    return {
+      type: ['单选题', '判断题', '多选题'],
+      dataLength: 0,
+      index: 0,
+      lists: [],
+      answerList: [],
+    }
+  },
+  computed: {
+  },
+  created() {
+    this.lists = [
+      {
+        type: 1,
+        title: '采用QS1电桥测量tanδ的接线方式一般有差接线及和接线。',
+        answerList: [
+          {
+            text: 'A：正确',
+          },
+          {
+            text: 'B：错误',
+          },
+        ],
+        answer: 'A',
+        explain: '极性电介质在外电场作用下，由偶极子分子的转向形成的极化称为偶极子式极化。'
+      },
+      {
+        type: 2,
+        title: '空气间隙的操作冲击击穿电压数值大小不仅与间隙距离、电极形状、电极极性有关,而且与操作冲击电压波的波前时间的长短有关。',
+        answerList: [
+          {
+            text: 'A：正确',
+          },
+          {
+            text: 'B：错误',
+          },
+        ],
+        answer: 'B',
+        explain: '极性电介质在外电场作用下，由偶极子分子的转向形成的极化称为偶极子式极化。'
+      },
+      {
+        type: 3,
+        title: '西林电桥采用正接线及反接线时,其测试原理相同',
+        answerList: [
+          {
+            text: 'A：影响',
+          },
+          {
+            text: 'B：影响很小',
+          },
+          {
+            text: 'C：影响很大',
+          },
+          {
+            text: 'D：无影响',
+          },
+        ],
+        answer: 'B，C',
+        explain: '双臂电桥是在单臂电桥的基础上增加特殊机构，以消除测试时连接线和接线柱接触电阻对测量结果的影响。'
+      }
+    ]
+    this.dataLength = this.lists.length
+  },
+  methods: {
+    swiperChange(index) {
+      this.index = index
+    },
+    answerChange() {
+      // this.index++
+      // this.$refs.pageSwiper.swiperTo(this.index)
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+.answer {
+  height: 100vh;
+  flex-direction: column;
+  background-color: #f8fafd;
+  background-image: linear-gradient(to top, #f8fafd 0%, #e9f3ff 50%);
+  background-size: 100% 520rpx;
+  background-repeat: no-repeat;
+  .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%;
+    height: 150rpx;
+    border-top: 2rpx solid #ccc;
+    color: #5a6073;
+    font-size: 28rpx;
+    .c-list {
+      display: flex;
+      text {
+        padding-left: 10rpx;
+      }
+    }
+  }
+}
+</style>