🎨 优化用户管理页面

src/config.js

@@ -174,6 +174,10 @@ export  const USER_SEARCH_CONFIG = [
         {
           label: 'SVIP',
           value: 3
+        },
+        {
+          label: '过期VIP用户',
+          value: 4
         }
       ]
     },

src/view/user/user/index.vue

@@ -53,7 +53,7 @@
 
         <!--user_label 1: 普通用户 2: VIP 3:SVIP-->
         <template #user_label="{ row }">
-          {{ row.user_label === 1 ? '注册会员' : row.user_label === 2 ? 'VIP' : 'SVIP' }}
+          {{ row.user_label === 1 ? '注册会员' : row.user_label === 2 ? 'VIP' : row.user_label === 3 ? 'SVIP':row.user_label === 4 ? '过期VIP':'未知' }}
         </template>
         
         <!--balance 账户余额-->
@@ -74,7 +74,7 @@
     <el-dialog
       v-model="balanceDialogVisible"
       title="修改余额"
-      width="400px"
+      width="450px"
       :before-close="handleBalanceClose"
     >
       <el-form
@@ -84,17 +84,30 @@
         label-width="100px"
       >
         <el-form-item label="当前余额">
-          <span>{{ currentUser.balance }}</span>
+          <span style="font-weight: bold; color: #409eff;">¥{{ currentUser.balance }}</span>
         </el-form-item>
-        <el-form-item label="新余额" prop="balance">
+        <el-form-item label="操作类型" prop="change_type">
+          <el-select v-model="balanceForm.change_type" placeholder="请选择操作类型" style="width: 100%">
+            <el-option label="增加余额" :value="1" />
+            <el-option label="减少余额" :value="2" />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="balanceForm.change_type === 1 ? '增加金额' : '减少金额'" prop="balance">
           <el-input-number 
             v-model="balanceForm.balance" 
             :precision="2"
             :step="0.01"
-            :min="0"
+            :min="0.01"
-            placeholder="请输入新余额"
+            :max="balanceForm.change_type === 2 ? currentUser.balance : 999999"
+            :placeholder="balanceForm.change_type === 1 ? '请输入要增加的金额' : '请输入要减少的金额'"
+            style="width: 100%"
           />
         </el-form-item>
+        <el-form-item label="操作后余额">
+          <span style="font-weight: bold; color: #67c23a;">
+            ¥{{ getNewBalance() }}
+          </span>
+        </el-form-item>
       </el-form>
       <template #footer>
         <span class="dialog-footer">
@@ -118,13 +131,14 @@
         label-width="100px"
       >
         <el-form-item label="当前标签">
-          <span>{{ currentUser.user_label === 1 ? '注册会员' : currentUser.user_label === 2 ? 'VIP' : 'SVIP' }}</span>
+          <span>{{ currentUser.user_label === 1 ? '注册会员' : currentUser.user_label === 2 ? 'VIP' :  currentUser.user_label === 3 ? 'SVIP' : currentUser.user_label === 4 ? '过期VIP' :"未知" }}</span>
         </el-form-item>
         <el-form-item label="VIP类型" prop="user_label">
           <el-select v-model="vipForm.user_label" placeholder="请选择VIP类型">
             <el-option label="注册会员" :value="1" />
             <el-option label="VIP" :value="2" />
             <el-option label="SVIP" :value="3" />
+            <el-option label="过期VIP" :value="4" />
           </el-select>
         </el-form-item>
         <el-form-item label="到期时间" prop="vip_expire_time">
@@ -168,7 +182,7 @@
           {{ userDetail.user_type === 1 ? '普通用户' : '讲师' }}
         </el-descriptions-item>
         <el-descriptions-item label="用户标签">
-          {{ userDetail.user_label === 1 ? '注册会员' : userDetail.user_label === 2 ? 'VIP' : 'SVIP' }}
+          {{ userDetail.user_label === 1 ? '注册会员' : userDetail.user_label === 2 ? 'VIP' : userDetail.user_label === 3 ? 'SVIP' : userDetail.user_label === 4 ? '过期VIP':"未知"}}
         </el-descriptions-item>
         <el-descriptions-item label="账户余额">{{ userDetail.balance }}</el-descriptions-item>
         <el-descriptions-item label="状态">
@@ -210,6 +224,7 @@
             <el-option label="注册会员" :value="1" />
             <el-option label="VIP" :value="2" />
             <el-option label="SVIP" :value="3" />
+             <el-option label="过期VIP用户" :value="4" />
           </el-select>
         </el-form-item>
         <el-form-item label="昵称" prop="nick_name">
@@ -362,14 +377,18 @@
   const balanceFormRef = ref(null)
   const currentUser = ref({})
   const balanceForm = ref({
-    ID: '',
+    id: '',
-    balance: 0
+    balance: 0,
+    change_type: 1
   })
 
   const balanceRules = {
+    change_type: [
+      { required: true, message: '请选择操作类型', trigger: 'change' }
+    ],
     balance: [
-      { required: true, message: '请输入余额', trigger: 'blur' },
+      { required: true, message: '请输入金额', trigger: 'blur' },
-      { type: 'number', min: 0, message: '余额不能小于0', trigger: 'blur' }
+      { type: 'number', min: 0.01, message: '金额必须大于0', trigger: 'blur' }
     ]
   }
 
@@ -393,12 +412,31 @@
   function handleBalance(row) {
     currentUser.value = row
     balanceForm.value = {
-      ID: row.ID,
+      id: row.ID,
-      balance: row.balance
+      balance: 0,
+      change_type: 1
     }
     balanceDialogVisible.value = true
   }
 
+  // 计算操作后的新余额
+  function getNewBalance() {
+    if (!balanceForm.value.balance || !currentUser.value.balance) {
+      return currentUser.value.balance || 0
+    }
+    
+    const currentBalance = parseFloat(currentUser.value.balance)
+    const changeAmount = parseFloat(balanceForm.value.balance)
+    
+    if (balanceForm.value.change_type === 1) {
+      // 增加
+      return (currentBalance + changeAmount).toFixed(2)
+    } else {
+      // 减少
+      return Math.max(0, currentBalance - changeAmount).toFixed(2)
+    }
+  }
+
   function handleBalanceClose() {
     balanceDialogVisible.value = false
     balanceFormRef.value?.resetFields()
@@ -406,6 +444,18 @@
 
   async function submitBalance() {
     if (!balanceFormRef.value) return
+    
+    // 额外验证：减少余额时不能超过当前余额
+    if (balanceForm.value.change_type === 2) {
+      const currentBalance = parseFloat(currentUser.value.balance)
+      const reduceAmount = parseFloat(balanceForm.value.balance)
+      
+      if (reduceAmount > currentBalance) {
+        ElMessage.error('减少金额不能超过当前余额')
+        return
+      }
+    }
+    
     await balanceFormRef.value.validate(async (valid) => {
       if (valid) {
         const res = await setBalance(balanceForm.value)