完成商家页面

src/api/config.js

@@ -12,4 +12,5 @@ export default{
 	changeTags:api+"/changeTags",//商家个性化元素管理
 	changeGoodBasicMess:api+"/changeGoodBasicMess",//商家修改商品基本信息
 	addGoodTags:api+"/addGoodTags",//商家添加个性化元素分类
+	addGood:api+"/addGood",//商家上架商品
 }

src/mock/index.js

@@ -7,7 +7,200 @@ 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/coverImg2.jpg",
+  			"title":"精美项链定制",
+  			"produce":"文艺简约，气质，森系，黄金，纯银，彩金，玫瑰金，吊坠，韩版，首饰礼物，锁骨链，学生，潮流白搭",
+  			"price":"￥119",
+  			"exampleImg":[
+  				{name:'exampleImg21.jpg',url:'../../../static/images/shop/exampleImg21.jpg'},
+  				{name:'exampleImg22.jpg',url:'../../../static/images/shop/exampleImg22.jpg'},
+  				{name:'exampleImg23.jpg',url:'../../../static/images/shop/exampleImg23.jpg'},
+  				{name:'exampleImg24.jpg',url:'../../../static/images/shop/exampleImg24.jpg'},
+  			],
+  			"tags":[//个性化元素列表
+  				{
+  					"id":0,
+  					"inputVisible":false,
+  					"type":"材质",
+  					"list":["黄金","白银","彩金","水晶","珍珠"]
+  				},
+  				{
+  					"id":1,
+  					"inputVisible":false,
+  					"type":"图形",
+  					"list":["比翼双飞","心心相印","长命百岁","合家欢乐","福运到","守护天使"]
+  				},
+  				{
+  					"id":2,
+  					"inputVisible":false,
+  					"type":"刻字",
+  					"list":["嘿，是我","小幸运","我是你爸爸","女神"]
+  				},
+  			],
+  			"commentsList":[
+  				{
+  					"text":"特别美妹妹很喜欢",
+  					"author":"和牙刷私奔叻丶"
+  				},
+  				{
+  					"text":"不咋地啊",
+  					"author":"夜凋凝"
+  				},
+  				{
+  					"text":"材质是真的",
+  					"author":"盛夏。"
+  				},
+  			]
+  		},
+  		{
+  			"id":"2",
+  			"coverImg":"../../../static/images/shop/coverImg3.jpg",
+  			"title":"戒指定制",
+  			"produce":"北极光系列，裸钻定制，钻石，纯银，个性，学生，生日礼物，求婚，订婚，创意，网红定制刻字，日韩潮流",
+  			"price":"￥749",
+  			"exampleImg":[
+  				{name:'exampleImg31.jpg',url:'../../../static/images/shop/exampleImg31.jpg'},
+  				{name:'exampleImg32.jpg',url:'../../../static/images/shop/exampleImg32.jpg'},
+  				{name:'exampleImg33.jpg',url:'../../../static/images/shop/exampleImg33.jpg'},
+  				{name:'exampleImg34.jpg',url:'../../../static/images/shop/exampleImg34.jpg'},
+  				{name:'exampleImg35.jpg',url:'../../../static/images/shop/exampleImg35.jpg'},
+  			],
+  			"tags":[//个性化元素列表
+  				{
+  					"id":0,
+  					"inputVisible":false,
+  					"type":"材质",
+  					"list":["黄金","白银","彩金","水晶","珍珠"]
+  				},
+  				{
+  					"id":1,
+  					"inputVisible":false,
+  					"type":"图形",
+  					"list":["比翼双飞","心心相印","长命百岁","合家欢乐","福运到","守护天使"]
+  				},
+  				{
+  					"id":2,
+  					"inputVisible":false,
+  					"type":"刻字",
+  					"list":["嘿，是我","小幸运","我是你爸爸","女神"]
+  				},
+  			],
+  			"commentsList":[
+  				{
+  					"text":"特别美妹妹很喜欢",
+  					"author":"和牙刷私奔叻丶"
+  				},
+  				{
+  					"text":"不咋地啊",
+  					"author":"夜凋凝"
+  				},
+  				{
+  					"text":"材质是真的",
+  					"author":"盛夏。"
+  				},
+  			]
+  		},
+  		{
+  			"id":"3",
+  			"coverImg":"../../../static/images/shop/coverImg4.jpg",
+  			"title":"手链定制",
+  			"produce":"手工定制，字母，激光，名字，纯手工饰品，时尚，韩版，个性，收藏，包邮",
+  			"price":"￥158",
+  			"exampleImg":[
+  				{name:'exampleImg41.jpg',url:'../../../static/images/shop/exampleImg41.jpg'},
+  				{name:'exampleImg42.jpg',url:'../../../static/images/shop/exampleImg42.jpg'},
+  				{name:'exampleImg43.jpg',url:'../../../static/images/shop/exampleImg43.jpg'},
+  				{name:'exampleImg44.jpg',url:'../../../static/images/shop/exampleImg44.jpg'},
+  			],
+  			"tags":[//个性化元素列表
+  				{
+  					"id":0,
+  					"inputVisible":false,
+  					"type":"材质",
+  					"list":["黄金","白银","彩金","水晶","珍珠"]
+  				},
+  				{
+  					"id":1,
+  					"inputVisible":false,
+  					"type":"图形",
+  					"list":["比翼双飞","心心相印","长命百岁","合家欢乐","福运到","守护天使"]
+  				},
+  				{
+  					"id":2,
+  					"inputVisible":false,
+  					"type":"刻字",
+  					"list":["嘿，是我","小幸运","我是你爸爸","女神"]
+  				},
+  			],
+  			"commentsList":[
+  				{
+  					"text":"特别美妹妹很喜欢",
+  					"author":"和牙刷私奔叻丶"
+  				},
+  				{
+  					"text":"不咋地啊",
+  					"author":"夜凋凝"
+  				},
+  				{
+  					"text":"材质是真的",
+  					"author":"盛夏。"
+  				},
+  			]
+  		},
+  		{
+  			"id":"4",
+  			"coverImg":"../../../static/images/shop/coverImg5.jpg",
+  			"title":"耳坠定制",
+  			"produce":"手工定制，字母，激光，名字，纯手工饰品，时尚，韩版，个性，收藏，包邮",
+  			"price":"￥138",
+  			"exampleImg":[
+  				{name:'exampleImg51.jpg',url:'../../../static/images/shop/exampleImg51.jpg'},
+  				{name:'exampleImg52.jpg',url:'../../../static/images/shop/exampleImg52.jpg'},
+  				{name:'exampleImg53.jpg',url:'../../../static/images/shop/exampleImg53.jpg'},
+  				{name:'exampleImg54.jpg',url:'../../../static/images/shop/exampleImg54.jpg'},
+  			],
+  			"tags":[//个性化元素列表
+  				{
+  					"id":0,
+  					"inputVisible":false,
+  					"type":"材质",
+  					"list":["黄金","白银","彩金","水晶","珍珠"]
+  				},
+  				{
+  					"id":1,
+  					"inputVisible":false,
+  					"type":"图形",
+  					"list":["比翼双飞","心心相印","长命百岁","合家欢乐","福运到","守护天使"]
+  				},
+  				{
+  					"id":2,
+  					"inputVisible":false,
+  					"type":"刻字",
+  					"list":["嘿，是我","小幸运","我是你爸爸","女神"]
+  				},
+  			],
+  			"commentsList":[
+  				{
+  					"text":"特别美妹妹很喜欢",
+  					"author":"和牙刷私奔叻丶"
+  				},
+  				{
+  					"text":"不咋地啊",
+  					"author":"夜凋凝"
+  				},
+  				{
+  					"text":"材质是真的",
+  					"author":"盛夏。"
+  				},
+  			]
+  		},
+  	]
+  },
+  	{"name":"shop2","password":"123","mess":{"id":2,"userName":"张兴邦食品旗舰店","loginId":"shop2","password":"123","label":"食品"},
   	"goodList":[
   		{
   			"id":"1",
@@ -46,12 +239,112 @@ var accountInfo=[//账号列表
   					"type":"干果类",
   					"list":["花生","瓜子","开心果","核桃仁","杏仁","榛子"]
   				},
+  			],
+  			"commentsList":[
+  				{
+  					"text":"太好吃啦太好吃啦太好吃啦太好吃啦太好吃啦太好吃啦太好吃啦太好吃啦太好吃啦太好吃啦太好吃啦太好吃啦太好吃啦太好吃啦太好吃啦太好吃啦太好吃啦太好吃啦太好吃啦太好吃啦",
+  					"author":"和牙刷私奔叻丶"
+  				},
+  				{
+  					"text":"不咋地",
+  					"author":"夜凋凝"
+  				}
+  			]
+  		},
+  	]
+  },
+  	{"name":"shop3","password":"123","mess":{"id":3,"userName":"帕霏原创女装","loginId":"shop3","password":"123","label":"服装"},
+  	"goodList":[
+  		{
+  			"id":"1",
+  			"coverImg":"../../../static/images/shop/coverImg6.jpg",//封面图片路径
+  			"title":"礼服定制",
+  			"produce":"定制，华丽，礼服，裙，个性，蓬蓬裙，性感",
+  			"price":"￥923.5",
+  			"exampleImg":[
+  				{name:'exampleImg61.jpg',url:'../../../static/images/shop/exampleImg61.jpg'},
+  				{name:'exampleImg62.jpg',url:'../../../static/images/shop/exampleImg62.jpg'},
+  				{name:'exampleImg63.jpg',url:'../../../static/images/shop/exampleImg63.jpg'},
+  				{name:'exampleImg64.jpg',url:'../../../static/images/shop/exampleImg64.jpg'},
+  				{name:'exampleImg65.jpg',url:'../../../static/images/shop/exampleImg65.jpg'},
+  			],//示例图片路径
+  			"tags":[//个性化元素列表
+  				{
+  					"id":0,
+  					"inputVisible":false,
+  					"type":"材质",
+  					"list":["羊毛","石棉","锦纶","涤纶","晴纶"]
+  				},
+  				{
+  					"id":1,
+  					"inputVisible":false,
+  					"type":"颜色",
+  					"list":["红色","黑色","白色","紫色","粉色","绿色"]
+  				},
+  				{
+  					"id":2,
+  					"inputVisible":false,
+  					"type":"风格",
+  					"list":["少女","尊贵","气质","时尚"]
+  				},
+  			],
+  			"commentsList":[
+  				{
+  					"text":"质量不错",
+  					"author":"和牙刷私奔叻丶"
+  				},
+  				{
+  					"text":"不咋地",
+  					"author":"夜凋凝"
+  				}
+  			]
+  		},
+  		{
+  			"id":"2",
+  			"coverImg":"../../../static/images/shop/coverImg7.jpg",//封面图片路径
+  			"title":"夏装个性定制",
+  			"produce":"定制，华丽，礼服，裙，个性，蓬蓬裙，性感",
+  			"price":"￥923.5",
+  			"exampleImg":[
+  				{name:'exampleImg61.jpg',url:'../../../static/images/shop/exampleImg61.jpg'},
+  				{name:'exampleImg62.jpg',url:'../../../static/images/shop/exampleImg62.jpg'},
+  				{name:'exampleImg63.jpg',url:'../../../static/images/shop/exampleImg63.jpg'},
+  				{name:'exampleImg64.jpg',url:'../../../static/images/shop/exampleImg64.jpg'},
+  				{name:'exampleImg65.jpg',url:'../../../static/images/shop/exampleImg65.jpg'},
+  			],//示例图片路径
+  			"tags":[//个性化元素列表
+  				{
+  					"id":0,
+  					"inputVisible":false,
+  					"type":"材质",
+  					"list":["羊毛","石棉","锦纶","涤纶","晴纶"]
+  				},
+  				{
+  					"id":1,
+  					"inputVisible":false,
+  					"type":"颜色",
+  					"list":["红色","黑色","白色","紫色","粉色","绿色"]
+  				},
+  				{
+  					"id":2,
+  					"inputVisible":false,
+  					"type":"风格",
+  					"list":["少女","尊贵","气质","时尚"]
+  				},
+  			],
+  			"commentsList":[
+  				{
+  					"text":"质量不错",
+  					"author":"和牙刷私奔叻丶"
+  				},
+  				{
+  					"text":"不咋地",
+  					"author":"夜凋凝"
+  				}
   			]
   		},
   	]
   },
