<template>
  <div>
    <el-card style="margin-top: 50px;">
      <h1>用户余额</h1>
      <p>余额：{{ userBalanceData.userBalance || '加载中...' }}</p>
      <el-button type="primary" @click="navigateToRecharge">充值</el-button>
    </el-card>
  </div>
</template>

<script>
import { userBalance } from "@/api/system/user"; // 假设你的userBalance函数在@/api/money目录下

export default {
  data() {
    return {
      userBalanceData: {
        userBalance: '加载中...'
      }
    };
  },
  created() {
    this.fetchUserBalance();
  },
  methods: {
    navigateToRecharge() {
      this.$router.push('/money/zfb');
    },
    async fetchUserBalance() {
      try {
        const userId = localStorage.getItem('userId');
        console.log(userId)// 登录后把userId存到了localStorage
        if (!userId) {
          this.userBalanceData = {userBalance: '未登录'};
          return;
        }
        const response = await userBalance(userId);
        if (response.data) {
          console.log(response.data)
          this.userBalanceData.userBalance = response.data; // 假设response.data直接返回了余额信息
        } else {
          this.userBalanceData.userBalance = {userBalance: '获取失败'};
        }
      } catch (error) {
        this.userBalanceData = {userBalance: '获取失败'};
        console.error('Error fetching user balance:', error);
      }
    },
  },
};
</script>
