完成管理员页面，包括首页，商家账号管理，买家账号管理。实现账号的增删改查功能

src/api/config.js

@@ -5,4 +5,5 @@ export default{
 	login:api+"/login",//登陆
 	getTagtList:api+"/getTagtList",//获取商家标签列表
 	getAccountList:api+"/getAccountList",//管理员获取账号列表
+	adminHandle:api+"/adminHandle",//管理员的增删改查操作
 }

src/mock/index.js

@@ -7,17 +7,17 @@ var accountInfo=[//账号列表
   	{"name":"admin3","password":"123","mess":{"userName":"附近的金毛","loginId":"admin3","password":"123"}},
   ],
   [//商家账号
-  	{"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":"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":{}},
-  	{"name":"buyer2","password":"123","mess":{}},
-  	{"name":"buyer3","password":"123","mess":{}},
+  	{"name":"buyer1","password":"123","mess":{"id":1,"userName":"和牙刷私奔叻丶","loginId":"buyer1","password":"123","address":"黑龙江省大庆市"}},
+  	{"name":"buyer2","password":"123","mess":{"id":2,"userName":"夜凋凝","loginId":"buyer2","password":"123","address":"黑龙江省鹤岗市"}},
+  	{"name":"buyer3","password":"123","mess":{"id":3,"userName":"盛夏。","loginId":"buyer3","password":"123","address":"四川省南充市"}},
   ],
 ];
-var shopTagList=[{ text: '食品', value: '食品' }, { text: '艺术', value: '艺术' }, { text: '服装', value: '服装' }]
+var shopTagList=[{id: 1, text: '食品', value: '食品' }, {id: 2, text: '艺术', value: '艺术' }, {id: 3, text: '服装', value: '服装' }]
 
 //登陆前检测用户名和角色是否匹配
 Mock.mock('http://www.Zhengy.com/api/judegAccount',function(options){
@@ -50,8 +50,78 @@ Mock.mock('http://www.Zhengy.com/api/getAccountList',function(options){
 	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;
 })
 //管理员对账号增删改查
+Mock.mock('http://www.Zhengy.com/api/adminHandle',function(options){
+	var req = eval('('+options.body+')');
+	var code = 201;
+	switch(req.handle){
+		case "1"://添加账号
+			if(req.type==1){//商家账号
+				var shop={
+					"name":req.mess.name,
+					"password":req.mess.password,
+					"mess":{
+						"id":accountInfo[1][accountInfo[1].length-1].mess.id+1,
+						"userName":req.mess.userName,
+						"loginId":req.mess.name,
+						"password":req.mess.password,
+						"label":req.mess.label,
+					}
+				};
+				accountInfo[1].push(shop);
+				code=200;
+			}else{//买家账号
+				var buyer={
+					"name":req.mess.name,
+					"password":req.mess.password,
+					"mess":{
+						"id":accountInfo[2][accountInfo[2].length-1].mess.id+1,
+						"userName":req.mess.userName,
+						"loginId":req.mess.name,
+						"password":req.mess.password,
+						"address":req.mess.address,
+					}
+				}
+				accountInfo[2].push(buyer);
+				code=200;
+			}
+			break;
+		case "2"://编辑账号
+			var index=accountInfo[req.type].findIndex((value,index,arr)=>{
+				return value.mess.id==req.mess.id;
+			})
+			if(req.mess.name!=""){
+				accountInfo[req.type][index].name=req.mess.name;
+				accountInfo[req.type][index].mess.loginId=req.mess.name;
+			}
+			if(req.mess.password!=""){
+				accountInfo[req.type][index].password=req.mess.password;
+				accountInfo[req.type][index].mess.password=req.mess.password;
+			}
+			if(req.mess.userName!=""){
+				accountInfo[req.type][index].mess.userName=req.mess.userName;
+			}
+			if(req.type==1){//商家账号
+				if(req.mess.label!=""){
+					accountInfo[1][index].mess.label=req.mess.label;
+				}
+				code=200;
+			}else{//买家账号
+				if(req.mess.address!=""){
+					accountInfo[2][index].mess.address=req.mess.address;
+				}
+				code=200;
+			}
+			break;
+		default://删除账号
+			var index=accountInfo[req.type].findIndex((value,index,arr)=>{
+				return value.mess.id==req.mess.id;
+			})
+			accountInfo[req.type].splice(index,1);
+			code=200;
+	}
+	return {"code":code};
+})
 

src/router/index.js

@@ -33,8 +33,26 @@ export default new Router({
             require(['../view/admin/Shop.vue'], resolve)
           }
         },
+        {
+          path:'buyer',
+          component: function(resolve){
+            require(['../view/admin/Buyer.vue'], resolve)
+          }
+        },
       ]
     },
