完成商家页面首页和商品列表获取及跳转到某商品编辑信息页面

src/api/config.js

@@ -6,4 +6,6 @@ export default{
 	getTagtList:api+"/getTagtList",//获取商家标签列表
 	getAccountList:api+"/getAccountList",//管理员获取账号列表
 	adminHandle:api+"/adminHandle",//管理员的增删改查操作
+	getGoodList:api+"/getGoodList",//商家获取店铺下商品列表
+	getGoodMess:api+"/getGoodMess",//商家获取某商品详细信息
 }

src/components/Login.vue

@@ -79,9 +79,9 @@ export default {
           if(this.form.radio=='0'){
             this.$router.push({path: '/admin/index'});
           }else if(this.form.radio=='1'){
-            this.$router.push({path: '/shop'});
+            this.$router.push({path: '/shop/index'});
           }else{
-            this.$router.push({path: '/buyer'});
+            this.$router.push({path: '/buyer/index'});
           }
         }else{
           this.showText('密码输入错误，请重新输入');

src/mock/index.js

@@ -7,7 +7,24 @@ 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":"shop1","password":"123","mess":{"id":1,"userName":"张兴邦食品旗舰店","loginId":"shop1","password":"123","label":"食品"},
+  	"goodList":[
+  		{
+  			"id":"1",
+  			"coverImg":"../../../static/images/shop/coverImg1.jpg",//封面图片路径
+  			"title":"零食大礼包",
+  			"produce":"超多零食，送女友，超大一箱，多种类自选，小吃组合，散装混合批发，超级划算，性价比高，良心推荐，加量不加价",
+  			"price":"￥23.5",
+  			"exampleImg":"",//示例图片路径
+  			"tags":[//个性化元素列表
+  				{
+  					"type":"",
+  					"list":[""]
+  				}
+  			]
+  		},
+  	]
+  },
   	{"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":"服装"}},
   ],
