整体完成

package.json

@@ -10,6 +10,7 @@
     "build": "node build/build.js"
   },
   "dependencies": {
+    "@xkeshi/vue-qrcode": "xkeshi/vue-qrcode",
     "element-ui": "^2.2.0",
     "vue": "^2.5.2",
     "vue-router": "^3.0.1",

src/api/config.js

@@ -16,4 +16,5 @@ export default{
 	paySuccess:api+"/paySuccess",//买家支付成功
 	submitEvaluation:api+"/submitEvaluation",//买家提交评价
 	getOrderList:api+"/getOrderList",//买家获取订单列表
+	getOrderMess:api+"/getOrderMess",//买家获取订单详情
 }

src/main.js

@@ -8,6 +8,7 @@ import 'element-ui/lib/theme-chalk/index.css'
 import Api from "./api/config.js"
 import store from './store/store.js'
 import axios from 'axios'
+
 import './assets/css/base.css'
 require('./mock/index.js')//此部分引入的是我们所编写的mockjs文档
 

src/mock/index.js

@@ -461,8 +461,339 @@ var accountInfo=[//账号列表
   		},
   	]
   },
-  	{"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":"四川省南充市"},},
+  	{"name":"buyer2","password":"123","mess":{"id":2,"userName":"夜凋凝","loginId":"buyer2","password":"123","address":"黑龙江省鹤岗市"},
+  	"boughtList":[
+  		{
+  			"id":1,
+  			"shopId":1,
+  			"goodId":"1",
+  			"madeTags":[
+  				{
+  					"type":"材质",
+  					"item":{
+  						"name":"白银",
+  						"price":499
+  					}
+  				},
+  				{
+  					"type":"图形",
+  					"item":{
+  						"name":"合家欢乐",
+  						"price":100
+  					}
+  				},
+  				{
+  					"type":"刻字",
+  					"item":{
+  						"name":"嘿，是我",
+  						"price":100
+  					}
+  				},
+  			],
+  			"evaluate":"不咋地啊"
+  		},
+  		{
+  			"id":2,
+  			"shopId":1,
+  			"goodId":"2",
+  			"madeTags":[
+  				{
+  					"type":"材质",
+  					"item":{
+  						"name":"水晶",
+  						"price":256
+  					}
+  				},
+  				{
+  					"type":"图形",
+  					"item":{
+  						"name":"福运到",
+  						"price":100
+  					}
+  				},
+  				{
+  					"type":"刻字",
+  					"item":{
+  						"name":"小幸运",
+  						"price":100
+  					}
+  				},
+  			],
+  			"evaluate":"不咋地啊"
+  		},
+  		{
+  			"id":3,
+  			"shopId":1,
+  			"goodId":"3",
+  			"madeTags":[
+  				{
+  					"type":"材质",
+  					"item":{
+  						"name":"水晶",
+  						"price":256
+  					}
+  				},
+  				{
+  					"type":"图形",
+  					"item":{
+  						"name":"福运到",
+  						"price":100
+  					}
+  				},
+  				{
+  					"type":"刻字",
+  					"item":{
+  						"name":"小幸运",
+  						"price":100
+  					}
+  				},
+  			],
+  			"evaluate":"不咋地啊"
+  		},
+  		{
+  			"id":4,
+  			"shopId":1,
+  			"goodId":"4",
+  			"madeTags":[
+  				{
+  					"type":"材质",
+  					"item":{
+  						"name":"水晶",
+  						"price":256
+  					}
+  				},
+  				{
+  					"type":"图形",
+  					"item":{
+  						"name":"福运到",
+  						"price":100
+  					}
+  				},
+  				{
+  					"type":"刻字",
+  					"item":{
+  						"name":"小幸运",
+  						"price":100
+  					}
+  				},
+  			],
+  			"evaluate":"不咋地啊"
+  		},
+  		{
+  			"id":5,
+  			"shopId":2,
+  			"goodId":"1",
+  			"madeTags":[
+  				{
+  					"type":"膨化食品类",
+  					"item":{
+  						"name":"虾条",
+  						"price":8
+  					}
+  				},
+  				{
+  					"type":"凉果蜜饯类",
+  					"item":{
+  						"name":"凉果",
+  						"price":8
+  					}
+  				},
+  				{
+  					"type":"肉干鱼干类",
+  					"item":{
+  						"name":"牛肉脯",
+  						"price":18.5
+  					}
+  				},
+  				{
+  					"type":"干果类",
+  					"item":{
+  						"name":"杏仁",
+  						"price":11
+  					}
+  				},
+  			],
+  			"evaluate":"不咋地"
+  		},
+  		{
+  			"id":6,
+  			"shopId":3,
+  			"goodId":"1",
+  			"madeTags":[
+  				{
+  					"type":"材质",
+  					"item":{
+  						"name":"棉纶",
+  						"price":190
+  					}
+  				},
+  				{
+  					"type":"颜色",
+  					"item":{
+  						"name":"黑色",
+  						"price":100
+  					}
+  				},
+  				{
+  					"type":"风格",
+  					"item":{
+  						"name":"气质",
+  						"price":280
+  					}
+  				},
+  			],
+  			"evaluate":"不咋地"
+  		},
+  		{
+  			"id":7,
+  			"shopId":3,
+  			"goodId":"2",
+  			"madeTags":[
+  				{
+  					"type":"材质",
+  					"item":{
+  						"name":"棉纶",
+  						"price":190
+  					}
+  				},
+  				{
+  					"type":"颜色",
+  					"item":{
+  						"name":"黑色",
+  						"price":100
+  					}
+  				},
+  				{
+  					"type":"风格",
+  					"item":{
+  						"name":"气质",
+  						"price":280
+  					}
+  				},
+  			],
+  			"evaluate":"不咋地"
+  		},
+  	]
+  },
+  	{"name":"buyer3","password":"123","mess":{"id":3,"userName":"盛夏。","loginId":"buyer3","password":"123","address":"四川省南充市"},
+  	"boughtList":[
+  		{
+  			"id":1,
+  			"shopId":1,
+  			"goodId":"1",
+  			"madeTags":[
+  				{
+  					"type":"材质",
+  					"item":{
+  						"name":"白银",
+  						"price":499
+  					}
+  				},
+  				{
+  					"type":"图形",
+  					"item":{
+  						"name":"合家欢乐",
+  						"price":100
+  					}
+  				},
+  				{
+  					"type":"刻字",
+  					"item":{
+  						"name":"嘿，是我",
+  						"price":100
+  					}
+  				},
+  			],
+  			"evaluate":"材质是真的"
+  		},
+  		{
+  			"id":2,
+  			"shopId":1,
+  			"goodId":"2",
+  			"madeTags":[
+  				{
+  					"type":"材质",
+  					"item":{
+  						"name":"水晶",
+  						"price":256
+  					}
+  				},
+  				{
+  					"type":"图形",
+  					"item":{
+  						"name":"福运到",
+  						"price":100
+  					}
+  				},
+  				{
+  					"type":"刻字",
+  					"item":{
+  						"name":"小幸运",
+  						"price":100
+  					}
+  				},
+  			],
+  			"evaluate":"材质是真的"
+  		},
+  		{
+  			"id":3,
+  			"shopId":1,
+  			"goodId":"3",
+  			"madeTags":[
+  				{
+  					"type":"材质",
+  					"item":{
+  						"name":"水晶",
+  						"price":256
+  					}
+  				},
+  				{
+  					"type":"图形",
+  					"item":{
+  						"name":"福运到",
+  						"price":100
+  					}
+  				},
+  				{
+  					"type":"刻字",
+  					"item":{
+  						"name":"小幸运",
+  						"price":100
+  					}
+  				},
+  			],
+  			"evaluate":"材质是真的"
+  		},{
+  			"id":4,
+  			"shopId":1,
+  			"goodId":"4",
+  			"madeTags":[
+  				{
+  					"type":"材质",
+  					"item":{
+  						"name":"水晶",
+  						"price":256
+  					}
+  				},
+  				{
+  					"type":"图形",
+  					"item":{
+  						"name":"福运到",
+  						"price":100
+  					}
+  				},
+  				{
+  					"type":"刻字",
+  					"item":{
+  						"name":"小幸运",
+  						"price":100
+  					}
+  				},
+  			],
+  			"evaluate":"材质是真的"
+  		},
+  	]
+  },
   ],
 ];
 var shopTagList=[{id: 1, text: '饰品', value: '饰品' }, {id: 2, text: '食品', value: '食品' }, {id: 3, text: '服装', value: '服装' }]
