完成买家页面

src/view/buyer/Good.vue

@@ -0,0 +1,336 @@
+<template>
+	<div class="good-wrap">
+		<div class="baseInfo-wrap">
+			<img :src="goodMess.coverImg" />
+			<div>
+				<h5>{{goodMess.title}}</h5>
+				<p>{{goodMess.produce}}</p>
+				<span>{{goodMess.price}}</span>
+				<el-button @click="toBuy">立即购买</el-button>
+			</div>
+		</div>
+		<el-tabs v-model="activeName">
+	    <el-tab-pane label="商品信息" name="goodMess">
+	    	<div class="tags-wrap">
+	    		<h5>个性化案例展示</h5>
+	    		<div class="caseShow-wrap">
+	    			<el-carousel :interval="4000" type="card" height="300px">
+					    <el-carousel-item v-for="(item,index) in fileList" :key="index">
+					      <img :src="item.url" />
+					    </el-carousel-item>
+					  </el-carousel>
+	    		</div>
+	    		<h5>个性化元素</h5>
+	    		<div v-for="(item,index) in tagList" class="tags-content" :key="index">
+	    			<h6>{{item.type}}</h6>
+	    			<div>
+	    				<el-tag v-for="(tag,index) in item.list" :key="index">{{tag.name}}</el-tag>
+	    			</div>
+	    		</div>
+	    	</div>
+	    </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>
+	</div>
+</template>
+
+<script>
+	export default{
+		data(){
+			return{
+				goodMess:{},
+				activeName:"goodMess",
+				fileList:[],
+				tagList:[],
+			}
+		},
+		mounted(){
+			this.getGoodMess();
+		},
+		methods:{
+			getGoodMess(){
+				let param = {
+					shopId:this.$route.query.shopId,
+					goodId:this.$route.query.id
+				}
+				this.axios.post(this.Api.getGoodMess,param).then((res)=>{
+	      	this.goodMess=res.data;
+	      	this.fileList=res.data.exampleImg;
+	      	this.tagList=res.data.tags;
+	      }).catch((err)=>{
+	        console.log("getGoodMess:"+err);
+	      });
+			},
+			toBuy(){
+				this.$router.push({
+          path: '/buyer/toBuy',
+          query: {
+            id: this.$route.query.id,
+            shopId: this.$route.query.shopId
+          }
+        })
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.good-wrap{
+		width: 100%;
+		padding: 0 20px;
+	}
+	.baseInfo-wrap{
+		width: 100%;
+		height: 300px;
+		margin-top: 20px;
+		background-color: #fff;
+		border-left: 6px solid #3eb983;
+		padding: 20px 20px 20px 13px;
+	}
+	.baseInfo-wrap img{
+		display: block;
+		float: left;
+		width: 260px;
+		height: 260px;
+	}
+	.baseInfo-wrap div{
+		float: left;
+		padding-left: 20px;
+		text-align: left;
+		width: calc(100% - 260px);
+	}
+	.baseInfo-wrap h5{
+		font-size: 30px;
+		margin-bottom: 10px;
+	}
+	.baseInfo-wrap p{
+		font-size: 16px;
+		color: #666;
+		width: 100%;
+		height: 100px;
+	}
+	.baseInfo-wrap span{
+		font-size: 30px;
+		color: #EA6A69;
+		line-height: 65px;
+		display: block;
+	}
+	.baseInfo-wrap button{
+		float: right;
+	}
+
+	.el-tabs{
+		background-color: #fff;
+		margin-top: 20px;
+		padding: 20px;
+	}
+
+	.tags-wrap{
+		width: 100%;
+		height: auto;
+	}
+	.tags-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;
+	}
+	.tags-wrap .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;
+  }
+  .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;
+  }
+
+  .caseShow-wrap{
+  	width: 1000px;
+  	height: auto;
+  	margin: 20px auto 0;
+  }
+  .el-carousel img{
+		width: 100%;
+		height: 100%;
+  }
+</style>
+
+<style>
+	.el-tabs__item.is-active{
+		color: #3eb983;
+	}
+	.el-tabs__active-bar{
+		background-color: #3eb983;
+	}
+	.el-tabs__header{
+		margin: 0;
+	}
+	.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/buyer/GoodList.vue

