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.user.userInfo.points }}
        </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.totaPonits)
                  "
                  :show-pivot="false"
                />
              </div>
              <div class="user-manual-item-left-schedule-text">
                已获得{{ item.getPoints }}分 / 上限{{ item.totalPonits }}分
              </div>
            </div>
          </div>
          <div class="user-manual-item-right">
            <div class="user-manual-item-btn" @click="toManualEarnFun(item)">
              {{ 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: "DAILY_QUESTIONS",
          rule: "1分/登录",
          isFinish: false,
          getPoints: 0,
          totalPonits: 1,
          rightButton: "已完成",
          router: ""
        },
        {
          name: "阅读文章",
          type: "LEARNING_COMPLETE",
          rule: "1分/每阅读一篇非必学文章",
          isFinish: false,
          getPoints: 0,
          totalPonits: 10,
          rightButton: "去看看",
          router: ""
        },
        {
          name: "答题",
          type: "LEARNING_COMPLETE",
          rule: "1分/每答对一道非今日必答题目",
          isFinish: false,
          getPoints: 0,
          totalPonits: 10,
          rightButton: "去答题",
          router: ""
        },
        {
          name: "专项答题",
          type: "LEARNING_COMPLETE",
          rule: "1分/每答对一道专项答题",
          isFinish: false,
          getPoints: 0,
          totalPonits: 10,
          rightButton: "去答题",
          router: ""
        },
        {
          name: "今日必答",
          type: "LEARNING_COMPLETE",
          rule: "2分/完成今日必答",
          isFinish: false,
          getPoints: 0,
          totalPonits: 2,
          rightButton: "去答题",
          router: ""
        },
        {
          name: "今日必读",
          type: "DAILY_QUESTIONS",
          rule: "2分/阅读一篇必答文章",
          isFinish: false,
          getPoints: 0,
          totalPonits: 1000000000,
          rightButton: "去看看",
          router: ""
        }
      ],
      userTotalPonits: 0, // 用户的总积分
      todayEarnPoints: 0, // 今日已累计的积分
      sumPointsObj: {
        LOGIN: 0, // 登录
        DAILY_QUESTIONS: 0, // 每日答题
        WEEKLY_QUESTIONS: 0, // 每周考试
        READ_5_MINS: 0, // 阅读时长
        READ_2_HOURS: 0, // 阅读时长
        LEARNING_COMPLETE: 0 // 阅读完成
      }
    };
  },
  mounted() {
    this.getEvents();
    this.getDailyPoints();
  },
  computed: {
    ...mapState({
      user: state => state.user
    })
  },
  methods: {
    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;
        })
        .catch(() => {
          this.$store.commit("toggleLoading", false);
        });
    },
    //   查询总积分
    getAllPoints() {
      let path = {
        userName: this.user.userInfo.userName
      };
      this.$_http
        .get(this.$pathParams(this.$_API.JTXT_GET_USER_ALL_POINTS, path))
        .then(res => {
          this.userTotalPonits = res.data;
        })
        .catch(() => {
          this.$store.commit("toggleLoading", false);
        });
    },
    // 格式化已获得的积分/总积分的数
    formatePercentageFun(getPoints, totaPonits) {
      return Math.round((getPoints / totaPonits) * 100) || 0;
    },
    // 操作：返回
    onClickLeft() {
      this.$router.back();
    },
    // 操作：点击积分说明按钮
    clickLearnRule() {
      this.$router.push({ name: "LearnPointRule" });
    },
    // 操作：点击了去看看、去学习、去训练
    toManualEarnFun(item) {
      console.log("item" + JSON.stringify(item));
      if (item.name === "今日必答") {
        this.$store.commit("updateAnswerItemStore", {
          field: "answerRecruitId",
          value: "daily-questions" // item.id
        });
        this.$router.push({ name: "answerRecruit" });
      } else if (item.name === "今日必读") {
        this.$router.push({
          name: "home"
        });
        this.$store.commit("updateStudyItemStore", {
          field: "isNeedChangeTab",
          value: true
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.user-manual-box {
  width: 100%;
  height: 100vh;
  font-size: 0.6rem;
  background-color: #fff;
  .user-manual-div {
    overflow-y: auto;
    padding: 0 0.75rem;
    .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 {
          .user-manual-item-btn {
            border-radius: 0.1rem;
            color: #0088e9;
            background-color: #d8e9f5;
            padding: 0.1rem 0.25rem;
          }
        }
      }
    }
  }
}
</style>