@@ -775,4 +1106,33 @@ Mock.mock('http://www.Zhengy.com/api/getOrderList',function(options){
 	}
 	code=200;
 	return {code:code,list:res}
+})
+
+//买家获取订单详情
+Mock.mock('http://www.Zhengy.com/api/getOrderMess',function(options){
+	var req = eval('('+options.body+')');
+	var code=201;
+	var index = accountInfo[2].findIndex((value,index,arr)=>{
+		return value.mess.id==req.buyerId;
+	})
+	var index4 = accountInfo[2][index].boughtList.findIndex((value,index,arr)=>{
+		return value.id==req.id;
+	})
+	var list = accountInfo[2][index].boughtList[index4];
+	var index2 = accountInfo[2].findIndex((value,index,arr)=>{
+		return value.mess.id==list.shopId;
+	})
+	var index3 = accountInfo[1][index2].goodList.findIndex((value,index,arr)=>{
+		return value.id==list.goodId;
+	})
+	var res={
+		coverImg:accountInfo[1][index2].goodList[index3].coverImg,
+		title:accountInfo[1][index2].goodList[index3].title,
+		produce:accountInfo[1][index2].goodList[index3].produce,
+		price:accountInfo[1][index2].goodList[index3].price,
+		evaluate:accountInfo[2][index].boughtList[index4].evaluate,
+		madeTags:accountInfo[2][index].boughtList[index4].madeTags,
+	}
+	code=200;
+	return {code:code,res:res}
 })