+    // {
+    //   path: '/admin/index',
+    //   component: function(resolve){
+    //     require(['../view/admin/Index.vue'], resolve)
+    //   }
+    // },
+    // {
+    //   path: '/admin/shop',
+    //   component: function(resolve){
+    //     require(['../view/admin/Shop.vue'], resolve)
+    //   }
+    // },
     {
     	path: '/shop',
     	component: Shop

src/store/store.js

@@ -4,7 +4,7 @@ import Vuex from 'vuex';
 Vue.use(Vuex);
 
 const state = {
-    userMess:{"userName":"附近的拉布拉多","loginId":"admin1","password":"123"}//登陆者信息
+    userMess:{}//登陆者信息
 }
 
 const mutations = {

src/view/admin/Buyer.vue

@@ -0,0 +1,412 @@
+<template>
+	<div class="adminShop-wrap">
+		<div class="addShopBtn" @click="toShowAdd"><i class="el-icon-plus"></i><span>添加买家</span></div>
+		<div class="shopList-wrap">
+			<h5>买家信息</h5>
+	    <el-table
+		    :data="buyerInfo"
+		    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="address"
+		      label="邮寄地址"
+		      min-width="6">
+		    </el-table-column>
+		    <el-table-column label="操作" min-width="6">
+		      <template slot-scope="scope">
+		        <el-button
+		          size="mini"
+		          @click="toShowEdit(scope.row)">编辑</el-button>
+		        <el-button
+		          size="mini"
+		          @click="toDelete(scope.row.id)">删除</el-button>
+		        <el-button
+		          size="mini"
+		          @click="toShowCheck(scope.row)">查看</el-button>
+		      </template>
+		    </el-table-column>
+		  </el-table>
+		</div>
+		<el-dialog :title="dialogTitle" :visible.sync="dialogTableVisible" :show-close="false">
+      <div class="dialogheader">
+        <el-form label-position="right" label-width="80px">
+        	<el-form-item label="编号" v-show="dialogTitle=='查看买家'">
+            <el-input v-model="showItem.id" :disabled="dialogTitle=='查看买家'"></el-input>
+          </el-form-item>
+          <el-form-item label="买家昵称">
+            <el-input v-model="showItem.userName" :disabled="dialogTitle=='查看买家'"></el-input>
+          </el-form-item>
+          <el-form-item label="登陆账号">
+            <el-input v-model="showItem.name" :disabled="dialogTitle=='查看买家'"></el-input>
+          </el-form-item>
+          <el-form-item label="登陆密码">
+            <el-input v-model="showItem.password" :disabled="dialogTitle=='查看买家'"></el-input>
+          </el-form-item>
+          <el-form-item label="邮寄地址">
+            <el-input v-model="showItem.address" :disabled="dialogTitle=='查看买家'"></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="toAdd" v-show="dialogTitle=='添加买家'">提交</el-button>
+            <el-button type="primary" @click="toEdit" v-show="dialogTitle=='编辑买家'">提交</el-button>
+            <el-button @click="toCancel">取消</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-dialog>
+	</div>
+</template>
+
+<script>
+	export default{
+		data(){
+			return{
+				buyerInfo:[],
+				dialogTableVisible:false,
+				dialogTitle:"",
+				showItem:{
+					id:"",
+					userName:"",
+					name:"",
+					password:"",
+					address:""
+				}
+			}
+		},
+		mounted(){
+			this.getShopList();
+		},
+		methods:{
+			getShopList(){
+				this.axios.post(this.Api.getAccountList,{
+	        type:2
+	      }).then((res)=>{
+	      	this.buyerInfo=res.data;
+	      }).catch((err)=>{
+	        console.log("getShopList:"+err);
+	      });
+			},
+			filterTag(value, row) {
+        return row.label === value;
+      },
+      toShowAdd(){
+      	this.dialogTableVisible=true;
+      	this.dialogTitle="添加买家";
+      },
+      toShowEdit(obj){
+      	this.dialogTableVisible=true;
+      	this.dialogTitle="编辑买家";
+      	this.showItem.id=obj.id;
+      	this.showItem.userName=obj.userName;
+      	this.showItem.name=obj.loginId;
+      	this.showItem.password=obj.password;
+      	this.showItem.address=obj.address;
+      },
+      toShowCheck(obj){
+      	this.dialogTableVisible=true;
+      	this.dialogTitle="查看买家";
+      	this.showItem.id=obj.id;
+      	this.showItem.userName=obj.userName;
+      	this.showItem.name=obj.loginId;
+      	this.showItem.password=obj.password;
+      	this.showItem.address=obj.address;
+      },
+      toCancel(){
+      	this.dialogTableVisible=false;
+      	this.dialogTitle="";
+      	this.showItem={
+					id:"",
+					userName:"",
+					name:"",
+					password:"",
+					address:""
+				}
+      },
+      toAdd(){
+      	if(this.showItem.name==""||this.showItem.password==""||this.showItem.userName==""||this.showItem.address==""){
+      		this.$message.error('请填写完整信息');
+      		console.log(this.showItem)
+        	return;
+      	}
+      	let param={
+      		type:2,
+      		handle:"1",
+      		mess:{
+      			name:this.showItem.name,
+      			password:this.showItem.password,
+      			userName:this.showItem.userName,
+      			address:this.showItem.address,
+      		}
+      	}
+      	this.axios.post(this.Api.adminHandle,param).then((res)=>{
+      		console.log(res);
+      		if(res.data.code==200){
+      			this.$message({
+	            message: '添加成功',
+	            type: 'success'
+	          });
+	          this.toCancel();
+		      	this.getShopList();
+      		}
+	      }).catch((err)=>{
+	        console.log("toAdd:"+err);
+	      });
+      },
+      toEdit(){
+      	if(this.showItem.name==""||this.showItem.password==""||this.showItem.userName==""||this.showItem.address==""){
+      		this.$message.error('请填写完整信息');
+      		console.log(this.showItem)
+        	return;
+      	}
+      	let param={
+      		type:2,
+      		handle:"2",
+      		mess:{
+      			id:this.showItem.id,
+      			name:this.showItem.name,
+      			password:this.showItem.password,
+      			userName:this.showItem.userName,
+      			address:this.showItem.address,
+      		}
+      	}
+      	this.axios.post(this.Api.adminHandle,param).then((res)=>{
+      		console.log(res);
+      		if(res.data.code==200){
+      			this.$message({
+	            message: '编辑成功',
+	            type: 'success'
+	          });
+	          this.toCancel();
+		      	this.getShopList();
+      		}
+	      }).catch((err)=>{
+	        console.log("toEdit:"+err);
+	      });
+      },
+      toDelete(id){
+      	this.$confirm("确定将该买家删除吗？", '提示', {
+	        confirmButtonText: '确定',
+	        cancelButtonText: '取消',
+	        type: 'warning'
+	      }).then(() => {
+	      	let param={
+	      		type:2,
+	      		handle:"3",
+	      		mess:{
+	      			id:id,
+	      		}
+	      	}
+	        this.axios.post(this.Api.adminHandle,param).then((res)=>{
+	          console.log(res);
+	          if(res.data.code==200){
+	            this.$message({
+	              type: 'success',
+	              message: '删除成功!'
+	            });
+		      		this.getShopList();
+	          }else{
+	            this.$notify({
+	              title:'提示',
+	              message:'删除失败',
+	              type:'error',
+	            })
+	          }
+	        });
+	      }).catch(() => {
+	        this.$message({
+	          type: 'info',
+	          message: '已取消操作'
+	        });          
+	      })
+      },
+		}
+	}
+</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;
+	}
+
+	.el-dialog{
+    width: 500px;
+    /*height: 280px;*/
+    border-radius: 6px;
+    text-align: left;
+  }
+  .el-dialog__header{
+    padding: 20px 30px 0 40px;
+  }
+  .el-dialog__body{
+    padding: 20px 30px;
+  }
+  .dialogheader{
+    width: 100%;
+      /*height: 60px;*/
+      
+  }
+  .dialogheader p{
+    width: 360px;
+    height: 30px;
+    line-height: 30px;
+    margin-top: 10px;
+    border:1px solid #3eb983;
+    border-radius: 6px;
+    text-align: left;
+    padding-left: 10px;
+    margin-left: 60px; 
+  }
+  .dialogheader p input{
+  	height: 24px;
+    line-height: 24px;
+    border:0;
+    margin-left: 20px;
+  }
+  .dialogheader .button{
+    background: #3eb983;
+    color: #fff;
+    text-align: center;
+    margin-top: 40px;
+    cursor: pointer;
+  }
+  .dialogheader .el-button{
+    width: 173px;
+    padding: 10px 0;
+  }
+  .dialogheader .el-form-item{
+    margin-bottom: 15px;
+  }
+  .dialogheader .el-button+.el-button{
+    margin-left: 0;
+  }
+  .dialogheader .el-button--primary{
+    background-color: #3eb983;
+    border-color: #3eb983;
+  }
+  .dialogheader .el-button--primary:hover{
+    background-color: #3eb983;
+    border-color: #3eb983;
+  }
+  .dialogheader .el-button--default{
+    background-color: #bfcbd9;
+    color: #fff;
+  }
+  .dialogheader .el-button--default:hover{
+    background-color: #bfcbd9;
+    border-color: #bfcbd9;
+    color: #fff;
+  }
+
+  .el-message-box button{
+    display: inline-block;
+    float: right;
+  }
+  .el-message-box .el-message-box__btns{
+  	height: 61px;
+  }
+  .el-message-box .el-message-box__btns button:nth-child(1){
+    margin-left: 10px;
+  }
+	.el-message-box .el-message-box__btns .el-button--default{
+    background-color: #bfcbd9;
+    color: #fff;
+  }
+  .el-message-box .el-message-box__btns .el-button--default:hover{
+    background-color: #bfcbd9;
+    border-color: #bfcbd9;
+    color: #fff;
+  }
+  .el-message-box .el-message-box__btns .el-button--primary{
+    background-color: #3eb983;
+    border-color: #3eb983;
+  }
+  .el-message-box .el-message-box__btns .el-button--primary:hover{
+    background-color: #3eb983;
+    border-color: #3eb983;
+  }
+</style>

src/view/admin/Index.vue

@@ -14,21 +14,183 @@
 		<div class="handle-wrap">
 			<el-card class="box-card">
 				<h6>商家账号人数</h6>
-				<p>3</p>
-				<button>添加商家</button>
+				<p>{{shopLength}}</p>
+				<button @click="toShowAddShop">添加商家</button>
 			</el-card>
 			<el-card class="box-card handle-content">
 				<h6>买家账号人数</h6>
-				<p>3</p>
-				<button>添加买家</button>
+				<p>{{buyerLength}}</p>
+				<button @click="toShowAddBuyer">添加买家</button>
 			</el-card>
 		</div>
+		<el-dialog :title="dialogTitle" :visible.sync="dialogTableVisible" :show-close="false">
+      <div class="dialogheader">
+        <el-form label-position="right" label-width="80px">
+          <el-form-item label="店铺名称" v-show="dialogTitle=='添加商家'">
+            <el-input v-model="showItem.userName"></el-input>
+          </el-form-item>
+          <el-form-item label="买家昵称" v-show="dialogTitle=='添加买家'">
+            <el-input v-model="showItem.userName"></el-input>
+          </el-form-item>
+          <el-form-item label="登陆账号">
+            <el-input v-model="showItem.name"></el-input>
+          </el-form-item>
+          <el-form-item label="登陆密码">
+            <el-input v-model="showItem.password"></el-input>
+          </el-form-item>
+          <el-form-item label="店铺标签" v-show="dialogTitle=='添加商家'">
+            <el-select v-model="showItem.label" placeholder="请选择">
+					    <el-option
+					      v-for="item in shopTagList"
+					      :key="item.id"
+					      :label="item.text"
+					      :value="item.value">
+					    </el-option>
+					  </el-select>
+          </el-form-item>
+          <el-form-item label="邮寄地址" v-show="dialogTitle=='添加买家'">
+            <el-input v-model="showItem.address"></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="toAddShop" v-show="dialogTitle=='添加商家'">提交</el-button>
+            <el-button type="primary" @click="toAddBuyer" v-show="dialogTitle=='添加买家'">提交</el-button>
+            <el-button @click="toCancel">取消</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-dialog>
 	</div>
 </template>
 
 <script>
 	export default{
-
+		data(){
+			return{
+				shopLength:"",
+				buyerLength:"",
+				shopTagList:[],
+				dialogTableVisible:false,
+				dialogTitle:"",
+				showItem:{
+					id:"",
+					userName:"",
+					name:"",
+					password:"",
+					label:"",
+					address:"",
+				}
+			}
+		},
+		mounted(){
+			this.getShopList();
+			this.getBuyerList();
+			this.getShopTagList();
+		},
+		methods:{
+			getShopList(){
+				this.axios.post(this.Api.getAccountList,{
+	        type:1
+	      }).then((res)=>{
+	      	this.shopLength=res.data.length;
+	      }).catch((err)=>{
+	        console.log("getShopList:"+err);
+	      });
+			},
+			getBuyerList(){
+				this.axios.post(this.Api.getAccountList,{
+	        type:2
+	      }).then((res)=>{
+	      	this.buyerLength=res.data.length;
+	      }).catch((err)=>{
+	        console.log("getBuyerList:"+err);
+	      });
+			},
+			getShopTagList(){
+				this.axios.post(this.Api.getTagtList,{}).then((res)=>{
+	      	this.shopTagList=res.data;
+	      }).catch((err)=>{
+	        console.log("getShopTagList:"+err);
+	      });
+			},
+			toCancel(){
+      	this.dialogTableVisible=false;
+      	this.dialogTitle="";
+      	this.showItem={
+					id:"",
+					userName:"",
+					name:"",
+					password:"",
+					label:""
+				}
+      },
+			toShowAddShop(){
+      	this.dialogTableVisible=true;
+      	this.dialogTitle="添加商家";
+      },
+      toShowAddBuyer(){
+      	this.dialogTableVisible=true;
+      	this.dialogTitle="添加买家";
+      },
+      toAddShop(){
+      	if(this.showItem.name==""||this.showItem.password==""||this.showItem.userName==""||this.showItem.label==""){
+      		this.$message.error('请填写完整信息');
+      		console.log(this.showItem)
+        	return;
+      	}
+      	let param={
+      		type:1,
+      		handle:"1",
+      		mess:{
+      			name:this.showItem.name,
+      			password:this.showItem.password,
+      			userName:this.showItem.userName,
+      			label:this.showItem.label,
+      		}
+      	}
+      	this.axios.post(this.Api.adminHandle,param).then((res)=>{
+      		console.log(res);
+      		if(res.data.code==200){
+      			this.$message({
+	            message: '添加成功',
+	            type: 'success'
+	          });
+	          this.toCancel();
+		      	this.getShopList();
+      		}
+	      }).catch((err)=>{
+	        console.log("toAdd:"+err);
+	      });
+      },
+      toAddBuyer(){
+      	if(this.showItem.name==""||this.showItem.password==""||this.showItem.userName==""||this.showItem.address==""){
+      		this.$message.error('请填写完整信息');
+        	return;
+      	}
+      	let param={
+      		type:2,
+      		handle:"1",
+      		mess:{
+      			name:this.showItem.name,
+      			password:this.showItem.password,
+      			userName:this.showItem.userName,
+      			address:this.showItem.address,
+      		}
+      	}
+      	this.axios.post(this.Api.adminHandle,param).then((res)=>{
+      		console.log(res);
+      		if(res.data.code==200){
+      			this.$message({
+	            message: '添加成功',
+	            type: 'success'
+	          });
+	          this.toCancel();
+		      	this.getBuyerList();
+      		}
+	      }).catch((err)=>{
+	        console.log("toAdd:"+err);
+	      });
+      }
+		}
 	}
 </script>
 
@@ -114,4 +276,73 @@
 	.adminIndex-wrap .el-card__body{
 		padding: 0;
 	}
+
+	.el-dialog{
+    width: 500px;
+    /*height: 280px;*/
+    border-radius: 6px;
+    text-align: left;
+  }
+  .el-dialog__header{
+    padding: 20px 30px 0 40px;
+  }
+  .el-dialog__body{
+    padding: 20px 30px;
+  }
+  .dialogheader{
+    width: 100%;
+      /*height: 60px;*/
+      
+  }
+  .dialogheader p{
+    width: 360px;
+    height: 30px;
+    line-height: 30px;
+    margin-top: 10px;
+    border:1px solid #3eb983;
+    border-radius: 6px;
+    text-align: left;
+    padding-left: 10px;
+    margin-left: 60px; 
+  }
+  .dialogheader p input{
+  	height: 24px;
+    line-height: 24px;
+    border:0;
+    margin-left: 20px;
+  }
+  .dialogheader .button{
+    background: #3eb983;
+    color: #fff;
+    text-align: center;
+    margin-top: 40px;
+    cursor: pointer;
+  }
+  .dialogheader .el-button{
+    width: 173px;
+    padding: 10px 0;
+  }
+  .dialogheader .el-form-item{
+    margin-bottom: 15px;
+  }
+  .dialogheader .el-button+.el-button{
+    margin-left: 0;
+  }
+  .dialogheader .el-button--primary{
+    background-color: #3eb983;
+    border-color: #3eb983;
+  }
+  .dialogheader .el-button--primary:hover{
+    background-color: #3eb983;
+    border-color: #3eb983;
+  }
+  .dialogheader .el-button--default{
+    background-color: #bfcbd9;
+    color: #fff;
+  }
+  .dialogheader .el-button--default:hover{
+    background-color: #bfcbd9;
+    border-color: #bfcbd9;
+    color: #fff;
+  }
 </style>

src/view/admin/Shop.vue

@@ -1,30 +1,8 @@
 <template>
 	<div class="adminShop-wrap">
-		<div class="addShopBtn"><i class="el-icon-plus"></i><span>添加商家</span></div>
+		<div class="addShopBtn" @click="toShowAdd"><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
@@ -52,11 +30,6 @@
 		    <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"
@@ -71,17 +44,50 @@
 		      <template slot-scope="scope">
 		        <el-button
 		          size="mini"
-		          @click="">编辑</el-button>
+		          @click="toShowEdit(scope.row)">编辑</el-button>
 		        <el-button
 		          size="mini"
-		          @click="">删除</el-button>
+		          @click="toDelete(scope.row.id)">删除</el-button>
 		        <el-button
 		          size="mini"
-		          @click="">查看</el-button>
+		          @click="toShowCheck(scope.row)">查看</el-button>
 		      </template>
 		    </el-table-column>
 		  </el-table>
 		</div>
+		<el-dialog :title="dialogTitle" :visible.sync="dialogTableVisible" :show-close="false">
+      <div class="dialogheader">
+        <el-form label-position="right" label-width="80px">
+        	<el-form-item label="编号" v-show="dialogTitle=='查看商家'">
+            <el-input v-model="showItem.id" :disabled="dialogTitle=='查看商家'"></el-input>
+          </el-form-item>
+          <el-form-item label="店铺名称">
+            <el-input v-model="showItem.userName" :disabled="dialogTitle=='查看商家'"></el-input>
+          </el-form-item>
+          <el-form-item label="登陆账号">
+            <el-input v-model="showItem.name" :disabled="dialogTitle=='查看商家'"></el-input>
+          </el-form-item>
+          <el-form-item label="登陆密码">
+            <el-input v-model="showItem.password" :disabled="dialogTitle=='查看商家'"></el-input>
+          </el-form-item>
+          <el-form-item label="店铺标签">
+            <el-select v-model="showItem.label" placeholder="请选择" :disabled="dialogTitle=='查看商家'">
+					    <el-option
+					      v-for="item in shopTagList"
+					      :key="item.id"
+					      :label="item.text"
+					      :value="item.value">
+					    </el-option>
+					  </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="toAdd" v-show="dialogTitle=='添加商家'">提交</el-button>
+            <el-button type="primary" @click="toEdit" v-show="dialogTitle=='编辑商家'">提交</el-button>
+            <el-button @click="toCancel">取消</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-dialog>
 	</div>
 </template>
 
@@ -91,6 +97,15 @@
 			return{
 				shopInfo:[],
 				shopTagList:[],
+				dialogTableVisible:false,
+				dialogTitle:"",
+				showItem:{
+					id:"",
+					userName:"",
+					name:"",
+					password:"",
+					label:""
+				}
 			}
 		},
 		mounted(){
@@ -111,11 +126,141 @@
 				this.axios.post(this.Api.getTagtList,{}).then((res)=>{
 	      	this.shopTagList=res.data;
 	      }).catch((err)=>{
-	        console.log("getShopList:"+err);
+	        console.log("getShopTagList:"+err);
 	      });
 			},
 			filterTag(value, row) {
         return row.label === value;
+      },
+      toShowAdd(){
+      	this.dialogTableVisible=true;
+      	this.dialogTitle="添加商家";
+      },
+      toShowEdit(obj){
+      	this.dialogTableVisible=true;
+      	this.dialogTitle="编辑商家";
+      	this.showItem.id=obj.id;
+      	this.showItem.userName=obj.userName;
+      	this.showItem.name=obj.loginId;
+      	this.showItem.password=obj.password;
+      	this.showItem.label=obj.label;
+      },
+      toShowCheck(obj){
+      	this.dialogTableVisible=true;
+      	this.dialogTitle="查看商家";
+      	this.showItem.id=obj.id;
+      	this.showItem.userName=obj.userName;
+      	this.showItem.name=obj.loginId;
+      	this.showItem.password=obj.password;
+      	this.showItem.label=obj.label;
+      },
+      toCancel(){
+      	this.dialogTableVisible=false;
+      	this.dialogTitle="";
+      	this.showItem={
+					id:"",
+					userName:"",
+					name:"",
+					password:"",
+					label:""
+				}
+      },
+      toAdd(){
+      	if(this.showItem.name==""||this.showItem.password==""||this.showItem.userName==""||this.showItem.label==""){
+      		this.$message.error('请填写完整信息');
+      		console.log(this.showItem)
+        	return;
+      	}
+      	let param={
+      		type:1,
+      		handle:"1",
+      		mess:{
+      			name:this.showItem.name,
+      			password:this.showItem.password,
+      			userName:this.showItem.userName,
+      			label:this.showItem.label,
+      		}
+      	}
+      	this.axios.post(this.Api.adminHandle,param).then((res)=>{
+      		console.log(res);
+      		if(res.data.code==200){
+      			this.$message({
+	            message: '添加成功',
+	            type: 'success'
+	          });
+	          this.toCancel();
+		      	this.getShopList();
+      		}
+	      }).catch((err)=>{
+	        console.log("toAdd:"+err);
+	      });
+      },
+      toEdit(){
+      	if(this.showItem.name==""||this.showItem.password==""||this.showItem.userName==""||this.showItem.label==""){
+      		this.$message.error('请填写完整信息');
+      		console.log(this.showItem)
+        	return;
+      	}
+      	let param={
+      		type:1,
+      		handle:"2",
+      		mess:{
+      			id:this.showItem.id,
+      			name:this.showItem.name,
+      			password:this.showItem.password,
+      			userName:this.showItem.userName,
+      			label:this.showItem.label,
+      		}
+      	}
+      	this.axios.post(this.Api.adminHandle,param).then((res)=>{
+      		console.log(res);
+      		if(res.data.code==200){
+      			this.$message({
+	            message: '编辑成功',
+	            type: 'success'
+	          });
+	          this.toCancel();
+		      	this.getShopList();
+      		}
+	      }).catch((err)=>{
+	        console.log("toEdit:"+err);
+	      });
+      },
+      toDelete(id){
+      	this.$confirm("确定将该商家删除吗？", '提示', {
+	        confirmButtonText: '确定',
+	        cancelButtonText: '取消',
+	        type: 'warning'
+	      }).then(() => {
+	      	let param={
+	      		type:1,
+	      		handle:"3",
+	      		mess:{
+	      			id:id,
+	      		}
+	      	}
+	        this.axios.post(this.Api.adminHandle,param).then((res)=>{
+	          console.log(res);
+	          if(res.data.code==200){
+	            this.$message({
+	              type: 'success',
+	              message: '删除成功!'
+	            });
+		      		this.getShopList();
+	          }else{
+	            this.$notify({
+	              title:'提示',
+	              message:'删除失败',
+	              type:'error',
+	            })
+	          }
+	        });
+	      }).catch(() => {
+	        this.$message({
+	          type: 'info',
+	          message: '已取消操作'
+	        });          
+	      })
       },
 		}
 	}
