JingTieXueTang.H5/src/views/home/person/user-manual.vue

<template>
  <div class="user-manual-box">
    <van-nav-bar title="学习积分" left-arrow @click-left="onClickLeft" />
    <div class="user-manual-div">
      <div class="user-manual-grades-div">
        <div class="user-manual-name-description">学习积分</div>
        <div class="user-manual-grades">
          {{ this.userLearnPonits }}
        </div>
        <div class="user-manual-description" @click="clickLearnRule">
          积分说明
        </div>
      </div>
      <div class="user-manual-earn-points-row">
        <div class="user-manual-earn-points">赚积分</div>
        <div class="user-manual-earn-points-text">
          今日已累计<span class="user-manual-earn-points-today">{{
            todayEarnPoints
          }}</span
          ><span>积分</span>
        </div>
      </div>

      <div class="user-manual-list">
        <div
          v-for="(item, index) in eventList"
          :key="index"
          class="user-manual-item"
        >
          <div class="user-manual-item-left">
            <div class="user-manual-item-left-title">{{ item.name }}</div>
            <div>{{ item.rule }}</div>
            <div class="user-manual-item-left-percentage">
              <div class="user-manual-item-left-schedule">
                <van-progress
                  :percentage="
                    formatePercentageFun(item.getPoints, item.totalPonits)
                  "
                  :show-pivot="false"
                />
              </div>
              <div class="user-manual-item-left-schedule-text">
                已获得 {{ item.getPoints || 0 }} 分 / 上限
                {{ item.totalPonits }} 分
              </div>
            </div>
          </div>
          <div class="user-manual-item-right">
            <div class="user-manual-item-btn" @click="toManualEarnFun(item)">
              {{
                item.getPoints === item.totalPonits
                  ? "已完成"
                  : item.rightButton
              }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { getTodayStr } from "@/utils/date";
export default {
  name: "user-manual",
  components: {},
  data() {
    return {
      loading: false,
      eventList: [
        {
          name: "每日登录",
          type: "LOGIN",
          rule: "1分/登录",
          isFinish: false,
          getPoints: 1,
          totalPonits: 1,
          rightButton: "已完成",
          router: ""
        },
        {
          name: "今日必读",
          type: "MANDATORY_LEARNING_COMPLETE",
          rule: "2分/每有效阅读一篇今日必读文章",
          isFinish: false,
          getPoints: 0,
          totalPonits: 10,
          rightButton: "去看看",
          router: ""
        },
        {
          name: "阅读文章",
          type: "LEARNING_COMPLETE",
          rule: "1分/每有效阅读一篇非今日必读文章",
          isFinish: false,
          getPoints: 0,
          totalPonits: 5,
          rightButton: "去看看",
          router: ""
        },
        {
          name: "今日答题",
          type: "DAILY_QUESTIONS",
          rule: "1分/每答对一题",
          isFinish: false,
          getPoints: 0,
          totalPonits: 5,
          rightButton: "去答题",
          router: ""
        },
        {
          name: "每周答题",
          type: "WEEKLY_QUESTION",
          rule: "1分/每答对一题",
          isFinish: false,
          getPoints: 0,
          totalPonits: 10,
          rightButton: "去答题",
          router: ""
        },
        {
          name: "专项答题",
          type: "SPECIAL_QUESTIONS",
          rule: "1分/每答对一道专项答题",
          isFinish: false,
          getPoints: 0,
          totalPonits: 10,
          rightButton: "去答题",
          router: ""
        },
        {
          name: "答题闯关",
          type: "CHALLENGE_QUESTIONS",
          rule: "20分/全部通关",
          isFinish: false,
          getPoints: 0,
          totalPonits: 20,
          rightButton: "去答题",
          router: ""
        }
      ],
      userLearnPonits: 0, // 用户的总积分
      todayEarnPoints: 0, // 今日已累计的积分
      sumPointsObj: {
        LOGIN: 0, // 登录
        DAILY_QUESTIONS: 0, // 每日答题
        WEEKLY_QUESTION: 0, // 每周考试
        READ_5_MINS: 0, // 阅读时长
        READ_2_HOURS: 0, // 阅读时长
        LEARNING_COMPLETE: 0, // 阅读完成
        SPECIAL_QUESTIONS: 0, // 专项答题
        MANDATORY_LEARNING_COMPLETE: 0, // 今日必读
        CHALLENGE_QUESTIONS: 0 // 闯关答题
      }
    };
  },
  mounted() {
    this.getEvents();
    this.getDailyPoints();
    this.getLearnPoints();
  },
  created() {
    this.setLanXinNavigator();
  },
  activated() {
    this.setLanXinNavigator();
  },
  computed: {
    ...mapState({
      user: state => state.user
    })
  },
  methods: {
    // 设置蓝信navigator
    setLanXinNavigator() {
      lx.ui.setNavigationBarTitle({
        title: "学习积分"
      });
    },
    getEvents() {
      let path = {
        userName: this.user.userInfo.userName,
        date: getTodayStr()
      };
      this.$_http
        .get(this.$pathParams(this.$_API.JTXT_GET_EVENTS_USERNAME_DATE, path))
        .then(res => {
          if (res.data.length !== 0) {
            res.data.forEach(element => {
              this.sumPointsObj[element.event] += element.delta;
            });
            this.updateGetPoints();
          }
        })
        .catch(() => {
          this.$store.commit("toggleLoading", false);
        });
    },
    // 修改获得积分
    updateGetPoints() {
      this.eventList.forEach(element => {
        element.getPoints = this.sumPointsObj[element.type];
      });
      console.log("-this.eventList--" + JSON.stringify(this.eventList));
    },
    //   获取今日分数
    getDailyPoints() {
      let path = {
        userName: this.user.userInfo.userName
      };
      this.$_http
        .get(this.$pathParams(this.$_API.JTXT_GET_USER_DAIYL_POINTS, path))
        .then(res => {
          this.todayEarnPoints = res.data || 0;
        })
        .catch(() => {
          this.$store.commit("toggleLoading", false);
        });
    },
    //   查询总积分
    getLearnPoints() {
      let path = {
        userName: this.user.userInfo.userName
      };
      this.$_http
        .get(this.$pathParams(this.$_API.JTXT_GET_USER_LEARN_POINTS, path))
        .then(res => {
          this.userLearnPonits = res.data || 0;
        })
        .catch(() => {
          this.$store.commit("toggleLoading", false);
        });
    },
    // 格式化已获得的积分/总积分的数
    formatePercentageFun(getPoints, totalPonits) {
      if (
        (!getPoints && getPoints !== 0) ||
        (!totalPonits && totalPonits !== 0)
      ) {
        return 0;
      }
      if (isNaN(getPoints) || isNaN(totalPonits)) {
        return 0;
      }
      return Math.round((getPoints / totalPonits) * 100) || 0;
    },
    // 操作：返回
    onClickLeft() {
      this.$router.back();
    },
    // 操作：点击积分说明按钮
    clickLearnRule() {
      this.$router.push({ name: "learnPointRule" });
    },
    // 操作：点击了去看看、去学习、去训练
    toManualEarnFun(item) {
      // 获得的积分已满，不作操作
      if (item.getPoints === item.totalPonits) {
        return;
      }
      switch (item.rightButton) {
        case "已完成":
          break;
        case "去看看":
          // 1.跳转到首页
          this.$router.replace({
            name: "home"
          });
          // 2.告知需要首页切换tab-阅读
          this.$store.commit("updateStudyItemStore", {
            field: "homeChangeTabIndex",
            value: 0
          });
          break;
        case "去答题":
          // 1. 重置vuex的answerRecruitId
          this.$store.commit("updateAnswerItemStore", {
            field: "answerRecruitId",
            value: "daily-questions" // item.id
          });
          // 2.跳转到首页
          this.$router.replace({
            name: "home"
          });
          // 3.告知需要首页切换tab-答题
          this.$store.commit("updateStudyItemStore", {
            field: "homeChangeTabIndex",
            value: 1
          });
          break;
        default:
          break;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.user-manual-box {
  .user-manual-div {
    width: 100%;
    height: 100vh;
    overflow-y: auto;
    padding: 0 0.75rem;
    background-color: #fff;
    font-size: 0.6rem;
    .user-manual-grades-div {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding-top: 1rem;
      .user-manual-name-description {
        padding: 0.15rem 0.5rem;
        // border: 1px solid #7cc8ff;
        // border-radius: 0.25rem;
        color: #0088e9;
        font-size: 0.75rem;
      }
      .user-manual-grades {
        font-size: 1rem;
        color: #0088e9;
        margin-top: 0.5rem;
      }
      .user-manual-description {
        margin-top: 0.5rem;
        padding: 0.15rem 0.5rem;
        border: 1px solid #7cc8ff;
        border-radius: 0.25rem;
        color: #7cc8ff;
      }
    }
    .user-manual-earn-points-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 1rem;
      .user-manual-earn-points {
        font-size: 0.7rem;
        font-weight: bold;
      }
      .user-manual-earn-points-text {
        color: #696969;
        display: flex;
        align-items: center;
        span {
          color: #df371e;
        }
        .user-manual-earn-points-today {
          font-size: 0.8rem;
          margin: 0 0.25rem;
        }
      }
    }
    .user-manual-list {
      padding: 0.5rem 0;
      .user-manual-item {
        padding: 0.5rem 0;
        border-top: 1px solid #e5e5e5;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .user-manual-item-left {
          .user-manual-item-left-title {
            font-weight: bold;
            word-break: break-all;
            word-wrap: break-word;
          }
          .user-manual-item-left-percentage {
            display: flex;
            align-items: center;
            margin-top: 0.5rem;
            .user-manual-item-left-schedule {
              width: 100px;
            }
            .user-manual-item-left-schedule-text {
              color: #999;
              font-size: 0.55rem;
              margin-left: 0.5rem;
            }
          }
        }
        .user-manual-item-right {
          margin-left: 1rem;
          .user-manual-item-btn {
            padding: 0.1rem 0.25rem;
            border-radius: 0.1rem;
            color: #0088e9;
            background-color: #d8e9f5;
            flex-wrap: nowrap;
            white-space: nowrap;
          }
        }
      }
    }
  }
}
</style>