src/view/buyer/Order.vue

@@ -1,11 +1,11 @@
 <template>
 	<div class="toBuy-wrap">
 		<div class="baseInfo-wrap">
-			<img :src="$route.query.coverImg" />
+			<img :src="coverImg" />
 			<div>
-				<h5>{{$route.query.title}}</h5>
-				<p>{{$route.query.produce}}</p>
-				<span>{{$route.query.price}}</span>
+				<h5>{{title}}</h5>
+				<p>{{produce}}</p>
+				<span>{{price}}</span>
 			</div>
 		</div>
 		<div class="flow-wrap">
@@ -15,9 +15,12 @@
 			  <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>
+				<qrcode 
+				:value="value" 
+				:options="{ size: 170 }">
+				</qrcode>
+				<p>可扫描二维码，查看订单详情</p>
 			</div>
 		</div>
 		<el-dialog title="我的评价" :visible.sync="dialogTableVisible" :show-close="false">
@@ -37,24 +40,55 @@
 </template>
 
 <script>
+import QRcode from '@xkeshi/vue-qrcode'
 	export default{
 		data(){
 			return{
 				active: 0,
 				dialogTableVisible:false,
 				evaluate:"",
+				value: '',
+				coverImg:"",
+				title:"",
+				produce:"",
+				price:"",
+				madeTags:[],
 			}
 		},
+		components:{
+			qrcode:QRcode,
+		},
 		mounted(){
 			this.getGoodMess();
 		},
 		methods:{
 			getGoodMess(){
-				if(this.$route.query.evaluate==""){
-					this.active=2;
-				}else{
-					this.active=3;
-				}
+				this.axios.post(this.Api.getOrderMess,{buyerId:this.$store.state.userMess.id,id:this.$route.query.id}).then((res)=>{
+					console.log(res.data)
+	      	if(res.data.code==200){
+	      		this.coverImg=res.data.res.coverImg;
+	      		this.title=res.data.res.title;
+	      		this.produce=res.data.res.produce;
+	      		this.price=res.data.res.price;
+	      		this.evaluate=res.data.res.evaluate;
+	      		this.madeTags=res.data.res.madeTags;
+	      		if(this.evaluate==""){
+							this.active=2;
+						}else{
+							this.active=3;
+						}
+						//this.value="商品名称："+this.title+";";
+						let num=0;
+						for(var i=0,length=this.madeTags.length;i<length;i++){
+							// this.value+=this.madeTags[i].type+":"+this.madeTags[i].item.name+";"
+							// this.value+="价格:"+this.madeTags[i].item.price+"元;"
+							num+=this.madeTags[i].item.price
+						}
+						this.value+="price:"+num+";"
+	      	}
+	      }).catch((err)=>{
+	        console.log("getShopTagList:"+err);
+	      });
 			},
 			next() {
         if (this.active++ > 2) this.active = 0;
@@ -172,4 +206,11 @@
 	.el-step__head{
 		text-align: left;
 	}
+	.el-step__head.is-success{
+		color: #3eb983;
+		border-color: #3eb983;
+	}
+	.el-step__title.is-success{
+		color: #3eb983;
+	}
 </style>

src/view/buyer/OrderList.vue

@@ -37,13 +37,6 @@
           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
           }
         })
 			}

src/view/buyer/ToBuy.vue

@@ -341,4 +341,12 @@
     border-color: #bfcbd9;
     color: #fff;
   }
+
+  .el-step__head.is-success{
+		color: #3eb983;
+		border-color: #3eb983;
+	}
+	.el-step__title.is-success{
+		color: #3eb983;
+	}
 </style>