dvcp_v2_wechat_app/src/project/qujing/AppLegalLearning/testForm.vue

<template>
  <div class="testForm">
    <u-navbar title="法治学习" :background="backgroundNavbar"></u-navbar>
    <div class="testForm_info">
      <div class="type">
        <div class="type_left">单选题</div>
        <div><span class="col_blue">{{ activeIndex + 1 }}</span>/{{questionList.length}}</div>
      </div>
      <div class="topic">
        <div v-for="(item,index) in questionList" :key="index" >
          <div v-if="activeIndex === index">
            <!-- 题目 -->
            <div>{{ item.subject }}</div>
            <!-- 单选 -->
            <div class="answer_list">
              <div class="answer_item error">
                {{ options[index] }}: {{ item.answer}}
              </div>
            </div>
            <!-- 多选 -->
            <!-- <div class="answer_list">
              <div class="answer_item error">
                {{ options[index] }}: {{ item.answer}}
              </div>
            </div> -->
          </div>
        </div>
      </div>
      <div class="type mar-top">
        <div class="type_left">答案解析</div>
      </div>
      <div class="topic mar-top">
        <div><span>正确答案：</span></div>
        <div>获悉，党的十八大以来，曲靖市深入学习贯彻习近平新时代中国特色社会主义思想，坚持以习近平法治思想为根本遵循和行动指南。</div>
      </div>
      <!-- <div class="btn" @click="nextTopic" v-if="activeIndex < questionList.length - 1">下一题</div> -->
      <div class="btn" @click="confirm">确定</div>
    </div>
    
  </div>
</template>

<script>
export default {
  customNavigation: true,
  data() {
    return {
      backgroundNavbar: {
        background: "url('https://cdn.cunwuyun.cn/qujing/navbar.png') no-repeat",
        backgroundSize: '100% 100%',
      },
      
      options: ['A','B','C','D','E','F','G','H','I','J','K','L','M'],
      questionList: [
        {
          index: 0,
          subject: "共产党成立年份是？",
          answer: "答案",
          jiexi: '解析'
        },
        {
          index: 1,
          subject: "第2题",
          answer: "答案",
          jiexi: '解析'
        },
        {
          index: 2,
          subject: "第3题",
          answer: "答案",
          jiexi: '解析'
        },
        {
          index: 3,
          subject: "第4题",
          answer: "答案",
          jiexi: '解析'
        },
        {
          index: 4,
          subject: "第5题",
          answer: "答案",
          jiexi: '解析'
        }
      ],
      startX: 0, // 滑动开始x轴位置
      moveX: 0, // 滑动的x轴距离
      activeIndex: 0, // 当前第几题
      newIndex: 0, // 滑动到第几题
      // list: [{
			// 			image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
			// 			title: '昨夜星辰昨夜风，画楼西畔桂堂东'
			// 		},
			// 		{
			// 			image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
			// 			title: '身无彩凤双飞翼，心有灵犀一点通'
			// 		},
			// 		{
			// 			image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
			// 			title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
			// 		}
			// 	],
      createdTime: '', // 开始答题时间
      endTime: '', // 结束时间
    }
  },
  methods: {
    onSwiper() {
      console.log(e);
    },
    onSlideChange(o) {
      console.log(o);
    },
    getList() {
      console.log('题目列表');
    },
    nextTopic() {
      this.activeIndex ++;
    },
    // touchStart(e) {
    //   this.startX = e.changedTouches[0].pageX
    //   console.log('开始触摸：', this.startX);
    // },
    // touchEnd(e, index) { // 手指离开屏幕时触发
    //   // 获取滑动距离
    //   const moveX = e.changedTouches[0].pageX - this.startX
    //   // 判断滑动方向
    //   if (moveX < -100 && index < this.topic.length-1) {
    //     // 【下一题】 判断大幅度左滑且不是最后一题
    //       this.newIndex=this.newIndex+1
    //       this.activeIndex= this.activeIndex+1
    //       console.log('第'+this.index+'题');
    //   }
    //   else if (moveX > 100 && index!= 0) { 
    //       // 【上一题】 判断大幅度右滑且不是第一题
    //       this.newIndex=this.newIndex-1
    //       this.activeIndex=this.activeIndex-1
    //   }
    // },
    confirm() {
      uni.navigateTo({url: './result'})
    },
  },
  onReachBottom() {
    this.current ++;
  },
  onLoad() {
    // this.createdTime = Date.parse(new Date())
  }
}
</script>

<style lang="scss" scoped>
.testForm {
  .testForm_info {
    background: url("https://cdn.cunwuyun.cn/qujing/bg.png") no-repeat;
    background-size: 100% auto;
    padding: 80px 32px 0 32px;
    box-sizing: border-box;

    .type {
      display: flex;
      justify-content: space-between;
      font-size: 28px;
      color: #333333;

      .type_left {
        font-weight: 600;
      }

      .col_blue {
        color: #2D7DFF;
      }

    }

    .topic {
      background: #FFF;
      margin-top: 32px;
      padding: 24px;
      margin-top: 80px;
      border-radius: 16px;
      box-shadow: 0 0 8px 0 rgba(0,0,0,0.02);

      .answer_list {
        margin-top: 32px;

        .answer_item {
          background: #FBFCFE;
          border: 1px solid #CCCCCC;
          border-radius: 16px;
          padding: 28px 24px;
          box-sizing: border-box;

          .myChoice {
            width: 136px;
            height: 48px;
            background: #FFFFFF;
            border: 1px solid #E23C3C;
            border-radius: 8px;
          }
        }

        .succeed {
          border: 2px solid #2D7EFE;
          color: #2D7DFF;
        }

        .error {
          border: 2px solid #E23C3C;
          color: #E23C3C;
        }
      }
    }

    .mar-top {
      margin-top: 32px;
    }

    .btn {
      position: fixed;
      left: 50%;
      bottom: 0;
      transform: translate(-50%, -50%);
      width: 320px;
      height: 88px;
      line-height: 88px;
      text-align: center;
      background: #2D7DFF;
      border-radius: 44px;
      font-weight: 500;
      font-size: 34px;
      color: #FFFFFF;
    }
  }
}
</style>