@@ -191,4 +336,101 @@
 		background-color: #bcf2db;
 		text-align: center;
 	}
+
+	.el-dialog{
+    width: 500px;
+    /*height: 280px;*/
+    border-radius: 6px;
+    text-align: left;
+  }
+  .el-dialog__header{
+    padding: 20px 30px 0 40px;
+  }
+  .el-dialog__body{
+    padding: 20px 30px;
+  }
+  .dialogheader{
+    width: 100%;
+      /*height: 60px;*/
+      
+  }
+  .dialogheader p{
+    width: 360px;
+    height: 30px;
+    line-height: 30px;
+    margin-top: 10px;
+    border:1px solid #3eb983;
+    border-radius: 6px;
+    text-align: left;
+    padding-left: 10px;
+    margin-left: 60px; 
+  }
+  .dialogheader p input{
+  	height: 24px;
+    line-height: 24px;
+    border:0;
+    margin-left: 20px;
+  }
+  .dialogheader .button{
+    background: #3eb983;
+    color: #fff;
+    text-align: center;
+    margin-top: 40px;
+    cursor: pointer;
+  }
+  .dialogheader .el-button{
+    width: 173px;
+    padding: 10px 0;
+  }
+  .dialogheader .el-form-item{
+    margin-bottom: 15px;
+  }
+  .dialogheader .el-button+.el-button{
+    margin-left: 0;
+  }
+  .dialogheader .el-button--primary{
+    background-color: #3eb983;
+    border-color: #3eb983;
+  }
+  .dialogheader .el-button--primary:hover{
+    background-color: #3eb983;
+    border-color: #3eb983;
+  }
+  .dialogheader .el-button--default{
+    background-color: #bfcbd9;
+    color: #fff;
+  }
+  .dialogheader .el-button--default:hover{
+    background-color: #bfcbd9;
+    border-color: #bfcbd9;
+    color: #fff;
+  }
+
+  .el-message-box button{
+    display: inline-block;
+    float: right;
+  }
+  .el-message-box .el-message-box__btns{
+  	height: 61px;
+  }
+  .el-message-box .el-message-box__btns button:nth-child(1){
+    margin-left: 10px;
+  }
+	.el-message-box .el-message-box__btns .el-button--default{
+    background-color: #bfcbd9;
+    color: #fff;
+  }
+  .el-message-box .el-message-box__btns .el-button--default:hover{
+    background-color: #bfcbd9;
+    border-color: #bfcbd9;
+    color: #fff;
+  }
+  .el-message-box .el-message-box__btns .el-button--primary{
+    background-color: #3eb983;
+    border-color: #3eb983;
+  }
+  .el-message-box .el-message-box__btns .el-button--primary:hover{
+    background-color: #3eb983;
+    border-color: #3eb983;
+  }
 </style>