JHVip/src/views/Home/Home.vue

<template>
  <!-- 我的推广页 -->
  <div id="home">
    <!-- 团队 -->
    <ShowMoney :title="teamTitleArr" :content="teamContentArr" />
    <!-- 个人 -->
    <!-- <ShowMoney :title="myTitleArr" :content="myContentArr" /> -->
    <!-- 链接部分 -->
    <!-- <HomeLink /> -->
  </div>
</template>

<script>
import ShowMoney from "@/components/ShowMoney/ShowMoney";
import HomeLink from "@/views/Home/HomeLink/HomeLink";
import { mapActions, mapState } from "vuex";
export default {
  name: "Home",
  components: {
    ShowMoney,
    HomeLink,
  },
  inject: ["checkCode"],
  data() {
    return {
      teamTitleArr: [
        "玩家人数",
        "推广员人数",
        "玩家总充值（总佣金）",
        "推广员总充值（总佣金）",
        "总充值",
        "当前已赚取佣金",
      ],
      teamContentArr: [0, 0, "0（0）", "0（0）", 0, 0],
    };
  },
  computed: {
    ...mapState(["userProfit"]),
  },
  watch: {
    userProfit() {
      this.init();
    },
  },
  created() {},
  mounted() {
    this.onProfit();
  },
  methods: {
    ...mapActions(["userProfitAction"]),

    // 初始化
    init() {
      const {
        game_user_amount,
        game_user_profit,
        promo_user_amount,
        promo_user_profit,
        game_user_count,
        promo_user_count,
      } = this.userProfit;
      this.teamContentArr = [
        game_user_count,
        promo_user_count,
        `${(game_user_amount / 100).toFixed(2)}（${(
          game_user_profit / 100
        ).toFixed(2)}）`,
        `${(promo_user_amount / 100).toFixed(2)}（${(
          promo_user_profit / 100
        ).toFixed(2)}）`,
        ((game_user_amount + promo_user_amount) / 100).toFixed(2),
        ((game_user_profit + promo_user_profit) / 100).toFixed(2),
      ];
    },

    // 获取已赚取佣金
    onProfit() {
      this.$api.profit().then((res) => {
        this.checkCode(res);
        const { code, data } = res.data;
        if (code) {
          return;
        }
        // 成功 todo
        this.userProfitAction(data);
        this.init();
      });
    },
  },
};
</script>

<style  scoped>
#home {
  min-width: 1120px;
  width: 98%;
  margin: 0 auto;
  overflow: hidden;
}
</style>