@@ -0,0 +1,87 @@
+<template>
+	<div class="shopGoodList-wrap">
+		<el-card :body-style="{ padding: '0px' }" v-for="(item,index) in goodList" class="goodList-content" :key="index">
+      <img :src="item.coverImg">
+      <div class="goodList-mess">
+        <h5>{{item.title}}</h5>
+        <div>
+          <span>{{item.price}}</span>
+          <span class="link" @click="toEdit(item.id,item.shopId)">查看详情</span>
+        </div>
+      </div>
+    </el-card>
+	</div>
+</template>
+
+<script>
+	export default{
+		data(){
+			return{
+				goodList:[],
+			}
+		},
+		mounted(){
+			this.getGoodList();
+		},
+		methods:{
+			getGoodList(){
+				this.axios.post(this.Api.getGoodList,{type:'1'}).then((res)=>{
+	      	this.goodList=res.data;
+	      }).catch((err)=>{
+	        console.log("getShopTagList:"+err);
+	      });
+			},
+			toEdit(id,shopId){
+				this.$router.push({
+          path: '/buyer/good',
+          query: {
+            id: id,
+            shopId: shopId
+          }
+        })
+			}
+		}
+	}
+</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%;
+		height: 300px;
+		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 span.link{
+		float: right;
+		line-height: 65px;
+		color: #409eff;
+		font-size: 14px;
+		cursor: pointer;
+	}
+</style>

src/view/buyer/Index.vue

