<template>
<div>
  <p class="income-title">¥<span class="amount">{{amountPart1}}</span>.{{amountPart2}}</p>
  <div class="view-button" @click="goPage">查看明细</div>
  <p class="income-tip">提现请至yoho!buy 有货我的钱包中提现，如需要帮助可致电400-889-9646联系电话客服</p>
  </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex';
const {mapState, mapActions} = createNamespacedHelpers('home/mine');
export default {
  name: 'income-header',
 
  data() {
    return {
     
    };
  },
  created() {
    this.fetchUserWalletInfo()
  },
  computed: {
    ...mapState(
      {
        amountPart1: (state) => {
          return (''+state.userWalletInfo.walletAmount).split('.')[0].split('¥')[1]
        },
        amountPart2: (state) => {
          return (''+state.userWalletInfo.walletAmount).split('.')[1]
        },
      }
    )
  },
  methods: {
    ...mapActions(['fetchUserWalletInfo']),
    goPage() {
      this.$router.push({
        name: 'incomeDetail'
      })
    }
  }
};
</script>

<style lang="scss" scoped>

.income-title {
  font-size: 40px;
  color: #000;
  margin-top: 20px;
  text-align: center;
  margin: 100px 0;
  .amount {
    font-size: 84px;
  }
  }
  
.view-button {
  width: 100%;
  text-align: center;
  height: 88px;
  line-height: 88px;
  background-color: #002B47;
  border-radius: 88px;
  color: #fff;
  font-size: 34px;
  margin-bottom: 32px;
}
.income-tip {
  font-size: 24px;
  text-align: center;
  color: #000;
}
</style>