dvcp_v2_wxcp_app/src/apps/AppOnlineAnswer/AppOnlineAnswer.vue

<template>
  <section class="AppOnlineAnswer">
    <div class="page" v-if="list.length">
      <img src="./static/img/answer-bg.png" alt="" class="bg-img">
      <div class="subject-content" v-if="!showAnwser">
        <div class="btn" v-if="showTopBtn" @click="confirm()">{{ topBtnText }}</div>
        <div class="bg-fff pad-b48">
          <div class="title">
            <div class="left">
              <span class="tips"></span>{{ list[index].type == 1 ? '单选' : '多选' }}题
            </div>
            <div class="right">
              <span class="big-num">{{ index + 1 }}</span>/{{ list.length }}
            </div>
          </div>
          <div class="text">{{ list[index].title }}</div>
          <!-- 单选 -->
          <div v-if="list[index].type == 1">
            <div class="item" v-for="(item, i) in list[index].items" :key="i" @click="itemClick(i)"
                 :class="{ 'item-click': clickIndex === i, 'item-success': showAnalysis && item.checked == 1, 'item-error': showAnalysis && clickIndex == i && item.checked == 0}">
              <img src="./static/img/success-icon.png" alt="" v-if="showAnalysis && item.checked == 1">
              <img src="./static/img/error-icon.png" alt=""
                   v-if="showAnalysis && clickIndex == i && item.checked == 0">
              {{ item.sort }} &nbsp;{{ item.content }}
            </div>
          </div>
          <!-- 多选 -->
          <div v-if="list[index].type == 2">
            <div class="item" v-for="(item, i) in list[index].items" :key="i" @click="itemClick(i)"
                 :class="{ 'item-click': item.isCheked, 'item-success': showAnalysis && item.checked == 1, 'item-error': showAnalysis && item.isCheked && item.checked == 0}">
              <img src="./static/img/success-icon.png" alt="" v-if="showAnalysis && item.checked == 1">
              <img src="./static/img/error-icon.png" alt=""
                   v-if="showAnalysis && clickIndex == i && item.checked == 0">
              {{ item.sort }} &nbsp;{{ item.content }}
            </div>
          </div>

          <!-- <div class="item item-click">A.  吴起镇</div>
          <div class="item item-success"> <img src="./static/img/success-icon.png" alt="">吴起镇</div>
          <div class="item item-error"> <img src="./static/img/error-icon.png" alt="">吴起镇</div>
          <div class="item">A.  吴起镇</div> -->
        </div>
        <div class="bg-fff mar-t32" v-if="showAnalysis">
          <div class="title">
            <div class="left">
              <span class="tips"></span>答案解析
            </div>
          </div>
          <div class="success-title">正确答案：{{ list[index].answer }}</div>
          <div class="success-text">
            <u-parse :html="list[index].analysis"></u-parse>
          </div>
        </div>
      </div>
      <div class="subject-content" v-else>
        <div class="bg-fff pad-b48">
          <img src="./static/img/answer-head.png" alt="" class="head-img">
          <div class="head-content">
            <p>本次答对题目数</p>
            <div>{{ resultInfo.right }}</div>
          </div>
          <div class="info-content">
            <span class="info-item">正确率:  {{ resultInfo.rate }}</span>
            <span class="info-item">用时:  {{ useTime }}</span>
            <span class="info-item mar-b132">错题数:  {{ resultInfo.wrong }}</span>
          </div>
          <span class="big-btn mar-r22" @click="back">返回</span>
          <span class="big-btn bg-red" @click="again">再来一组</span>
        </div>
      </div>
    </div>
    <AiEmpty v-if="list.length == 0"/>
  </section>
</template>
<script>
import {mapState} from "vuex";

export default {
  name: "AppOnlineAnswer",
  appName: "党史题库",
  computed: {
    ...mapState(["user"]),
  },
  data() {
    return {
      showAnwser: false,
      index: 0,
      clickIndex: '',
      list: [],
      showTopBtn: false,
      topBtnText: '',
      showAnalysis: false,
      createdTime: '',
      endTime: '',
      useTime: '',
      resultInfo: {}
    };
  },
  onLoad() {
    this.createdTime = Date.parse(new Date())
    this.getList()
  },
  onShow() {
    document.title = '党史题库'
  },
  methods: {
    itemClick(i) {
      if (this.showAnalysis) return

      if (this.list[this.index].type == 1) { //单选
        this.clickIndex = i
        this.showTopBtn = true
      }
      if (this.list[this.index].type == 2) { //多选
        this.showTopBtn = false
        this.list[this.index].items[i].isCheked = !this.list[this.index].items[i].isCheked
        this.list[this.index].items.map((item) => {
          if (item.isCheked) {
            this.showTopBtn = true
          }
        })

      }
      this.topBtnText = '确定'
    },
    confirm() {
      if (this.list[this.index].type == 1) { //单选
        this.list[this.index].result = this.list[this.index].items[this.clickIndex].sort
      }
      if (this.list[this.index].type == 2) { //多选
        var resultList = []
        this.list[this.index].items.map((item) => {
          if (item.isCheked) {
            resultList.push(item.sort)
          }
        })
        this.list[this.index].result = resultList.join(',')
      }

      console.log(this.list)


      if (this.topBtnText == '下一题') { //next
        if (this.index < this.list.length - 1) {
          this.index++
          this.init()
        } else { //答完了
          this.showTopBtn = false
          this.endTime = Date.parse(new Date());
          this.useTime = this.intervalTime(this.endTime - this.createdTime)
          this.getResult()
        }
      }
      if (this.topBtnText == '确定') { //确定选项
        this.showAnalysis = true
        this.topBtnText = '下一题'
      }
    },
    getResult() {
      this.$http.post(`/app/apppartyquestion/checkAnswer`, this.list).then((res) => {
        if (res.code == 0) {
          this.resultInfo = res.data
          this.showAnwser = true
        }
      });
    },
    getList() {
      this.$http.post(`/app/apppartyquestion/getQuestions`).then((res) => {
        if (res.code == 0) {
          res.data.map((item) => {
            item.answerList = []
            item.items.map((i) => {
              if (i.checked == 1) {
                item.answerList.push(i.sort)
              }
            })
            item.answer = item.answerList.join(',')

            if (item.type == 2) { //多选
              item.isCheck = false
            }
          })
          this.list = res.data
        }
      });
    },
    intervalTime(time) {
      var leave1 = time % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
      var hours = Math.floor(leave1 / (3600 * 1000));
      hours = hours < 10 ? '0' + hours : hours
      var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
      var minutes = Math.floor(leave2 / (60 * 1000));
      minutes = minutes < 10 ? '0' + minutes : minutes
      var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
      var seconds = Math.round(leave3 / 1000);
      seconds = seconds < 10 ? '0' + seconds : seconds
      return hours + ":" + minutes + ":" + seconds
    },
    back() {
      uni.navigateBack({delta: 1})
    },
    again() {
      this.init()
      this.index = 0
      this.list = []
      this.getList()
      this.createdTime = Date.parse(new Date())
    },
    init() {
      this.showAnwser = false
      this.clickIndex = ''
      this.showTopBtn = false
      this.topBtnText = ''
      this.showAnalysis = false
    },
  },
};
</script>
<style scoped lang="scss">
@import "../../common/party";

