用户管理

src/components/framework/page.vue

+<template>
+  <div class="page-div">
+    <el-pagination
+      :current-page="nowPage"
+      layout="total , prev, pager, next, jumper"
+      :total="total">
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "page",
+    props:[
+      'nowPage',
+      'total'
+    ],
+    watch:{
+      nowPage(value){
+
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .page-div{
+    display: block;
+    text-align: center;
+  }
+</style>

src/components/system/admin.vue

@@ -39,13 +39,7 @@
         </template>
       </el-table-column>
     </el-table>
-    <div class="page-div">
-      <el-pagination
-        :current-page="nowPage"
-        layout="total , prev, pager, next, jumper"
-        :total="total">
-      </el-pagination>
-    </div>
+    <page :nowPage="nowPage" :total="total"/>
     <el-dialog
       :title="dialog.title"
       center
@@ -90,9 +84,13 @@
 <script>
   import {getAdminListApi,editAdminListApi,addAdminListApi,delAdminListApi,editPasswordApi} from "../../service/api";
   import {ADMINSTATUS} from "../../util/wordbook";
+  import page from '../framework/page'
 
   export default {
     name: "admin",
+    components:{
+      page
+    },
     data(){
       // 表单验证
       let usernameCheck=(rule, value, callback)=>{

src/components/teacher/index.vue

+<template>
+
+</template>
+
+<script>
+    export default {
+        name: "index"
+    }
+</script>
+
+<style scoped>
+
+</style>

src/components/user/detail.vue

+<template>
+  <el-dialog
+    title="用户详情"
+    center
+    append-to-body
+    :visible.sync="show"
+    width="800px">
+    <el-row align="middle" type="flex">
+      <el-col :span="4"><label>头像</label></el-col>
+      <el-col :span="8">
+        <img :src="userDetail.avatar"/>
+      </el-col>
+      <el-col :span="4"><label>昵称</label></el-col>
+      <el-col :span="8">{{userDetail.nickname}}</el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="4"><label>手机号</label></el-col>
+      <el-col :span="8">{{userDetail.mobile}}</el-col>
+      <el-col :span="4"><label>创建时间</label></el-col>
+      <el-col :span="8">{{userDetail.created_at}}</el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="4"><label>生日</label></el-col>
+      <el-col :span="8">{{userDetail.birthday}}</el-col>
+      <el-col :span="4"><label>ID</label></el-col>
+      <el-col :span="8">{{userDetail.user_id}}</el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="4"><label>等级</label></el-col>
+      <el-col :span="8">{{userDetail.level}}</el-col>
+      <el-col :span="4"><label>最后登录</label></el-col>
+      <el-col :span="8">{{userDetail.last_login_at}}</el-col>
+    </el-row>
+  </el-dialog>
+</template>
+
+<script>
+  import {getUserDetailApi} from "../../service/api";
+  export default {
+    name: "detail",
+    props:[
+      'showDetail',
+      'showId'
+    ],
+    data(){
+      return {
+        userDetail:{},
+        show:this.showDetail
+      }
+    },
+    methods:{
+      getDetail(){
+        getUserDetailApi(this.showId).then(res=>{
+          this.userDetail = res
+        })
+      }
+    },
+    watch:{
+      show(value){
+        this.$emit("changeShow",value);
+      },
+      showDetail(value){
+        this.show = value
+        this.getDetail()
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .el-col{
+    height: 50px;
+    img{
+      width: 50px;
+      border-radius: 100px;
+    }
+    label{
+      color: #5982e6;
+    }
+  }
+</style>

src/components/user/index.vue

 <template>
-    <div class="user">
-      用户列表
-    </div>
+  <div class="user">
+    <el-form ref="searchFrom" :model="searchFrom" label-width="80px">
+      <el-row>
+        <el-col :span="4">
+          <el-form-item label="昵称">
+            <el-input v-model="searchFrom.nickName"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item label="电话">
+            <el-input v-model="searchFrom.mobile"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item label="等级">
+            <el-input v-model="searchFrom.level"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item>
+            <el-button type="primary" plain>搜索</el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <el-table
+      :data="userList"
+      style="width: 100%">
+      <el-table-column
+        prop="user_id"
+        label="账号ID">
+      </el-table-column>
+      <el-table-column
+        prop="nickname"
+        label="用户名">
+      </el-table-column>
+      <el-table-column
+        prop="mobile"
+        label="手机号">
+      </el-table-column>
+      <el-table-column
+        prop="level"
+        label="等级">
+      </el-table-column>
+      <el-table-column
+        label="操作">
+        <template slot-scope="scope">
+          <el-button size="mini" plain type="primary" @click="detail(scope.row)">
+            查看详情
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <page :total="total" v-model="nowPage"/>
+    <detail v-model="showDetail" :showId="showId" />
+  </div>
 </template>
 
 <script>
-    export default {
-        name: "index"
+  import {getUserListApi} from "../../service/api";
+  import page from '../framework/page'
+  import detail from './detail'
+  export default {
+    name: "index",
+    data(){
+      return {
+        searchFrom:{
+          nickName:'',
+          mobile:'',
+          level:''
+        },
+        userList:[],
+        total:0,
+        nowPage:0,
+        showDetail:false,
+        showId:''
+      }
+    },
+    components:{
+      page,
+      detail
+    },
+    mounted(){
+      this.getUser()
+    },
+    methods:{
+      getUser(){
+        getUserListApi(this.searchFrom).then(res=>{
+          this.userList = res.list;
+          this.total = res.total
+        })
+      },
+      detail(data){
+        this.showId = data.user_id;
+        this.showDetail = true
+      },
+      changeShow(data){
+        this.showDetail=data
+      }
+
     }
+  }
 </script>
 
-<style scoped>
+<style scoped lang="less">
+  @import "../../util/public";
   .user{
     height: 100%;
     overflow: auto;
+    padding: 20px;
+    .btn-content{
+      text-align: center;
+    }
   }
 </style>

src/service/api.js

@@ -14,6 +14,8 @@ const addAdminUrl = `${_baseUrl}api/admin/user/add`;
 const delAdminUrl = `${_baseUrl}api/admin/user`;
 const editPasswordUrl = `${_baseUrl}api/admin/user/passwd`;
 const logOutUrl = `${_baseUrl}api/admin/logout`;
+const getUserListUrl = `${_baseUrl}api/admin/student/list`;
+const getUserDetailUrl = `${_baseUrl}api/admin/student/info`;
 //登录
 export const loginApi = function(json) {
   return Vue.prototype.$post(loginURL,{"username":json.username,"passwd":json.password})
@@ -42,5 +44,13 @@ export const delAdminListApi = function (id) {
 export const editPasswordApi = function (id,json) {
   return Vue.prototype.$patch(`${editPasswordUrl}/${id}`,json)
 };
+//获取用户列表
+export const getUserListApi = function (json) {
+  return Vue.prototype.$fetch(getUserListUrl,json)
+};
+//获取用户详情
+export const getUserDetailApi = function (id) {
+  return Vue.prototype.$fetch(`${getUserDetailUrl}/${id}`)
+}