JingTieXueTang.H5/src/views/home/answer/through/through-question-end.vue

<template>
  <div class="page-through-question-item-result-box">
    <van-nav-bar title="闯关答题" />
    <div class="through-question-item-result-div">
      <div
        v-if="answerThroughNumber < 5"
        class="through-question-item-result-title"
      >
        第{{ answerThroughNumber }}关闯关成功
      </div>
      <div v-else class="through-question-success">
        <div class="through-question-success-title">恭喜，闯关成功</div>
        <div class="through-question-success-grades">积分+{{ grades }}</div>
      </div>
      <div class="through-question-item-detial-button-box">
        <van-button
          :class="{
            'through-question-item-detial-button': true,
            'through-question-item-detial-button-row': answerThroughNumber >= 5
          }"
          type="primary"
          color="#0088e9"
          @click="handleBackFun"
          >返回</van-button
        >
        <van-button
          class="through-question-item-detial-button"
          v-if="answerThroughNumber < 5"
          type="primary"
          color="#0088e9"
          @click="handleStartThroughFun"
          >第{{ answerThroughNumber + 1 }}关</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "through-question-end",
  components: {},
  data() {
    return {
      grades: 5
    };
  },
  created() { this.setLanXinNavigator(); },
  activated() {
    this.setLanXinNavigator();
  },
  mounted() {},
  computed: {
    ...mapState({
      user: state => state.user,
      answerThroughNumber: state => state.answer.answerThroughNumber
    })
  },
  methods: {
    // 设置蓝信navigator
    setLanXinNavigator() {
      lx.ui.setNavigationBarTitle({
        title: "答题闯关"
      });
    },
    // 操作：返回
    handleBackFun() {
      this.$router.back();
    },
    // 操作：继续下一关
    handleStartThroughFun() {
      let num = this.answerThroughNumber + 1;
      this.$store.commit("updateAnswerItemStore", {
        field: "answerThroughNumber",
        value: num
      });
      this.$router.replace({
        name: "throughQuestionDoing"
      });
      //   调用接口
      if (num >= 0) {
        let path = {
          userName: this.user.userInfo.userName
        };
        let params = {
          upLimit: 10,
          oncePoint: 10
        };
        this.$_http
          .post(
            this.$pathParams(this.$_API.JTXT_POST_EVENTS_USERNAME, path), params
          )
          .then(res => {
            console.log("---" + JSON.stringify(res));
          })
          .catch(() => {
            this.$store.commit("toggleLoading", false);
          });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin";
.page-through-question-item-result-box {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  font-size: 0.6rem;
  .through-question-item-result-div {
    margin: 0.5rem 0.5rem;
    border: 1px solid #e4e8eb;
    background-color: #fff;
    border-radius: 4px;
    padding: 0.5rem 0.5rem 1rem;
    .through-question-item-result-title {
      font-size: 0.7rem;
      text-align: center;
      font-weight: bold;
    }
    .through-question-success {
      .through-question-success-title {
        font-size: 0.75rem;
        color: red;
        text-align: center;
      }
      .through-question-success-grades {
        font-size: 0.65rem;
        margin-top: 0.5rem;
      }
    }
    .through-question-item-detial-button-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 1rem;
      .through-question-item-detial-button {
        width: 48%;
        height: auto;
        padding: 0.5rem 0.5rem;
        font-size: 0.65rem;
      }
      .through-question-item-detial-button-row {
        width: 100%;
      }
    }
  }
}
</style>