.AppOnlineAnswer {
  width: 100%;
  height: 100%;
}

.page {
  width: 100%;
  height: 100%;
  background-color: #F6F6F6;

  .bg-img {
    width: 100%;
    height: 800px;
  }

  .subject-content {
    width: 100%;
    border-radius: 4px;
    padding: 24px 36px 48px 36px;
    box-sizing: border-box;
    position: absolute;
    top: 124px;
    z-index: 9;

    .btn {
      padding: 0 30px;
      height: 64px;
      line-height: 64px;
      text-align: center;
      background: #D03A28;
      border-radius: 4px;
      font-size: 28px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #FFF;
      position: absolute;
      top: -100px;
      right: 36px;
      z-index: 99;
    }

    .pad-top {
      padding-top: 100px;
    }

    .pad-b48 {
      padding-bottom: 48px;
    }

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

    .bg-fff {
      width: 100%;
      background-color: #fff;
      border-radius: 4px;
      box-shadow: 0 6px 8px 4px rgba(218, 227, 234, 0.42);
      position: relative;

      .title {
        width: 100%;
        height: 100px;
        border-bottom: 1px solid #F2F3F5;
        padding: 24px 30px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;

        .left {
          font-size: 36px;
          font-family: PingFang-SC-Heavy, PingFang-SC;
          font-weight: 800;
          color: #333;
          line-height: 50px;

          .tips {
            display: inline-block;
            width: 8px;
            height: 36px;
            background: #E02617;
            margin-right: 16px;
          }
        }

        .right {
          font-size: 34px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #999;
          line-height: 48px;

          .big-num {
            font-size: 72px;
            font-family: PingFang-SC-Heavy, PingFang-SC;
            font-weight: 800;
            color: #333;
          }
        }
      }

      .text {
        padding: 48px 40px;
        font-size: 32px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333;
        line-height: 48px;
        word-break: break-all;
      }

      .item {
        width: 612px;
        background: #FAFBFC;
        border-radius: 12px;
        border: 1px solid #F2F3F5;
        margin-bottom: 28px;
        margin-left: 32px;
        padding: 26px 48px;
        box-sizing: border-box;
        font-size: 32px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #687178;
        line-height: 44px;

        img {
          width: 36px;
          height: 36px;
          vertical-align: middle;
          margin-right: 14px;
        }
      }

      .item-click {
        background: #F5F5F2;
        border: 1px solid #AD9B8D;
        color: #B7A38E;
      }

      .item-success {
        background: #E9FAF0;
        border: 1px solid #E9FAF0;
        color: #40BF6F;
      }

      .item-error {
        background: #FDEBEB;
        border: 1px solid #FDEBEB;
        color: #D03A28;
      }

      .success-title {
        padding: 32px 0 0 40px;
        font-size: 32px;
        font-family: PingFang-SC-Heavy, PingFang-SC;
        font-weight: 800;
        color: #333;
        line-height: 44px;
      }

      .success-text {
        padding: 32px 40px 56px;
        font-size: 32px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333;
        line-height: 48px;
        word-break: break-all;
      }

      .head-img {
        width: 100%;
        height: 260px;
      }

      .head-content {
        position: absolute;
        width: 100%;
        height: 260px;
        top: 0;
        left: 0;
        padding: 56px 0 0 72px;
        box-sizing: border-box;

        p {
          font-size: 38px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #FBE5E6;
          line-height: 52px;
        }

        div {
          font-size: 100px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #FBE5E6;
          line-height: 140px;
        }
      }

      .info-content {
        padding: 88px 32px 40px;

        .info-item {
          display: inline-block;
          width: 300px;
          font-size: 34px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #666;
          line-height: 48px;
          margin-bottom: 42px;
        }

        .mar-b132 {
          margin-bottom: 132px;
        }
      }

      .big-btn {
        display: inline-block;
        width: 296px;
        height: 88px;
        line-height: 88px;
        text-align: center;
        border-radius: 4px;
        border: 1px solid #E4E5E7;
        font-size: 34px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666;
      }

      .bg-red {
        border: 0;
        background: #D03A28;
        color: #fff;
      }

      .mar-r22 {
        margin: 0 22px 0 32px;
      }
    }
  }
}
</style>