🎨 用户管理模块新增修改用户余额功能

src/api/user/index.js

@@ -38,3 +38,12 @@ export const register = (data) => {
     data
   })
 }
+
+// 修改用户余额
+export const setBalance = (data) => {
+  return service({
+    url: '/app_user/setBalance',
+    method: 'put',
+    data
+  })
+}

src/view/user/user/index.vue

@@ -61,12 +61,46 @@
 
         <template #operate="{ row }">
           <el-button type="text" @click="handleDetail(row)">详情</el-button>
-          <!--          <el-button type="text" @click="handleDelete(row)">删除</el-button>-->
+          <el-button type="text" @click="handleBalance(row)">修改余额</el-button>
         </template>
       </Content>
 
     </div>
 
+    <!-- 修改余额弹窗 -->
+    <el-dialog
+      v-model="balanceDialogVisible"
+      title="修改余额"
+      width="400px"
+      :before-close="handleBalanceClose"
+    >
+      <el-form
+        ref="balanceFormRef"
+        :model="balanceForm"
+        :rules="balanceRules"
+        label-width="100px"
+      >
+        <el-form-item label="当前余额">
+          <span>{{ currentUser.balance }}</span>
+        </el-form-item>
+        <el-form-item label="新余额" prop="balance">
+          <el-input-number 
+            v-model="balanceForm.balance" 
+            :precision="2"
+            :step="0.01"
+            :min="0"
+            placeholder="请输入新余额"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="handleBalanceClose">取消</el-button>
+          <el-button type="primary" @click="submitBalance">确定</el-button>
+        </span>
+      </template>
+    </el-dialog>
+
     <!-- 用户详情弹窗 -->
     <el-dialog
       v-model="dialogVisible"
@@ -149,7 +183,7 @@
 <script setup>
   import searchForm from '@/components/searchForm/index.vue'
   import Content from '@/components/content/index.vue'
-  import {list, status, getUserDetail, register} from '@/api/user/index.js'
+  import {list, status, getUserDetail, register, setBalance} from '@/api/user/index.js'
   import { ref, onMounted } from 'vue'
   import {formatDate} from '@/utils/format'
   import { USER_SEARCH_CONFIG, USER_TABLE_CONFIG } from '@/config'
@@ -278,6 +312,51 @@
       }
     })
   }
+
+  const balanceDialogVisible = ref(false)
+  const balanceFormRef = ref(null)
+  const currentUser = ref({})
+  const balanceForm = ref({
+    ID: '',
+    balance: 0
+  })
+
+  const balanceRules = {
+    balance: [
+      { required: true, message: '请输入余额', trigger: 'blur' },
+      { type: 'number', min: 0, message: '余额不能小于0', trigger: 'blur' }
+    ]
+  }
+
+  function handleBalance(row) {
+    currentUser.value = row
+    balanceForm.value = {
+      ID: row.ID,
+      balance: row.balance
+    }
+    balanceDialogVisible.value = true
+  }
+
+  function handleBalanceClose() {
+    balanceDialogVisible.value = false
+    balanceFormRef.value?.resetFields()
+  }
+
+  async function submitBalance() {
+    if (!balanceFormRef.value) return
+    await balanceFormRef.value.validate(async (valid) => {
+      if (valid) {
+        const res = await setBalance(balanceForm.value)
+        if (res.code === 0) {
+          ElMessage.success('修改成功')
+          handleBalanceClose()
+          getList()
+        } else {
+          ElMessage.error(res.msg || '修改失败')
+        }
+      }
+    })
+  }
 </script>
 <style lang="scss" scoped>
 .searchForm {