🎨 新增vip设置

src/api/user/index.js

@@ -66,3 +66,12 @@ export const reviewTeacherApply = (data) => {
     data
   })
 }
+
+// 修改用户VIP
+export const setVip = (data) => {
+  return service({
+    url: '/app_user/setUserVip',
+    method: 'put',
+    data
+  })
+}

src/view/user/user/index.vue

@@ -64,6 +64,7 @@
         <template #operate="{ row }">
           <el-button type="text" @click="handleDetail(row)">详情</el-button>
           <el-button type="text" @click="handleBalance(row)">修改余额</el-button>
+          <el-button type="text" @click="handleVip(row)">设置VIP</el-button>
         </template>
       </Content>
 
@@ -103,6 +104,48 @@
       </template>
     </el-dialog>
 
+    <!-- 设置VIP弹窗 -->
+    <el-dialog
+      v-model="vipDialogVisible"
+      title="设置VIP"
+      width="400px"
+      :before-close="handleVipClose"
+    >
+      <el-form
+        ref="vipFormRef"
+        :model="vipForm"
+        :rules="vipRules"
+        label-width="100px"
+      >
+        <el-form-item label="当前标签">
+          <span>{{ currentUser.user_label === 1 ? '注册会员' : currentUser.user_label === 2 ? 'VIP' : 'SVIP' }}</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-select>
+        </el-form-item>
+        <el-form-item label="到期时间" prop="vip_expire_time">
+          <el-date-picker
+            v-model="vipForm.vip_expire_time"
+            type="date"
+            placeholder="请选择到期时间"
+            format="YYYY-MM-DD"
+            value-format="YYYY-MM-DD"
+            style="width: 100%"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="handleVipClose">取消</el-button>
+          <el-button type="primary" @click="submitVip">确定</el-button>
+        </span>
+      </template>
+    </el-dialog>
+
     <!-- 用户详情弹窗 -->
     <el-dialog
       v-model="dialogVisible"
@@ -185,7 +228,7 @@
 <script setup>
   import searchForm from '@/components/searchForm/index.vue'
   import Content from '@/components/content/index.vue'
-  import {list, status, getUserDetail, register, setBalance} from '@/api/user/index.js'
+  import {list, status, getUserDetail, register, setBalance, setVip} from '@/api/user/index.js'
   import { ref, onMounted } from 'vue'
   import {formatDate} from '@/utils/format'
   import { USER_SEARCH_CONFIG, USER_TABLE_CONFIG } from '@/config'
@@ -330,6 +373,23 @@
     ]
   }
 
+  const vipDialogVisible = ref(false)
+  const vipFormRef = ref(null)
+  const vipForm = ref({
+    id: '',
+    user_label: 1,
+    vip_expire_time: ''
+  })
+
+  const vipRules = {
+    user_label: [
+      { required: true, message: '请选择VIP类型', trigger: 'change' }
+    ],
+    vip_expire_time: [
+      { required: true, message: '请选择到期时间', trigger: 'change' }
+    ]
+  }
+
   function handleBalance(row) {
     currentUser.value = row
     balanceForm.value = {
@@ -359,6 +419,37 @@
       }
     })
   }
+
+  function handleVip(row) {
+    currentUser.value = row
+    vipForm.value = {
+      id: row.ID,
+      user_label: row.user_label,
+      vip_expire_time: row.vip_expire_time || ''
+    }
+    vipDialogVisible.value = true
+  }
+
+  function handleVipClose() {
+    vipDialogVisible.value = false
+    vipFormRef.value?.resetFields()
+  }
+
+  async function submitVip() {
+    if (!vipFormRef.value) return
+    await vipFormRef.value.validate(async (valid) => {
+      if (valid) {
+        const res = await setVip(vipForm.value)
+        if (res.code === 0) {
+          ElMessage.success('设置成功')
+          handleVipClose()
+          getList()
+        } else {
+          ElMessage.error(res.msg || '设置失败')
+        }
+      }
+    })
+  }
 </script>
 <style lang="scss" scoped>
 </style>