-  	{"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":{"id":1,"userName":"和牙刷私奔叻丶","loginId":"buyer1","password":"123","address":"黑龙江省大庆市"}},
@@ -59,7 +352,7 @@ var accountInfo=[//账号列表
   	{"name":"buyer3","password":"123","mess":{"id":3,"userName":"盛夏。","loginId":"buyer3","password":"123","address":"四川省南充市"}},
   ],
 ];
-var shopTagList=[{id: 1, text: '食品', value: '食品' }, {id: 2, text: '艺术', value: '艺术' }, {id: 3, 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){
@@ -262,4 +555,21 @@ Mock.mock('http://www.Zhengy.com/api/addGoodTags',function(options){
 	accountInfo[1][index1].goodList[index2].tags.push(tag);
 	code=200;
 	return {code:code,tag:tag}
+})
+//商家上架商品
+Mock.mock('http://www.Zhengy.com/api/addGood',function(options){
+	var req = eval('('+options.body+')');
+	var code=201;
+	var index = accountInfo[1].findIndex((value,index,arr)=>{
+		return value.mess.id==req.shopId;
+	})
+	var good = req.good;
+	if(accountInfo[1][index].goodList.length==0){
+		good.id="1";
+	}else{
+		good.id=accountInfo[1][index].goodList[accountInfo[1][index].goodList.length-1].id+1;
+	}
+	accountInfo[1][index].goodList.push(good);
+	code=200;
+	return {code:code,goodlist:accountInfo[1][index].goodList}
 })

src/router/index.js

@@ -63,6 +63,12 @@ export default new Router({
             require(['../view/shop/Good.vue'], resolve)
           }
         },
+        {
+          path:'addGood',
+          component: function(resolve){
+            require(['../view/shop/AddGood.vue'], resolve)
+          }
+        },
       ]
     },
     {

src/store/store.js

@@ -4,7 +4,7 @@ import Vuex from 'vuex';
 Vue.use(Vuex);
 
 const state = {
-    userMess:{"id":1,"userName":"张兴邦食品旗舰店","loginId":"shop1","password":"123","label":"食品"}//登陆者信息
+    userMess:{"id":1,"userName":"和牙刷私奔叻丶","loginId":"buyer1","password":"123","address":"黑龙江省大庆市"}//登陆者信息
 }
 
 const mutations = {

src/view/shop/AddGood.vue

@@ -0,0 +1,456 @@
+<template>
+	<div class="addGood-wrap">
+		<div class="baseInfo-wrap">
+			<h5>基本信息</h5>
+			<el-form label-position="right" label-width="80px">
+				<div>
+					<el-form-item label="商品标题">
+	          <el-input v-model="title"></el-input>
+	        </el-form-item>
+	        <el-form-item label="商品价格">
+	          <el-input v-model="price"></el-input>
+	        </el-form-item>
+	        <el-form-item label="封面图片">
+	          <el-upload
+						  class="upload-demo"
+						  action="https://jsonplaceholder.typicode.com/posts/"
+						  :on-success="handleAvatarSuccess1"
+						  :on-remove="handleRemove1"
+						  :before-upload="beforeAvatarUpload"
+						  list-type="picture">
+						  <el-button size="small" type="primary">点击上传</el-button>
+						</el-upload>
+	        </el-form-item>
+				</div>
+				<div>
+					<el-form-item label="商品描述">
+	          <el-input type="textarea" v-model="produce"></el-input>
+	        </el-form-item>
+				</div>
+      </el-form>
+		</div>
+		<div class="personal-wrap">
+			<h5>个性化案例展示</h5>
+			<el-upload
+			  class="upload-demo"
+			  action="https://jsonplaceholder.typicode.com/posts/"
+			  :on-success="handleAvatarSuccess2"
+			  :on-remove="handleRemove2"
+			  list-type="picture">
+			  <el-button size="small" type="primary">点击上传</el-button>
+			</el-upload>
+			<h5>个性化元素管理</h5>
+			<div class="btn-wrap">
+				<el-button size="small" type="primary" @click="toShowAdd">点击添加</el-button>
+			</div>
+			<div v-for="item in tags" class="tags-content" :key="item.id">
+				<h6>{{item.type}}</h6>
+				<div>
+					<el-tag
+					  v-for="tag in item.list"
+					  :key="tag"
+					  closable
+					  :disable-transitions="false"
+					  @close="handleClose(tag,item.id)">
+					  {{tag}}
+					</el-tag>
+					<el-input
+					  class="input-new-tag"
+					  v-if="item.inputVisible"
+					  v-model="inputValue"
+					  :ref="item.type"
+					  size="small"
+					  @keyup.enter.native="handleInputConfirm(item.id)"
+					  @blur="handleInputConfirm(item.id)"
+					>
+					</el-input>
+					<el-button v-else class="button-new-tag" @click="showInput(item.id,item.type)">+ 添加新元素</el-button>
+				</div>
+			</div>
+		</div>
+		<el-button class="submitBtn" size="small" @click="toSubmit">确认上架该商品</el-button>
+		<el-dialog title="添加元素分类" :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.type"></el-input>
+          </el-form-item>
+          <el-form-item label="元素标签">
+            <el-tag
+						  v-for="tag in showItem.list"
+						  :key="tag"
+						  closable
+						  :disable-transitions="false"
+						  @close="handleClose(tag,-1)">
+						  {{tag}}
+						</el-tag>
+						<el-input
+						  class="input-new-tag"
+						  v-if="showItem.inputVisible"
+						  v-model="inputValue"
+						  ref="saveTagInput"
+						  size="small"
+						  @keyup.enter.native="handleInputConfirm(-1)"
+						  @blur="handleInputConfirm(-1)"
+						>
+						</el-input>
+						<el-button v-else class="button-new-tag" size="small" @click="showInput(-1,showItem.type)">+ 添加新元素</el-button>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="toAddGoodTags">提交</el-button>
+            <el-button @click="toCancel">取消</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-dialog>
+	</div>
+</template>
+
+<script>
+	export default{
+		data(){
+			return{
+				coverImg:"",
+				title:"",
+				produce:"",
+				price:"",
+				exampleImg:[],
+				tags:[],
+				commentsList:[],
+				inputVisible: false,
+        inputValue: '',
+        dialogTableVisible:false,
+        showItem:{
+        	type:"",
+        	list:[],
+        	inputVisible:false
+        },
+        
+			}
+		},
+		methods:{
+			handleAvatarSuccess1(res, file){
+      	this.coverImg=URL.createObjectURL(file.raw);
+      },
+      handleRemove1(file, fileList) {
+        this.coverImg="";
+      },
+      beforeAvatarUpload(file){
+      	if(this.coverImg!=""){
+      		this.$message.error('只能上传一张，若要修改请将上一张删除');
+      		return false;
+      	}
+      },
+      handleAvatarSuccess2(res, file){
+      	var imgObj={
+      		name:file.name,
+      		url:URL.createObjectURL(file.raw)
+      	}
+      	this.exampleImg.push(imgObj);
+      },
+      handleRemove2(file, fileList) {
+        var index = this.exampleImg.findIndex((value,index,arr)=>{
+					return value.name==file.name;
+				})
+				this.exampleImg.splice(index,1);
+      },
+      handleClose(tag,id) {
+      	if(id!=-1){
+      		this.tags[id].list.splice(this.tags[id].list.indexOf(tag), 1);
+	        
+      	}else{
+      		this.showItem.list.splice(this.showItem.list.indexOf(tag), 1);
+      	}
+      },
+      showInput(id,type) {
+      	if(id!=-1){
+      		this.tags[id].inputVisible = true;
+      		this.$nextTick(_ => {
+      			this.$refs[type][0].$refs.input.focus();
+	        });
+      	}else{
+      		this.showItem.inputVisible = true;
+      		this.$nextTick(_ => {
+	        	this.$refs.saveTagInput.$refs.input.focus();
+	        });
+      	}
+        
+      },
+      handleInputConfirm(id) {
+        let inputValue = this.inputValue;
+        if (inputValue&&id!=-1) {
+          this.tags[id].list.push(inputValue);
+          this.tags[id].inputVisible = false;
+        }else if(inputValue&&id==-1){
+        	this.showItem.list.push(inputValue);
+        	this.showItem.inputVisible = false;
+        }else if(inputValue==""&&id!=-1){
+        	this.tags[id].inputVisible = false;
+        }else if(inputValue==""&&id==-1){
+        	this.showItem.inputVisible = false;
+        }
+        this.inputValue = '';
+      },
+      toCancel(){
+      	this.dialogTableVisible=false;
+      	this.dialogTitle="";
+      	this.showItem={
+        	type:"",
+        	list:[],
+        	inputVisible:false
+				}
+      },
+      toShowAdd(){
+      	this.dialogTableVisible=true;
+      },
+      toAddGoodTags(){
+      	if(this.showItem.type==""||this.showItem.list.length==0){
+      		this.$message.error('请填写完整信息');
+      		return;
+      	}
+      	var id=0;
+      	if(this.tags.length==0){
+      		id=0;
+      	}else{
+      		id=this.tags[this.tags.length-1].id+1;
+      	}
+      	var tag={
+      		id:id,
+      		inputVisible:false,
+      		type:this.showItem.type,
+      		list:this.showItem.list
+      	}
+      	this.tags.push(tag);
+      	this.toCancel()
+      },
+      toSubmit(){
+      	if(this.coverImg==""||this.title==""||this.produce==""||this.price==""||this.exampleImg.length==0||this.tags.length==0){
+      		this.$message.error('请填写完整信息');
+      		return;
+      	}
+      	let param = {
+					shopId:this.$store.state.userMess.id,
+					good:{
+						coverImg:this.coverImg,
+						title:this.title,
+						produce:this.produce,
+						price:this.price,
+						exampleImg:this.exampleImg,
+						tags:this.tags,
+						commentsList:this.commentsList
+					}
+				}
+				this.axios.post(this.Api.addGood,param).then((res)=>{
+	      	console.log(res)
+	      	if(res.data.code==200){
+	      		this.$router.push({path: '/shop/goodList'});
+	      	}
+	      }).catch((err)=>{
+	        console.log("toSubmit:"+err);
+	      });
+      }
+		}
+	}
+</script>
+
+<style scoped>
+	.addGood-wrap{
+		width: 100%;
+		padding: 0 20px;
+	}
+	.baseInfo-wrap{
+		width: 100%;
+		height: 360px;
+		margin-top: 20px;
+		background-color: #fff;
+		border-left: 6px solid #3eb983;
+		padding: 0 20px 20px 13px;
+	}
+	.baseInfo-wrap h5{
+		height: 50px;
+		line-height: 50px;
+		text-align: left;
+		padding-left: 14px;
+		font-size: 16px;
+		border-bottom: 1px solid #eee;
+		font-weight: bolder;
+	}
+	.personal-wrap{
+		width: 100%;
+		height: auto;
+		padding: 20px;
+		margin-top: 20px;
+		background-color: #fff;
+	}
+	.personal-wrap h5{
+		height: 50px;
+		line-height: 50px;
+		text-align: left;
+		padding-left: 14px;
+		border-left: 6px solid #3eb983;
+		font-size: 16px;
+		border-bottom: 1px solid #eee;
+		margin-top: 15px;
+		font-weight: bolder;
+	}
+	.btn-wrap{
+		width: 100%;
+		text-align: left;
+		padding-top: 10px;
+	}
+	.tags-content{
+		width: 100%;
+		text-align: left;
+	}
+	.tags-content h6{
+		font-size: 16px;
+		line-height: 40px;
+	}
+
+	.el-tag + .el-tag {
+    margin-left: 10px;
+  }
+  .button-new-tag {
+    margin-left: 10px;
+    height: 32px;
+    line-height: 30px;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  .input-new-tag {
+    width: 90px;
+    margin-left: 10px;
+    vertical-align: bottom;
+  }
+
+  .submitBtn{
+  	background-color: #3eb983;
+    border-color: #3eb983;
+    color: #fff;
+    padding: 15px 30px;
+    font-size: 16px;
+    margin-top: 10px;
+  }
+</style>
+
+<style>
+	.el-form{
+		display: flex;
+		justify-content: space-around;
+		flex-wrap: wrap;
+		margin-top: 20px;
+	}
+	.el-form div{
+		width: 400px;
+		padding-right: 80px;
+		box-sizing: content-box;
+	}
+	.el-upload-list{
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+	}
+	.el-upload-list li{
+		width: 300px;
+	}
+	.el-upload {
+    width: 100%;
+    text-align: left;
+    padding-top: 10px;
+	}
+	.el-button--primary {
+    background-color: #3eb983;
+    border-color: #3eb983;
+	}
+	.el-button--primary:hover{
+		background-color: #3eb983;
+		border-color: #3eb983;
+	}
+</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;
+  }
+  .dialogheader .button-new-tag{
+  	width: auto;
+  	background-color: #fff;
+  	color: #606266;
+  	margin-left: 0;
+    height: 32px;
+    line-height: 30px;
+    padding: 9px 15px;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  .dialogheader .button-new-tag:hover{
+  	color: #409EFF;
+  	background-color: rgba(64,158,255,.1);
+  	border: 1px solid rgba(64,158,255,.2);
+  }
+</style>

src/view/shop/Good.vue

@@ -52,7 +52,15 @@
 					</div>
 	    	</div>
 	    </el-tab-pane>
-	    <el-tab-pane label="商品评价" name="goodEvaluate">配置管理</el-tab-pane>
+	    <el-tab-pane label="商品评价" name="goodEvaluate">
+	    	<ul class="comments-wrap">
+	    		<li v-for="comment in goodMess.commentsList">
+	    			<p>{{comment.text}}</p>
+	    			<span>{{comment.author}}</span>
+	    			<div></div>
+	    		</li>
+	    	</ul>
+	    </el-tab-pane>
 	  </el-tabs>
 	  <el-dialog :title="dialogTitle" :visible.sync="dialogTableVisible" :show-close="false">
       <div class="dialogheader">
@@ -216,6 +224,10 @@
 		      this.tagList[id].inputVisible = false;
         }else if(inputValue&&id==-1){
         	this.showItem.list.push(inputValue);
+        	this.showItem.inputVisible = false
+        }else if(inputValue==""&&id!=-1){
+        	this.tagList[id].inputVisible = false;
+        }else if(inputValue==""&&id==-1){
         	this.showItem.inputVisible = false;
         }
         this.inputValue = '';
@@ -316,6 +328,7 @@
 		display: block;
 		float: left;
 		width: 260px;
+		height: 260px;
 	}
 	.baseInfo-wrap div{
 		float: left;
@@ -393,6 +406,32 @@
     margin-left: 10px;
     vertical-align: bottom;
   }
+  .comments-wrap{
+  	width: 100%;
+  }
+  .comments-wrap li{
+  	width: 100%;
+  	height: auto;
+  	border-bottom: 1px solid #eee;
+  }
+  .comments-wrap div{
+  	width: 100%;
+  	height: auto;
+  	clear: both;
+  }
+  .comments-wrap p{
+  	width: calc(100% - 200px);
+  	float: left;
+  	text-align: left;
+  	line-height: 30px;
+  	padding: 5px 0 5px 10px;
+  }
+  .comments-wrap span{
+  	display: block;
+  	width: 200px;
+  	float: left;
+  	line-height: 40px;
+  }
 </style>
 
 <style>

src/view/shop/GoodList.vue

@@ -52,6 +52,7 @@
 	}
 	.goodList-content img{
 		width: 100%;
+		height: 300px;
 		display: block;
 	}
 	.goodList-mess{

src/view/shop/Shop.vue

@@ -18,7 +18,7 @@
 			              <router-link to="/shop/goodList">已上架商品</router-link>
 			            </el-menu-item>
 			            <el-menu-item index="2-2">
-			              <router-link to="/shop/index">添加商品</router-link>
+			              <router-link to="/shop/addGood">添加商品</router-link>
 			            </el-menu-item>
 			          </el-menu-item-group>
 			        </el-submenu>