```feat(user): 查询并显示当前用户余额

在用户页面展示当前用户的余额信息,通过调用用户余额接口获取数据。优化界面布局,确保余额信息
清晰呈现给用户。同时,修复了潜在的token解析问题,保证用户数据准确无误。

修复了用户余额展示的bug,优化了用户界面体验。
```
master
wxy 2024-08-24 20:54:55 +08:00
parent f6a22b33b8
commit 44c7e479fa
2 changed files with 32 additions and 17 deletions

View File

@ -14,7 +14,7 @@ export function listUser(query) {
// 用户余额 // 用户余额
export function userRecharge(data) { export function userRecharge(data) {
return request({ return request({
url: '/money/alipay/recharge', url: '/system/alipay/recharge',
method: 'post', method: 'post',
params: data params: data
}) })
@ -23,7 +23,7 @@ export function userRecharge(data) {
// 查询用户余额 // 查询用户余额
export function userBalance(userId) { export function userBalance(userId) {
return request({ return request({
url: '/money/balance/' + userId, url: '/system/user/balance/' + userId,
method: 'get', method: 'get',
}) })
} }

View File

@ -1,30 +1,45 @@
<template> <template>
<div> <div>
<span style="text-align: center">账户余额: {{ balance }}</span> <h1>用户余额</h1>
<p>余额{{ userBalanceData.userBalance || '加载中...' }}</p>
</div> </div>
</template> </template>
<script> <script>
import {userBalance} from "@/api/system/user"; import { userBalance } from "@/api/system/user"; // userBalance@/api/money
export default { export default {
data() { data() {
return { return {
balance: null, // userBalanceData: {
userBalance: '加载中...'
}
}; };
}, },
async created() { created() {
this.fetchUserBalance();
},
methods: {
async fetchUserBalance() {
try { try {
const userId = 1; // ID const userId = localStorage.getItem('userId');
console.log(userId)// userIdlocalStorage
if (!userId) {
this.userBalanceData = {userBalance: '未登录'};
return;
}
const response = await userBalance(userId); const response = await userBalance(userId);
this.balance = response.data.balance; // if (response.data) {
console.log(response.data)
this.userBalanceData.userBalance = response.data; // response.data
} else {
this.userBalanceData.userBalance = {userBalance: '获取失败'};
}
} catch (error) { } catch (error) {
this.userBalanceData = {userBalance: '获取失败'};
console.error('Error fetching user balance:', error); console.error('Error fetching user balance:', error);
} }
}, },
},
}; };
</script> </script>
<style scoped>
/* 添加样式 */
</style>