|
|
<template>
|
|
|
<view class="p-page">
|
|
|
<view
|
|
|
class="page-box-t-overflow page-box-x-overflow"
|
|
|
:style="{ marginBottom: '-12px' }"
|
|
|
>
|
|
|
<u-swiper
|
|
|
:list="[
|
|
|
'https://www.12306.cn/index/images/pic/banner11.jpg',
|
|
|
'https://www.12306.cn/index/images/pic/banner12.jpg',
|
|
|
]"
|
|
|
:radius="0"
|
|
|
:height="200"
|
|
|
:circular="true"
|
|
|
></u-swiper>
|
|
|
</view>
|
|
|
|
|
|
<view class="page-box py-base px-lg relative">
|
|
|
<view>
|
|
|
<u-text type="primary" :size="18" :bold="true" text="火车票"></u-text>
|
|
|
</view>
|
|
|
|
|
|
<view class="mt-base py-base">
|
|
|
<!-- flex 布局总是会因为左右字符长度不同导致中心偏移，因此采用 row 布局 -->
|
|
|
<u-row>
|
|
|
<u-col :span="5">
|
|
|
<view @tap="handleSelectStation('from')">
|
|
|
<u-text
|
|
|
:type="from ? undefined : 'info'"
|
|
|
:size="20"
|
|
|
:bold="true"
|
|
|
align="left"
|
|
|
:text="from || '请选择'"
|
|
|
></u-text>
|
|
|
</view>
|
|
|
</u-col>
|
|
|
<u-col :span="2">
|
|
|
<view class="u-flex-x-center">
|
|
|
<u-icon name="arrow-right-double" :size="22"></u-icon>
|
|
|
</view>
|
|
|
</u-col>
|
|
|
<u-col :span="5">
|
|
|
<view @tap="handleSelectStation('to')">
|
|
|
<u-text
|
|
|
:type="to ? undefined : 'info'"
|
|
|
:size="20"
|
|
|
:bold="true"
|
|
|
align="right"
|
|
|
:text="to || '请选择'"
|
|
|
></u-text>
|
|
|
</view>
|
|
|
</u-col>
|
|
|
</u-row>
|
|
|
</view>
|
|
|
<u-line></u-line>
|
|
|
<!-- uLine 颜色比较浅 -->
|
|
|
|
|
|
<view class="py-base">
|
|
|
<view class="u-flex-y-center" @tap="showStationDate = true">
|
|
|
<!-- 直接在 uText 上写的样式可能会在页面更新时被莫名的 bug 覆盖，因此要养成“间距”类样写在 view 标签上的好习惯-->
|
|
|
<view :style="{ flexGrow: 0, whiteSpace: 'nowrap' }">
|
|
|
<u-text :size="20" :text="$u.timeFormat(date, 'M月D日')"></u-text>
|
|
|
</view>
|
|
|
<view :style="{ flexGrow: 1, marginLeft: '0.6em' }">
|
|
|
<u-text
|
|
|
type="info"
|
|
|
:text="
|
|
|
$u.dayjs(date).isToday()
|
|
|
? '今天'
|
|
|
: $u.timeFormat(date, '[周]dd')
|
|
|
"
|
|
|
></u-text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<u-line></u-line>
|
|
|
|
|
|
<u-calendar
|
|
|
:show="showStationDate"
|
|
|
:min-date="$u.dayjs().format()"
|
|
|
:max-date="$u.dayjs().add(14, 'day').format()"
|
|
|
@confirm="handledateConfirm"
|
|
|
@close="showStationDate = false"
|
|
|
></u-calendar>
|
|
|
|
|
|
<view class="mt-base">
|
|
|
<u-button
|
|
|
type="primary"
|
|
|
:disabled="!from || !to"
|
|
|
@tap="handleToQueryTrain"
|
|
|
>查询车票</u-button
|
|
|
>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!--
|
|
|
<view class="page-box">
|
|
|
<u-grid :border="false" :col="5">
|
|
|
<u-grid-item v-for="item in HOME_MENU" :key="item.label">
|
|
|
<view class="grid-item">
|
|
|
<u-image :src="item.image" width="30px" height="30px"></u-image>
|
|
|
<view class="grid-item-text">{{ item.label }}</view>
|
|
|
</view>
|
|
|
</u-grid-item>
|
|
|
</u-grid>
|
|
|
</view>
|
|
|
-->
|
|
|
|
|
|
<!--
|
|
|
<view class="page-box p-base u-flex-y-center">
|
|
|
<u-image
|
|
|
src="@/static/ic_hot_news.png"
|
|
|
:width="40"
|
|
|
:height="40"
|
|
|
mode="scaleToFill"
|
|
|
class="u-flex-shrink-0"
|
|
|
></u-image>
|
|
|
<view class="ms-lg u-flex-fill">
|
|
|
<u-text
|
|
|
text="中铁快运创新退出跨域当日达"
|
|
|
:size="14"
|
|
|
:bold="true"
|
|
|
></u-text>
|
|
|
<u-text
|
|
|
text='"高铁急送"城市群内4小时，城市群间8小时送达！'
|
|
|
:size="14"
|
|
|
></u-text>
|
|
|
</view>
|
|
|
<view class="u-flex-shrink-0 u-flex-y-center">
|
|
|
<u-icon name="arrow-right"></u-icon>
|
|
|
</view>
|
|
|
</view>
|
|
|
-->
|
|
|
|
|
|
<!--
|
|
|
<view class="page-box overflow-hidden">
|
|
|
<u-image
|
|
|
src="https://www.12306.cn/index/images/abanner01.jpg"
|
|
|
mode="widthFix"
|
|
|
height="auto"
|
|
|
width="100%"
|
|
|
></u-image>
|
|
|
</view>
|
|
|
<view class="page-box overflow-hidden">
|
|
|
<u-image
|
|
|
src="https://www.12306.cn/index/images/abanner05.jpg"
|
|
|
mode="widthFix"
|
|
|
height="auto"
|
|
|
width="100%"
|
|
|
></u-image>
|
|
|
</view>
|
|
|
-->
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { mapState } from "vuex";
|
|
|
import uNavbarOpacity from "@/utils/mixins/u-navbar-opacity";
|
|
|
|
|
|
const HOME_MENU = [
|
|
|
{ label: "车站大屏", image: require("@/static/home_daping.png") },
|
|
|
{ label: "计次·定期票", image: require("@/static/home_jicipiao.png") },
|
|
|
{ label: "铁路e卡通", image: require("@/static/home_ekatong.png") },
|
|
|
{ label: "时刻表", image: require("@/static/home_liechezhuangtai.png") },
|
|
|
{ label: "温馨服务", image: require("@/static/home_wenxinfuwu.png") },
|
|
|
{ label: "空铁联运", image: require("@/static/home_kongtie.png") },
|
|
|
{ label: "敬老版", image: require("@/static/home_aixin.png") },
|
|
|
{ label: "酒店住宿", image: require("@/static/home_jiudian.png") },
|
|
|
{ label: "约车", image: require("@/static/home_yueche.png") },
|
|
|
{ label: "门票·旅游", image: require("@/static/home_trip.png") },
|
|
|
{ label: "餐饮·特产", image: require("@/static/home_canyin.png") },
|
|
|
{ label: "汽车票", image: require("@/static/home_qichepiao.png") },
|
|
|
{ label: "铁路商城", image: require("@/static/home_shangcheng.png") },
|
|
|
{
|
|
|
label: "中铁畅行卡",
|
|
|
image: require("@/static/home_zhongtiechangxingka.png"),
|
|
|
},
|
|
|
{ label: "出行保险", image: require("@/static/home_chengyixian.png") },
|
|
|
];
|
|
|
|
|
|
export default {
|
|
|
mixins: [uNavbarOpacity],
|
|
|
data() {
|
|
|
return {
|
|
|
from: "",
|
|
|
to: "",
|
|
|
showStationDate: false,
|
|
|
date: new Date(),
|
|
|
HOME_MENU,
|
|
|
searchInput: "",
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
...mapState({ stations: "stations" }),
|
|
|
},
|
|
|
methods: {
|
|
|
handleSelectStation(key) {
|
|
|
uni.navigateTo({
|
|
|
url: `/pages/SelectStationView/SelectStationView?key=${key}`,
|
|
|
});
|
|
|
},
|
|
|
handledateConfirm(e) {
|
|
|
this.date = this.$u.dayjs(e[0]).startOf("date").format();
|
|
|
this.showStationDate = false;
|
|
|
},
|
|
|
handleToQueryTrain() {
|
|
|
uni.navigateTo({
|
|
|
url: `/pages/QueryTrainView/QueryTrainView?from=${encodeURIComponent(
|
|
|
this.from
|
|
|
)}&to=${encodeURIComponent(this.to)}&date=${encodeURIComponent(
|
|
|
this.date
|
|
|
)}`,
|
|
|
});
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
.grid-item {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
padding-top: var(--space-base);
|
|
|
padding-bottom: var(--space-base);
|
|
|
}
|
|
|
|
|
|
.grid-item-text {
|
|
|
margin-top: var(--space-ssm);
|
|
|
font-size: 12px;
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
</style>
|