@@ -56,6 +73,7 @@ Mock.mock('http://www.Zhengy.com/api/getAccountList',function(options){
 Mock.mock('http://www.Zhengy.com/api/adminHandle',function(options){
 	var req = eval('('+options.body+')');
 	var code = 201;
+	var afterEdit = {};
 	switch(req.handle){
 		case "1"://添加账号
 			if(req.type==1){//商家账号
@@ -114,6 +132,7 @@ Mock.mock('http://www.Zhengy.com/api/adminHandle',function(options){
 				}
 				code=200;
 			}
+			afterEdit=accountInfo[req.type][index];
 			break;
 		default://删除账号
 			var index=accountInfo[req.type].findIndex((value,index,arr)=>{
@@ -122,6 +141,28 @@ Mock.mock('http://www.Zhengy.com/api/adminHandle',function(options){
 			accountInfo[req.type].splice(index,1);
 			code=200;
 	}
-	return {"code":code};
+	return {"code":code,"afterEdit":afterEdit};
 })
 
+//商家页面
+//商家获取已上架商品列表
+Mock.mock('http://www.Zhengy.com/api/getGoodList',function(options){
+	var req = eval('('+options.body+')');
+	var index = accountInfo[1].findIndex((value,index,arr)=>{
+		return value.mess.id==req.id;
+	})
+	var res = accountInfo[1][index].goodList;
+	return res;
+})
+//商家获取某商品详细信息
+Mock.mock('http://www.Zhengy.com/api/getGoodMess',function(options){
+	var req = eval('('+options.body+')');
+	var index1 = accountInfo[1].findIndex((value,index,arr)=>{
+		return value.mess.id==req.shopId;
+	})
+	var index2 = accountInfo[1][index1].goodList.findIndex((value,index,arr)=>{
+		return value.id==req.goodId;
+	})
+	var res = accountInfo[1][index1].goodList[index2];
+	return res;
+})

src/router/index.js

@@ -43,7 +43,27 @@ export default new Router({
     },
     {
     	path: '/shop',
-    	component: Shop
+    	component: Shop,
+      children: [
+        {
+          path:'index',
+          component: function(resolve){
+            require(['../view/shop/Index.vue'], resolve)
+          }
+        },
+        {
+          path:'goodList',
+          component: function(resolve){
+            require(['../view/shop/GoodList.vue'], resolve)
+          }
+        },
+        {
+          path:'good/:id',
+          component: function(resolve){
+            require(['../view/shop/Good.vue'], resolve)
+          }
+        },
+      ]
     },
     {
     	path: '/buyer',

src/store/store.js

@@ -4,7 +4,7 @@ import Vuex from 'vuex';
 Vue.use(Vuex);
 
 const state = {
-    userMess:{}//登陆者信息
+    userMess:{"id":1,"userName":"张兴邦食品旗舰店","loginId":"shop1","password":"123","label":"食品"}//登陆者信息
 }
 
 const mutations = {

src/view/shop/GoodList.vue

@@ -0,0 +1,76 @@
+<template>
+	<div class="shopGoodList-wrap">
+		<el-card :body-style="{ padding: '0px' }" v-for="item in goodList" class="goodList-content" :key="item.id">
+      <img :src="item.coverImg">
+      <div class="goodList-mess">
+        <h5>{{item.title}}</h5>
+        <div class="bottom clearfix">
+          <span class="time">{{item.price}}</span>
+          <router-link :to="'/shop/good/:'+item.id">进入编辑</router-link>
+        </div>
+      </div>
+    </el-card>
+	</div>
+</template>
+
+<script>
+	export default{
+		data(){
+			return{
+				goodList:[],
+			}
+		},
+		mounted(){
+			this.getGoodList();
+		},
+		methods:{
+			getGoodList(){
+				this.axios.post(this.Api.getGoodList,{id:this.$store.state.userMess.id}).then((res)=>{
+	      	this.goodList=res.data;
+	      }).catch((err)=>{
+	        console.log("getShopTagList:"+err);
+	      });
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.shopGoodList-wrap{
+		width: calc(100% - 40px);
+		background-color: #fff;
+		margin: 20px auto;
+		padding: 20px 20px 0;
+		display: flex;
+		justify-content: space-between;
+		flex-wrap: wrap;
+	}
+	.goodList-content{
+		width: 300px;
+		height: auto;
+		margin-bottom: 20px;
+	}
+	.goodList-content img{
+		width: 100%;
+		display: block;
+	}
+	.goodList-mess{
+		width: 100%;
+		padding: 10px;
+		text-align: left;
+	}
+	.goodList-mess h5{
+		font-size: 16px;
+	}
+	.goodList-mess span{
+		font-size: 30px;
+		color: #EA6A69;
+		line-height: 65px;
+	}
+	.goodList-mess a{
+		float: right;
+		line-height: 65px;
+		color: #409eff;
+		font-size: 14px;
+	}
+</style>

src/view/shop/Index.vue

@@ -0,0 +1,245 @@
+<template>
+	<div class="shopIndex-wrap">
+		<div class="mess-wrap">
+			<div class="mess-title">
+				<h5>您好！{{$store.state.userMess.userName}}店铺</h5>
+				<el-button @click="toShowEditShop">修改店铺信息</el-button>
+			</div>
+			<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>
+					<p>店铺标签：{{$store.state.userMess.label}}</p>
+				</div>
+			</div>
+		</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="店铺名称">
+            <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="店铺标签">
+            <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>
+            <el-button type="primary" @click="toEditShop">确认修改</el-button>
+            <el-button @click="toCancel">取消</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-dialog>
+	</div>
+</template>
+
+<script>
+	export default{
+		data(){
+			return{
+				shopTagList:[],
+				dialogTableVisible:false,
+				dialogTitle:"",
+				showItem:{
+					id:"",
+					userName:"",
+					name:"",
+					password:"",
+					label:"",
+					address:"",
+				}
+			}
+		},
+		mounted(){
+			this.getShopTagList();
+		},
+		methods:{
+			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:""
+				}
+      },
+      toShowEditShop(){
+      	this.dialogTableVisible=true;
+      	this.dialogTitle="修改信息";
+      	this.showItem.id=this.$store.state.userMess.id;
+      	this.showItem.userName=this.$store.state.userMess.userName;
+      	this.showItem.name=this.$store.state.userMess.loginId;
+      	this.showItem.password=this.$store.state.userMess.password;
+      	this.showItem.label=this.$store.state.userMess.label;
+      },
+      toEditShop(){
+      	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:this.showItem
+      	}
+      	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.$store.commit('login',{userMess:res.data.afterEdit.mess});
+      		}
+	      }).catch((err)=>{
+	        console.log("toEditShop:"+err);
+	      });
+      }
+		}
+	}
+</script>
+
+<style scoped>
+	.shopIndex-wrap{
+		width: 100%;
+		padding: 0 20px;
+	}
+	.mess-title{
+		width: 100%;
+		padding: 0 20px;
+		text-align: left;
+	}
+	.mess-title h5{
+		font-size: 18px;
+		line-height: 35px;
+		display: inline-block;
+	}
+	.mess-title button{
+		float: right;
+	}
+	.mess-title .el-button{
+		padding: 8px 16px;
+		margin-top: 5px;
+	}
+	.shopIndex-wrap .mess-wrap{
+		width: 100%;
+		height: 185px;
+		margin-top: 20px;
+		background-color: #fff;
+		border-left: 6px solid #3eb983;
+	}
+	.shopIndex-wrap .mess-wrap img{
+		width: 110px;
+		height: 110px;
+		display: block;
+		float: left;
+		margin: 15px 20px 15px;
+	}
+	.shopIndex-wrap .mess-content{
+		width: calc(100% - 150px);
+		height: 100%;
+		float: left;
+		margin-top: 5px;
+	}
+	.shopIndex-wrap .mess-content p{
+		text-align: left;
+		font-size: 16px;
+		line-height: 35px;
+	}
+</style>
+
+<style>
+	.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/shop/Shop.vue

@@ -1,5 +1,43 @@
 <template>
-
+	<div class="admin-wrap">
+		<el-container>
+		  <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="/shop/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="/shop/goodList">已上架商品</router-link>
+			            </el-menu-item>
+			            <el-menu-item index="2-2">
+			              <router-link to="/shop/index">添加商品</router-link>
+			            </el-menu-item>
+			          </el-menu-item-group>
+			        </el-submenu>
+			      </el-menu>
+			    </el-col>
+			  </el-row>
+		  </el-aside>
+		  <el-main>
+		  	<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>
 </template>
 
 <script>
@@ -7,5 +45,111 @@
 </script>
 
 <style scoped>
-	
+	.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>