@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>确认订单</h1>
|
||||
<div v-if="ticket">
|
||||
<div v-for="(ticket, index) in selectedTicketInfo" :key="index" class="ticket-box">
|
||||
<div class="departure-info">
|
||||
<p class="time">{{ ticket.departure_time }}</p>
|
||||
<p class="station">{{ ticket.departure_station }}</p>
|
||||
</div>
|
||||
<div class="train-info">
|
||||
<h2 class="train-no">{{ ticket.trainno }}</h2>
|
||||
<p class="date">{{ ticket.date }}</p>
|
||||
</div>
|
||||
<div class="arrival-info">
|
||||
<p class="time">{{ ticket.arrival_time }}</p>
|
||||
<p class="station">{{ ticket.arrival_station }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="app">
|
||||
<div class="seat-selection">
|
||||
<div class="seat-options">
|
||||
<label class="seat-option" :class="{ active: selectedSeat === 'business' }">
|
||||
<input type="radio" v-model="selectedSeat" value="business"> 商务座
|
||||
</label>
|
||||
<label class="seat-option" :class="{ active: selectedSeat === 'firstClass' }">
|
||||
<input type="radio" v-model="selectedSeat" value="firstClass"> 一等座
|
||||
</label>
|
||||
<label class="seat-option" :class="{ active: selectedSeat === 'secondClass' }">
|
||||
<input type="radio" v-model="selectedSeat" value="secondClass"> 二等座
|
||||
</label>
|
||||
<label class="seat-option" :class="{ active: selectedSeat === 'noSeat' }">
|
||||
<input type="radio" v-model="selectedSeat" value="noSeat"> 无座
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="passenger-selection">
|
||||
<h2>乘车人选择</h2>
|
||||
<button class="add-btn" @click="addPassenge">添加乘车人</button>
|
||||
</div>
|
||||
<button class="submit-btn" @click="submitOrder">提交订单</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
ticket: {} // 存储车票信息的变量
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
// 从本地存储中读取车票信息
|
||||
if (this.$route.query.data) {
|
||||
this.selectedData = JSON.parse(this.$route.query.data);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
submitOrder() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/Payment'
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
h1 {
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.ticket-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border: 1px solid #ccc;
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.departure-info, .arrival-info {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.train-info {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 8px; /* 设置时间的字体大小 */
|
||||
}
|
||||
|
||||
.station {
|
||||
font-size: 16px; /* 设置车站名称的字体大小 */
|
||||
}
|
||||
|
||||
.train-no {
|
||||
font-size: 20px; /* 设置车次的字体大小 */
|
||||
}
|
||||
|
||||
.date {
|
||||
font-size: 10px; /* 设置日期的字体大小 */
|
||||
}
|
||||
|
||||
.seat-selection {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.seat-options {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.seat-option {
|
||||
border: 1px solid #ccc;
|
||||
padding: 10px 20px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s, border-color 0.3s;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.seat-option:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.seat-option input[type="radio"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.seat-option.active {
|
||||
border-color: #007bff;
|
||||
background-color: #d0e6ff;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background-color: #007aff;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
</style>
|
||||
Loading…
Reference in new issue