master
a3197878436@163.com
1 year ago
parent
3cdd46dd80
commit
6c75e5562f
@ -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>
|
||||
Loading…
Reference in new issue