🎨 完善用户管理模块

src/api/user/index.js

@@ -21,3 +21,11 @@ export const status = (data) => {
     data
   })
 }
+
+// 获取用户详情
+export const getUserDetail = (id) => {
+  return service({
+    url: `/app_user/${id}`,
+    method: 'get'
+  })
+}

src/config.js

@@ -39,7 +39,55 @@ export  const USER_SEARCH_CONFIG = [
         ...userStatus
       ]
     },
-  }
+  },
+  {
+    type: 'select',
+    prop:'type',
+    label: '用户类型',
+    placeholder: '请选择',
+    children:{
+      list: [
+        {
+          label: '全部',
+          value: ''
+        },
+        {
+          label: '普通用户',
+          value: 1
+        },
+        {
+          label: '讲师',
+          value: 2
+        }
+      ]
+    },
+  },
+  {
+    type: 'select',
+    prop:'user_label',
+    label: 'VIP等级',
+    placeholder: '请选择',
+    children:{
+      list: [
+        {
+          label: '全部',
+          value: ''
+        },
+        {
+          label: '注册会员',
+          value: 1
+        },
+        {
+          label: 'VIP',
+          value: 2
+        },
+        {
+          label: 'SVIP',
+          value: 3
+        }
+      ]
+    },
+  },
 ]
 export  const ARTICLE_SEARCH_CONFIG = [
   {
@@ -170,11 +218,27 @@ export const USER_TABLE_CONFIG = {
       slot: 'CreatedAt'
     },{
       attrs: {
-        label: '更新时间',
+        label: '用户类别',
-        prop: 'UpdatedAt',
+        prop: 'user_type',
         align: 'center'
       },
-      slot: 'UpdatedAt'
+      slot: 'user_type'
+    },
+    {
+      attrs: {
+        label: 'VIP',
+        prop: 'user_label',
+        align: 'center'
+      },
+      slot: 'user_label'
+    },
+    {
+      attrs: {
+        label: '账户余额',
+        prop: 'balance',
+        align: 'center'
+      },
+      slot: 'balance'
     },
     {
       attrs: {

src/pathInfo.json

@@ -43,6 +43,8 @@
   "/src/view/layout/setting/title.vue": "layoutSettingTitle",
   "/src/view/layout/tabs/index.vue": "HistoryComponent",
   "/src/view/login/index.vue": "Login",
+  "/src/view/notice/notice/notice.vue": "Notice",
+  "/src/view/notice/notice/noticeForm.vue": "NoticeForm",
   "/src/view/order/index.vue": "OrderManage",
   "/src/view/order/order/index.vue": "Index",
   "/src/view/person/person.vue": "Person",

src/view/user/user/index.vue

@@ -43,9 +43,21 @@
           {{ formatDate(row.CreatedAt) }}
         </template>
 
-        <template #UpdatedAt="{ row }">
+        <!--user_type 1: 普通用户 2: 讲师-->
-          {{ formatDate(row.UpdatedAt) }}
+        <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>