wallet.vue 4.42 KB
Newer Older
1 2 3 4 5
<template>
  <div class="wallet">
    <div class="content">
      <img class="balance-img" src="@/assets/images/余额.png" alt />
      <p
xulili's avatar
xulili committed
6
      class="currentprofitlabel"
7 8 9
      >
        当月收益
      </p>
leiqingsong's avatar
leiqingsong committed
10
      <div
xulili's avatar
xulili committed
11
        class="currentprofit"
leiqingsong's avatar
leiqingsong committed
12 13
        @click="jumpToIncomeDetail"
      >
leiqingsong's avatar
leiqingsong committed
14
        <span class="month-income">{{ walletInfo.moneyIncome }}</span>
15 16 17
        <img
          src="@/assets/images/右箭头.png"
          alt
xulili's avatar
xulili committed
18
          class="month-income-arrow"
19 20 21 22 23 24
        />
      </div>
      <div class="bottom-box">
        <div class="income-item">
          <img src="@/assets/images/待结算.png" alt />
          <p>累计收益</p>
25
          <div @click="jumpToAll">
leiqingsong's avatar
leiqingsong committed
26
            <span class="money">{{ walletInfo.totalIncome }}</span>
27 28 29
            <img
              src="@/assets/images/右箭头.png"
              alt
xulili's avatar
xulili committed
30
              class="arrow"
31 32 33 34 35
            />
          </div>
        </div>
        <div class="income-item">
          <img src="@/assets/images/累计收入.png" alt />
leiqingsong's avatar
leiqingsong committed
36
          <p>未提余额</p>
37
          <div @click="jumpToCanCashOut">
leiqingsong's avatar
leiqingsong committed
38
            <span class="money">{{ walletInfo.currentMoneyCan }}</span>
39 40 41
            <img
              src="@/assets/images/右箭头.png"
              alt
xulili's avatar
xulili committed
42
              class="arrow"
43 44 45 46
            />
          </div>
        </div>
      </div>
leiqingsong's avatar
leiqingsong committed
47 48 49 50 51 52
      <div class="cash-out-btn">
        <van-button type="primary" color="#88c678" @click="onToCashOut"
          >提现</van-button
        >
        <p @click="onToRecord">查看提现记录</p>
      </div>
53 54 55 56
    </div>
  </div>
</template>

leiqingsong's avatar
leiqingsong committed
57
<script>
leiqingsong's avatar
leiqingsong committed
58
import { getMoneyPackage } from "@/api/wallet";
leiqingsong's avatar
leiqingsong committed
59 60
export default {
  name: "Wallet",
leiqingsong's avatar
leiqingsong committed
61 62 63
  data() {
    return {
      walletInfo: {
64 65 66
        currentMoneyCan: 0, // 本月可提现
        moneyIncome: 0, // 本月收益
        totalIncome: 0 // 累计收益
leiqingsong's avatar
leiqingsong committed
67 68 69 70 71 72
      }
    };
  },
  mounted() {
    this.getWalletInfo();
  },
leiqingsong's avatar
leiqingsong committed
73
  methods: {
leiqingsong's avatar
leiqingsong committed
74
    // 跳转到可提现界面
75 76 77 78 79 80 81 82 83 84 85
    jumpToCanCashOut() {
      this.$router.push("/canCashOut");
    },
    // 跳转至收益明细
    jumpToIncomeDetail() {
      this.$router.push("/income/detail");
    },
    // 跳转至累计收益
    jumpToAll() {
      this.$router.push("/income/all");
    },
leiqingsong's avatar
leiqingsong committed
86 87 88 89 90
    onToCashOut() {
      this.$router.push("/cash-out");
    },
    onToRecord() {
      this.$router.push("/cash-out-record");
leiqingsong's avatar
leiqingsong committed
91 92 93 94
    },
    // 获取用户钱包展示信息
    getWalletInfo() {
      const params = {
leiqingsong's avatar
leiqingsong committed
95
        userId: this.$userId
leiqingsong's avatar
leiqingsong committed
96
      };
leiqingsong's avatar
leiqingsong committed
97 98 99 100 101 102 103 104 105
      getMoneyPackage(params)
        .then(res => {
          if (res.code === 0) {
            this.walletInfo = res.data;
          } else {
            this.$toast.fail(res.message);
          }
        })
        .catch(error => {
xulili's avatar
xulili committed
106
          console.log("catch", error);
leiqingsong's avatar
leiqingsong committed
107
        });
leiqingsong's avatar
leiqingsong committed
108 109 110 111 112
    }
  }
};
</script>

113 114 115
<style lang="scss" scoped>
.wallet {
  box-sizing: border-box;
xulili's avatar
xulili committed
116 117 118 119
  height: calc(100vh - 48px);
  overflow: hidden;
  padding:15px;
  box-sizing: border-box;
120 121 122 123 124 125
  p {
    margin: 0;
  }
  .content {
    position: relative;
    width: 345px;
xulili's avatar
xulili committed
126
    height: 100%;
127 128
    text-align: center;
    background-color: #ffffff;
xulili's avatar
xulili committed
129 130 131 132 133 134 135 136 137 138 139 140
    .currentprofitlabel{
      position:absolute;
      top:136px;
      width:100%;
      font-size:18px;
      color:#333333
    }
    .currentprofit{
      position: absolute;
      width: 100%;
      top: 178px;
    }
141 142 143 144 145 146 147 148 149 150 151 152 153
    .balance-img {
      position: absolute;
      top: 72px;
      left: 157px;
      width: 34px;
      height: 34px;
    }

    .month-income {
      margin-right: 10px;
      font-size: 28px;
      color: #333333;
    }
xulili's avatar
xulili committed
154 155 156 157
    .month-income-arrow{
      width: 11px;
      height: 18px;
    }
158 159 160 161 162 163 164 165 166 167 168 169 170

    .bottom-box {
      position: absolute;
      top: 263px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 100%;
      font-size: 14px;
      color: #666666;
      img {
        width: 30px;
        height: 29px;
xulili's avatar
xulili committed
171 172 173 174
        &.arrow{
          width: 12px;
          height: 18px;
        }
175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191
      }
      .income-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        height: 120px;
      }
      .money {
        font-size: 20px;
        color: #333333;
        margin-right: 10px;
      }
    }

    .cash-out-btn {
      position: absolute;
leiqingsong's avatar
leiqingsong committed
192
      bottom: 63px;
193 194
      left: 50%;
      transform: translateX(-50%);
leiqingsong's avatar
leiqingsong committed
195 196 197 198 199 200 201 202
      .van-button {
        width: 160px;
      }
      p {
        margin-top: 20px;
        font-size: 14px;
        color: #88c678;
      }
203 204 205 206
    }
  }
}
</style>