feat 完成用户管理列表

admin-fe/src/assets/app.css

@@ -118,4 +118,14 @@ body {
 
 .pointer-cursor {
     cursor: pointer;
+}
+table{
+    width: 100%;
+    border-left: solid 1px #eee;
+    border-top: solid 1px #eee;
+}
+td,th {
+    border-right: solid 1px #eee;
+    border-bottom: solid 1px #eee;
+    padding:2px 4px;
 }

admin-fe/src/router/routes.ts

@@ -2,21 +2,22 @@ import {RouteRecordRaw} from "vue-router";
 import Home from '../views/admin/Home.vue'
 import Login from '../views/Login.vue'
 import NotFound from '../views/NotFound.vue'
-import Test from '../views/Test.vue'
 import AdminLayout from '../views/layout/AdminLayout.vue'
+import UserIndex from '../views/user/index.vue'
 
 const routes: RouteRecordRaw[] = [
     {
         path: '/',
         component: AdminLayout,
+        redirect: '/home',
         children: [
             {
                 path: 'home',
                 component: Home
             },
             {
-                path: 'test',
+                path: 'user',
-                component: Test
+                component: UserIndex
             }
         ]
     },

admin-fe/src/service/store.ts

@@ -6,15 +6,21 @@ import {useRouter} from "vue-router";
 
 // store的id必须唯一
 export const useTestStore = defineStore('test-store', {
-    state: () => ({
+    state: () => {
-        info: {
+        return {
-            nickname: ''
+            info: {
+                nickname: 'default name'
+            }
         }
-    }),
+    },
     getters: {
         nickname: (state) => state.info.nickname
     },
-    actions: {}
+    actions: {
+        setNickname(newName) {
+            this.info.nickname = newName
+        }
+    }
 })
 // 保存数据的key
 const TOKEN_KEY = "user-login-token";
@@ -50,4 +56,4 @@ export const useUserStore = defineStore('user-store', () => {
     }
 
     return {userinfo, login, logout, updateInfo, token}
-})
+})

admin-fe/src/service/types.d.ts

@@ -3,4 +3,27 @@ type AdminLoginModel = {
     account: string;
     password?: string;
     token: string;
+}
+type PointInfoModel = {
+    uid: number;
+    totalPoint: number;
+    validPoint?: number;
+    expirePoint?: number;
+    expireTime?: any;
+    updateTime?: string;
+}
+type UserInfoModel = {
+    id: number;
+    openId: string;
+    nickname: string;
+    headImage: string;
+    gender?: number;
+    province?: string;
+    city?: string;
+    parentId: number;
+    firstLoginTime: string;
+    updateTime?: string;
+    status: number;
+    pointInfo: PointInfoModel;
+    parent?: UserInfoModel | null;
 }

admin-fe/src/util/http.ts

@@ -22,6 +22,16 @@ export type ResponseModel<T> = {
     data: T
     trace?: string
 }
+export type DataListModel<T> = {
+    /**
+     * 数据列表
+     */
+    items: T[];
+    /**
+     * 查询到的总数
+     */
+    total: number;
+}
 
 class Http {
     post<T>(url, data) {

admin-fe/src/views/layout/AdminLayout.vue

@@ -9,17 +9,18 @@
       </div>
     </div>
     <div class="main">
-      <div class="left-menu">左侧的菜单
+      <div class="left-menu">
-        <div>
+        <div class="title">积分管理系统</div>
-          <router-link to="/test">TEST</router-link>
+        <div class="menu-list">
-        </div>
+          <router-link active-class="active-menu" to="/home">HOME</router-link>
-        <div>
+          <router-link active-class="active-menu" to="/user">用户管理</router-link>
-          <router-link to="/home">HOME</router-link>
         </div>
       </div>
       <div class="content-wrapper">
         <!--      内容区域-->
-        <router-view/>
+        <div class="content-container-main">
+          <router-view/>
+        </div>
       </div>
     </div>
   </div>
@@ -33,23 +34,23 @@ const userStore = useUserStore();
 <style lang="less">
 .app-admin-layout {
   min-height: 100vh;
+  background-color: #eee;
 }
 
 .header {
   background-color: var(--primary-color);
   color: white;
-  line-height: 80px;
+  line-height: var(--header-height);
   padding: 0 20px;
   text-align: right;
   position: fixed;
-  height: 80px;
+  height: var(--header-height);
   left: 0;
   right: 0;
   top: 0;
 }
 
 .main {
-  background-color: #eee;
   padding-top: var(--header-height);
   padding-left: var(--left-menu-width);
 
@@ -57,15 +58,37 @@ const userStore = useUserStore();
     width: 200px;
     background-color: black;
     color: white;
-    padding: 20px;
 
     position: fixed;
     left: 0;
     top: 0;
     bottom: 0;
   }
-
+  .title{
+    height: var(--header-height);
+    background-color: #333;
+    line-height: var(--header-height);
+    text-align: center;
+    font-size: var(--font-size-large);
+  }
+  .menu-list{
+    margin-top: 20px;
+    a{
+      display: block;
+      text-decoration: none;
+      color:white;
+      padding:10px 20px;
+      &.active-menu{
+        background-color: #666666;
+        color: white;
+      }
+    }
+  }
   .content-wrapper {
+    margin: 20px;
+    background-color: #fff;
+    border-radius: var(--border-radius-large);
+    padding: 20px;
   }
 }
 </style>

admin-fe/src/views/user/index.vue

@@ -0,0 +1,70 @@
+<template>
+
+  <table>
+    <tr>
+      <th>UID</th>
+      <th>昵称</th>
+      <th>OPEN_ID</th>
+      <th>性别</th>
+      <th>地区</th>
+      <th>推荐者</th>
+      <th>状态</th>
+      <th>积分</th>
+      <th>注册时间</th>
+      <th>操作</th>
+    </tr>
+    <tr v-for="u in userList" :key="u.id">
+      <td>{{ u.id }}</td>
+      <td>{{ u.nickname }}</td>
+      <td>{{ u.openId }}</td>
+      <td>{{ GenderEnum[u.gender] || '未知' }}</td>
+      <td>{{ u.province + '-' + u.city }}</td>
+      <td>{{ u.parent?.nickname || '-' }}</td>
+      <td>{{ StatusEnum[u.status] || '未知' }}</td>
+      <td>{{ u.pointInfo?.totalPoint }}</td>
+      <td>{{ u.firstLoginTime }}</td>
+      <td>
+        <span>编辑</span>
+        <span>禁用</span>
+        <span>删除</span>
+      </td>
+    </tr>
+  </table>
+</template>
+
+<script setup lang="ts">
+import {onMounted, reactive, ref} from "vue";
+import http, {DataListModel} from "../../util/http";
+//
+const GenderEnum = {
+  1: '男', 2: '女'
+}
+const StatusEnum = {
+  1: '正常',
+  2: '禁用',
+  0: '已删除'
+}
+const param = reactive({
+  id: '',
+  nickname: '',
+  openId: '',
+  page: 1,
+  pageSize: 10
+})
+
+const userList = ref<UserInfoModel[]>([]);
+const userTotalCount = ref(0)
+
+function loadUserList() {
+  http.post<DataListModel<UserInfoModel>>('/admin/user/list', param).then(res => {
+    userList.value = res.items
+    userTotalCount.value = res.total
+  })
+}
+
+onMounted(loadUserList)
+</script>
+
+<style scoped>
+
+</style>