canCashOut.vue

<template>
  <div class="can-cash-out">
    <div class="nav">
      <van-icon
        name="arrow-left"
        size="20"
        class="nav-left"
        @click="$router.go(-1)"
      />
      <span class="nav-title">可提现</span>
    </div>
    <div class="cash-panel-nums">
      <div class="cash-panel">
        <div class="cash-nums">
          <span class="cash-num">{{ preNum }}</span>
          <span class="cash-label">上月未提</span>
        </div>
        <div class="cash-nums">
          <span class="cash-num">{{ currentNum }}</span>
          <span class="cash-label">本月可提</span>
        </div>
      </div>
    </div>
    <div class="cash-rules">
      <div class="cash-rule-content">
        <p>{{ rules }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { getWithdrawalAmount } from "@/api/wallet";

export default {
  name: "leagueNums",
  data() {
    return {
      preNum: "125",
      currentNum: "325",
      rules:
        "提现规则：这是一条规则，这是一条规则，这是一条规则，这是一条规则这是一条规则这是一条规则这是一条规则。"
    };
  },
  mounted() {
    this.getWithdrawal();
  },
  methods: {
    getWithdrawal() {
      const params = {
        userId: "13100911369"
      };
      getWithdrawalAmount(params).then(res => {
        if (res.code === 0) {
          this.preNum = res.data.lastMoneyNot;
          this.currentNum = res.data.currentMoneyCan;
          this.rules = res.data.withdrawRule;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
$white: #ffffff;
.can-cash-out {
  width: 100%;
  height: 298px;
  background-image: url("../assets/images/森林状态.png");
  background-size: cover;
  .nav {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 46px;
    color: #fff;
    .nav-left {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 52px;
      height: 100%;
      line-height: 46px;
      text-align: center;
    }
    .nav-title {
      max-width: 60%;
      margin: 0 auto;
      font-weight: bold;
      font-size: 16px;
    }
  }
  .cash-panel-nums {
    padding: 25px 15px 0px 15px;
    box-sizing: border-box;
    .cash-panel {
      height: 98px;
      background-color: #ffffff;
      box-shadow: 0px 2px 12px 0px rgba(6, 0, 1, 0.04);
      border-radius: 4px;
    }
    .cash-nums {
      width: 50%;
      text-align: center;
      display: inline-block;
      padding: 22px 0;
      position: relative;
      &:first-child {
        &::before {
          width: 1px;
          height: 50px;
          content: "";
          background-color: #eeeeee;
          position: absolute;
          right: 0;
          top: 50%;
          margin-top: -25px;
        }
      }
      span {
        display: block;
        &.cash-num {
          font-size: 26px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 27px;
          letter-spacing: 0px;
          color: #333333;
        }
        &.cash-label {
          font-size: 14px;
          color: #666;
          line-height: 27px;
        }
      }
    }
  }
  .cash-rules {
    padding: 10px 15px 15px 15px;
    box-sizing: border-box;
    height: calc(100vh - 220px);
  }
  .cash-rule-content {
    background-color: #ffffff;
    padding: 20px 15px;
    height: 100%;
    background-color: #ffffff;
    box-shadow: 0px 2px 12px 0px rgba(6, 0, 1, 0.04);
    border-radius: 4px;
    p {
      font-family: PingFang-SC-Regular;
      font-size: 14px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 21px;
      letter-spacing: 0px;
      color: #666666;
      text-indent: 2em;
    }
  }
}
</style>