Skip to content

A
Athena
Commit 23cc97ce authored by huangyuanyuan's avatar huangyuanyuan
Browse files
Options

机票

parent 40358612
Show whitespace changes
Inline Side-by-side
Showing with 933 additions and 4 deletions
src/assets/css/reset.css 0 → 100644
View file @ 23cc97ce
.el-radio__input.is-checked .el-radio__inner{
border-color: #EE4454;
background: #EE4454;
}
.el-radio__input.is-checked+.el-radio__label {
color: #EE4454;
}
.orange{
color:#FF6633;
}
\ No newline at end of file
src/components/Ticket/Choose.vue 0 → 100644
View file @ 23cc97ce
<template>
<div>
<el-row class="msg">
<div style="margin-bottom:10px">
<el-radio v-model="choose_info.ticketType" :label=1>单程</el-radio>
<el-radio v-model="choose_info.ticketType" :label=2>往返</el-radio>
</div>
<el-col :span="5">
<div class="city" style="margin-bottom:15px">
<span>出发地 | </span>
<el-input
placeholder="请输入内容"
v-model="input10"
clearable>
</el-input>
</div>
<div class="city">
<span>目的地 | </span>
<el-input
placeholder="请输入内容"
v-model="input10"
clearable>
</el-input>
</div>
</el-col>
<el-col :span="6">
<div class="city" style="margin-bottom:15px">
<span>出发 | </span>
<el-date-picker @change="changeStart"
v-model="choose_info.qFlightDateStart"
type="date"
placeholder="选择日期">
</el-date-picker>
<span>{{startweek}}</span>
</div>
<div class="city">
<span>归期 | </span>
<el-date-picker @change="changeEnd"
v-model="choose_info.qFlightDateEnd"
type="date"
placeholder="选择日期">
</el-date-picker>
<span>{{endweek}}</span>
</div>
</el-col>
<el-col :span="13">
<div style="margin-bottom:15px">
<div class="number">
<span>成人 | </span>
<el-input-number size="mini" v-model="num1" @change="handleChange" :min="0" :max="10" label="描述文字"></el-input-number>
</div>
<div class="number">
<span>儿童 | </span>
<el-input-number size="mini" v-model="num1" @change="handleChange" :min="0" :max="10" label="描述文字"></el-input-number>
</div>
<div class="number">
<span>婴儿 | </span>
<el-input-number size="mini" v-model="num1" @change="handleChange" :min="0" :max="10" label="描述文字"></el-input-number>
</div>
<el-button @click="Search" size="small">搜索</el-button>
</div>
<div>
<div class="city" style="width:200px;display:inline-block;margin-right:10px">
<span>舱位选择 | </span>
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in cawei"
:key="item.id"
:label="item.title"
:value="item.id">
</el-option>
</el-select>
</div>
<div class="city" style="width:250px;display:inline-block">
<span>航空公司 | </span>
<el-select style="width:180px" filterable v-model="value" placeholder="请选择">
<el-option v-for="item in airlineList" :label="item.AlName" :value="item.AirLineId"
:key="item.AirLineId"></el-option>
</el-select>
</div>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import moment from 'moment'
export default {
components: {
},
data () {
return {
choose_info:{
pageIndex:1,
pageSize:10,
id:0,
qFlightDateStart:"",
qFlightDateEnd:"",
flight_number:"",
airLineID:0,
ticketType:1,
lineId:0,
isPayOrder:0,
departure_city:0,
arrival_city:0,
freightSpace:1
},
startweek:"",
endweek:"",
bannerHeight:"282px",
radio:"",
value10:"",
cawei:[
{title:"头等舱",id:1},
{title:"商务舱",id:2},
{title:"经济舱",id:3}
],
value1:"",
num1:"",
input10:"",
value:"",
airlineList:[],
}
},
mounted () {
},
created(){
this.initAirlines();
this.$emit("ChooseInfo",this.choose_info)
},
methods: {
// 航空公司下拉框
initAirlines() {
this.apipost(
"airline_post_GetList", {},
res => {
// console.log(res)
if (res.data.resultCode == 1) {
this.airlineList = res.data.data;
}
},
err => {
}
);
},
Weekday(num){
if(num==1){
return "周一"
}
if(num==2){
return "周二"
}
if(num==3){
return "周三"
}
if(num==4){
return "周四"
}
if(num==5){
return "周五"
}
if(num==6){
return "周六"
}
if(num==7){
return "周日"
}
},
changeStart(val){
let num=moment(val,'YYYY-MM-DD').format('E');
this.startweek=this.Weekday(num);
},
changeEnd(val){
let num=moment(val,'YYYY-MM-DD').format('E');
this.endweek=this.Weekday(num);
},
// moment("2018-10-29",'YYYY-MM-DD').format('E')
handleChange(){},
Search(){
this.$emit("ChooseInfo",this.choose_info)
}
}
}
</script>
<style>
.msg .el-select{
width: 130px;
height: 100%;
}
.el-select>.el-input{
width: 100%;
}
.msg .el-button{
width:77px;
height:32px;
background:rgba(238,68,84,1);
border-radius:4px;
color: #ffffff;
border: none;
}
.el-input-number .el-input{
width: 95px;
}
.msg .number{
width:140px;
height:34px;
background:rgba(255,255,255,1);
border:1px solid rgba(216,218,220,1);
border-radius:4px;
padding-left: 6px;
box-sizing: border-box;
display: inline-block;
margin-right: 20px;
}
.el-input-number{
width:95px;
height: 100%;
}
.msg{
color: #000000;
font-size: 12px;
margin-top: 15px;
}
.msg .city{
width:80%;
height:34px;
background:rgba(255,255,255,1);
border:1px solid rgba(216,218,220,1);
border-radius:4px;
padding-left: 6px;
box-sizing: border-box
}
.el-input{
width: 145px;
height: 100%;
}
.el-input.is-active .el-input__inner, .el-input__inner:focus{
border-color: none;
}
.el-date-editor.el-input, .el-date-editor.el-input__inner{
width: 145px;
}
.el-input__inner{
border: none;
height: 100%;
}
</style>
\ No newline at end of file
src/components/Ticket/TicketHome.vue 0 → 100644
View file @ 23cc97ce
<template>
<div>
<div class="banner" :height="bannerHeight" style="width:100%">
<img src="../../assets/img/ticket/banner.png" alt="">
<div class="choose">
<div class="choose_1">
<div>
<el-radio v-model="radio" label="1">单程</el-radio>
<el-radio v-model="radio" label="2">往返</el-radio>
</div>
<el-row class="msg">
<el-col :span="5">
<div class="city" style="margin-bottom:15px">
<span>出发地 | </span>
<el-input
placeholder="请输入内容"
v-model="input10"
clearable>
</el-input>
</div>
<div class="city">
<span>目的地 | </span>
<el-input
placeholder="请输入内容"
v-model="input10"
clearable>
</el-input>
</div>
</el-col>
<el-col :span="6">
<div class="city" style="margin-bottom:15px">
<span>出发 | </span>
<el-date-picker
v-model="value1"
type="date"
placeholder="选择日期">
</el-date-picker>
</div>
<div class="city">
<span>归期 | </span>
<el-date-picker
v-model="value1"
type="date"
placeholder="选择日期">
</el-date-picker>
</div>
</el-col>
<el-col :span="13">
<div style="margin-bottom:15px">
<div class="number">
<span>成人 | </span>
<el-input-number size="mini" v-model="num1" @change="handleChange" :min="0" :max="10" label="描述文字"></el-input-number>
</div>
<div class="number">
<span>儿童 | </span>
<el-input-number size="mini" v-model="num1" @change="handleChange" :min="0" :max="10" label="描述文字"></el-input-number>
</div>
<div class="number">
<span>婴儿 | </span>
<el-input-number size="mini" v-model="num1" @change="handleChange" :min="0" :max="10" label="描述文字"></el-input-number>
</div>
<el-button size="small">搜索</el-button>
</div>
<div>
<div class="city">
<span>舱位选择 | </span>
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options5"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</div>
</el-col>
</el-row>
</div>
</div>
</div>
<div class="banner_two">
<div style="text-align:center;">
<p style="margin-top:79px;font-size:24px;font-family:MicrosoftYaHei;font-weight:400;color:rgba(0,0,0,1);">目的地直选</p>
<p style="margin-top:10px;font-size:12px;font-family:MicrosoftYaHei;font-weight:400;color:rgba(51,51,51,1);">Choose your favorite destination</p>
<div style="width:41px;height:7px;margin:0 auto;margin-top:10px">
<img style="width:100%" src="../../assets/img/ticket/jx.png" alt="">
</div>
</div>
<div class="banner_img" style="margin:0 auto;margin-top:20px;">
<el-carousel trigger="click" height="274px">
<el-carousel-item>
<el-row :gutter="18" style="height:100%">
<el-col :span="18" :offset="3" style="height:100%">
<el-row style="height:100%">
<el-col :span="5" style="height:100%">
<div class="carousel_small">
<img style="width:100%" src="../../assets/img/ticket/sllk.png" alt="">
<div class="info">
<div class="table_cell">
<p class="ch">斯里兰卡</p>
<p class="en">SRI LANKA</p>
</div>
</div>
</div>
<div class="carousel_small">
<img style="width:100%" src="../../assets/img/ticket/md.png" alt="">
</div>
</el-col>
<el-col :span="9" style="height:100%">
<div class="carousel_large">
<img style="width:100%;height: 100%;" src="../../assets/img/ticket/rb.png" alt="">
</div>
</el-col>
<el-col :span="5">
<div class="carousel_small">
<img style="width:100%" src="../../assets/img/ticket/bld.png" alt="">
</div>
<div class="carousel_small">
<img style="width:100%" src="../../assets/img/ticket/xg.png" alt="">
</div>
</el-col>
<el-col :span="5">
<div class="carousel_small">
<img style="width:100%" src="../../assets/img/ticket/teq.png" alt="">
</div>
<div class="carousel_small">
<img style="width:100%" src="../../assets/img/ticket/yd.png" alt="">
</div>
</el-col>
</el-row>
</el-col>
</el-row>
</el-carousel-item>
</el-carousel>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
bannerHeight:"282px",
radio:"",
value10:"",
options5:[],
value1:"",
num1:"",
}
},
mounted() {
// this.apiJavaPost('/api/dmc/airticket/getB2BAirticketForMonthMinPrice',{"id":0,"flithtMonthDate":"2019-02","flight_number":"","airLineID":0,"ticketType":0,"lineId":0,"isPayOrder":0,"departure_city":0,"arrival_city":0,"freightSpace":0},res=>{
// console.log(res)
// },null)
},
created(){
// this.loadSize();
},
methods: {
loadSize(){
let w=screen.availWidth
w=w/24*20
w=w-(17*5)
w=w/6
this.itemHeight=w/1.5+'px'
this.w=Math.floor(w)
this.h=Math.floor((w/1.5))
// console.log(this.$refs.groupHeightId)
this.groupHeight=Math.floor(screen.availWidth*0.8333*0.1666/0.63)-6
w=screen.availWidth
w=w/24*20
w=w-(10*3)
w=w/4
this.groupItemHeight=w/1.8+'px'
}
}
}
</script>
<style>
@import '../../assets/global/font.css';
@import '//at.alicdn.com/t/font_863923_3d1f1rd9oj6.css';
@import '../../assets/global/global.css';
@import '../../assets/css/reset.css';
.banner_img .info{
position: absolute;
top: 0;
width: 100%;
height: 100%;
display: table;
}
.banner_img .info .table_cell{
display: table-cell;
vertical-align: middle;
text-align: center;
color: #ffffff;
}
.carousel_large,.carousel_small{
padding:6px;
box-sizing: border-box;
position: relative;
}
.carousel_small{
height: 50%;
}
.carousel_large{
}
.el-col-5 {
height: 100%;
}
.banner_two .carousel{
display: flex;
justify-content: space-between;
}
.banner_two .carousel_small{
/* width: 194px;
height: 132px; */
margin-bottom: 10px;
}
.banner_two .carousel_small img{
width: 100%;
height: 100%;
}
.banner_two{
width: 100%;
height: 491px;
}
.msg .el-select{
width: 130px;
height: 100%;
}
.el-select>.el-input{
width: 100%;
}
.msg .el-button{
width:77px;
height:32px;
background:rgba(238,68,84,1);
border-radius:4px;
color: #ffffff;
border: none;
}
.el-input-number .el-input{
width: 95px;
}
.msg .number{
width:140px;
height:34px;
background:rgba(255,255,255,1);
border:1px solid rgba(216,218,220,1);
border-radius:4px;
padding-left: 6px;
box-sizing: border-box;
display: inline-block;
margin-right: 20px;
}
.el-input-number{
width:95px;
height: 100%;
}
.msg{
color: #000000;
font-size: 12px;
margin-top: 15px;
}
.msg .city{
width:200px;
height:34px;
background:rgba(255,255,255,1);
border:1px solid rgba(216,218,220,1);
border-radius:4px;
padding-left: 6px;
box-sizing: border-box
}
.el-input{
width: 145px;
height: 100%;
}
.el-input.is-active .el-input__inner, .el-input__inner:focus{
border-color: none;
}
.el-date-editor.el-input, .el-date-editor.el-input__inner{
width: 145px;
}
.el-input__inner{
border: none;
height: 100%;
}
.banner{
position: relative;
}
.banner img{
width: 100%;
font-size: 0;
}
.choose{
position: absolute;
min-width: 1120px;
background: rgba(255, 255, 255, 0.24);
height:175px;
padding:10px;
bottom: -10px;
left: 20%;
border-radius: 4px;
box-sizing: border-box;
}
.choose_1{
width: 100%;
height: 100%;
border-radius: 4px;
padding: 8px;
box-sizing: border-box;
background:rgba(255,255,255,1);
box-shadow:0px 2px 29px 0px rgba(107,107,107,0.27);
border-radius:0px 4px 4px 4px;
}
</style>
src/components/Ticket/TicketList.vue 0 → 100644
View file @ 23cc97ce
<template>
<div>
<div style="background:rgba(255,255,255,1);box-shadow:0px 4px 8px 0px rgba(107,107,107,0.18);">
<el-row :gutter="20">
<el-col :span="20" :offset="2">
<v-choose @ChooseInfo="ChooseInfo"></v-choose>
</el-col>
</el-row>
</div>
<div class="ticketlist_content">
<!-- <calendar v-for="(item,index) in classArray" :key="index" :dateData= "item" :day = "item[0].dateStr" @ChildrenSelect="ListenChildren" v-if="index == selectMonth"/> -->
<!-- 查询机票列表 -->
<div>
<el-row :gutter="20">
<el-col :span="20" :offset="2">
<div class="date_list">
<div style="color:#dddddd;font-size:20px" class="margin common">&lt;</div>
<div class="li">
<div>
<p class="font_12" style="color:#FF680B">￥358</p>
<p class="font_12">02-15 周五</p>
</div>
</div>
<div class="li">
<div>
<p class="font_12" style="color:#FF680B">￥358</p>
<p class="font_12">02-15 周五</p>
</div>
</div>
<div class="li active_data">
<div>
<p class="font_12" style="color:#FF680B">￥358</p>
<p class="font_12">02-15 周五</p>
</div>
</div>
<div style="color:#dddddd;font-size:20px" class="margin common">&gt;</div>
<div class="font_12" style="margin-top:30px;color:#FF680B;width:6%">其他日期</div>
</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="20" :offset="2">
<el-row class="px" style="margin-bottom:10px">
<el-col :span="16" style="color:rgba(51,51,51,1);font-size:16px;padding-left:6px">去程：成都-雅典</el-col>
<el-col :span="8" style="font-size:12px;color:rgba(102,102,102,1);">
<el-col :span="6">直飞优选</el-col>
<el-col :span="6">时间排序</el-col>
<el-col :span="6">总耗时</el-col>
<el-col :span="6">价格</el-col>
</el-col>
</el-row>
<el-row class="list">
<el-col :span="4" class="first">
<el-row>
<el-col :span="10">
<img src="" alt="">
</el-col>
<el-col :span="14">
<p style="font-size:14px;color:rgba(0,0,0,1);">四川航空</p>
<p style="font-size:12px;color:rgba(0,0,0,1);">3U609 空客330（大）</p>
</el-col>
</el-row>
</el-col>
<el-col class="second" :span="10">
<el-col :span="8" style="text-align:right">
<p class="time">14:20</p>
<p class="adress">双流国际机场T1</p>
</el-col>
<el-col :span="8" style="text-align:center">
<p style="font-size:12px;color:rgba(102,102,102,1);">12小时34分</p>
<p class="fg"></p>
<p class="adress"><span class="green">香港</span>转机</p>
</el-col>
<el-col :span="8" style="text-align:left">
<p class="time">14:20</p>
<p class="adress">双流国际机场T1</p>
<span class="green num">+1</span>
</el-col>
</el-col>
<el-col class="third" :span="10" style="text-align:center">
<el-col :span="8">
<p class="orange font_12" style="margin-top:15px;">航班详情</p>
</el-col>
<el-col :span="8">
<p class="orange">￥489</p>
<p class="font_12" style="margin-top:10px;">经济舱</p>
</el-col>
<el-col :span="8">
<el-button style="color:#FF6633;border:1px solid #FF6633;margin-top:10px" size="small">购买</el-button>
</el-col>
</el-col>
</el-row>
</el-col>
</el-row>
</div>
</div>
</div>
</template>
<script>
import moment from 'moment'
import Choose from '@/components/Ticket/Choose.vue'
import calendar from '@/components/mall/calendar.vue'
export default {
components: {
"v-choose":Choose,
"v-calendar":calendar
},
data () {
return {
classArray:[],
Choose_Info:{},
today:moment().format("YYYY-MM-DD"),
}
},
mounted () {
},
created(){
// this.getList()
console.log(this.today)
},
methods: {
ChooseInfo(val){
console.log("ChooseInfo",val)
if(val){
this.Choose_Info=val;
this.getList()
}
},
getList(){
this.apiJavaPost('/api/dmc/airticket/getB2BAirticketList',this.Choose_Info,res=>{
console.log("机票",res)
},null)
},
creatCalendar(list){ // 创建日历
let dateList = [];
if(list && list.length>0){
list.forEach((x,index)=>{
if(x.tcState==3){
let msg = {
dateStr:x.startDate,
cDate:x.startDate.replace('-','年').replace('-','月'),
price:x.b2CPrice,
b2BMemberPrice:x.b2BMemberPrice,
b2BPrice:x.b2BPrice,
b2CMemberPrice:x.b2CMemberPrice,
id:index,
dateStrS:x.startDate.substring(0,x.startDate.length-3)
}
dateList.push(msg);
}
});
}
let monthArray = [];
for (var i in dateList) {
var data = dateList[i];
var dateDict = {'mounth':data.dateStr.substring(0,data.dateStr.length-3)};
monthArray.push(dateDict);
}
//数组去重,获取有几个月
var hash={};
monthArray = monthArray.reduce(
function (item,next) {
hash[next.mounth]?'' :hash[next.mounth] = true && item.push(next);
return item;
},[]
)
//数据分组
let classArray = [];
for (var j in monthArray) {
var newArray = new Array();
for (var i in dateList) {
var data = dateList[i];
if (data.dateStr.substring(0,data.dateStr.length-3) == monthArray[j].mounth) {
newArray.push(data)
}
}
classArray.push(newArray);
}
this.classArray = classArray;
var hash={};
dateList = dateList.reduce(
function (item,next) {
hash[next.dateStrS]?'' :hash[next.dateStrS] = true && item.push(next);
return item;
},[]
)
this.calendarTit = dateList;
},
}
}
</script>
<style>
@import '../../assets/global/font.css';
@import '../../assets/css/reset.css';
.active_data{
margin:0;
border-top:6px solid #EE4454;
box-shadow:0px 2px 6px 3px rgba(149,149,149,0.23);
transform: rotateX(100px)
}
.active_data div{
border: none!important;
}
.common{
width:2%;
}
.margin{
margin-top:25px;
}
/* .date_list div:nth-last-child(3){
border: none;
} */
.li{
box-sizing: border-box;
width:10%;
}
.li div{
margin:10px 0;
border-right:1px solid #dddddd;
}
.li p{
padding: 6px 0;
}
.date_list>div{
text-align: center;
}
.date_list{
background:rgba(248,248,248,1);
border:1px solid rgba(221,221,221,1);
margin:22px 0;
display: flex;
justify-content: space-between;
}
.font_12{
font-size: 12px;
}
.ticketlist_content{
padding-top:20px;
background:rgba(245,245,245,1);
}
.green{
color:rgba(15,181,144,1);
}
.second .el-col-8{
padding:0 6px;
box-sizing: border-box;
position: relative;
}
.second .num{
position: absolute;
right: 30%;
font-size:12px;
top: 0;
}
.adress{
font-size:12px;
color:rgba(102,102,102,1);
}
.second .time{
font-size:24px;
font-weight:400;
color:rgba(51,51,51,1);
}
p{
margin: 0;
padding: 0;
}
.list{
padding:10px 6px;
box-sizing: border-box;
background:rgba(255,255,255,1);
margin-bottom: 10px;
}
.fg{
margin:6px 0;
height:1px;
background:rgba(153,153,153,1);
}
.list .first img{
width: 40px;
height: 40px;
border-radius: 50%;
}
.px{
height:36px;
background:rgba(221,221,221,1);
line-height: 36px;
}
</style>
\ No newline at end of file
src/plugins/index.js
View file @ 23cc97ce
......@@ -13,8 +13,8 @@ export default {
Vue.prototype.domainManager = function() {
// var domainUrl = "http://test_reborn.oytour.com";//主域名
// var domainUrl = "http://reborn.oytour.com"; //主域名
var domainUrl = "http://192.168.2.214:8082"//主域名
// let domainUrl = "http://192.168.2.16:8083"; //刘东主域名
// var domainUrl = "http://192.168.2.214:8082"//主域名
let domainUrl = "http://192.168.2.16:8083"; //刘东主域名
if (this.isOnline()) {
if(window.location.host.indexOf('viitto.com')!=-1)
domainUrl = "http://test.viitto.com"
......@@ -139,7 +139,7 @@ export default {
this.apiurl = apiurl;
var token = "";
var key = "";
let userInfo = JSON.parse(localStorage.userInfo)
let userInfo = localStorage.userInfo ? JSON.parse(localStorage.userInfo) : ''
let uid = userInfo.accountId ? userInfo.accountId : 0
if (this.getLocalStorage() != null) {
token = this.getLocalStorage().token;
......
src/router.js
View file @ 23cc97ce
......@@ -122,7 +122,24 @@ export default new Router({
meta: {
title: '发票信息'
}
}]
},
{
path: '/TicketHome',
name: 'TicketHome',
component: resolve => require(['@/components/Ticket/TicketHome'], resolve),
meta: {
title: '机票'
}
},
{
path: '/TicketList',
name: 'TicketList',
component: resolve => require(['@/components/Ticket/TicketList'], resolve),
meta: {
title: '机票列表'
}
}
]
}
]
}
......
src/views/index.vue
View file @ 23cc97ce
......@@ -67,6 +67,9 @@ export default {
if(index=='2-1'){
path='/heel'
}
if(index=='3'){
path='/TicketList'
}
if (path != "") {
this.$router.push({ path });
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment