fastest-progress.vue

<template>
  <div class="fastest-progress">
    <div class="bg">
      <van-icon name="arrow-left" @click="handlerBack" />
      <span class="title">本月进步最大奖励池</span>
      <span class="award"
        ><span v-if="growthTotal > 0">￥</span>{{ growthTotal }}</span
      >
    </div>
    <div class="rank">
      <div class="header rank-flex">
        <span style="flex:1;text-align:center;">排名</span>
        <span style="flex:1"></span>
        <span style="flex:2;text-align:center">用户名</span>
        <span style="flex:2">本月业绩增长率</span>
        <span style="flex:1;text-align:center">奖金</span>
      </div>
      <div class="rank-flex rank-content">
        <base-refresh-scroll>
          <div slot="content">
            <rank-item
              v-for="(item, index) in prizeVos"
              :key="index"
              :rank-index="index + 1"
              :prizeVos="item"
            />
          </div>
        </base-refresh-scroll>
      </div>
    </div>
  </div>
</template>

<script>
import BaseRefreshScroll from "../../components/BaseRefreshScroll.vue";
import RankItem from "./compoments/rankItem.vue";
import { getProgressPrizes } from "@/api/progressPrizes";
export default {
  name: "FastestProgress",
  components: {
    RankItem,
    BaseRefreshScroll
  },
  data() {
    return {
      growthTotal: 0,
      prizeVos: []
    };
  },
  beforeRouteEnter(to, from, next) {
    console.log("路由前");
    try {
      this.$bridgeToAppFun.showBottomBar(false);
    } catch {
      console.log("无法请求App");
      next();
    }
  },
  beforeRouteLeave(to, form, next) {
    console.log("离开");
    try {
      this.$bridgeToAppFun.showBottomBar(true);
    } catch {
      console.log("未能和App交互");
      next();
    }
  },
  mounted() {
    this.getProgressPrizes();
  },
  methods: {
    handlerBack() {
      try {
        this.$bridgeToAppFun.navigateBack();
      } catch {
        console.log("不能和App交互");
        this.$router.go(-1);
      }
    },
    getProgressPrizes() {
      const _this = this;
      getProgressPrizes().then(res => {
        if (res.code === 0) {
          _this.growthTotal = res.data.growthTotal;
          _this.prizeVos = res.data.prizeVos;
        } else {
          _this.growthTotal = 0;
          _this.prizeVos = [];
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.fastest-progress {
  position: relative;
  height: 100vh;
}
.bg {
  position: relative;
  height: 178px;
  color: #ffffff;
  background-image: url("../../assets/images/进步奖背景图.png");
  background-size: cover;
  .van-icon {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 52px;
    height: 46px;
    line-height: 46px;
    text-align: center;
    font-size: 16px;
    color: #ffffff;
  }
  .title {
    position: absolute;
    top: 113px;
    left: 35px;
    font-size: 14px;
  }
  .award {
    position: absolute;
    top: 136px;
    left: 35px;
    font-size: 16px;
  }
}
.rank {
  position: absolute;
  top: 168px;
  box-sizing: border-box;
  width: 100%;
  height: calc(100% - 178px);
  overflow: hidden;
  padding: 10px;
  background-color: #ffffff;
  border-radius: 12px;

  .header {
    height: 36px;
    font-size: 13px;
    font-weight: bold;
    border-bottom: 1px solid #eeeeee;
  }
  .rank-content {
    position: relative;
    height: 100%;
    overflow: hidden;
  }
  .rank-flex {
    display: flex;
  }
}
</style>