tongan-points-h5/pages/answer/answer.vue

<template>
  <div class="body">
    <div class="bkg">
      <u-image mode="aspectFill" height="100vh" width="100vw" :src="require('@/static/answer-bkg.png')"></u-image>
    </div>

    <div class="container">
      <div class="container__bkg">
        <u-image width="100%" height="100%" mode="scaleToFill" :src="require('@/static/answer-container-bkg.png')"></u-image>
      </div>
      <div class="title">
        {{ containerTitle(now+1) }}
      </div>

      <transition name="answering"
                  enter-active-class="fade-in"
                  leave-to-class="fade-out">
        <div :style="{ 'display': progress !== 1 ? 'none' : '' }" v-show="progress === 1">
          <div class="question">
            {{ questionTitle }}
          </div>
          <div class="answers">
            <div class="answers__item" v-for="(item, index) in questionAnswers" @click="$u.throttle(() => answer(item, index))">
              <div class="answers__item--num" :class="{ 'answers__item--num-active': index === flag }">{{num(item.myindex)}}</div>
              <div class="answers__item--text" :class="{ 'answers__item--text-active': index === flag }">{{item.title}}</div>
            </div>
          </div>
        </div>
      </transition>

      <transition name="answer-result"
                  enter-active-class="fade-in"
                  leave-to-class="fade-out">
        <div :style="{ 'display': progress !== 2 ? 'none' : '' }"  class="answers correct" v-show="progress === 2">
          <template v-if="isCorrect">
            <div class="answers__img">
              <u-image mode="widthFix" :width="194" :src="require('@/static/correct.png')"></u-image>
            </div>

            <div class="answers__text">
              恭喜你，答对了！
            </div>
          </template>
          <template v-else>
            <div class="answers__img">
              <u-image mode="widthFix" :width="194" :src="require('@/static/error.png')"></u-image>
            </div>

            <div class="answers__text">
              正确答案：{{ correctAnswer }}
            </div>
          </template>

          <div class="answers__btn" @click="$u.throttle(next)">
            <u-image mode="widthFix" :width="381" :src="require('@/static/next-btn.png')"></u-image>
          </div>
        </div>
      </transition>

      <transition name="answer-end"
                  enter-active-class="fade-in"
                  leave-to-class="fade-out">
        <div :style="{ 'display': progress !== 3 ? 'none' : '' }"  class="answers correct" v-show="progress === 3">
          <div class="answers__img">
            <u-image mode="widthFix" :width="answerImgWidth" :src="answerImg"></u-image>
          </div>
          <template>
            <template v-if="isCorrect">
              <div class="answers__text">
                恭喜你，答对了！
              </div>
            </template>

            <template v-else>
              <div class="answers__text">
                正确答案：{{ correctAnswer }}
              </div>
            </template>
          </template>

          <template>
            <template v-if="!isTotalEnd">
              <div class="answers__text answers__result">
                打卡成功，已完成<span>{{ totalDone }}</span>个红色场馆的打卡， 完成{{ detail.points ? detail.points.length : 0}}家红色场馆打卡即可获得<span>荣誉证书</span>
              </div>

              <div class="answers__btn" @click="$u.throttle(toMap)">
                <u-image mode="widthFix" :width="381" :src="require('@/static/back-home-btn.png')"></u-image>
              </div>
            </template>
            <template v-else>
              <div class="answers__text answers__result">
                打卡成功，已完成所有红色场馆的打卡。 <br>快来生成你的证书吧!
              </div>

              <div class="answers__btn" @click="$u.throttle(toCertificate)">
                <u-image mode="widthFix" :width="381" :src="require('@/static/certificate-btn.png')"></u-image>
              </div>
            </template>
          </template>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isTotalEnd: false, //是否完成所有打卡
      detail: {},
      now: 0,
      nowAnswer: {},
      answers: [],
      myAnswers: [],//回答答案数组
      isCorrect: false,

      progress: 1,//1答题中2答案3结束
      flag: -1,//显示active index
    };
  },
  methods: {
    async getDetail () {
      const res = await this.$u.api.getPoints()
      this.detail = res
    },
    async getQuestions (id) {
      const res = await this.$u.api.getQuestions({
        point_id: id
      })

      this.answers = res.questions
    },

    answer (item, index) {
      this.flag = index
      this.myAnswers.push({
        question_id: this.answers[this.now].id,
        answer_ids: item.id
      })
      this.isCorrect = !!item.is_correct

      setTimeout(() => {

        this.progress = this.now === (this.answers?.length - 1) ? 3 : 2

        if (this.progress === 3) {
          this.isTotalEnd = this.detail.points?.length == this.totalDone
          this.$u.api.saveQuiz({
            point_id: this.$route.query?.id ? this.$route.query.id : this.vuex_point_id,
            answers: this.myAnswers
          })
        }
      },500)
    },

    next () {
      this.now ++
      this.flag = -1
      this.progress = 1
    },

    toMap () {
      uni.navigateTo({ url:'/pages/map/map' })
    },

    toCertificate () {
      uni.navigateTo({ url:'/pages/certificate/certificate'})
    }
  },
  computed: {
    answerImgWidth () {
      if (this.isTotalEnd) {
        return 370
      }
      if (this.isCorrect) {
        return 194
      }
      return 184
    },
    answerImg () {
      if (this.isTotalEnd) {
        return require('@/static/error2.png')
      }
      if (this.isCorrect) {
        return require('@/static/correct.png')
      }
      return require('@/static/error.png')
    },
    totalDone () {
      if (this.detail && this.detail.points) {
        let id = this.$route.query?.id ? this.$route.query.id : this.vuex_point_id
        let point = this.detail.points.find(i => i.id == id)
        return point?.has_answer > 0 ? this.detail.point_answer_total : this.detail.point_answer_total+1
      }
      return 1
    },

    correctAnswer () {
      let correct = this.answers[this.now]?.options?.find(i => i.is_correct)
      return `${this.num(correct?.myindex)}、${correct?.title}`
    },
    questionTitle () {
      return this.answers[this.now]?.title
    },
    questionAnswers () {
      return this.answers[this.now]?.options?.sort((a, b) => {
        return a.myindex - b.myindex
      })
    },

    num () {
      return function (index) {
        let map = new Map([
          [1,'A'],
          [2,'B'],
          [3,'C'],
          [4,'D'],
          [5,'E'],
          [6,'F'],
          [7,'G'],
          [8,'H'],
          [9,'I'],
        ])
        return map.get(index)
      }
    },

    containerTitle () {
      return function (number) {
        let chineseNumber = "";
        let chineseDigits = ["零", "一", "二", "三", "四", "五", "六", "七", "八", "九"];
        let chineseUnits = ["", "十", "百", "千", "万", "亿"];

        if (number === 0) {
          return chineseDigits[0];
        }

        let digits = [];
        while (number > 0) {
          digits.push(number % 10);
          number = Math.floor(number / 10);
        }

        let unitIndex = 0;
        for (let i = 0; i < digits.length; i++) {
          let digit = digits[i];
          let unit = chineseUnits[unitIndex];

          if (digit === 0) {
            if (unit === "万" || unit === "亿") {
              chineseNumber = chineseUnits[unitIndex] + chineseNumber;
              unitIndex++;
            }
            continue;
          }

          chineseNumber = chineseDigits[digit] + unit + chineseNumber;
          unitIndex++;

          if (unitIndex === 5) {
            unitIndex = 1;
          }
        }

        return `第${chineseNumber}题`;
      }
    }
  },
  onLoad(option) {
    this.getQuestions(option.id);
    this.getDetail();
  }
}
</script>

