vue+element UI仿携程购票页面上面的日期时间轴选择日期

本篇文章写的是利用vue+elementUI写一个购票日期选择，横向的购票日期，类似于携程网上的日期选择，效果如下图所示：

其他地方可以忽略，其中比较麻烦的是我圈起来的那个时间选择，如下是代码：

<template><div class="content-class"><div><el-row :gutter="20" class="search-row"><el-col :span="4" style="text-align: left;"><img src="https://www.baidu.com/img/flexible/logo/pc/result.png"style="height: 30px; width: auto;" /></el-col><el-col :span="12" style="text-align: left;"><el-input placeholder="请输入内容" v-model="searchInput" class="input-with-select" style="width: 80%;"><el-button slot="append" icon="el-icon-search"></el-button></el-input></el-col><el-col :span="8" style="text-align: right;"><span>电话号码：12345678920</span></el-col></el-row></div><div class="menu-class"><el-menu :default-active="activeIndex2" class="el-menu-demo" menu-trigger="hover" mode="horizontal"@select="handleSelect" background-color="#2577e3" text-color="#fff" active-text-color="#fff"><el-submenu index="1" :popper-append-to-body="false"><template slot="title">汽车·船</template></el-submenu><el-menu-item index="2" :popper-append-to-body="false"><template slot="title">机票</template></el-menu-item><el-menu-item index="3" :popper-append-to-body="false"><template slot="title">目的地</template></el-menu-item><el-menu-item index="4" :popper-append-to-body="false"><template slot="title">更多</template></el-menu-item></el-menu></div><div class="menu-btn"><el-link icon="el-icon-truck">汽车票</el-link><el-link icon="el-icon-truck">汽车票</el-link><el-link icon="el-icon-truck">汽车票</el-link><el-link icon="el-icon-truck">汽车票</el-link></div><div class="ticket-sale"><el-form ref="ticketForm" :inline="true" :model="ticketForm" label-position="left" class="demo-form-inline"label-width="100px"><el-form-item label="出发城市"><!-- <el-input v-model="ticketForm.start" placeholder="请输入出发城市"></el-input> --><el-select v-model="ticketForm.start" :popper-append-to-body="false" filterable remotereserve-keyword default-first-option placeholder="请选择出发城市" :remote-method="remoteMethodStart":loading="loading" @change="searchStart"><el-option v-for="item in startList" :key="item.depotId" :label="item.depotName":value="item.depotName"></el-option></el-select></el-form-item><img class="change-image" src="../assets/img/change.png" /><el-form-item label="到达城市"><!-- <el-input v-model="ticketForm.end" placeholder="请输入到达城市"></el-input> --><el-select v-model="ticketForm.end" :popper-append-to-body="false" filterable remote reserve-keyworddefault-first-option placeholder="请选择到达城市" :remote-method="remoteMethodEnd" :loading="loading"@change="searchEnd" style="width: 252px;"><el-option v-for="item in endList" :key="item.depotId" :label="item.depotName":value="item.depotName"></el-option></el-select></el-form-item><el-form-item label="选择日期"><!-- <el-input v-model="ticketForm.date" placeholder="请选择日期"></el-input> --><el-date-picker class="date-choose" @change="getDateChange" v-model="ticketForm.date":clearable="false" type="date" placeholder="选择日期" :picker-options="datePicker"></el-date-picker></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">搜索</el-button></el-form-item></el-form></div><div class="ticket-case"><el-tabs type="border-card" v-model="activeName" :stretch="true" @tab-click="handleClick":before-leave="beforeLeave"><el-tab-pane class="forward-class" name="toForward" :disabled="disabled"><span slot="label"><i class="el-icon-caret-left"></i></span></el-tab-pane><el-tab-pane v-for="(item, index) in list" :key="index" :name="item.time"><span slot="label"><div>{{item.time.split("-")[1]+"-"+item.time.split("-")[2]}}</div><div>{{item.week}}</div></span><!-- 这里面是内容 --><!-- {{item.time}} --><div><div class="choose-time"><span>出发时间</span><el-checkbox-button class="no-limit" v-model="noLimitTime" @change="limitTime()">不限</el-checkbox-button><el-checkbox-group class="time-check" v-model="checkedTime" @change="timeChange()"><el-checkbox v-for="item in timeOption" :label="item" :key="item">{{item}}</el-checkbox></el-checkbox-group></div><div class="begin-station"><span>出发车站</span><el-checkbox-button class="no-limit" v-model="noLimitBegin" @change="limitBegin()">不限</el-checkbox-button><el-checkbox-group class="time-check" v-model="checkedBegin" @change="beginChange()"><el-checkbox v-for="item in beginOption" :label="item" :key="item">{{item}}</el-checkbox></el-checkbox-group></div><div class="end-station"><span>到达车站</span><el-checkbox-button class="no-limit" v-model="noLimitEnd" @change="limitEnd()">不限</el-checkbox-button><el-checkbox-group class="time-check" v-model="checkedEnd" @change="endChange()"><el-checkbox v-for="item in endOption" :label="item" :key="item">{{item}}</el-checkbox></el-checkbox-group></div><el-table :data="tableData" style="width: 100%":default-sort="{prop: 'date', order: 'descending'}":header-cell-style="{ color: '#000000D8',background:'#f0f0f0'}":cell-style="{ height: '50px', padding: '4px 0' }"><el-table-column prop="time" label="发/到时间" sortable width="180"></el-table-column><el-table-column label="发/到站" width="180"><template slot-scope="scope"><div class=""><i class="el-icon-setting"></i><spanstyle="margin-left: 5px;">{{scope.row.begin}}</span></div><div class=""><i class="el-icon-star-off"></i><spanstyle="margin-left: 5px;">{{scope.row.end}}</span></div></template></el-table-column><el-table-column prop="consuming" label="车型/耗时"></el-table-column><el-table-column prop="price" label="票价" sortable width="180"></el-table-column><el-table-column align="center"><template slot-scope="scope"><el-button size="mini" type="warning" @click="handleEdit(scope.$index, scope.row)">订票</el-button></template></el-table-column></el-table></div></el-tab-pane><el-tab-pane name="toNext"><span slot="label"><i class="el-icon-caret-right"></i></span></el-tab-pane></el-tabs><div class="ticket-tips"><img style="width: 300px;;" src="https://pages.c-ctrip.com/bus-resource/ditui/wxbanner-2.png" /><div class="ticket-point"><div class="point-title"><span>购票指南</span></div><div><div class="point-content"><div class="point-content-title">1.在线预订汽车票流程</div><span class="point-content-detail">输入出发到达城市及日期→选择合适的车次并点击预订→填写乘车人和取票人信息→提交订单→支付订单→出票</span></div><div class="point-content"><div class="point-content-title">2.在线预订汽车票流程</div><span class="point-content-detail">输入出发到达城市及日期→选择合适的车次并点击预订→填写乘车人和取票人信息→提交订单→支付订单→出票</span></div><div class="point-content"><div class="point-content-title">3.在线预订汽车票流程</div><span class="point-content-detail">输入出发到达城市及日期→选择合适的车次并点击预订→填写乘车人和取票人信息→提交订单→支付订单→出票</span></div></div></div></div></div></div>
</template><script>// import {getQuickMenuList} from '@/api/ticket/ticketApi.js'const checkedTimeArr = ['00:00-06:00', '06:00-12:00', '12:00-18:00', '18:00-24:00']const beginArr = ['福州客运站', '福州西站']const endArr = ['宁德北站', '宁德南站']import moment from 'moment'export default {data() {return {searchInput: '',activeIndex2: '1',activeName: '',ticketForm: {start: '',end: '',date: ''},list: [],disabled: false,noLimitTime: true,noLimitBegin: true,noLimitEnd: true,checkedTime: [],checkedBegin: [],checkedEnd: [],timeOption: checkedTimeArr,beginOption: beginArr,endOption: endArr,tableData: [{time: "15:00",begin: "福州",end: "厦门",consuming: "约13小时",price: "￥280"}, {time: "15:00",begin: "福州",end: "厦门",consuming: "约13小时",price: "￥280"}, {time: "15:00",begin: "福州",end: "厦门",consuming: "约13小时",price: "￥280"}, {time: "15:00",begin: "福州",end: "厦门",consuming: "约13小时",price: "￥280"}],// 起始站数据startList: [{depotId: 1,depotName: '福州站'}, {depotId: 2,depotName: '霞浦站'}, {depotId: 3,depotName: '宁德站'}],loading: false,// 到达站数据endList: [{depotId: 1,depotName: '福安站'}, {depotId: 2,depotName: '厦门站'}, {depotId: 3,depotName: '福州站'}],datePicker: this.getDatePicker(),}},created() {// 登录首页传过来的数据let currentData = this.$route.params.currentData;if (currentData) {this.ticketForm.start = currentData.startStation;this.ticketForm.end = currentData.endStation;this.ticketForm.date = currentData.date;}// 页面刚刚进来的时候，购票时间轴this.getTimeList();// 传过来的值为空if (this.ticketForm.date == "") {this.activeName = this.list[0].time;} else { // 传过来的时间为当前日期if (this.ticketForm.date == moment(new Date()).format("YYYY-MM-DD")) {this.activeName = this.list[0].time;} else { // 传过来的时间不是当前日期this.activeName = this.list[1].time;}}// 如果时间轴第一个位置是当天日期，则向后一天那个按钮不能点击if (this.list[0].time == moment(new Date()).format("YYYY-MM-DD")) {this.disabled = true;} else {this.disabled = false;}},methods: {handleSelect(key, keyPath) {console.log(key, keyPath);},// 起始站 - 模糊搜索remoteMethodStart(query) {// if (query !== '') {//    this.loading = true;//     let data = {//         inputStr: query//   }//     this.startList = [];//     getStartData(data).then(res => {//      if (res.code == 200) {//          this.loading = false;//            this.startList.push(...res.data.records);//         } else {//          this.loading = false;//        }//     }).catch(err => {//         console.log(err);//     })// } else {//     this.startList = [];// }},// 到达站 - 模糊搜索remoteMethodEnd(query) {// if (query !== '') {//    this.loading = true;//     let data = {//         inputStr: query//   }//     this.endList = [];//   getStartData(data).then(res => {//      if (res.code == 200) {//          this.loading = false;//            this.endList.push(...res.data.records);//       } else {//          this.loading = false;//        }//     }).catch(err => {//         console.log(err);//     })// } else {//     this.endList = [];// }},searchStart(e) {console.log("你选中的是", e);console.log("sdkajdasljd", this.saleForm.startStation);},searchEnd(e) {console.log("你选中的是", e);},// tab选项卡点击事件handleClick(tab, event) {// console.log(tab, event);let arrTime = [];let arrWeek = [];let newArray = [];// 左边的按钮if (tab.name == "toForward") {console.log(tab.name, 'tab.name')// 如果数组第一个是当天日期，则左边的按钮不能点击if (this.list[0].time == moment(new Date()).format("YYYY-MM-DD")) {this.activeName = this.list[0].time;this.disabled = true;} else {// 如果不是当天日期，则可以点击，并且是想前减一天this.disabled = false;let listFirst = this.list[0].time;for (var index = -1; index < 6; index++) {arrTime.push(this.getNextDate(listFirst, index));arrWeek.push(this.getWeek(listFirst, index));}for (var i = 0; i < arrTime.length; i++) {let obj = {time: arrTime[i],week: arrWeek[i]};newArray.push(obj)}this.list = newArray;this.activeName = this.list[1].time;}// 右边的按钮，点击加一天} else if (tab.name == "toNext") {console.log("toNext", this.activeName);this.disabled = false;if (this.activeName == this.list[0].time) {this.activeName = this.list[1].time} else {let listFirst = this.list[1].time;for (var index = 0; index < 7; index++) {arrTime.push(this.getNextDate(listFirst, index));arrWeek.push(this.getWeek(listFirst, index));}for (var i = 0; i < arrTime.length; i++) {let obj = {time: arrTime[i],week: arrWeek[i]};newArray.push(obj)}this.list = newArray;console.log(newArray, '12312312312')this.activeName = this.list[1].time;}// 如果点击的是当天的日期，则显示在第一个，否则其他的都是显示在第二个tab} else if (tab.name == moment(new Date()).format("YYYY-MM-DD")) {// this.getTimeList();this.activeName = this.list[0].time;this.disabled = true;} else {this.disabled = false;for (var index = -1; index < 6; index++) {arrTime.push(this.getNextDate(tab.name, index));arrWeek.push(this.getWeek(tab.name, index));}for (var i = 0; i < arrTime.length; i++) {let obj = {time: arrTime[i],week: arrWeek[i]};newArray.push(obj)}this.list = newArray;this.activeName = this.list[1].time;}},/* 活动标签切换时触发 */beforeLeave(currentName, oldName) {var self = this;//重点，如果name是add，则什么都不触发if (currentName == "toForward") {return false} else if (currentName == "toNext") {return false} else {// this.currentIndex = currentName;}},// 获取七天的月日getNextDate(date, item) {var dd = new Date(date);dd.setDate(dd.getDate() + item);var y = dd.getFullYear();var m = dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1;var d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();let day = dd.getDay();// let weeks = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];// let week = weeks[day];return y + "-" + m + "-" + d;},// 获取周几getWeek(dateTime, index) {let time = new Date(dateTime);// 天数time.setDate(time.getDate() + index)let day = time.getDay();let weeks = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];let week = weeks[day];return week;},// 获取时间列表getTimeList() {let timeArr = [];let weekArr = [];let newArr = [];// 如果传过来的数据为空，则默认从当天日期开始排七天if (this.ticketForm.date == "") {for (var index = 0; index < 7; index++) {var date = moment(new Date()).format("YYYY-MM-DD");console.log(date, 'datedatedatedate')timeArr.push(this.getNextDate(date, index));weekArr.push(this.getWeek(date, index));}} else {// 传过来的数据不为空，并且是当天日期的，也是从当天日期开始排七天if (this.ticketForm.date == moment(new Date()).format("YYYY-MM-DD")) {for (var index = 0; index < 7; index++) {var date = this.ticketForm.date;timeArr.push(this.getNextDate(date, index));weekArr.push(this.getWeek(date, index));}// 传过来的数据不为空，并且不是当天日期的，从这个日期的前一天到后面的六天} else {for (var index = -1; index < 6; index++) {var date = this.ticketForm.date;timeArr.push(this.getNextDate(date, index));weekArr.push(this.getWeek(date, index));}}}// console.log(timeArr);// console.log(weekArr);for (var i = 0; i < timeArr.length; i++) {let obj = {time: timeArr[i],week: weekArr[i]};newArr.push(obj)}this.list = newArr;// this.activeName = this.list[1].time},// 选择时间不限limitTime() {if (this.noLimitTime) this.checkedTime = [];},// 选择时间timeChange() {console.log("选择的时间是", this.checkedTime);let value = this.checkedTimeif (value.length == "") {this.noLimitTime = true;} else {this.noLimitTime = false;}},// 选择出发不限limitBegin() {if (this.noLimitBegin) this.checkedBegin = [];},// 选择出发beginChange() {let value = this.checkedBegin;if (value.length == "") {this.noLimitBegin = true;} else {this.noLimitBegin = false;}},// 选择到达不限limitEnd() {if (this.noLimitEnd) this.checkedEnd = [];},// 选择到达endChange() {let value = this.checkedEnd;if (value.length == "") {this.noLimitEnd = true;} else {this.noLimitEnd = false;}},// 订票按钮handleEdit(index, row) {console.log(index, row);},// 选择时间getDateChange() {},// 查询onSubmit() {// this.getTimeList();let timeArr = [];let weekArr = [];let newArr = [];// 点击查询按钮是你选择的日期let dateForm = moment(this.ticketForm.date).format("YYYY-MM-DD")console.log("时间", dateForm);// 如果选择的日期是当天日期，则从第一个开始，否则从第二个开始if (dateForm == moment(new Date()).format("YYYY-MM-DD")) {this.disabled = true;this.list = [];console.log("日期选择今天的", this.list);for (var index = 0; index < 7; index++) {timeArr.push(this.getNextDate(dateForm, index));weekArr.push(this.getWeek(dateForm, index));}for (var i = 0; i < timeArr.length; i++) {let obj = {time: timeArr[i],week: weekArr[i]};newArr.push(obj)}this.list = newArr;this.activeName = this.list[0].time} else {this.disabled = false;for (var index = -1; index < 6; index++) {timeArr.push(this.getNextDate(dateForm, index));weekArr.push(this.getWeek(dateForm, index));}for (var i = 0; i < timeArr.length; i++) {let obj = {time: timeArr[i],week: weekArr[i]};newArr.push(obj)}this.list = newArr;this.activeName = this.list[1].time}},// 小于今天的时间不能选getDatePicker() {return {disabledDate(time) {return time.getTime() < Date.now() - 8.64e7 //开始时间不选时，结束时间最大值小于等于当天 如果没有后面的-8.64e7就是不可以选择今天的}}}}}
</script><style lang="scss" scoped="scoped">/deep/ .el-tabs--border-card {border: unset;box-shadow: unset;}/deep/ .el-tabs--border-card>.el-tabs__header {border: 1px solid #DCDFE6 !important;}/deep/ .el-tabs--border-card>.el-tabs__content {padding: 15px 0;}.content-class {position: relative;}.search-row {margin: 0 auto !important;padding: 0 20px;display: flex;justify-content: center;align-items: center;min-width: 980px;max-width: 1180px;text-align: center;}.menu-class {background-color: #2577e3 !important;margin-top: 20px;height: 40px;line-height: 40px;}.el-menu-demo {min-width: 980px !important;max-width: 1180px;margin: 0 auto;padding: 0;font-size: 15px;background-color: #2577e3 !important;}/deep/ .el-menu--horizontal>.el-menu-item {height: 40px;line-height: 40px;}/deep/ .el-menu--horizontal>.el-submenu .el-submenu__title {height: 40px;line-height: 40px;}/deep/ .el-submenu__title i {color: #FFFFFF;}.menu-btn {min-width: 980px !important;max-width: 1180px;margin: 0 auto;padding: 0;font-size: 15px;padding-bottom: 10px;padding-top: 10px;border: 1px solid #2577e3;border-top: none !important;}.sale-content {min-width: 980px !important;max-width: 1180px;margin: 0 auto;padding: 0;font-size: 15px;margin-top: 10px;margin-bottom: 10px;display: flex;}.sale-image {margin-left: 20px;display: flex;flex-direction: column;justify-content: space-between;}/deep/ .el-link {margin-left: 20px;}.ticket-sale {min-width: 980px !important;max-width: 1180px;margin: 0 auto;padding: 0;font-size: 15px;padding-bottom: 10px;padding-top: 10px;}.ticket-case {min-width: 980px !important;max-width: 1180px;margin: 0 auto;padding: 0;font-size: 15px;padding-bottom: 10px;display: flex;justify-content: space-between;}.change-image {width: 20px;cursor: pointer;padding-top: 12px;margin-right: 10px;}/deep/ .el-tabs {width: 901px;}/deep/ .el-tabs__item {border-right: 1px solid #dcdfe6 !important;height: 55px;line-height: 25px;}/deep/ #tab-toForward {background: #ffffff;border-right: 1px solid #dcdfe6;border-bottom: 1px solid #dcdfe6;display: flex;align-items: center;padding: 0 10px;flex: none;}/deep/ #tab-toNext {background: #ffffff;border-left: 1px solid #dcdfe6;border-bottom: 1px solid #dcdfe6;display: flex;align-items: center;padding: 0 10px;flex: none;}.choose-time {display: flex;align-items: center;}.begin-station {margin-top: 10px;display: flex;align-items: center;}.end-station {margin-top: 10px;display: flex;align-items: center;margin-bottom: 10px;}.no-limit {margin-left: 10px;}.no-limit /deep/ .el-checkbox-button__inner {padding: 2px 5px;border: none;}.time-check {margin-left: 10px;}.time-check /deep/ .el-checkbox {width: 120px;}/deep/.el-table .el-table__cell {padding: 4px 0;height: 40px;}.ticket-tips {margin-left: 10px;}.ticket-point {width: 300px;border: 1px solid #dcdfe6;}.point-title {font-size: 16px;background-color: #f4fcf8;padding: 10px 5px;}.point-content {padding: 5px 10px;font-size: 12px;}.point-content-detail {margin-top: 5px;display: block;color: #666;}
</style>

其中的是数据是假数据，各位可以看情况进行修改，而且有些地方可能会存在边界问题，主要是因为我用的是element里面的tabs，所以会存在边界问题，但是如果是自己写的，用div画的，就没有边界问题，我现在还没遇到边界问题，所以我还没去处理，如果到时候真的出现，我会加以补充的。

以上代码都是我自己写的，可能有些的地方存在代码冗余，没有进行处理，还望各位领导谅解，我会更加努力学习，望各位大佬勿喷

vue+element UI仿携程购票页面上面的日期时间轴选择日期相关推荐

【Vue+Element UI】关闭指定某一个页面的loading动画
[Vue+Element UI]关闭指定某一个页面的loading动画模板:vue-admin-template v4.4.0 问题描述:由于vue-admin默认配置了全局loading,所以页面 ...
使用LiveGBS GB28181平台监控视频录像回放如何在页面上嵌入录像时间轴
支持云端录像及设备录像的时间轴页面分享iframe页面集成时间轴录像回看页面 1.时间轴回放分享页面 1.1. iframe示例 1.2. 页面可配置参数 1.3.设备录像示例 1.4.云端录像示例 ...
Vue + Element UI 实现权限管理系统：页面权限控制（菜单 + 按钮）
权限控制方案既然是后台权限管理系统,当然少不了权限控制啦,至于权限控制,前端方面当然就是对页面资源的访问和操作控制啦. 前端资源权限主要又分为两个部分,即导航菜单的查看权限和页面增删改操作按钮的操作 ...
vue+element ui 设置页面全屏全屏和退出全屏的切换
vue+element ui 设置页面全屏全屏和退出全屏的切换方式1 screenfull 插件 // 属性 screenfull.isFullscreen; // 判断当前页是否全屏返回类型 ...
RN开发实践——仿携程App（二）
文章最后附上源码地址上一片博客链接RN开发实践--仿携程App(一) 实现首页的轮播图 Swiper简介 The best Swiper component for React Native.Swi ...
vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
Vue + Element UI 实现登陆注册基本demo实例
Vue + Element UI 实现权限管理系统前端篇(二):Vue + Element 案例导入项目打开 Visual Studio Code,File --> add Folder ...
【Vue 快速入门】从零开始搭建 VUE + Element UI后台管理系统框架
[Vue 快速入门]从零开始搭建 VUE + Element UI后台管理系统框架前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条 ...
android 携程日历控件,仿携程酒店日历组件for小程序
仿携程酒店日历接受日历组件开发之前,本来是拒绝的,日历组件,表单组件绝逼是前端开发的一个噩梦,尤其要做好一个旅游项目的日历,产品的收货标准只有一条,你看携程都实现了哦, MMP的.要在小程序中实现携 ...

vue+element UI仿携程购票页面上面的日期时间轴选择日期

vue+element UI仿携程购票页面上面的日期时间轴选择日期相关推荐

最新文章

热门文章