@@ -0,0 +1,229 @@
+<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.address}}</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-input v-model="showItem.address"></el-input>
+          </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{
+				dialogTableVisible:false,
+				dialogTitle:"",
+				showItem:{
+					id:"",
+					userName:"",
+					name:"",
+					password:"",
+					label:"",
+					address:"",
+				}
+			}
+		},
+		mounted(){
+		},
+		methods:{
+			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.address=this.$store.state.userMess.address;
+      },
+      toEditShop(){
+      	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: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/buyer/Order.vue

@@ -0,0 +1,175 @@
+<template>
+	<div class="toBuy-wrap">
+		<div class="baseInfo-wrap">
+			<img :src="$route.query.coverImg" />
+			<div>
+				<h5>{{$route.query.title}}</h5>
+				<p>{{$route.query.produce}}</p>
+				<span>{{$route.query.price}}</span>
+			</div>
+		</div>
+		<div class="flow-wrap">
+			<el-steps :active="active" finish-status="success">
+			  <el-step title="订单选择"></el-step>
+			  <el-step title="确认支付"></el-step>
+			  <el-step title="订单完成"></el-step>
+			</el-steps>
+			<div class="flow-content orderCompletion">
+				<img src="../../assets/images/admin/complate.png" />
+				<p>订单已完成！可在“我的订单”中查看</p>
+				<el-button class="confrimBtn price" @click="toShow" v-show="active==2">立即评价</el-button>
+			</div>
+		</div>
+		<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 type="textarea" v-model="evaluate"></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="toSubmitEvaluation">提交</el-button>
+            <el-button @click="toCancel">取消</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-dialog>
+	</div>
+</template>
+
+<script>
+	export default{
+		data(){
+			return{
+				active: 0,
+				dialogTableVisible:false,
+				evaluate:"",
+			}
+		},
+		mounted(){
+			this.getGoodMess();
+		},
+		methods:{
+			getGoodMess(){
+				if(this.$route.query.evaluate==""){
+					this.active=2;
+				}else{
+					this.active=3;
+				}
+			},
+			next() {
+        if (this.active++ > 2) this.active = 0;
+      },
+      toCancel(){
+      	this.dialogTableVisible=false;
+      	this.evaluate="";
+      },
+      toShow(){
+      	this.dialogTableVisible=true;
+      },
+      toSubmitEvaluation(){
+      	if(this.evaluate==""){
+      		this.$message.error('请输入评价内容');
+      		return;
+      	}
+      	let param={
+      		buyerId:this.$store.state.userMess.id,
+      		shopId:this.$route.query.shopId,
+					goodId:this.$route.query.goodId,
+					id:this.$route.query.id,
+					comment:this.evaluate
+      	}
+      	this.axios.post(this.Api.submitEvaluation,param).then((res)=>{
+	      	console.log(res.data)
+	      	if(res.data.code==200){
+	      		this.next();
+	      		this.toCancel();
+	      	}
+	      }).catch((err)=>{
+	        console.log("toSubmitEvaluation:"+err);
+	      });
+      }
+		}
+	}
+</script>
+
+<style scoped>
+	.toBuy-wrap{
+		width: 100%;
+		padding: 0 20px;
+	}
+	.baseInfo-wrap{
+		width: 100%;
+		height: 300px;
+		margin-top: 20px;
+		background-color: #fff;
+		border-left: 6px solid #3eb983;
+		padding: 20px 20px 20px 13px;
+	}
+	.baseInfo-wrap img{
+		display: block;
+		float: left;
+		width: 260px;
+		height: 260px;
+	}
+	.baseInfo-wrap div{
+		float: left;
+		padding-left: 20px;
+		text-align: left;
+		width: calc(100% - 260px);
+	}
+	.baseInfo-wrap h5{
+		font-size: 30px;
+		margin-bottom: 10px;
+	}
+	.baseInfo-wrap p{
+		font-size: 16px;
+		color: #666;
+		width: 100%;
+		height: 100px;
+	}
+	.baseInfo-wrap span{
+		font-size: 30px;
+		color: #EA6A69;
+		line-height: 65px;
+		display: block;
+	}
+
+	.flow-wrap{
+		width: 100%;
+		height: auto;
+		margin-top: 20px;
+		background-color: #fff;
+		padding: 20px;
+	}
+	.flow-content{
+		width: 600px;
+		margin: 40px auto 0;
+	}
+	.confrimBtn{
+		background-color: #3eb983;
+		border-color: #3eb983;
+		color: #fff;
+		padding: 10px 40px;
+	}
+	.price{
+		margin-top: 20px;
+	}
+
+	.orderCompletion{
+		text-align: center;
+	}
+	.orderCompletion img{
+		width: 180px;
+	}
+	.orderCompletion p{
+		color: #3eb983;
+		font-size: 18px;
+		line-height: 30px;
+	}
+</style>
+
+<style>
+	.el-step__head{
+		text-align: left;
+	}
+</style>

src/view/buyer/OrderList.vue

@@ -0,0 +1,94 @@
+<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>
+          <span class="link" @click="toEdit(item)">查看详情</span>
+        </div>
+      </div>
+    </el-card>
+	</div>
+</template>
+
+<script>
+	export default{
+		data(){
+			return{
+				goodList:[],
+			}
+		},
+		mounted(){
+			this.getGoodList();
+		},
+		methods:{
+			getGoodList(){
+				this.axios.post(this.Api.getOrderList,{buyerId:this.$store.state.userMess.id}).then((res)=>{
+					console.log(res.data.list)
+	      	this.goodList=res.data.list;
+	      }).catch((err)=>{
+	        console.log("getShopTagList:"+err);
+	      });
+			},
+			toEdit(obj){
+				this.$router.push({
+          path: '/buyer/order',
+          query: {
+            id: obj.id,
+            shopId: obj.shopId,
+            goodId: obj.goodId,
+            coverImg: obj.coverImg,
+            title: obj.title,
+            price: obj.price,
+            produce: obj.produce,
+            evaluate: obj.evaluate
+          }
+        })
+			}
+		}
+	}
+</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%;
+		height: 300px;
+		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 span.link{
+		float: right;
+		line-height: 65px;
+		color: #409eff;
+		font-size: 14px;
+		cursor: pointer;
+	}
+</style>

src/view/buyer/ToBuy.vue

@@ -0,0 +1,344 @@
+<template>
+	<div class="toBuy-wrap">
+		<div class="baseInfo-wrap">
+			<img :src="goodMess.coverImg" />
+			<div>
+				<h5>{{goodMess.title}}</h5>
+				<p>{{goodMess.produce}}</p>
+				<span>{{goodMess.price}}</span>
+			</div>
+		</div>
+		<div class="flow-wrap">
+			<el-steps :active="active" finish-status="success">
+			  <el-step title="订单选择"></el-step>
+			  <el-step title="确认支付"></el-step>
+			  <el-step title="订单完成"></el-step>
+			</el-steps>
+			<div class="flow-content" v-show="active==0">
+				<el-form label-position="right" label-width="80px">
+					<el-form-item v-for="(tag,index) in tagList" :label="tag.type" :key="index">
+				    <el-select v-model="orderForm[index].item.name" placeholder="请选择个性化分类" @change="selectChange($event,index)">
+				      <el-option v-for="(list,index) in tag.list" :value="list.name" :key="index">{{list.name}}</el-option>
+				    </el-select>
+				  </el-form-item>
+				  <el-form-item label="价格">
+				  	<el-input v-model="price" disabled></el-input>
+				  </el-form-item>
+				</el-form>
+				<el-button class="confrimBtn" @click="toConfrimOrder">确认订单</el-button>
+			</div>
+			<div class="flow-content" v-show="active==1">
+				<div v-for="(item,index) in orderForm" class="confirmPayment">
+					<p>{{item.type}}：{{item.item.name}}</p>
+					<p>价格：<span>{{item.item.price}}</span></p>
+				</div>
+				<div class="confirmPayment">
+					<p></p>
+					<p>总计：<span>{{price}}</span></p>
+				</div>
+				<el-button class="confrimBtn price" @click="toConfirmPayment">确认支付</el-button>
+			</div>
+			<div class="flow-content orderCompletion" v-show="active>=2">
+				<img src="../../assets/images/admin/complate.png" />
+				<p>订单已完成！可在“我的订单”中查看</p>
+				<el-button class="confrimBtn price" @click="toShow" v-show="active==2">立即评价</el-button>
+			</div>
+		</div>
+		<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 type="textarea" v-model="evaluate"></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="toSubmitEvaluation">提交</el-button>
+            <el-button @click="toCancel">取消</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-dialog>
+	</div>
+</template>
+
+<script>
+	export default{
+		data(){
+			return{
+				goodMess:{},
+				active: 0,
+				tagList:[],
+				orderForm:[],
+				price:0,
+				dialogTableVisible:false,
+				evaluate:"",
+				id:"",
+			}
+		},
+		mounted(){
+			this.getGoodMess();
+		},
+		methods:{
+			getGoodMess(){
+				let param = {
+					shopId:this.$route.query.shopId,
+					goodId:this.$route.query.id
+				}
+				this.axios.post(this.Api.getGoodMess,param).then((res)=>{
+	      	this.goodMess=res.data;
+	      	this.tagList=res.data.tags;
+	      	for(var i=0,length=this.tagList.length;i<length;i++){
+	      		let tag={
+	      			type:this.tagList[i].type,
+	      			item:{
+	      				name:"",
+	      				price:0
+	      			}
+	      		}
+	      		this.orderForm.push(tag);
+	      	}
+	      }).catch((err)=>{
+	        console.log("getGoodMess:"+err);
+	      });
+			},
+			next() {
+        if (this.active++ > 2) this.active = 0;
+      },
+      toConfrimOrder(){
+      	var index = this.orderForm.findIndex((value,index,arr)=>{
+					return value.item.name=="";
+				})
+				if(index==-1){
+					this.next();
+				}else{
+					this.$message.error('请填写完整信息');
+				}
+      },
+      selectChange(value,index){
+      	var index2 = this.tagList[index].list.findIndex((value1,index,arr)=>{
+					return value1.name==value;
+				})
+      	this.orderForm[index].item.price=this.tagList[index].list[index2].price;
+      	console.log(this.orderForm)
+      	this.calcPrice();
+      },
+      calcPrice(){
+      	this.price=0;
+      	for(var i=0,length=this.orderForm.length;i<length;i++){
+      		this.price+=this.orderForm[i].item.price;
+      	}
+      },
+      toConfirmPayment(){
+      	let param = {
+					shopId:this.$route.query.shopId,
+					goodId:this.$route.query.id,
+					buyerId:this.$store.state.userMess.id,
+					madeTags:this.orderForm,
+				}
+      	this.axios.post(this.Api.paySuccess,param).then((res)=>{
+	      	console.log(res.data)
+	      	if(res.data.code==200){
+	      		this.id=res.data.id;
+	      		this.next();
+	      	}
+	      }).catch((err)=>{
+	        console.log("toConfirmPayment:"+err);
+	      });
+      },
+      toCancel(){
+      	this.dialogTableVisible=false;
+      	this.evaluate="";
+      },
+      toShow(){
+      	this.dialogTableVisible=true;
+      },
+      toSubmitEvaluation(){
+      	if(this.evaluate==""){
+      		this.$message.error('请输入评价内容');
+      		return;
+      	}
+      	let param={
+      		buyerId:this.$store.state.userMess.id,
+      		shopId:this.$route.query.shopId,
+					goodId:this.$route.query.id,
+					id:this.id,
+					comment:this.evaluate
+      	}
+      	this.axios.post(this.Api.submitEvaluation,param).then((res)=>{
+	      	console.log(res.data)
+	      	if(res.data.code==200){
+	      		this.next();
+	      		this.toCancel();
+	      	}
+	      }).catch((err)=>{
+	        console.log("toSubmitEvaluation:"+err);
+	      });
+      }
+		}
+	}
+</script>
+
+<style scoped>
+	.toBuy-wrap{
+		width: 100%;
+		padding: 0 20px;
+	}
+	.baseInfo-wrap{
+		width: 100%;
+		height: 300px;
+		margin-top: 20px;
+		background-color: #fff;
+		border-left: 6px solid #3eb983;
+		padding: 20px 20px 20px 13px;
+	}
+	.baseInfo-wrap img{
+		display: block;
+		float: left;
+		width: 260px;
+		height: 260px;
+	}
+	.baseInfo-wrap div{
+		float: left;
+		padding-left: 20px;
+		text-align: left;
+		width: calc(100% - 260px);
+	}
+	.baseInfo-wrap h5{
+		font-size: 30px;
+		margin-bottom: 10px;
+	}
+	.baseInfo-wrap p{
+		font-size: 16px;
+		color: #666;
+		width: 100%;
+		height: 100px;
+	}
+	.baseInfo-wrap span{
+		font-size: 30px;
+		color: #EA6A69;
+		line-height: 65px;
+		display: block;
+	}
+
+	.flow-wrap{
+		width: 100%;
+		height: auto;
+		margin-top: 20px;
+		background-color: #fff;
+		padding: 20px;
+	}
+	.flow-content{
+		width: 600px;
+		margin: 40px auto 0;
+	}
+	.confrimBtn{
+		background-color: #3eb983;
+		border-color: #3eb983;
+		color: #fff;
+		padding: 10px 40px;
+	}
+
+	.confirmPayment{
+		display: flex;
+		justify-content: space-around;
+		font-size: 20px;
+		line-height: 40px;
+	}
+	.confirmPayment p{
+		width: 200px;
+	}
+	.confirmPayment span{
+		color: #EA6A69;
+	}
+	.price{
+		margin-top: 20px;
+	}
+	.orderCompletion{
+		text-align: center;
+	}
+	.orderCompletion img{
+		width: 180px;
+	}
+	.orderCompletion p{
+		color: #3eb983;
+		font-size: 18px;
+		line-height: 30px;
+	}
+</style>
+
+<style>
+	.el-step__head{
+		text-align: left;
+	}
+	.flow-wrap .el-input.is-disabled .el-input__inner{
+		color: #EA6A69;
+	}
+
+	.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>