1

src/前端/src/pages/order.vue

@@ -0,0 +1,188 @@
+<template>
+	<div class="return">
+	    <button class="returnList" @click="returnList()">返回</button>
+	</div>
+	<h1>订单</h1>
+  <div class="order-details">  
+    <h2>订单详情</h2>  
+    <p>目的地: {{ list.city }}</p>  
+    <p>开始时间: {{ list.departureDate }}</p>
+	<p>结束时间: {{ list.endDate }}</p>
+	<p>创建时间: {{ list.createTime }}</p>
+	<p>备注: {{ list.message }}</p>
+	<p>当前状态:  
+	    <span v-if="list.status === 0">匹配中</span> 
+		 <span v-else-if="list.status === 1">匹配中</span>
+	    <span v-else-if="list.status === 2">匹配成功</span>  
+	    <span v-else-if="list.status === 3">已完成</span>  
+	    <span v-else>未知状态</span>  
+	</p>
+	<div v-if="list.status === 0">
+		<div><button @click="goToMatchDetail(orderId)">查看详情</button></div>
+		<div><button @click="goToDemandMatched(orderId)">查看申请</button></div>
+		<div><button @click="cancelTrip(orderId)">取消行程</button></div>
+	</div>
+	 <div v-if="list.status === 1">
+	 	<div><button @click="goToMatchDetail(orderId)">查看详情</button></div>
+	 	<div><button @click="goToDemandMatched(orderId)">查看申请</button></div>
+		<div><button @click="cancelTrip(orderId)">取消行程</button></div>
+	 </div>
+	 
+	 <div v-if="list.status === 2">
+	 	<div><button @click="cancel(orderId)">取消出行</button></div>
+	 	<div><button @click="over(orderId)">行程完成</button></div>
+	 </div>
+	 <div><button v-if="list.status === 3" @click="goToEvaluateTrip(orderId)">行程评价</button></div>
+	 <div><button v-if="list.status === 3" @click="deleteOrder(orderId)">删除订单</button></div>
+  </div>  
+</template>  
+
+<style scoped> 
+.returnList {  
+/* 定义返回按钮的样式 */  
+	position: fixed; /* 使按钮位置固定 */  
+	top: 10px; 
+	left: 10px; 
+	margin: 0;   
+	padding: 10px 20px;  
+	border: none;  
+	border-radius: 5px;  
+	background-color: #ccc;  
+	color: #333;  
+	cursor: pointer;
+}
+ 	
+.returnList:hover {  
+	  background-color: #aaaaaa;  
+}
+
+.order-details {  
+  display: flex;  
+  flex-direction: column;  
+  align-items: flex-start;  
+  padding: 20px;  
+  background-color: #f5f5f5; /* 浅灰色背景 */  
+  border-radius: 10px;  
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 阴影效果 */  
+}  
+  
+.order-details h2 {  
+  margin-bottom: 20px; /* 增加标题与内容之间的间距 */  
+}  
+  
+.order-details p {  
+  margin-bottom: 10px; /* 增加段落之间的间距 */  
+}  
+  
+.order-details button {  
+  margin-right: 10px; /* 增加按钮之间的间距 */  
+  padding: 10px 20px;  
+  border: none;  
+  border-radius: 5px;  
+  cursor: pointer;  
+}  
+  
+.order-details button:hover {  
+  background-color: #ddd; /* 按钮点击时的背景色 */  
+}  
+  
+/* 根据状态为按钮添加不同的样式 */  
+.order-details button.cancel {  
+  background-color: #f44336; /* 红色背景，表示取消操作 */  
+  color: white;  
+}  
+  
+.order-details button.over {  
+  background-color: #4CAF50; /* 绿色背景，表示完成操作 */  
+  color: white;  
+}  
+</style>
+
+<script>  
+import axios from 'axios';
+ 
+export default {  
+  props: ['orderId'], 
+  data() {
+    return {   
+      phone: sessionStorage.getItem('phone') || '',  
+      list: [],  
+    };  
+  },  
+  async created() {  
+    // 在组件创建后立即发送请求  
+    axios.get(`http://192.168.243.35:9000/SendDemand/demand?did=${this.orderId}`)
+        .then(response => {
+    		this.list = response.data
+        })
+        .catch(error => {
+          console.error('Error fetching user:', error);
+        });
+  },  
+	methods: {    
+		goToMatchDetail(orderId) {     
+			this.$router.push({ name: 'MatchDetail', params: { orderId } });    
+		},
+		goToDemandMatched(orderId) {
+			this.$router.push({ name: 'DemandMatched', params: { orderId } });    
+		},
+		goToEvaluateTrip(orderId) {  
+			this.$router.push({ name: 'Evaluation', params: { orderId } });  
+		},
+		cancel(orderId) {
+			const did = parseInt(this.orderId, 10);
+			axios.post(`http://192.168.243.35:9000/DemandMatch/refuse`,{did:did})
+			    .then(response => {
+					if(response.data == 1){
+						alert('取消成功');
+						location.reload();
+					}
+			    })
+			    .catch(error => {
+			         console.error('Error fetching user:', error);
+			    });
+		},
+		cancelTrip(orderId) {
+			const did = parseInt(this.orderId, 10);
+			axios.post(`http://192.168.243.35:9000/demands/delbyid`,{did:did})
+			    .then(response => {
+					if(response.data == 1){
+						alert('取消成功');
+						this.$router.push('/demandlist');
+					}
+			    })
+			    .catch(error => {
+			         console.error('Error fetching user:', error);
+			    });
+		},
+		over(orderId) {
+			   const did = parseInt(this.orderId, 10);
+			   axios.post(`http://192.168.243.35:9000/DemandMatch/finish`,{did:did})
+			       .then(response => {
+			   		if(response.data == 1){
+			   			location.reload();
+			   		}
+			       })
+			       .catch(error => {
+			            console.error('Error fetching user:', error);
+			       });
+		},
+		deleteOrder(orderId) {
+			   const did = parseInt(this.orderId, 10);
+			   axios.post(`http://192.168.243.35:9000/DemandMatch/delete`,{did:did})
+			       .then(response => {
+			   		if(response.data == 1){
+			   			alert('删除成功');
+			   			this.$router.push('/demandlist');
+			   		}
+			       })
+			       .catch(error => {
+			            console.error('Error fetching user:', error);
+			       });
+		},
+		returnList() {
+			this.$router.push('/demandlist');   		
+		}
+	}
+};  
+</script>