完成管理员页面首页和商家账号列表展示

src/App.vue

@@ -24,5 +24,6 @@ html,body{
   min-width: 570px;
   margin: 0 auto;
   height: 100%;
+  background-color: #eaebf0;
 }
 </style>

src/api/config.js

@@ -3,4 +3,6 @@ var api='http://www.Zhengy.com/api';
 export default{
 	judegAccount:api+"/judegAccount",//登陆时检测用户名和角色是否匹配
 	login:api+"/login",//登陆
+	getTagtList:api+"/getTagtList",//获取商家标签列表
+	getAccountList:api+"/getAccountList",//管理员获取账号列表
 }

src/components/Login.vue

@@ -1,8 +1,8 @@
 <template>
-  <div>
+  <div class="login-wrap">
     <h1>{{ msg }}</h1>
     <h2>请先登陆您的身份</h2>
-    <div class="hello">
+    <div class="form-wrap">
       <el-form ref="form" :model="form" label-width="80px" :label-position="labelPosition">
         <el-form-item label="角色" prop="radio">
           <el-radio-group v-model="form.radio" v-on:change="judegAccount">
@@ -75,8 +75,9 @@ export default {
             type: 'success',
             message: '登陆成功!'
           });
+          this.$store.commit('login',{userMess:res.data.mess});
           if(this.form.radio=='0'){
-            this.$router.push({path: '/admin'});
+            this.$router.push({path: '/admin/index'});
           }else if(this.form.radio=='1'){
             this.$router.push({path: '/shop'});
           }else{
@@ -101,10 +102,23 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
+.login-wrap{
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+}
 h1, h2 {
   font-weight: normal;
   text-align: center;
 }
+h1{
+  font-size: 30px;
+  margin: 40px auto 20px;
+}
+h2{
+  font-size: 22px;
+  margin-bottom: 20px;
+}
 ul {
   list-style-type: none;
   padding: 0;
@@ -116,7 +130,7 @@ li {
 a {
   color: #42b983;
 }
-.hello{
+.form-wrap{
   width: 286px;
   margin: 0 auto;
   text-align: left;

src/mock/index.js

@@ -2,14 +2,14 @@ const Mock = require('mockjs');
 var loginState="0";//登陆状态，0未登录，1管理员登陆，2商家登陆，3买家登陆
 var accountInfo=[//账号列表
 	[//管理员账号
-  	{"name":"admin1","password":"123","mess":{}},
-  	{"name":"admin2","password":"123","mess":{}},
-  	{"name":"admin3","password":"123","mess":{}},
+  	{"name":"admin1","password":"123","mess":{"userName":"附近的拉布拉多","loginId":"admin1","password":"123"}},
+  	{"name":"admin2","password":"123","mess":{"userName":"附近的哈士奇","loginId":"admin2","password":"123"}},
+  	{"name":"admin3","password":"123","mess":{"userName":"附近的金毛","loginId":"admin3","password":"123"}},
   ],
   [//商家账号
-  	{"name":"shop1","password":"123","mess":{}},
-  	{"name":"shop2","password":"123","mess":{}},
-  	{"name":"shop3","password":"123","mess":{}},
+  	{"name":"shop1","password":"123","mess":{"id":"1","userName":"张兴邦食品旗舰店","loginId":"shop1","password":"123","label":"食品"}},
+  	{"name":"shop2","password":"123","mess":{"id":"2","userName":"自油自画旗舰店","loginId":"shop2","password":"123","label":"艺术"}},
+  	{"name":"shop3","password":"123","mess":{"id":"3","userName":"帕霏原创女装","loginId":"shop3","password":"123","label":"服装"}},
   ],
   [//买家账号
   	{"name":"buyer1","password":"123","mess":{}},
@@ -17,22 +17,41 @@ var accountInfo=[//账号列表
   	{"name":"buyer3","password":"123","mess":{}},
   ],
 ];
-var userMess={}//登陆者信息
+var shopTagList=[{ text: '食品', value: '食品' }, { text: '艺术', value: '艺术' }, { text: '服装', value: '服装' }]
 
 //登陆前检测用户名和角色是否匹配
 Mock.mock('http://www.Zhengy.com/api/judegAccount',function(options){
-	var res = eval('('+options.body+')');
-	var find = accountInfo[res.radio].findIndex((value,index,arr)=>{
-		return value.name==res.name;
+	var req = eval('('+options.body+')');
+	var find = accountInfo[req.radio].findIndex((value,index,arr)=>{
+		return value.name==req.name;
 	})
 	return find;
 })
 //登陆
 Mock.mock('http://www.Zhengy.com/api/login',function(options){
-	var res = eval('('+options.body+')');
-	var index = accountInfo[res.radio].findIndex((value,index,arr)=>{
-		return value.name==res.name;
+	var req = eval('('+options.body+')');
+	var index = accountInfo[req.radio].findIndex((value,index,arr)=>{
+		return value.name==req.name;
 	})
-	var code=accountInfo[res.radio][index].password==res.password?200:201;
-	return {"code":code};
-})
+	var code=accountInfo[req.radio][index].password==req.password?200:201;
+	var mess=accountInfo[req.radio][index].mess;
+	return {"code":code,"mess":mess};
+})
+//管理员页面
+//获取商家标签列表
+Mock.mock('http://www.Zhengy.com/api/getTagtList',function(options){
+	var res = shopTagList;
+	return res;
+})
+//获取账号列表
+Mock.mock('http://www.Zhengy.com/api/getAccountList',function(options){
+	var req = eval('('+options.body+')');
+	var res = [];
+	for(var i=0,length=accountInfo[req.type].length;i<length;i++){
+		res.push(accountInfo[req.type][i].mess);
+	}
+	//var res = accountInfo[req.type]
+	return res;
+})
+//管理员对账号增删改查
+

src/router/index.js

@@ -19,7 +19,21 @@ export default new Router({
     },
     {
     	path: '/admin',
-    	component: Admin
+    	component: Admin,
+      children: [
+        {
+          path:'index',
+          component: function(resolve){
+            require(['../view/admin/Index.vue'], resolve)
+          }
+        },
+        {
+          path:'shop',
+          component: function(resolve){
+            require(['../view/admin/Shop.vue'], resolve)
+          }
+        },
+      ]
     },
     {
     	path: '/shop',

src/store/store.js

@@ -4,33 +4,16 @@ import Vuex from 'vuex';
 Vue.use(Vuex);
 
 const state = {
-    loginState:"0",//登陆状态，0未登录，1管理员登陆，2商家登陆，3买家登陆
-    adminAccount:[//管理员账号
-    	{"name":"admin1","password":"123"},
-    	{"name":"admin2","password":"123"},
-    	{"name":"admin3","password":"123"},
-    ],
-    shopAccount:[//商家账号
-    	{"name":"shop1","password":"123","mess":{}},
-    	{"name":"shop2","password":"123","mess":{}},
-    	{"name":"shop3","password":"123","mess":{}},
-    ],
-    buyerAccount:[//买家账号
-    	{"name":"buyer1","password":"123","mess":{}},
-    	{"name":"buyer2","password":"123","mess":{}},
-    	{"name":"buyer3","password":"123","mess":{}},
-    ],
-    userMess:{}//登陆者信息
+    userMess:{"userName":"附近的拉布拉多","loginId":"admin1","password":"123"}//登陆者信息
 }
 
 const mutations = {
 	login(state,payload){//用户登陆
 		state.userMess = payload.userMess;
-		state.loginState = payload.loginState;
 	}
 }
 
 export default new Vuex.Store({
-    state,
-    mutations
+  state,
+  mutations
 });

src/view/admin/Admin.vue

@@ -1,27 +1,40 @@
 <template>
 	<div class="admin-wrap">
 		<el-container>
-		  <el-aside width="200px">
-		  	<el-menu
-		      default-active="1-1"
-		      class="el-menu-vertical-demo"
-		      background-color="#545c64"
-		      text-color="#fff"
-		      active-text-color="#3eb983">
-		      <el-submenu index="1">
-		        <template slot="title">
-		          <i class="el-icon-tickets"></i>
-		          <span>账号管理</span>
-		        </template>
-		        <el-menu-item-group>
-		          <el-menu-item index="1-1">商家账号管理</el-menu-item>
-		          <el-menu-item index="1-2">买家账号管理</el-menu-item>
-		        </el-menu-item-group>
-		      </el-submenu>
-		    </el-menu>
+		  <el-aside width="260px">
+		    <el-row >
+			    <el-col>
+			      <el-menu 
+			        default-active="1" 
+			        class="el-menu-vertical-demo" 
+			        :unique-opened="true">
+			        <el-menu-item index="1">
+			          <router-link to="/admin/index"><img src="../../assets/images/admin/administrator.png" />(集团)主页管理</router-link>
+			        </el-menu-item>
+			        <el-submenu index="2">
+			          <template slot="title" ><i class="el-icon-tickets"></i>账号管理</template>
+			          <el-menu-item-group>
+			            <el-menu-item index="2-1">
+			              <router-link to="/admin/shop">商家账号管理</router-link>
+			            </el-menu-item>
+			            <el-menu-item index="2-2">
+			              <router-link to="/admin/buyer">买家账号管理</router-link>
+			            </el-menu-item>
+			          </el-menu-item-group>
+			        </el-submenu>
+			      </el-menu>
+			    </el-col>
+			  </el-row>
 		  </el-aside>
 		  <el-main>
-				<h5>商家账户管理</h5>
+		  	<div class="header-wrap">
+		  		<router-link to="/index">退出</router-link>
+		  		<div>
+		  			<img src="../../assets/images/admin/userImg.png" />
+		  			{{$store.state.userMess.userName}}
+		  		</div>
+		  	</div>
+				<router-view></router-view>
 		  </el-main>
 		</el-container>
 	</div>
@@ -35,13 +48,108 @@
 	.admin-wrap{
 		height: 100%;
 	}
+	.header-wrap{
+		width: 100%;
+		height: 50px;
+		background-color: #fff;
+		padding: 0 20px;
+		line-height: 50px;
+	}
+	.header-wrap a{
+		display: block;
+		float: right;
+		color: #3eb983;
+	}
+	.header-wrap div{
+		height: 100%;
+		float: right;
+		text-align: left;
+		vertical-align: middle;
+		padding-right: 30px;
+	}
+	.header-wrap img{
+		width: 20px;
+		vertical-align: middle;
+		margin-right: 5px;
+	}
 </style>
 
 <style>
 	.el-container{
 		height: 100%;
 	}
+	.el-aside{
+		background-color: #1f2935;
+		text-align: left;
+	}
+	.el-main{
+		padding: 0;
+	}
 	.el-menu{
 		height: 100%;
 	}
+</style>
+
+<style>
+	.iconfont{
+    margin-right:10px;
+  }
+  .el-menu-vertical-demo{
+    padding-left: 18px;
+  }
+  .el-menu{
+    background: #1f2935!important;
+    border-right: 0;
+  }
+  .el-menu img{
+  	width: 20px;
+  	margin: 0 5px 0 2px;
+  	vertical-align: middle;
+  }
+  .el-menu-item a{
+    display: block;
+    width: 100%;
+    height: 100%;
+    font-size: 14px;
+    /*padding-left: 6px;*/
+  }
+  .el-submenu a{
+    padding-left: 6px;
+  }
+  a.router-link-active a{
+    color:#3eb983!important; 
+  }
+  .el-menu-item-group .is-active a{
+    color:#3eb983!important; 
+  }
+  .el-menu-item-group li{
+    background:#1f2935;
+    line-height: 48px;
+    font-size:16px;
+  }
+  .el-menu-item-group li i{
+  	margin-right: 10px;
+  }
+  .el-menu-item-group__title {
+    padding-top: 0;
+    color: #a2aebf;
+  }
+  a{
+    color: #a2aebf;
+  }
+  .el-submenu .el-menu-item:hover, .el-submenu__title:hover{
+    background: #0f1722!important;
+  }
+  .el-menu-item, .el-submenu__title{
+    color:#a2aebf; 
+  }
+  .el-submenu__icon-arrow{
+    right: 40px;
+  }
+  .el-menu-vertical-demo{
+    padding-left: 0;
+  }
+  .el-menu--horizontal.el-menu--dark .el-submenu .el-menu-item:hover, .el-menu--horizontal.el-menu--dark .el-submenu .el-submenu-title:hover, .el-menu-item:hover{
+    background: #0f1722;
+  }
 </style>

src/view/admin/Index.vue

@@ -0,0 +1,117 @@
+<template>
+	<div class="adminIndex-wrap">
+		<div class="mess-wrap">
+			<h5>您好！{{$store.state.userMess.userName}}管理员</h5>
+			<div>
+				<img src="../../assets/images/admin/userImg.png" />
+				<div class="mess-content">
+					<p>账户昵称：{{$store.state.userMess.userName}}</p>
+					<p>登陆账号：{{$store.state.userMess.loginId}}</p>
+					<p>登陆密码：{{$store.state.userMess.password}}</p>
+				</div>
+			</div>
+		</div>
+		<div class="handle-wrap">
+			<el-card class="box-card">
+				<h6>商家账号人数</h6>
+				<p>3</p>
+				<button>添加商家</button>
+			</el-card>
+			<el-card class="box-card handle-content">
+				<h6>买家账号人数</h6>
+				<p>3</p>
+				<button>添加买家</button>
+			</el-card>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default{
+
+	}
+</script>
+
+<style scoped>
+	.adminIndex-wrap{
+		width: 100%;
+		padding: 0 20px;
+	}
+	.adminIndex-wrap .mess-wrap{
+		width: 100%;
+		height: 150px;
+		margin-top: 20px;
+		background-color: #fff;
+		border-left: 6px solid #3eb983;
+	}
+	.adminIndex-wrap h5{
+		font-size: 18px;
+		text-align: left;
+		line-height: 35px;
+		padding-left: 20px;
+	}
+	.adminIndex-wrap .mess-wrap img{
+		width: 80px;
+		height: 80px;
+		display: block;
+		float: left;
+		margin: 15px 20px 15px;
+	}
+	.adminIndex-wrap .mess-content{
+		width: calc(100% - 120px);
+		height: 100%;
+		float: left;
+		margin-top: 5px;
+	}
+	.adminIndex-wrap .mess-content p{
+		text-align: left;
+		font-size: 16px;
+		line-height: 35px;
+	}
+	.adminIndex-wrap .handle-wrap{
+		width: 100%;
+		height: 150px;
+		display: flex;
+		justify-content: space-around;
+		flex-wrap: wrap;
+	}
+	.adminIndex-wrap .box-card{
+		width: 450px;
+		height: 174px;
+		background-color: #fff;
+		box-shadow: 0 2px 8px 0 rgba(0,0,0,0.3);
+		border: 0;
+		margin-top: 20px;
+	}
+	.adminIndex-wrap .box-card h6{
+		font-size: 16px;
+		line-height: 45px;
+	}
+	.adminIndex-wrap .box-card p{
+		font-size: 34px;
+		color: #008dc5;
+		line-height: 60px;
+	}
+	.adminIndex-wrap .handle-content p{
+		color: #54cdc8;
+	}
+	.adminIndex-wrap .box-card button{
+		width: 100%;
+		height: 50px;
+		background-color: #008dc5;
+		color: #fff;
+		border: 0;
+		font-size: 16px;
+		margin-top: 20px;
+		cursor: pointer;
+	}
+	.adminIndex-wrap .handle-content button{
+		background-color: #54cdc8;
+	}
+</style>
+
+<style>
+	.adminIndex-wrap .el-card__body{
+		padding: 0;
+	}
+</style>

src/view/admin/Shop.vue

@@ -0,0 +1,194 @@
+<template>
+	<div class="adminShop-wrap">
+		<div class="addShopBtn"><i class="el-icon-plus"></i><span>添加商家</span></div>
+		<div class="shopList-wrap">
+			<h5>商家信息</h5>
+	    <!-- <table class="shopList-content">
+	      <thead>
+	        <tr class="shopList-thead">
+	          <th>编号</th>
+	          <th>店铺名称</th>
+	          <th>登陆账号</th>
+	          <th>登陆密码</th>
+	          <th>店铺标签</th>
+	          <th>操作</th>
+	        </tr>
+	      </thead>
+	      <tbody>
+	        <tr v-for="item in shopInfo">
+	          <td>{{item.id}}</td>
+	          <td>{{item.userName}}</td>
+	          <td>{{item.loginId}}</td>
+	          <td>{{item.password}}</td>
+	          <td>{{item.label}}</td>
+	          <td>删除，编辑，查看</td>
+	        </tr>
+	      </tbody>
+	    </table> -->
+	    <el-table
+		    :data="shopInfo"
+		    border
+		    style="width: 100%">
+		    <el-table-column
+		      prop="id"
+		      label="编号"
+		      min-width="1">
+		    </el-table-column>
+		    <el-table-column
+		      prop="userName"
+		      label="店铺名称"
+		      min-width="3">
+		    </el-table-column>
+		    <el-table-column
+		      prop="loginId"
+		      label="登陆账号"
+		      min-width="3">
+		    </el-table-column>
+		    <el-table-column
+		      prop="password"
+		      label="登陆密码"
+		      min-width="3">
+		    </el-table-column>
+		    <el-table-column
+		      prop="label"
+		      label="店铺标签"
+		      min-width="3">
+		    </el-table-column>
+		    <el-table-column
+		      prop="label"
+		      label="标签"
+		      :filters="shopTagList"
+		      :filter-method="filterTag"
+		      filter-placement="bottom-end"
+		      min-width="3">
+		      <template slot-scope="scope">
+		        <el-tag
+		          :type="'success'"
+		          close-transition>{{scope.row.label}}</el-tag>
+		      </template>
+		    </el-table-column>
+		    <el-table-column label="操作" min-width="6">
+		      <template slot-scope="scope">
+		        <el-button
+		          size="mini"
+		          @click="">编辑</el-button>
+		        <el-button
+		          size="mini"
+		          @click="">删除</el-button>
+		        <el-button
+		          size="mini"
+		          @click="">查看</el-button>
+		      </template>
+		    </el-table-column>
+		  </el-table>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default{
+		data(){
+			return{
+				shopInfo:[],
+				shopTagList:[],
+			}
+		},
+		mounted(){
+			this.getShopList();
+			this.getShopTagList();
+		},
+		methods:{
+			getShopList(){
+				this.axios.post(this.Api.getAccountList,{
+	        type:1
+	      }).then((res)=>{
+	      	this.shopInfo=res.data;
+	      }).catch((err)=>{
+	        console.log("getShopList:"+err);
+	      });
+			},
+			getShopTagList(){
+				this.axios.post(this.Api.getTagtList,{}).then((res)=>{
+	      	this.shopTagList=res.data;
+	      }).catch((err)=>{
+	        console.log("getShopList:"+err);
+	      });
+			},
+			filterTag(value, row) {
+        return row.label === value;
+      },
+		}
+	}
+</script>
+
+<style scoped>
+	.adminShop-wrap{
+		width: 100%;
+		padding: 0 20px;
+	}
+	.addShopBtn{
+		width: 100%;
+		height: 70px;
+		background-color: #3eb983;
+		border: 0;
+		color: #fff;
+		margin: 20px 0;
+		font-size: 16px;
+		line-height: 70px;
+		cursor: pointer;
+	}
+	.addShopBtn span{
+		height: 100%;
+		display: inline-block;
+		vertical-align: middle;
+	}
+	.addShopBtn i{
+		font-size: 30px;
+		margin-right: 10px;
+		display: inline-block;
+		vertical-align: middle;
+	}
+	.shopList-wrap{
+		background-color: #fff;
+		padding: 20px;
+		margin-top: 20px;
+	}
+	.shopList-wrap h5{
+		font-size: 16px;
+		text-align: left;
+		margin-bottom: 10px;
+	}
+	.shopList-content{
+		width: 100%;
+	}
+	.el-table thead{
+		background-color: #bcf2db;
+		height: 32px;
+		line-height: 32px;
+		font-size: 12px;
+		text-align: center;
+	}
+	.has-gutter th{
+		color: #17905c;
+		padding: 0 4px;
+	}
+</style>
+
+<style>
+	.el-table thead{
+		background-color: #bcf2db;
+		height: 32px;
+		line-height: 32px;
+		font-size: 12px;
+		text-align: center;
+	}
+	.el-table thead tr{
+		background-color: #bcf2db;
+	}
+	.el-table th{
+		color: #17905c;
+		padding: 0;
+		background-color: #bcf2db;
+		text-align: center;
+	}
+</style>