|
|
<template>
|
|
|
<view class="p-page">
|
|
|
<view
|
|
|
v-if="!auth.id || (!loading && tickets.length === 0)"
|
|
|
class="u-flex-xy-center"
|
|
|
:style="{ height: '70vh' }"
|
|
|
>
|
|
|
<view v-if="!auth.id">
|
|
|
<view>
|
|
|
<text>请先登录</text>
|
|
|
</view>
|
|
|
<view class="mt-base">
|
|
|
<u-button type="primary" size="small" @tap="handleToLogin"
|
|
|
>去登录</u-button
|
|
|
>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<u-empty
|
|
|
v-else-if="!loading && tickets.length === 0"
|
|
|
mode="order"
|
|
|
icon-color="#9acafc"
|
|
|
text="无购票记录"
|
|
|
text-size="16px"
|
|
|
></u-empty>
|
|
|
</view>
|
|
|
|
|
|
<view
|
|
|
v-for="ticket in tickets"
|
|
|
:key="ticket.orderNO"
|
|
|
class="page-box TrainItem lg"
|
|
|
>
|
|
|
<view class="p-base u-flex u-flex-between OrderInfo">
|
|
|
<text>订单号：{{ ticket.orderNO }}</text>
|
|
|
<text>车票仅当日档次有效</text>
|
|
|
</view>
|
|
|
|
|
|
<u-line></u-line>
|
|
|
|
|
|
<view class="px-base py-llg">
|
|
|
<view>
|
|
|
<u-row :gutter="12">
|
|
|
<u-col :span="4">
|
|
|
<view class="Time">{{
|
|
|
ticket.fromTime | timeFormat("HH:mm")
|
|
|
}}</view>
|
|
|
<view class="Station">{{ ticket.from }}</view>
|
|
|
</u-col>
|
|
|
<u-col :span="4">
|
|
|
<view class="text-center">
|
|
|
<view class="my-ssm">{{ ticket.trainNo }}</view>
|
|
|
<u-line></u-line>
|
|
|
<view
|
|
|
class="my-ssm text-center text-info"
|
|
|
:style="{ fontSize: '15px' }"
|
|
|
>{{ $u.dayjs(ticket.date).format("MM月DD日") }} {{
|
|
|
$u.dayjs(ticket.date).isToday()
|
|
|
? "今天"
|
|
|
: $u.timeFormat(ticket.date, "[周]dd")
|
|
|
}}</view
|
|
|
>
|
|
|
</view>
|
|
|
</u-col>
|
|
|
<u-col :span="4">
|
|
|
<view class="Time text-end">{{
|
|
|
ticket.toTime | timeFormat("HH:mm")
|
|
|
}}</view>
|
|
|
<view class="Station text-end">{{ ticket.to }}</view>
|
|
|
</u-col>
|
|
|
</u-row>
|
|
|
</view>
|
|
|
|
|
|
<view class="mt-base u-flex-y-center u-flex-between OrderInfo">
|
|
|
<text>已支付</text>
|
|
|
<text class="text-warning" :style="{ fontSize: '15px' }"
|
|
|
>￥{{ ticket.price }}</text
|
|
|
>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!--
|
|
|
<u-line></u-line>
|
|
|
|
|
|
<view class="u-flex-y-center">
|
|
|
<view class="u-flex-grow OptionItem">改签</view>
|
|
|
<u-line direction="col" length="26px"></u-line>
|
|
|
<view class="u-flex-grow OptionItem">退票</view>
|
|
|
<u-line direction="col" length="26px"></u-line>
|
|
|
<view class="u-flex-grow OptionItem">变更到站</view>
|
|
|
</view>
|
|
|
-->
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { mapState } from "vuex";
|
|
|
import apiTickets from "@/api/tickets";
|
|
|
import { timeAscCompareFn } from "@/utils/functions.js";
|
|
|
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
tickets: [],
|
|
|
loading: false,
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
...mapState({ auth: "auth" }),
|
|
|
},
|
|
|
/* 注意这里是 onShow 而不是 onLoad，详情查看 uniapp 生命周期 */
|
|
|
onShow() {
|
|
|
if (this.auth.id) {
|
|
|
this.loadMyTickets();
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
handleToLogin() {
|
|
|
uni.navigateTo({ url: "/pages/LoginView/LoginView" });
|
|
|
},
|
|
|
loadMyTickets() {
|
|
|
this.loading = true;
|
|
|
uni.showLoading({ title: "正在加载" });
|
|
|
|
|
|
apiTickets
|
|
|
.get()
|
|
|
.then((res) => {
|
|
|
// 按上车时间顺序，并去掉今天之前的车票
|
|
|
this.tickets = res.data
|
|
|
.sort(
|
|
|
(a, b) =>
|
|
|
timeAscCompareFn(a.fromTime, b.fromTime) ||
|
|
|
timeAscCompareFn(a.toTime, b.toTime) ||
|
|
|
a.id - b.id
|
|
|
)
|
|
|
.filter(
|
|
|
(tkt) =>
|
|
|
!uni.$u
|
|
|
.dayjs(tkt.fromTime)
|
|
|
.isBefore(uni.$u.dayjs().startOf("date"))
|
|
|
);
|
|
|
})
|
|
|
.catch(() => {
|
|
|
this.tickets = [];
|
|
|
})
|
|
|
.then(() => {
|
|
|
this.loading = false;
|
|
|
uni.hideLoading();
|
|
|
});
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style></style>
|
