🎨 完善用户管理模块

src/view/user/user/index.vue

@@ -43,9 +43,21 @@
           {{ formatDate(row.CreatedAt) }}
         </template>
 
-        <template #UpdatedAt="{ row }">
-          {{ formatDate(row.UpdatedAt) }}
+        <!--user_type 1: 普通用户 2: 讲师-->
+        <template #user_type="{ row }">
+          {{ row.user_type === 1 ? '普通用户' : '讲师' }}
         </template>
+
+        <!--user_label 1: 普通用户 2: VIP 3:SVIP-->
+        <template #user_label="{ row }">
+          {{ row.user_label === 1 ? '注册会员' : row.user_label === 2 ? 'VIP' : 'SVIP' }}
+        </template>
+        
+        <!--balance 账户余额-->
+        <template #balance="{ row }">
+          {{ row.balance }}
+        </template>
+
         <template #operate="{ row }">
           <el-button type="text" @click="handleDetail(row)">详情</el-button>
           <!--          <el-button type="text" @click="handleDelete(row)">删除</el-button>-->
@@ -53,12 +65,46 @@
       </Content>
 
     </div>
+
+    <!-- 用户详情弹窗 -->
+    <el-dialog
+      v-model="dialogVisible"
+      title="用户详情"
+      width="50%"
+      :before-close="handleClose"
+    >
+      <el-descriptions :column="2" border>
+        <el-descriptions-item label="用户头像">
+          <el-image
+            style="width: 100px; height: 100px"
+            :src="userDetail.avatar"
+            :preview-src-list="[userDetail.avatar]"
+            fit="cover"
+          />
+        </el-descriptions-item>
+        <el-descriptions-item label="用户ID">{{ userDetail.ID }}</el-descriptions-item>
+        <el-descriptions-item label="用户名">{{ userDetail.nick_name }}</el-descriptions-item>
+        <el-descriptions-item label="用户类型">
+          {{ userDetail.user_type === 1 ? '普通用户' : '讲师' }}
+        </el-descriptions-item>
+        <el-descriptions-item label="用户标签">
+          {{ userDetail.user_label === 1 ? '注册会员' : userDetail.user_label === 2 ? 'VIP' : 'SVIP' }}
+        </el-descriptions-item>
+        <el-descriptions-item label="账户余额">{{ userDetail.balance }}</el-descriptions-item>
+        <el-descriptions-item label="状态">
+          {{ userDetail.status === 1 ? '启用' : '禁用' }}
+        </el-descriptions-item>
+        <el-descriptions-item label="创建时间">{{ formatDate(userDetail.CreatedAt) }}</el-descriptions-item>
+        <el-descriptions-item label="手机号">{{ userDetail.phone }}</el-descriptions-item>
+        <el-descriptions-item label="VIP到期时间">{{ userDetail.vip_expire_time }}</el-descriptions-item>
+      </el-descriptions>
+    </el-dialog>
   </div>
 </template>
 <script setup>
   import searchForm from '@/components/searchForm/index.vue'
   import Content from '@/components/content/index.vue'
-  import {list, status} from '@/api/user/index.js'
+  import {list, status, getUserDetail} from '@/api/user/index.js'
   import { ref, onMounted } from 'vue'
   import {formatDate} from '@/utils/format'
   import { USER_SEARCH_CONFIG, USER_TABLE_CONFIG } from '@/config'
@@ -71,6 +117,8 @@
     endTime: ''
   }), total = ref(0)
   // const EMPTY_STR = '- -'
+  const dialogVisible = ref(false)
+  const userDetail = ref({})
   const searchData = (data) => {
     if (data.times) {
       data.startTime = data.times[0]
@@ -102,8 +150,17 @@
     }
   }
 
-  function handleDetail(row) {
+  async function handleDetail(row) {
+    const res = await getUserDetail(row.ID)
+    if(res.code === 0) {
+      userDetail.value = res.data
+      dialogVisible.value = true
+    }
+  }
 
+  function handleClose() {
+    dialogVisible.value = false
+    userDetail.value = {}
   }
 
   function changePage(data) {
@@ -122,4 +179,7 @@
   }
 </script>
 <style lang="scss" scoped>
+.el-descriptions {
+  margin: 20px 0;
+}
 </style>