h5-woshidangshijiluren/pages/answer/answer.vue

<template>
  <div class="body">
    <div class="bkg">
      <u-image mode="widthFix" 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">
            1921年，中国共产党召开了第一次全国代表大会，宣告中国共产党成立。你知道这次大会是在哪里召开的吗？
          </div>
          <div class="answers">
            <div class="answers__item" v-for="(item, index) in 4" @click="$u.throttle(() => answer(item, index))">
              <div class="answers__item--num" :class="{ 'answers__item--num-active': index === flag }">{{num(index)}}</div>
              <div class="answers__item--text" :class="{ 'answers__item--text-active': index === flag }">上海</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">
          <div class="answers__img">
            <u-image mode="widthFix" :width="194" :src="require('@/static/correct.png')"></u-image>
          </div>

          <div class="answers__text">
            恭喜你，答对了！
          </div>

          <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="194" :src="require('@/static/correct.png')"></u-image>
          </div>

          <div class="answers__text answers__result">
            打卡成功，已完成<span>{{'3'}}</span>个红色场馆的打卡， 完成8家红色场馆打卡即可获得<span>荣誉证书</span>
          </div>

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

<script>
export default {
  data() {
    return {
      now: 0,
      nowAnswer: {},
      answers: [{},{},{}],

      progress: 1,//1答题中2答案3结束
      flag: -1,//显示active index
    };
  },
  methods: {
    answer (item, index) {
      this.flag = index

      setTimeout(() => {

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

    next () {
      this.now ++
      this.flag = -1
      this.progress = 1
    }
  },
  computed: {
    num () {
      return function (index) {
        let map = new Map([
          [0,'A'],
          [1,'B'],
          [2,'C'],
          [3,'D'],
          [4,'E'],
          [5,'F'],
          [6,'G'],
          [7,'H'],
          [8,'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}题`;
      }
    }
  }
}
</script>

<style lang="scss">
.body {

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

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

.container {
  min-height: 936rpx;

  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;
      line-height: 135rpx;

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

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

.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>