<style lang="scss">
.body {

  padding: 100rpx 20rpx 0 20rpx;
}
.bkg {

  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
}

.container {
  min-height: 790rpx;

  padding-bottom: 96rpx;
  position: relative;
  &__bkg {

    z-index: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  & .title {
    width: 51%;
    text-align: center;
    font-size: 50rpx;
    font-weight: 400;
    color: #FFFFFF;

    padding: 15rpx 0rpx;
    z-index: 1;
    position: relative;
  }

  & .question {
    font-weight: 500;
    color: #333333;
    font-size: 35rpx;

    margin-top: 96rpx;
    padding: 0 51rpx;
    z-index: 1;
    position: relative;
  }

  & .correct {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  & .answers {

    margin-top: 58rpx;
    padding: 0 51rpx;
    z-index: 1;
    position: relative;
    &__item {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;

      & + div {

        margin-top: 34rpx;
      }
      &--num {
        font-weight: 500;
        color: #666666;
        font-size: 32rpx;
        text-align: center;
        width: 60rpx;
        height: 60rpx;
        line-height: 60rpx;
        background: #fff;
        border: 1px solid #F85352;
        border-radius: 50%;
        transition: all 0.2s;

        margin-right: 13rpx;
        &-active {
          background: #F85352;
          color: #fff;
        }
      }
      &--text {
        line-height: 60rpx;
        flex: 1;
        font-weight: 500;
        font-size: 32rpx;
        color: #666;
        background: #fff;
        border: 1px solid #F85352;
        border-radius: 0 20rpx 20rpx 20rpx;
        transition: all 0.2s;

        padding: 0 54rpx;
        &-active {
          background: #F85352;
          color: #fff;
        }
      }
    }


    &__text {
      font-size: 32rpx;
      font-weight: 500;
      color: #666666;
      padding-top: 52rpx;
      text-align: center;
      //line-height: 135rpx;

      & > span {
        font-size: 34rpx;
        color: #C52A34;
      }
    }
    &__result {
      color: #666666;
      font-weight: 500;
      font-size: 20rpx;
      line-height: 36rpx;
      word-break: break-word;

      padding: 0 calc(127rpx - 51rpx);
      padding-top: 38rpx;
    }
  }
}

.fade-in {
  animation: fade-in .5s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fade-out {
  animation: fade-out .4s ease-out both;
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
</style>