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

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

修复了用户余额展示的bug，优化了用户界面体验。
```

src/api/system/user.js

@@ -11,7 +11,7 @@ export function listUser(query) {
 }
 
 
-// 用户充值
+// 用户余额
 export function userRecharge(data) {
   return request({
     url: '/system/user/alipay/recharge',
@@ -20,6 +20,14 @@ export function userRecharge(data) {
   })
 }
 
+// 查询用户余额
+export function userBalance(userId) {
+  return request({
+    url: '/system/user/balance/' + userId,
+    method: 'get',
+  })
+}
+
 // 查询用户详细
 export function getUser(userId) {
   return request({

src/views/recharge/user/index.vue

@@ -1,704 +1,53 @@
 <template>
-  <div class="app-container">
-    <el-row :gutter="20">
-      <!--部门数据-->
-      <el-col :span="4" :xs="24">
-        <div class="head-container">
-          <el-input
-            v-model="deptName"
-            clearable
-            placeholder="请输入部门名称"
-            prefix-icon="el-icon-search"
-            size="small"
-            style="margin-bottom: 20px"
-          />
-        </div>
-        <div class="head-container">
-          <el-tree
-            ref="tree"
-            :data="deptOptions"
-            :expand-on-click-node="false"
-            :filter-node-method="filterNode"
-            :props="defaultProps"
-            default-expand-all
-            highlight-current
-            node-key="id"
-            @node-click="handleNodeClick"
-          />
-        </div>
-      </el-col>
-      <!--用户数据-->
-      <el-col :span="20" :xs="24">
-        <el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" label-width="68px"
-                 size="small">
-          <el-form-item label="用户名称" prop="userName">
-            <el-input
-              v-model="queryParams.userName"
-              clearable
-              placeholder="请输入用户名称"
-              style="width: 240px"
-              @keyup.enter.native="handleQuery"
-            />
-          </el-form-item>
-          <el-form-item label="手机号码" prop="phonenumber">
-            <el-input
-              v-model="queryParams.phonenumber"
-              clearable
-              placeholder="请输入手机号码"
-              style="width: 240px"
-              @keyup.enter.native="handleQuery"
-            />
-          </el-form-item>
-          <el-form-item label="状态" prop="status">
-            <el-select
-              v-model="queryParams.status"
-              clearable
-              placeholder="用户状态"
-              style="width: 240px"
-            >
-              <el-option
-                v-for="dict in dict.type.sys_normal_disable"
-                :key="dict.value"
-                :label="dict.label"
-                :value="dict.value"
-              />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="创建时间">
-            <el-date-picker
-              v-model="dateRange"
-              end-placeholder="结束日期"
-              range-separator="-"
-              start-placeholder="开始日期"
-              style="width: 240px"
-              type="daterange"
-              value-format="yyyy-MM-dd"
-            ></el-date-picker>
-          </el-form-item>
-          <el-form-item>
-            <el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">搜索</el-button>
-            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-          </el-form-item>
-        </el-form>
-
-        <el-row :gutter="10" class="mb8">
-          <el-col :span="1.5">
-            <el-button
-              v-hasPermi="['system:user:add']"
-              icon="el-icon-plus"
-              plain
-              size="mini"
-              type="primary"
-              @click="handleAdd"
-            >新增
-            </el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button
-              v-hasPermi="['system:user:edit']"
-              :disabled="single"
-              icon="el-icon-edit"
-              plain
-              size="mini"
-              type="success"
-              @click="handleUpdate"
-            >修改
-            </el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button
-              v-hasPermi="['system:user:remove']"
-              :disabled="multiple"
-              icon="el-icon-delete"
-              plain
-              size="mini"
-              type="danger"
-              @click="handleDelete"
-            >删除
-            </el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button
-              v-hasPermi="['system:user:import']"
-              icon="el-icon-upload2"
-              plain
-              size="mini"
-              type="info"
-              @click="handleImport"
-            >导入
-            </el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button
-              v-hasPermi="['system:user:export']"
-              icon="el-icon-download"
-              plain
-              size="mini"
-              type="warning"
-              @click="handleExport"
-            >导出
-            </el-button>
-          </el-col>
-          <right-toolbar :columns="columns" :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-        </el-row>
-
-        <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
-          <el-table-column align="center" type="selection" width="50"/>
-          <el-table-column v-if="columns[0].visible" key="userId" align="center" label="用户编号" prop="userId"/>
-          <el-table-column v-if="columns[1].visible" key="userName" :show-overflow-tooltip="true" align="center" label="用户名称"
-                           prop="userName"/>
-          <el-table-column v-if="columns[2].visible" key="nickName" :show-overflow-tooltip="true" align="center" label="用户昵称"
-                           prop="nickName"/>
-          <el-table-column v-if="columns[3].visible" key="deptName" :show-overflow-tooltip="true" align="center" label="部门"
-                           prop="dept.deptName"/>
-          <el-table-column v-if="columns[4].visible" key="phonenumber" align="center" label="手机号码"
-                           prop="phonenumber" width="120"/>
-          <el-table-column v-if="columns[5].visible" key="status" align="center" label="状态">
+  <div>
+    <el-table :data="listDate" style="width: 100%">
+      <el-table-column label="用户额度" width="180">
         <template slot-scope="scope">
-              <el-switch
-                v-model="scope.row.status"
-                active-value="0"
-                inactive-value="1"
-                @change="handleStatusChange(scope.row)"
-              ></el-switch>
-            </template>
-          </el-table-column>
-          <el-table-column v-if="columns[6].visible" align="center" label="创建时间" prop="createTime" width="160">
-            <template slot-scope="scope">
-              <span>{{ parseTime(scope.row.createTime) }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column v-if="columns[7].visible" key="userBalance" align="center" label="余额"
-                           prop="userBalance" width="120"/>
-          <el-table-column
-            align="center"
-            class-name="small-padding fixed-width"
-            label="操作"
-            width="160"
-          >
-            <template v-if="scope.row.userId !== 1" slot-scope="scope">
-              <el-button
-                v-hasPermi="['system:user:edit']"
-                icon="el-icon-edit"
-                size="mini"
-                type="text"
-                @click="handleUpdate(scope.row)"
-              >修改
-              </el-button>
-              <el-button
-                v-hasPermi="['system:user:remove']"
-                icon="el-icon-delete"
-                size="mini"
-                type="text"
-                @click="handleDelete(scope.row)"
-              >删除
-              </el-button>
-              <el-dropdown v-hasPermi="['system:user:resetPwd', 'system:user:edit']" size="mini"
-                           @command="(command) => handleCommand(command, scope.row)">
-                <el-button icon="el-icon-d-arrow-right" size="mini" type="text">更多</el-button>
-                <el-dropdown-menu slot="dropdown">
-                  <el-dropdown-item v-hasPermi="['system:user:resetPwd']" command="handleResetPwd"
-                                    icon="el-icon-key">重置密码
-                  </el-dropdown-item>
-                  <el-dropdown-item v-hasPermi="['system:user:edit']" command="handleAuthRole"
-                                    icon="el-icon-circle-check">分配角色
-                  </el-dropdown-item>
-                </el-dropdown-menu>
-              </el-dropdown>
+          <span style="margin-left: 10px">{{ scope.row.paymentAmount }}</span>
         </template>
       </el-table-column>
     </el-table>
-
-        <pagination
-          v-show="total>0"
-          :limit.sync="queryParams.pageSize"
-          :page.sync="queryParams.pageNum"
-          :total="total"
-          @pagination="getList"
-        />
-      </el-col>
-    </el-row>
-
-    <!-- 添加或修改用户配置对话框 -->
-    <el-dialog :title="title" :visible.sync="open" append-to-body width="600px">
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="用户昵称" prop="nickName">
-              <el-input v-model="form.nickName" maxlength="30" placeholder="请输入用户昵称"/>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="归属部门" prop="deptId">
-              <treeselect v-model="form.deptId" :options="deptOptions" :show-count="true" placeholder="请选择归属部门"/>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="手机号码" prop="phonenumber">
-              <el-input v-model="form.phonenumber" maxlength="11" placeholder="请输入手机号码"/>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="邮箱" prop="email">
-              <el-input v-model="form.email" maxlength="50" placeholder="请输入邮箱"/>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="12">
-            <el-form-item v-if="form.userId == undefined" label="用户名称" prop="userName">
-              <el-input v-model="form.userName" maxlength="30" placeholder="请输入用户名称"/>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item v-if="form.userId == undefined" label="用户密码" prop="password">
-              <el-input v-model="form.password" maxlength="20" placeholder="请输入用户密码" show-password
-                        type="password"/>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="用户性别">
-              <el-select v-model="form.sex" placeholder="请选择性别">
-                <el-option
-                  v-for="dict in dict.type.sys_user_sex"
-                  :key="dict.value"
-                  :label="dict.label"
-                  :value="dict.value"
-                ></el-option>
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="状态">
-              <el-radio-group v-model="form.status">
-                <el-radio
-                  v-for="dict in dict.type.sys_normal_disable"
-                  :key="dict.value"
-                  :label="dict.value"
-                >{{ dict.label }}
-                </el-radio>
-              </el-radio-group>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="岗位">
-              <el-select v-model="form.postIds" multiple placeholder="请选择岗位">
-                <el-option
-                  v-for="item in postOptions"
-                  :key="item.postId"
-                  :disabled="item.status == 1"
-                  :label="item.postName"
-                  :value="item.postId"
-                ></el-option>
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="角色">
-              <el-select v-model="form.roleIds" multiple placeholder="请选择角色">
-                <el-option
-                  v-for="item in roleOptions"
-                  :key="item.roleId"
-                  :disabled="item.status == 1"
-                  :label="item.roleName"
-                  :value="item.roleId"
-                ></el-option>
-              </el-select>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="24">
-            <el-form-item label="备注">
-              <el-input v-model="form.remark" placeholder="请输入内容" type="textarea"></el-input>
-            </el-form-item>
-          </el-col>
-        </el-row>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
-    </el-dialog>
-
-    <!-- 用户导入对话框 -->
-    <el-dialog :title="upload.title" :visible.sync="upload.open" append-to-body width="400px">
-      <el-upload
-        ref="upload"
-        :action="upload.url + '?updateSupport=' + upload.updateSupport"
-        :auto-upload="false"
-        :disabled="upload.isUploading"
-        :headers="upload.headers"
-        :limit="1"
-        :on-progress="handleFileUploadProgress"
-        :on-success="handleFileSuccess"
-        accept=".xlsx, .xls"
-        drag
-      >
-        <i class="el-icon-upload"></i>
-        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
-        <div slot="tip" class="el-upload__tip text-center">
-          <div slot="tip" class="el-upload__tip">
-            <el-checkbox v-model="upload.updateSupport"/>
-            是否更新已经存在的用户数据
-          </div>
-          <span>仅允许导入xls、xlsx格式文件。</span>
-          <el-link :underline="false" style="font-size:12px;vertical-align: baseline;" type="primary"
-                   @click="importTemplate">下载模板
-          </el-link>
-        </div>
-      </el-upload>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitFileForm">确 定</el-button>
-        <el-button @click="upload.open = false">取 消</el-button>
-      </div>
-    </el-dialog>
   </div>
 </template>
 
 <script>
-import {
-  addUser,
-  changeUserStatus,
-  delUser,
-  deptTreeSelect,
-  getUser,
-  listUser,
-  resetUserPwd,
-  updateUser ,
-  userRecharge,
-} from "@/api/system/user";
-import {getToken} from "@/utils/auth";
-import Treeselect from "@riophae/vue-treeselect";
-import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import { getUser, userBalance } from "@/api/system/user";
+import { getToken } from "@/utils/auth";
 
 export default {
-  name: "User",
-  dicts: ['sys_normal_disable', 'sys_user_sex'],
-  components: {Treeselect},
   data() {
     return {
-      // 遮罩层
-      loading: true,
-      // 选中数组
-      ids: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 用户表格数据
-      userList: null,
-      // 弹出层标题
-      title: "",
-      // 部门树选项
-      deptOptions: undefined,
-      // 是否显示弹出层
-      open: false,
-      // 部门名称
-      deptName: undefined,
-      // 默认密码
-      initPassword: undefined,
-      // 日期范围
-      dateRange: [],
-      // 岗位选项
-      postOptions: [],
-      // 角色选项
-      roleOptions: [],
-      // 表单参数
-      form: {},
-      defaultProps: {
-        children: "children",
-        label: "label"
-      },
-      // 用户导入参数
-      upload: {
-        // 是否显示弹出层（用户导入）
-        open: false,
-        // 弹出层标题（用户导入）
-        title: "",
-        // 是否禁用上传
-        isUploading: false,
-        // 是否更新已经存在的用户数据
-        updateSupport: 0,
-        // 设置上传的请求头部
-        headers: {Authorization: "Bearer " + getToken()},
-        // 上传的地址
-        url: process.env.VUE_APP_BASE_API + "/system/user/importData"
-      },
-      // 查询参数
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        userName: undefined,
-        phonenumber: undefined,
-        status: undefined,
-        deptId: undefined
-      },
-      // 列信息
-      columns: [
-        {key: 0, label: `用户编号`, visible: true},
-        {key: 1, label: `用户名称`, visible: true},
-        {key: 2, label: `用户昵称`, visible: true},
-        {key: 3, label: `部门`, visible: true},
-        {key: 4, label: `手机号码`, visible: true},
-        {key: 5, label: `状态`, visible: true},
-        {key: 6, label: `创建时间`, visible: true},
-        {key: 7, label: `余额`, visible: true}
-      ],
-      // 表单校验
-      rules: {
-        userName: [
-          {required: true, message: "用户名称不能为空", trigger: "blur"},
-          {min: 2, max: 20, message: '用户名称长度必须介于 2 和 20 之间', trigger: 'blur'}
-        ],
-        nickName: [
-          {required: true, message: "用户昵称不能为空", trigger: "blur"}
-        ],
-        password: [
-          {required: true, message: "用户密码不能为空", trigger: "blur"},
-          {min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur'}
-        ],
-        email: [
-          {
-            type: "email",
-            message: "请输入正确的邮箱地址",
-            trigger: ["blur", "change"]
-          }
-        ],
-        phonenumber: [
-          {
-            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
-            message: "请输入正确的手机号码",
-            trigger: "blur"
-          }
-        ]
-      }
-    };
-  },
-  watch: {
-    // 根据名称筛选部门树
-    deptName(val) {
-      this.$refs.tree.filter(val);
+      listDate: []
     }
   },
-  created() {
-    this.getList();
-    this.getDeptTree();
-    this.getConfigKey("sys.user.initPassword").then(response => {
-      this.initPassword = response.data.msg;
-    });
+  async created() {
+    await this.fetchUserData();
   },
   methods: {
-    /** 查询用户列表 */
-    getList() {
-      this.loading = true;
-      listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
-          this.userList = response.data.rows;
-          this.total = response.data.total;
-          this.loading = false;
-        }
-      );
-    },
-    /** 查询部门下拉树结构 */
-    getDeptTree() {
-      deptTreeSelect().then(response => {
-        this.deptOptions = response.data;
-      });
-    },
-    // 筛选节点
-    filterNode(value, data) {
-      if (!value) return true;
-      return data.label.indexOf(value) !== -1;
-    },
-    // 节点单击事件
-    handleNodeClick(data) {
-      this.queryParams.deptId = data.id;
-      this.handleQuery();
-    },
-    // 用户状态修改
-    handleStatusChange(row) {
-      let text = row.status === "0" ? "启用" : "停用";
-      this.$modal.confirm('确认要"' + text + '""' + row.userName + '"用户吗？').then(function () {
-        return changeUserStatus(row.userId, row.status);
-      }).then(() => {
-        this.$modal.msgSuccess(text + "成功");
-      }).catch(function () {
-        row.status = row.status === "0" ? "1" : "0";
-      });
-    },
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    // 表单重置
-    reset() {
-      this.form = {
-        userId: undefined,
-        deptId: undefined,
-        userName: undefined,
-        nickName: undefined,
-        password: undefined,
-        phonenumber: undefined,
-        email: undefined,
-        sex: undefined,
-        status: "0",
-        remark: undefined,
-        postIds: [],
-        roleIds: []
+    async fetchUserData() {
+      try {
+        const token = getToken();
+        const userId = this.extractUserIdFromToken(token);
+
+
+        const balance = await userBalance(userId);
+
+
+        const userData = {
+          id: userId,
+          name: '当前用户', // 用户名可以从其他地方获取
+          paymentAmount: balance
         };
-      this.resetForm("form");
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.dateRange = [];
-      this.resetForm("queryForm");
-      this.queryParams.deptId = undefined;
-      this.$refs.tree.setCurrentKey(null);
-      this.handleQuery();
-    },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.userId);
-      this.single = selection.length != 1;
-      this.multiple = !selection.length;
-    },
-    // 更多操作触发
-    handleCommand(command, row) {
-      switch (command) {
-        case "handleResetPwd":
-          this.handleResetPwd(row);
-          break;
-        case "handleAuthRole":
-          this.handleAuthRole(row);
-          break;
-        default:
-          break;
+
+        this.listDate = [userData]; // 将用户数据传递给表格显示
+      } catch (error) {
+        console.error("Failed to fetch user data or balance:", error);
       }
     },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset();
-      getUser().then(response => {
-        this.postOptions = response.data.posts;
-        this.roleOptions = response.data.roles;
-        this.open = true;
-        this.title = "添加用户";
-        this.form.password = this.initPassword;
-      });
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset();
-      const userId = row.userId || this.ids;
-      getUser(userId).then(response => {
-        this.form = response.data.sysUser;
-        this.postOptions = response.data.posts;
-        this.roleOptions = response.data.roles;
-        this.$set(this.form, "postIds", response.data.postIds);
-        this.$set(this.form, "roleIds", response.data.roleIds);
-        this.open = true;
-        this.title = "修改用户";
-        this.form.password = "";
-      });
-    },
-    /** 重置密码按钮操作 */
-    handleResetPwd(row) {
-      this.$prompt('请输入"' + row.userName + '"的新密码', "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        closeOnClickModal: false,
-        inputPattern: /^.{5,20}$/,
-        inputErrorMessage: "用户密码长度必须介于 5 和 20 之间"
-      }).then(({value}) => {
-        resetUserPwd(row.userId, value).then(response => {
-          this.$modal.msgSuccess("修改成功，新密码是：" + value);
-        });
-      }).catch(() => {
-      });
-    },
-    /** 分配角色操作 */
-    handleAuthRole: function (row) {
-      const userId = row.userId;
-      this.$router.push("/system/user-auth/role/" + userId);
-    },
-    /** 提交按钮 */
-    submitForm: function () {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          if (this.form.userId != undefined) {
-            updateUser(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
-          } else {
-            addUser(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
+
+    extractUserIdFromToken(token) {
+      return token.userId || 0; // 替换为实际的 ID 获取方法
     }
   }
-      });
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const userIds = row.userId || this.ids;
-      this.$modal.confirm('是否确认删除用户编号为"' + userIds + '"的数据项？').then(function () {
-        return delUser(userIds);
-      }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
-      }).catch(() => {
-      });
-    },
-    /** 导出按钮操作 */
-    handleExport() {
-      this.download('system/user/export', {
-        ...this.queryParams
-      }, `user_${new Date().getTime()}.xlsx`)
-    },
-    /** 导入按钮操作 */
-    handleImport() {
-      this.upload.title = "用户导入";
-      this.upload.open = true;
-    },
-    /** 下载模板操作 */
-    importTemplate() {
-      this.download('system/user/importTemplate', {}, `user_template_${new Date().getTime()}.xlsx`)
-    },
-    // 文件上传中处理
-    handleFileUploadProgress(event, file, fileList) {
-      this.upload.isUploading = true;
-    },
-    // 文件上传成功处理
-    handleFileSuccess(response, file, fileList) {
-      this.upload.open = false;
-      this.upload.isUploading = false;
-      this.$refs.upload.clearFiles();
-      this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.data.msg + "</div>", "导入结果", {dangerouslyUseHTMLString: true});
-      this.getList();
-    },
-    // 提交上传文件
-    submitFileForm() {
-      this.$refs.upload.submit();
-    }
-  }
-};
+}
 </script>