```feat(user): 查询并显示当前用户余额
在用户页面展示当前用户的余额信息,通过调用用户余额接口获取数据。优化界面布局,确保余额信息 清晰呈现给用户。同时,修复了潜在的token解析问题,保证用户数据准确无误。 修复了用户余额展示的bug,优化了用户界面体验。 ```wangxinyuan
parent
edbf8a371b
commit
7fd59e3b1c
|
@ -14,7 +14,7 @@ export function listUser(query) {
|
||||||
// 用户余额
|
// 用户余额
|
||||||
export function userRecharge(data) {
|
export function userRecharge(data) {
|
||||||
return request({
|
return request({
|
||||||
url: '/money/user/alipay/recharge',
|
url: '/user/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/user/balance/' + userId,
|
url: '/user/balance/' + userId,
|
||||||
method: 'get',
|
method: 'get',
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,50 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<el-table
|
||||||
|
:data="listDate"
|
||||||
|
style="width: 100%">
|
||||||
|
<el-table-column
|
||||||
|
label="用户余额"
|
||||||
|
width="180">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span style="margin-left: 10px">{{ scope.row.paymentAmount }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { userBalance } from "@/api/system/user"; // 引入 API 方法
|
||||||
|
import { getToken } from "@/utils/auth"; // 引入获取 Token 的方法
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
listDate: [],
|
||||||
|
userId: null
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.userId = getToken(); // 从 Token 中获取用户 ID
|
||||||
|
if (this.userId) {
|
||||||
|
this.fetchUserBalance(this.userId); // 获取用户余额
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async fetchUserBalance(userId) {
|
||||||
|
try {
|
||||||
|
const response = await userBalance(userId);
|
||||||
|
this.listDate = [{ paymentAmount: response.data.userBalance }];
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching user balance:', error);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* 添加样式 */
|
||||||
|
</style>
|
|
@ -1,53 +0,0 @@
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<el-table :data="listDate" style="width: 100%">
|
|
||||||
<el-table-column label="用户余额" width="180">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<span style="margin-left: 10px">{{ scope.row.paymentAmount }}</span>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { getUser, userBalance } from "@/api/system/user";
|
|
||||||
import { getToken } from "@/utils/auth";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
listDate: []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
async created() {
|
|
||||||
await this.fetchUserData();
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
async fetchUserData() {
|
|
||||||
try {
|
|
||||||
const token = getToken();
|
|
||||||
const userId = this.extractUserIdFromToken(token);
|
|
||||||
|
|
||||||
|
|
||||||
const balance = await userBalance(userId);
|
|
||||||
|
|
||||||
|
|
||||||
const userData = {
|
|
||||||
id: userId,
|
|
||||||
name: '当前用户', // 用户名可以从其他地方获取
|
|
||||||
paymentAmount: balance
|
|
||||||
};
|
|
||||||
|
|
||||||
this.listDate = [userData]; // 将用户数据传递给表格显示
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Failed to fetch user data or balance:", error);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
extractUserIdFromToken(token) {
|
|
||||||
return token.userId || 0; // 替换为实际的 ID 获取方法
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
Loading…
Reference in New Issue