Skip to content

J
jz_Travel
Commit 23b75f00 authored by zhengke's avatar zhengke
Browse files
Options

机票列表

parent b13bb880
Hide whitespace changes
Inline Side-by-side
Showing with 3795 additions and 0 deletions
asset/css/flex.css 0 → 100644
View file @ 23b75f00
.row{
display: flex;
}
.row-w{
display: flex;
flex-wrap: wrap;
}
.row-aic-w{
display: flex;
flex-wrap: wrap;
align-items: center;
}
.row-aic-n{
display: flex;
flex-wrap: nowrap;
align-items: center;
}
.row-ajc-w{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.row-ajc-n{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.row-acje{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: end;
}
.row-sb-n{
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: nowrap;
}
.row-sbas-n{
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
}
.row-sb-w{
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.flex1{
flex: 1;
}
.flexG{
flex-grow: 1;
}
.flexS{
flex-shrink: 0;
}
.column{
display: flex;
flex-direction: column;
}
.column-jc{
display: flex;
flex-direction: column;
justify-content: center;
}
.column-ajc{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.block{
display: block;
}
.inlineblock{
display: inline-block;
}
.hidden{
overflow: hidden;
}
.fixed{
position: fixed;
}
.fixedHeader{
left: 0;
right: 0;
top: 0;
}
.fixedFooter{
border-radius: 50rpx 50rpx 0px 0px;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
-webkit-border-radius: 50rpx 50rpx 0px 0px;
-moz-border-radius: 50rpx 50rpx 0px 0px;
-ms-border-radius: 50rpx 50rpx 0px 0px;
-o-border-radius: 50rpx 50rpx 0px 0px;
}
.relative{
position: relative;
}
.absolute{
position: absolute;
}
.z-index1{
z-index: 1;
}
.z-index2{
z-index: 2;
}
.z-index3{
z-index: 3;
}
.z-index4{
z-index: 4;
}
.fontWeight400{
font-weight: 400;
}
.fontBold{
font-weight: bold;
}
.nowrap{
white-space: nowrap;
}
.ellipsis1{
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.width100{
width: 100rpx;
}
.width100One{
width: 100%;
}
.width45vh{
width: 44vh;
}
.textCenter{
text-align: center;
}
.textRight{
text-align: right;
}
.fz14{
font-size: 14rpx;
}
.fz16{
font-size: 16rpx;
}
.fz17{
font-size: 17rpx;
}
.fz18{
font-size: 18rpx;
}
.fz19{
font-size: 19rpx;
}
.fz20{
font-size: 20rpx;
}
.fz21{
font-size: 21rpx;
}
.fz22{
font-size: 22rpx;
}
.fz24{
font-size: 24rpx;
}
.fz26{
font-size: 26rpx;
}
.fz28{
font-size: 28rpx;
}
.fz30{
font-size: 30rpx;
}
.fz36{
font-size: 36rpx;
}
.fz34{
font-size: 34rpx;
}
.fz40{
font-size: 40rpx;
}
.fz42{
font-size: 42rpx;
}
.fz52{
font-size: 52rpx;
}
.ML5{
margin-left: 5rpx;
}
.ML10{
margin-left: 10rpx;
}
.ML15{
margin-left: 15rpx;
}
.ML20{
margin-left: 20rpx;
}
.ML25{
margin-left: 25rpx;
}
.ML30{
margin-left: 30rpx;
}
.ML31{
margin-left: 31rpx;
}
.ML40{
margin-left: 40rpx;
}
.ML50{
margin-left: 50rpx;
}
.ML60{
margin-left: 60rpx;
}
.ML70{
margin-left: 70rpx;
}
.MR5{
margin-right: 5rpx;
}
.MR10{
margin-right: 10rpx;
}
.MR15{
margin-right: 15rpx;
}
.MR20{
margin-right: 20rpx;
}
.MR30{
margin-right: 30rpx;
}
.MR40{
margin-right: 40rpx;
}
.MR50{
margin-right: 50rpx;
}
.MR60{
margin-right: 60rpx;
}
.MT10{
margin-top: 10rpx;
}
.MT15{
margin-top: 15rpx;
}
.MT20{
margin-top: 20rpx;
}
.MT25{
margin-top: 25rpx;
}
.MT30{
margin-top: 30rpx;
}
.MT31{
margin-top: 31rpx;
}
.MT35{
margin-top: 35rpx;
}
.MT38{
margin-top: 38rpx;
}
.MT40{
margin-top: 40rpx;
}
.MT45{
margin-top: 45rpx;
}
.MT50{
margin-top: 50rpx;
}
.MT60{
margin-top: 60rpx;
}
.MT64{
margin-top: 64rpx;
}
.MT75{
margin-top: 75rpx;
}
.MB5{
margin-bottom: 5rpx;
}
.MB10{
margin-bottom: 10rpx;
}
.MB20{
margin-bottom: 20rpx;
}
.MB30{
margin-bottom: 30rpx;
}
.MB35{
margin-bottom: 35rpx;
}
.MB40{
margin-bottom: 40rpx;
}
.MB43{
margin-bottom: 43rpx;
}
.MB50{
margin-bottom: 50rpx;
}
.MB52{
margin-bottom: 52rpx;
}
.MB55{
margin-bottom: 55rpx;
}
.MB70{
margin-bottom: 70rpx;
}
.MB255{
margin-bottom: 255rpx;
}
.PT20{
padding-top: 20rpx;
}
.PT38{
padding-top: 38rpx;
}
.PT65{
padding-top: 65rpx;
}
.PT123{
padding-top: 123rpx;
}
.PB200{
padding-bottom: 200rpx;
}
.PB260{
padding-bottom: 260rpx;
}
.PB300{
padding-bottom: 300rpx;
}
.PY53{
padding: 0 53rpx;
}
.PX4{
padding: 0 4rpx;
}
.PX50{
padding: 0 50rpx;
}
.relativeFT5{
top: -5rpx;
}
.relativeFT8{
top: -8rpx;
}
.relativeFT10{
top: -10rpx;
}
.color9999A6{
color: #9999A6;
}
.color9999A5{
color: #9999A5;
}
.colorDEBF7B{
color: #DEBF7B;
}
.colorC09D4F{
color: #C09D4F;
}
.colorFF5858{
color: #FF5858;
}
.color1D1D20 {
color: #1D1D20;
}
.color111 {
color: #111111;
}
.color000 {
color: #000;
}
.colorFFF {
color: #FFF;
}
.colorC6C1BC{
color: #C6C1BC;
}
.colorE1C278{
color: #E1C278;
}
.bgFFF{
background: #fff;
}
.bgF5{
background: #f5f5f5;
}
.bgECF1F4{
background: #ECF1F4;
}
.bgDEBF7B{
background: #DEBF7B;
}
.bg9BC75D{
background: #9BC75D;
}
.bgFF5858{
background: #FF5858;
}
.bgE1C278{
background: #E1C278;
}
.bg111{
background: #111111;
}
.bgF2EEE5{
background: #F2EEE5;
}
.border1{
border: 1px solid;
}
.borderDEBF7B{
border-color: #DEBF7B;
}
.borderF5{
border-color: #F5F5F5;
}
.borderFF5858{
border-color: #FF5858;
}
.height-line1{
width: 100%;
height: 0;
border-bottom: 1px #ECF1F4 solid;
}
.height-line2{
width: 100%;
height: 0;
border-bottom: 2px #ECF1F4 solid;
}
.width-lineH83{
width: 2px;
height: 83rpx;
}
.width-lineH49{
width: 2px;
height: 49rpx;
}
.lineC8C8CF{
border-color: #C8C8CF;
}
.lineFF5858{
border-bottom: 1px #FF5858 solid;
}
.height-dashed1{
width: 100%;
height: 0;
border-bottom: 1px #D7D7DC dashed;
}
.DashedECF1F4{
border-color: #ECF1F4;
}
.height100vh{
height: 100vh;
}
.height100{
height: 100%;
}
.height1057{
height: 1057rpx;
}
.WH12R50{
width: 12rpx;
height: 12rpx;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
}
.WH6R50{
width: 6rpx;
height: 6rpx;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
}
\ No newline at end of file
pages.json
View file @ 23b75f00
......@@ -732,6 +732,45 @@
"path": "addGuest" //新增旅客
}
]
},
// 机票
{
"root": "pages/airTicket",
"pages": [
{
"path": "airTicketList",//机票列表
"style":{
"navigationBarTitleText": "机票列表"
}
},
{
"path": "airTicketDetails",//机票下单
"style":{
"navigationStyle": "custom"
}
},
{
"path": "AirplanePassengerList",//乘机人列表
"style":{
"navigationBarTitleText": "乘机人列表",
"navigationBarBackgroundColor": "#FFFFFF"
}
},
{
"path": "AirplanePassengerAddEditing"//添加编辑乘机人
},
{
"path": "TicketOrderList",//机票订单列表
"navigationBarTitleText": "订单列表"
},
{
"path": "TicketOrderDetails",//机票订单详情
"navigationBarTitleText": "订单详情",
"style": {
"navigationStyle": "custom"
}
}
]
}
],
"globalStyle": {
......
pages/airTicket/AirplanePassengerAddEditing.vue 0 → 100644
View file @ 23b75f00
<template>
<view class="bgFFF height100vh">
<view class="AirplanePassengerAddEditingC">
<view class="column">
<view class="AirplanePassengerAddEditingC-text row-sb-n fz30">
<text class="flexS AirplanePassengerAddEditingC-textL">姓名</text>
<input class="flexG fontBold" type="text" placeholder="中文姓名，请于乘机证件相同"
v-model="text"/>
</view>
<view class="height-line1"></view>
</view>
<view class="column">
<view class="AirplanePassengerAddEditingC-text row-sb-n fz30">
<text class="flexS AirplanePassengerAddEditingC-textL">证件</text>
<view class="flexG row-aic-n">
<view v-for="(item,index) in certificateList" class="AirplanePassengerAddEditingC-choose MR30">
<!-- circle -->
<uni-icons color="#DEBF7B" type="checkbox-filled" size="18"></uni-icons>
<text class="ML20 fz30 fontBold">{{item.Name}}</text>
</view>
</view>
</view>
<view class="height-line1"></view>
</view>
<view class="column">
<view class="AirplanePassengerAddEditingC-text row-sb-n fz30">
<text class="flexS AirplanePassengerAddEditingC-textL">证件号</text>
<input class="flexG fontBold" type="text" placeholder="请输入身份证号码"
v-model="text"/>
</view>
<view class="height-line1"></view>
</view>
</view>
<view class="AirplanePassengerList-footer fixedFooter bgFFF fixed z-index2">
<view class="AirplanePassengerList-buttom bgDEBF7B fz32 fontBold textCenter"
@click="showAddEditingPreviwe=true">
确认添加
</view>
</view>
<u-popup
v-model="showAddEditingPreviwe"
mode="center"
border-radius="20"
length="90%"
:safe-area-inset-bottom="true">
<view class="showAddEditing-box bgFFF">
<view class="fz30 fontBold textCenter">请确认乘机人信息</view>
<view class="showAddEditing-Tips textCenter fz26 MT25">
<text>请仔细检查乘机人信息，</text>
<text class="colorFF5858">信息错误将导致无法登机</text>
</view>
<view class="showAddEditing-Details bgF5 MT15">
<view class="row-aic-n">
<text class="fz26 flexS">姓名</text>
<text class="fz30 fontBold colorFF5858 flexG">王俊苏</text>
</view>
<view class="row-aic-n">
<text class="fz26 flexS">证件号</text>
<text class="fz30 fontBold colorFF5858 flexG">212114555698544</text>
</view>
<view class="row-aic-n">
<text class="fz26 flexS">出生日期</text>
<text class="fz30 fontBold flexG">2017-01-25</text>
</view>
</view>
<view class="showAddEditing-buttom fz32 fontBold textCenter row-sb-n">
<view class="border1 colorDEBF7B borderDEBF7B" @click="showAddEditingPreviwe=false">返回修改</view>
<view class="border1 borderDEBF7B" @click="submit">确认添加</view>
</view>
</view>
</u-popup>
</view>
</template>
<script>
export default {
components: {
},
data() {
return {
loading: false,
certificateList:[
{Name:'身份证',Id:1},
{Name:'护照',Id:2},
],
text:'',
showAddEditingPreviwe: false
}
},
onLoad(options){
uni.setNavigationBarTitle({
title: options.item?'编辑乘机人':'新增乘机人'
})
},
created() {},
methods: {
submit(){
// uni.showLoading({
// title: "",
// });
// uni.hideLoading();
},
}
}
</script>
<style scoped>
@import url("@/asset/css/flex.css");
@import url("./style.css");
.AirplanePassengerAddEditingC{
padding: 0 54rpx;
}
.AirplanePassengerAddEditingC-text{
padding: 35rpx 0;
}
.AirplanePassengerAddEditingC-textL{
width: 147rpx;
}
.AirplanePassengerAddEditingC-choose:last-child{
margin-left: 79rpx;
}
.showAddEditing-box{
width: 642rpx;
border-radius: 50rpx;
padding: 49rpx 55rpx 74rpx 55rpx;
}
.showAddEditing-Tips{
padding: 0 70rpx;
}
.showAddEditing-Details{
border-radius: 50rpx;
padding: 60rpx 47rpx;
}
.showAddEditing-Details>view:nth-child(2){
padding: 68rpx 0;
}
.showAddEditing-Details>view>text:first-child{
width: 150rpx;
}
.showAddEditing-buttom{
margin-top: 70rpx;
}
.showAddEditing-buttom>view{
width: 244rpx;
padding: 25rpx 0;
border-radius: 40rpx;
}
</style>
\ No newline at end of file
pages/airTicket/AirplanePassengerList.vue 0 → 100644
View file @ 23b75f00
<template>
<view class="bgF5 height100vh">
<view class="AirplanePassengerList-Selected bgFFF">
<view class="AirplanePassengerList-Selected-num">
<text class="fz30 fontBold">已选：</text>
<text class="fz34 fontBold ML15">1</text>
<text class="fz30 fontBold ML10">人数</text>
<text class="fz26 color9999A5">(2岁以上)</text>
<text class="fz30 fontBold ML20">0</text>
<text class="fz30 fontBold ML10">婴儿</text>
</view>
<view class="AirplanePassengerList-add bgFFF textCenter fz26 colorDEBF7B border1 borderDEBF7B"
@click="clickAddEditing()">
添加乘机人
</view>
</view>
<view class="AirplanePassengerList-box bgFFF">
<view class="AirplanePassengerListC" v-for="(item,index) in 2">
<u-swipe-action
:index="index" :key="index"
:options="options"
:show="item.show"
:auto-close="false"
:content-click="bindClick"
@click="bindClick">
<view class="row-sb-n">
<view class="flexS row-aic-n">
<!-- <uni-icons color="#DEBF7B" type="checkbox-filled" size="18"></uni-icons> -->
<uni-icons color="#DEBF7B" type="circle" size="18"></uni-icons>
<!-- <view class="AirplanePassengerListC-status border1 borderDEBF7B bgDEBF7B textCenter">
<uni-icons type="checkmarkempty" size="15"></uni-icons>
</view> -->
</view>
<view class="flexG column ML30 title-wrap">
<view class="row-aic-n">
<text class="fz30 fontBold">王俊苏</text>
<text class="AirplanePassengerListC-infant ML15 fz20 colorDEBF7B border1 borderDEBF7B">婴儿</text>
</view>
<view class="fz26 color9999A5 MT25">
<text>身份证</text> <text class="ML15">2221115454465632535</text>
</view>
</view>
<!-- <view class="flexS ML15" @click="clickAddEditing(index+1)">
<img class="inlineblock" mode="widthFix" style="width: 28rpx;height: 30rpx;"
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1696835692000_775.png"/>
</view> -->
</view>
</u-swipe-action>
</view>
</view>
<view class="AirplanePassengerList-footer fixedFooter bgFFF fixed z-index2">
<view class="AirplanePassengerList-buttom bgDEBF7B fz32 fontBold textCenter">
确认
</view>
</view>
</view>
</template>
<script>
export default {
components: {
},
data() {
return {
options: [{
text: '编辑',
style: {
backgroundColor: '#DEBF7B'
}
},
{
text: '删除',
style: {
backgroundColor: '#f5f5f5',
color:'#DEBF7B'
}
}
],
isOpened: 'right',
}
},
onLoad(options){
},
created() {},
methods: {
bindClick(index,index1) {
uni.showToast({
title: `点击了第${index+1}条数据${index1?'删除':'编辑'}按钮`,
icon: 'none'
});
},
clickEdit(){
},
clickDelete(){
},
clickAddEditing(item){
uni.navigateTo({
url: '/pages/airTicket/AirplanePassengerAddEditing?item='+item
});
}
}
}
</script>
<style scoped>
@import url("@/asset/css/flex.css");
@import url("./style.css");
.AirplanePassengerList-Selected{
padding: 51rpx 54rpx 41rpx 54rpx;
}
.AirplanePassengerList-Selected-num{
text-align: center;
margin-bottom: 42rpx;
}
.AirplanePassengerList-add{
padding: 18rpx 0;
border-radius: 35rpx;
}
.AirplanePassengerList-box{
padding: 0 54rpx;
margin-top: 29rpx;
margin-bottom: 200rpx;
}
.AirplanePassengerListC:first-child{
padding: 38rpx 0 49rpx 0;
}
.AirplanePassengerListC{
padding: 0 0 49rpx 0;
}
.AirplanePassengerListC-status{
width: 36rpx;
height: 36rpx;
line-height: 36rpx;
border-radius: 50%;
}
.AirplanePassengerListC-infant{
padding: 1rpx 11rpx;
border-radius: 6rpx;
}
</style>
\ No newline at end of file
pages/airTicket/TicketOrderDetails.vue 0 → 100644
View file @ 23b75f00
<template>
<view class="TicketOrderDetailsBg height100vh">
<scroll-view
scroll-y="true"
style="height: 100%; flex: 1; box-sizing: border-box"
@scroll="scroll"
>
<NavigationHeader :title="title" :titleStyle="titleStyle"></NavigationHeader>
<!-- :style="{top:topheight+'px'}" -->
<view class="TicketOrderDetailsC overflow PT123 PB260">
<view class="PY53">
<view class="row-sb-n MT20">
<view class="flexS row-aic-n">
<img class="inlineblock MR20" mode="widthFix" style="width: 44rpx;height: 44rpx;"
:src="statusImg[0]"/>
<!-- 已付款 待付款 已取消colorC6C1BC -->
<text class="fz36 fontBold">已付款</text>
</view>
<view @click="getDetail">
<text class="fz26 colorC09D4F">¥</text>
<text class="fz36 colorC09D4F fontBold ML15"> 759.9</text>
<img class="inlineblock ML10" mode="widthFix" style="width: 18rpx;height: 12rpx;"
:src="statusImg[3]"/>
</view>
</view>
<view class="TicketOrderDetailsCard MT45 bgFFF hidden">
<view class="row-sb-n">
<view class="row-aic-n">
<view class="fz28 color111 ML20">
<text>09-30</text> <text class="ML10">周六</text>
</view>
<view class="fz28 color111 ML31">
总时长 5h
</view>
</view>
<view class="fz28 colorE1C278 row-aic-n" @click="TicketDetails(items)">
<text>详情</text>
<uni-icons class="ML10" color="#DEBF7B" :type="items.show?'arrowdown':'arrowright'" size="14"></uni-icons>
<!-- <uni-icons class="ML10" color="#DEBF7B" type="arrowright" size="14"></uni-icons> -->
</view>
</view>
<view class="MT60 PX50" style="display: none;">
<view class="row relative" v-for="(item,index) in 2"
:class="[index==0?'MB50':'']">
<text v-if="index==1" class="fz18 fontWeight400 colorFF5858 absolute airTicketDetailsCard-timeT">
10-01 周日
</text>
<view class="airTicketDetailsCard-timeL column flexS MR20 textRight">
<view v-if="index==0" class="fz28 fontBold relative relativeFT10">09:00 </view>
<view v-if="index==1" class="MT25 fz28 fontBold">
11:30
</view>
</view>
<view class="flexS MR30">
<view class="width-lineH49 bgE1C278 relative">
<view class="bgE1C278 absolute WH12R50 airTicketDetailsCard-LinT"></view>
<template v-if="index">
<view class="bgE1C278 absolute WH6R50 airTicketDetailsCard-LinT2"></view>
<view class="bgE1C278 absolute WH6R50 airTicketDetailsCard-LinT3"></view>
<view class="bgE1C278 absolute WH6R50 airTicketDetailsCard-LinT4"></view>
</template>
<view class="bgE1C278 absolute WH12R50 airTicketDetailsCard-LinB"></view>
<template v-if="index!=1">
<view class="bgE1C278 absolute WH6R50 airTicketDetailsCard-LinB2"></view>
</template>
</view>
</view>
<view class="column flexG relative">
<view v-if="index==1" class="airTicketDetailsCard-ZhuanNum bgE1C278 fz18 colorFFF absolute">转+2</view>
<view class="airTicketDetailsCard-title row-aic-n absolute" v-if="index==0">
<img class="inlineblock flexS" mode="widthFix" style="width: 20rpx;height: 17rpx;"
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1696749257000_469.png"/>
<view class="flexG">
<text class="block width100One overflow fz20 ML5 color9999A5 fontWeight400">东航 CA1852 </text>
</view>
</view>
<view class="fz28 fontBold relative relativeFT8" v-if="index==0">
<text class="block width100One hidden">CTU 双流机场 T2</text>
</view>
<view class="fz28 fontBold MT25" v-if="index==1">
<text class="block width100One hidden">PEK 首都机场 T3</text>
</view>
</view>
</view>
</view>
<view class="MT60 PX50 MB50">
<view class="row-aic-n relative" v-for="(item,index) in 3"
:class="[index!=2?'MB70':'']">
<text v-if="index==2" class="fz18 fontWeight400 colorFF5858 absolute airTicketDetailsCard-timeT">
10-01 周日
</text>
<view class="airTicketDetailsCard-timeL column flexS MR20 textRight">
<view :class="[index?'fz24':'fz28 fontBold']">09:00 </view>
<view class="MT35" :class="[index!=2?'fz24':'fz28 fontBold']">
11:30
</view>
</view>
<view class="flexS MR30">
<view class="width-lineH83 bgE1C278 relative">
<view class="bgE1C278 absolute WH12R50 airTicketDetailsCard-LinT"></view>
<template v-if="index">
<view class="bgE1C278 absolute WH6R50 airTicketDetailsCard-LinT2"></view>
<view class="bgE1C278 absolute WH6R50 airTicketDetailsCard-LinT3"></view>
</template>
<view class="bgE1C278 absolute WH12R50 airTicketDetailsCard-LinB"></view>
<template v-if="index!=2">
<view class="bgE1C278 absolute WH6R50 airTicketDetailsCard-LinB2"></view>
<view class="bgE1C278 fz18 colorFFF absolute airTicketDetailsCard-LinText">中转</view>
</template>
</view>
</view>
<view class="column flexG relative">
<view class="airTicketDetailsCard-title row-aic-n absolute">
<img class="inlineblock flexS" mode="widthFix" style="width: 20rpx;height: 17rpx;"
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1696749257000_469.png"/>
<view class="flexG">
<text class="block width100One overflow fz20 ML5 color9999A5 fontWeight400">东航 CA1852 </text>
</view>
</view>
<view class="fz28 fontBold relative relativeFT8">
<text class="block width100One hidden">CTU 双流机场 T2</text>
</view>
<view class="fz28 fontBold MT25">
<text class="block width100One hidden">PEK 首都机场 T3</text>
</view>
</view>
</view>
</view>
<view class="height-dashed1 DashedECF1F4 relative MT30">
<view class="TicketOrderDetailsBor-LR TicketOrderDetailsBor-L absolute z-index2 bgF2EEE5"></view>
<view class="TicketOrderDetailsBor-LR TicketOrderDetailsBor-R absolute z-index2 bgF2EEE5"></view>
</view>
<view class="MT38">
<view class="TicketOrderDetailsN-box" v-for="(item,index) in 3">
<view class="row-sb-n ">
<view class="TicketOrderDetails-Name MR40 fz26 color9999A5 textRight flexS">
<text>01</text>
<text class="ML15">乘机人</text>
</view>
<view class="fz26 fontBold color1D1D20 flexG">
<text class="width100One ellipsis1">李润豪</text>
</view>
<view class="fz22 color9999A5 flexS">
¥258.5
</view>
</view>
<view class="row-sb-n MT25">
<view class="TicketOrderDetails-Name MR40 fz26 color9999A5 textRight flexS">
<text></text>
<text class="ML15">身份证</text>
</view>
<view class="fz26 fontBold color1D1D20 flexG">
514474455121454521
</view>
</view>
</view>
</view>
</view>
</view>
<view class="airTicketDetailsInstructionsBox" style="display: none;">
<img class="inlineblock" mode="widthFix" style="width: 125rpx;height: 30rpx;"
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1696821283000_148.png"/>
<view class="airTicketDetailsInstructions MT15 fz24">
本模块为保险投保页面，由明亚保险经纪股份有限公司管理运
营。请仔细阅读客户通知书、保险代理协议、投保须知及条款
等重要内容。为保障你的权益，我们将会安全记录你的操作。本模
块为保险投保页面，由明亚保险经纪股份有限公司管理运营。请
仔细阅读客户通知书、保险代理协议、投保须知及条款等重要内容
。为保障你的权益，我们将会安全记录你的操作。本模块为保险投
保页面，由明亚保险经纪股份有限公司管理运营。请仔细阅读客户通知
书、保险代理协议、投保须知及条款等重要内容。为保障你的权益，我
们将会安全记录你的操作。本模块为保险投保页面，由明亚保险经纪股份
有限公司管理运营。请仔细阅读客户通知书、保险代理协议、投保须知及
条款等重要内容。为保障你的权益，我们将会安全记录你的操作。
</view>
</view>
</view>
</scroll-view>
<view class="airTicketDetailsFooter fixedFooter bgFFF fixed row-ajc-n z-index2">
<view class="TicketOrderDetailsFooter">
<view class="airTicketDetailsFooter-order bgDEBF7B row-ajc-w fontBold">
<!-- 取消订单 立即支付 重新下单 -->
<text class="fz32">取消订单</text>
</view>
</view>
</view>
<u-popup
v-model="showDetailPreviwe"
mode="bottom"
border-radius="50"
:safe-area-inset-bottom="true">
<view class="TicketOrderDetailsGet-box relative">
<uni-icons class="TicketOrderDetailsGet-close absolute"
color="#9999A5" type="closeempty" size="24"
@click="showDetailPreviwe=false"></uni-icons>
<view class="fz30 fontBold textCenter">金额明细</view>
<view class="MT75 TicketOrderDetailsGetC">
<view class="TicketOrderDetailsGet-Num MB52">
<view class="row-sb-n">
<text class="flexS">人数</text>
<view class="TicketOrderDetailsGet-NumA flexS ML30">
<view class="height-line1 lineC8C8CF"></view>
</view>
<view class="TicketOrderDetailsGet-NumR row-aic-n">
<view class="fz30 fontBold ML60 MR60 textRight">
¥654
</view>
<view class="fz30 fontBold textRight">
×1人
</view>
</view>
</view>
<view class="fz24 color9999A5 MT25">(2岁及2岁以上的顾客)</view>
</view>
<view class="TicketOrderDetailsGet-Num MB52">
<view class="row-sb-n">
<text class="flexS">婴儿</text>
<view class="TicketOrderDetailsGet-NumA flexS ML30">
<view class="height-line1 lineC8C8CF"></view>
</view>
<view class="TicketOrderDetailsGet-NumR row-aic-n">
<view class="fz30 fontBold ML60 MR60 textRight">
¥654
</view>
<view class="fz30 fontBold textRight">
×1人
</view>
</view>
</view>
<view class="fz24 color9999A5 MT25">(2岁以下的顾客)</view>
</view>
</view>
<view class="absolute TicketOrderDetailsGet-Footer bgFFF row-sb-n">
<view>
<view class="fontBold">
<text class="fz32 color111">¥ </text>
<text class="fz52">3,200</text>
</view>
<view class="fz26 color9999A5 MT5">共 2 人</view>
</view>
<view>
<view class="airTicketDetailsFooter-order PXY2463 bgDEBF7B row-ajc-w fontBold">
<!-- 取消订单 立即支付 重新下单 -->
<text class="fz32">去支付</text>
</view>
</view>
</view>
</view>
</u-popup>
</view>
</template>
<script>
import NavigationHeader from "./components/NavigationHeader.vue";
export default {
components: {
NavigationHeader
},
data() {
return {
showDetailPreviwe: false,
topheight:0,
titleStyle:{},
boxOption: 0,
statusImg:[
'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1696906390000_78.png',
'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1696906393000_283.png',
'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1696906397000_762.png',
'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1696906709000_896.png'
],
title:'订单详情'
}
},
onLoad(options){
let that = this;
uni.getSystemInfo({
success(res) {
that.titleStyle = {
height: "45px",
paddingTop: `${res.statusBarHeight}px`,
opacity: 0,
};
that.topheight = 55+res.statusBarHeight
},
});
},
created() {},
mounted() {
},
methods: {
getDetail(){
this.showDetailPreviwe = true
},
scroll(e) {
this.boxOption = Math.floor((e.detail.scrollTop - 50) / 1.5);
this.titleStyle.opacity =
e.detail.scrollTop - 100 < 0
? 0
: Math.floor(e.detail.scrollTop - 100) / 100 > 1
? 1
: Math.floor(e.detail.scrollTop - 100) / 10;
this.$forceUpdate();
},
}
}
</script>
<style scoped>
@import url("@/asset/css/flex.css");
@import url("./style.css");
.TicketOrderDetailsC{
}
.TicketOrderDetailsCard{
border-radius: 50rpx;
padding: 30rpx 50rpx 37rpx 42rpx;
margin-bottom: 90rpx;
}
.TicketOrderDetailsCard-Time{
}
.TicketOrderDetails-Name{
width: 122rpx;
}
.TicketOrderDetailsN-box{
margin-bottom: 47rpx;
}
.TicketOrderDetailsN-box:last-child{
margin-bottom: 0;
}
.TicketOrderDetailsFooter{
padding: 38rpx 0 67rpx 0;
}
.TicketOrderDetailsGet-box{
margin: 46rpx 53rpx 51rpx 53rpx;
}
.TicketOrderDetailsGet-close{
right: 0;
top: 0;
}
.TicketOrderDetailsGetC{
padding-bottom: 300rpx;
}
.TicketOrderDetailsGet-Num{
}
.TicketOrderDetailsGet-NumA{
width: 295rpx;
}
.TicketOrderDetailsGet-NumR{
/* width: 350rpx; */
}
.TicketOrderDetailsGet-Footer{
left: 0;
right: 0;
bottom: 0;
}
.airTicketDetailsFooter-order.PXY2463{
padding: 24rpx 63rpx;
}
.TicketOrderDetailsBor-LR{
width: 50rpx;
height: 50rpx;
border-radius: 50%;
}
.TicketOrderDetailsBor-L{
left: -78rpx;
top: -25rpx;
}
.TicketOrderDetailsBor-R{
right: -78rpx;
top: -25rpx;
}
</style>
\ No newline at end of file
pages/airTicket/TicketOrderList.vue 0 → 100644
View file @ 23b75f00
<template>
<view class="bgF5 height100">
<view class="TicketOrderList-header bgFFF fixed row-sb-n z-index3">
<view v-for="(item,index) in TicketOrderTyle"
class="border1 borderDEBF7B hidden fz24 bgF5 textCenter">
{{item.Name}}
</view>
</view>
<!-- <u-empty v-if="dataList.length==0" text="暂无数据" mode="data"></u-empty> -->
<scroll-view :scroll-y="true" style="background-color: #f0f4f7;"
:enable-back-to-top="true" :enable-flex="true"
@scrolltolower="lower" :style="{ 'height': `calc(100% - ${scrollHeight})`}">
<view class="TicketOrderListC">
<view class="TicketOrderList-box">
<template v-for="(item,index) in 15">
<TicketOrderList></TicketOrderList>
</template>
</view>
<view style="padding:10px 0;">
<u-loadmore :status="status" :load-text="loadText" :font-size="24" :margin-top="0" :margin-bottom="0" bg-color="#f0f4f7" />
</view>
</view>
</scroll-view>
</view>
</template>
<script>
import TicketOrderList from "./components/TicketOrderList.vue";
export default {
components: {
TicketOrderList
},
data() {
return {
status: 'loadmore',
msg:{
ageIndex:1,
pageSize:5,
OrderStaus:0,
TeacherId:0,
CourseId:0,
ID:0,
StartTime:'',
EndTime:''
},
dataList: [],
loading: false,
TicketOrderTyle:[
{Name:'全部订单',Id:1},
{Name:'已付款',Id:2},
{Name:'待付款',Id:3},
{Name:'已取消',Id:4},
],
loadText: {
loadmore: "轻轻上拉，加载更多",
loading: "努力加载中",
nomore: "没有更多了",
},
scrollHeight: 0,
}
},
onLoad(options){
},
created() {},
mounted() {
setTimeout(() => {
this.getHeadHeight();
}, 1000);
},
methods: {
getHeadHeight() {
let that = this;
const query = uni.createSelectorQuery().in(this);
query
.select(".TicketOrderList-header")
.boundingClientRect((data) => {
that.scrollHeight = data.height + "px";
})
.exec();
},
//滚动加载
lower(e) {
if (this.msg.pageIndex < this.pageCount) {
this.msg.pageIndex++;
this.status = "loading";
} else {
this.status = "nomore";
}
},
}
}
</script>
<style scoped>
@import url("@/asset/css/flex.css");
@import url("./style.css");
.TicketOrderList-header{
left: 0;
right: 0;
top: 0;
padding: 27rpx 54rpx;
}
.TicketOrderList-header>view{
width: 135rpx;
padding: 15rpx 0;
border-radius: 20rpx;
}
.TicketOrderListC{
padding-top: 145rpx;
}
.TicketOrderList-box{
padding: 0 54rpx;
padding-bottom: 49rpx;
}
</style>
\ No newline at end of file
pages/airTicket/airTicketDetails.vue 0 → 100644
View file @ 23b75f00
<template>
<view class="bgF5 height100vh">
<view class="airTicketDetailsBg airTicketDetailsBgF fixed height1057"></view>
<scroll-view
scroll-y="true"
style="height: 100%; flex: 1; box-sizing: border-box"
@scroll="scroll"
>
<NavigationHeader :title="title" :titleStyle="titleStyle"></NavigationHeader>
<view class="PT123 PB260">
<view class="row-ajc-n MT45 MB30 fz40 fontBold">
<view>成都</view>
<img class="inlineblock ML50 MR50" mode="widthFix" style="width: 79rpx;height: 38rpx"
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1696990221000_663.png"/>
<view>北京</view>
</view>
<AirTicketDetails></AirTicketDetails>
<view class="PX50 MT20 MB30 row-aic-n">
<img class="inlineblock MR10" mode="widthFix" style="width: 167rpx;height: 31rpx"
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1697021959000_719.png"/>
<view class="fz26 color1D1D20 ML31">
<text>已选：1 人数 </text>
<text class="ML30">1 婴儿</text>
</view>
</view>
<view class="PX50">
<view class="airTicketDetailsAdd-box bgFFF">
<view class="PX4">
<view v-for="(item,index) in riderList"
:class="[index==riderList.length-1?'':'MB50']">
<view class="fz30 fontBold">王俊苏</view>
<view class="fz26 color9999A5 MT25">
<text>证件号</text>
<text class="ML10">2221115454465632535</text>
</view>
</view>
<view class="height-line1 MT40 MB35"></view>
<view class="row-ajc-n MB70">
<text class="flexS fz30">联系电话</text>
<view class="airTicketDetailsAddMobile flexG ML30">
<input class="fz30" v-model="Mobile" placeholder="用于接收通知" />
</view>
</view>
</view>
<view class="airTicketDetailsAdd bgDEBF7B fz32 fontBold textCenter"
:class="[riderList.length==0?'MB255':'']"
@click="AddPassengers">
添加乘机人
</view>
</view>
</view>
<view class="airTicketDetailsInstructionsBox MT15" style="display: none;">
<img class="inlineblock" mode="widthFix" style="width: 125rpx;height: 30rpx;"
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1696821283000_148.png"/>
<view class="airTicketDetailsInstructions MT15 fz24">
本模块为保险投保页面，由明亚保险经纪股份有限公司管理运
营。请仔细阅读客户通知书、保险代理协议、投保须知及条款
等重要内容。为保障你的权益，我们将会安全记录你的操作。本模
块为保险投保页面，由明亚保险经纪股份有限公司管理运营。请
仔细阅读客户通知书、保险代理协议、投保须知及条款等重要内容
。为保障你的权益，我们将会安全记录你的操作。本模块为保险投
保页面，由明亚保险经纪股份有限公司管理运营。请仔细阅读客户通知
书、保险代理协议、投保须知及条款等重要内容。为保障你的权益，我
们将会安全记录你的操作。本模块为保险投保页面，由明亚保险经纪股份
有限公司管理运营。请仔细阅读客户通知书、保险代理协议、投保须知及
条款等重要内容。为保障你的权益，我们将会安全记录你的操作。
</view>
</view>
</view>
</scroll-view>
<view class="airTicketDetailsFooter fixedFooter bgFFF fixed row-sb-n z-index2">
<view class="row-aic-n">
<text class="airTicketDetailsFooter-text fz32 relative">价格</text>
<text class="airTicketDetailsFooter-text fz32 ML10 relative"> ¥ </text>
<text class="ML10 fz52">3,200</text>
<text class="airTicketDetailsFooter-text fz26 ML10 relative">/人</text>
</view>
<view class="row-acje">
<view class="airTicketDetailsFooter-order bgDEBF7B row-ajc-w fontBold">
<text class="fz32">立即下单</text>
</view>
</view>
</view>
</view>
</template>
<script>
import AirTicketHeader from "./components/airTicketHeader.vue";
import NavigationHeader from "./components/NavigationHeader.vue";
import AirTicketDetails from "./components/airTicketDetails.vue";
export default {
components: {
AirTicketHeader,
NavigationHeader,
AirTicketDetails
},
data() {
return {
loading: false,
Mobile: '',
riderList: [
{ value: 0, text: "篮球" },
{ value: 1, text: "足球" },
{ value: 2, text: "游泳" },
],
dataList:[
{
show:true
},
{
show:false
},
],
topheight:0,
titleStyle:{},
boxOption: 0,
title: '填写下单信息'
}
},
onLoad(options){
let that = this;
uni.getSystemInfo({
success(res) {
that.titleStyle = {
height: "45px",
paddingTop: `${res.statusBarHeight}px`,
opacity: 0,
};
that.topheight = 55+res.statusBarHeight
},
});
},
created() {},
methods: {
AddPassengers(){
uni.navigateTo({
url: '/pages/airTicket/AirplanePassengerList'
});
},
scroll(e) {
this.boxOption = Math.floor((e.detail.scrollTop - 50) / 1.5);
this.titleStyle.opacity =
e.detail.scrollTop - 100 < 0
? 0
: Math.floor(e.detail.scrollTop - 100) / 100 > 1
? 1
: Math.floor(e.detail.scrollTop - 100) / 100;
this.$forceUpdate();
},
}
}
</script>
<style scoped>
@import url("@/asset/css/flex.css");
@import url("./style.css");
.airTicketDetailsAdd-box{
padding: 46rpx 48rpx;
border-radius: 50rpx;
}
.airTicketDetailsAdd{
padding: 25rpx 0;
border-radius: 40rpx;
}
.airTicketDetailsAddMobile>input{
margin-top: 2rpx;
}
.airTicketDetailsFooter{
padding: 38rpx 54rpx 67rpx 54rpx;
}
.airTicketDetailsFooter-text{
top: 5rpx;
}
.airTicketDetailsBgF{
left: 0;
right: 0;
top: 0;
}
</style>
\ No newline at end of file
pages/airTicket/airTicketList.vue 0 → 100644
View file @ 23b75f00
<template>
<view class="height100 bgF5">
<view class="bgFFF">
<AirTicketHeader></AirTicketHeader>
<view class="StartStopAddress">
<view class="row-sb-n">
<view class="StartStopAddressText-box">
<view class="column">
<text class="fz24 color9999A6">出发地</text>
<view class="MT31 row-aic-n" @click="AddressSelection(1)">
<img class="inlineblock MR10" mode="widthFix" style="width: 18rpx;height: 22rpx"
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1696743247000_254.png"/>
<text class="StartStopAddressText fz30 fontBold"
:class="[!OriginAddress.DepartCityName?'color9999A5':'']">
{{OriginAddress.DepartCityName?OriginAddress.DepartCityName:'选择出发地'}}
</text>
</view>
</view>
</view>
<view class="flexS" style="width: 29rpx;height: 27rpx;margin: 0 37rpx;"
@click="AddressSelection(0)">
<img class="inlineblock MR10" mode="widthFix" style="width: 29rpx;height: 27rpx"
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1696737205000_556.png"/>
</view>
<view class="StartStopAddressText-box">
<view class="column">
<text class="fz24 color9999A6">目的地</text>
<view class="MT31 row-aic-n" @click="AddressSelection(2)">
<img class="inlineblock MR10" mode="widthFix" style="width: 18rpx;height: 22rpx"
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1696743247000_254.png"/>
<text class="StartStopAddressText fz30 fontBold"
:class="[!OriginAddress.DepartCityName?'color9999A5':'']">
{{OriginAddress.ArriveCityName?OriginAddress.ArriveCityName:'选择目的地'}}
</text>
</view>
</view>
</view>
</view>
<view class="height-line1 MT20" ></view>
</view>
<view class="DepartureTime column">
<text class="fz24 color9999A6">出发时间</text>
<text class="fz30 fontBold MT31 MB20">
<template v-if="StartDateObj.math">
{{StartDateObj.math}}月{{StartDateObj.date}}日(周{{StartDateObj.week}})
</template>
<template v-else>
选择出发日期
</template>
</text>
<view class="height-line1"></view>
<view class="DepartureTimeList row-sb-n">
<view style="width: 590rpx;overflow: hidden;">
<scroll-view scroll-x style="width:100%;white-space: nowrap;">
<view class="row-aic-n">
<template v-for="(item,index) in NewDateList">
<view class="DepartureTimeListC flexS column-ajc fz20"
:class="[StartDateObj.times==item.times?'bgE1C278':'active']"
@click="clickSearch(item,1)">
<text>{{item.time}}</text>
<text class="MT10 MB10">周{{item.week}}</text>
<text>
<template v-if="item.Price>0&&item.B2BSellNum==0">售罄</template>
<template v-else>{{item.Price>0?'¥'+item.Price:'无报价'}}</template>
</text>
</view>
</template>
</view>
</scroll-view>
</view>
<view style="height: 152rpx;width: 1px;background: #ECF1F4;box-shadow: -3px 0 3px -3px #aaa;"></view>
<view class="flexS row-ajc-w" style="width: 106rpx;height: 123rpx;"
@click="showTimePreviwe=true">
<img class="inlineblock" mode="widthFix" style="width: 30rpx;height: 66rpx"
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1696744058000_738.png">
</view>
</view>
</view>
</view>
<view class="ScreeningCondition row-sb-n bgFFF">
<view class="ScreeningConditionC bgF5"
:class="[item.Id==activeId?'active':'']" v-for="(item,index) in ConditionList"
@click="clickSearch(item.Id,2)">
<text class="fz24">{{item.Name}}</text>
</view>
</view>
<scroll-view :scroll-y="true" style="background-color: #f0f4f7;"
:enable-back-to-top="true" :enable-flex="true"
@scrolltolower="lower" :style="{ 'height': `calc(100% - ${scrollHeight})`}">
<AirTicketList v-if="NewDataList.length>0" :dataList="NewDataList"></AirTicketList>
<!-- <view class="MT10 MB10">
<u-loadmore :status="status" :load-text="loadText" :font-size="24" :margin-top="0" :margin-bottom="0" bg-color="#f0f4f7" />
</view> -->
</scroll-view>
<u-popup
v-model="showTimePreviwe"
mode="bottom"
border-radius="50"
length="90%"
:safe-area-inset-bottom="true"
@close="OffPopup(1)">
<!-- <canlendar
@finish="chosenDateResult"
:immediately="true"
:defaultDate="currentPrice.startDate"
:priceList="dataList.priceList"
title="选择日期"
></canlendar> -->
<canlendar
:StartDate="msg.StartDate"
:EndDate="msg.EndDate"
@finish="chosenDateResult"
title="筛选日期">
</canlendar>
</u-popup>
<u-popup
v-model="showAddressPreviwe"
mode="bottom"
border-radius="50"
:safe-area-inset-bottom="true"
@close="OffPopup(2)">
<Address :AddressType="AddressType"
:OriginAddressObj="OriginAddress"
:dataList="AddressType==1?DepartureCityList:ArrivalCity"
@RenewalAddres="RenewalAddres"></Address>
</u-popup>
</view>
</template>
<script>
import AirTicketHeader from "./components/airTicketHeader.vue";
import canlendar from "./components/time/index.vue";
import Address from "./components/address/index.vue";
import AirTicketList from "./components/airTicketList.vue";
import { gegerateDates,getBeforeDate,getDateWeek } from "./dates.js";
export default {
components: {
AirTicketHeader,
canlendar,
Address,
AirTicketList
},
data() {
return {
DepartureCityList:[],
ArrivalCity:[],
AddressType: null,//1出发 2目的地
OriginAddress:{
DepartCityName: '',
DepartCityId: 0,//343
ArriveCityName: '',
ArriveCityId: 0,//653
},
msgAddress:{
AirLineID:'',
TicketType:'',
},
StartDateObj:{},
NewDateList:[],
dateList:[],
activeId: 1,
showAddressPreviwe: false,
loading: false,
msg:{
// pageIndex: 1,
// pageSize: 10,
StartDate: '',
EndDate: '',
DepartCityId: 0,//343
ArriveCityId: 0,//653
AirLineID: 0,
TicketType: '',//1单程 2往返
},
pageCount: 0,
showTimePreviwe: false,
ConditionList:[
{Name:'综合排序',Id:1},
{Name:'耗时长短',Id:2},
{Name:'价格高低',Id:3},
{Name:'不要中转',Id:4},
],
currentPrice:{},
filterDateList: [],
NewDataList:[],
dataList:[],
status: 'loadmore',
loadText: {
loadmore: "轻轻上拉，加载更多",
loading: "努力加载中",
nomore: "没有更多了",
},
scrollHeight: 0,
U: {},
isToken: false,
}
},
onLoad(options){
if(options.data){
let obj = JSON.parse(options.data)
this.OriginAddress.DepartCityName = obj.DepartCityName,
this.msg.DepartCityId = this.OriginAddress.DepartCityId = obj.DepartCityId,
this.OriginAddress.ArriveCityName = obj.ArriveCityName,
this.msg.ArriveCityId = this.OriginAddress.DepartCityId = obj.ArriveCityId
}
this.U = uni.getStorageSync("mall_UserInfo")
if(this.U&&this.U.Token){
this.isToken = true
}
},
created() {},
mounted() {
this.getDataAddressList()
this.msg.StartDate = getBeforeDate(0, new Date()),
this.msg.EndDate = getBeforeDate(-30, new Date()),
this.getDateList(31)
},
methods: {
AddressSelection(AddressType){
// 1去程地址 2返程地址 0调换地址
if(AddressType){
this.showAddressPreviwe = true,
this.AddressType = AddressType
}else{
let obj = {
DepartCityName: this.OriginAddress.ArriveCityName,
DepartCityId: this.OriginAddress.ArriveCityId,
ArriveCityName: this.OriginAddress.DepartCityName,
ArriveCityId: this.OriginAddress.DepartCityId,
}
this.OriginAddress = JSON.parse(JSON.stringify(obj))
this.msg.DepartCityId = this.OriginAddress.DepartCityId
this.msg.ArriveCityId = this.OriginAddress.ArriveCityId
}
},
RenewalAddres(SelectObj,AddressType){
if(AddressType==1){
this.OriginAddress.DepartCityName = SelectObj.Name,
this.msg.DepartCityId = this.OriginAddress.DepartCityId = SelectObj.ID
}else{
this.OriginAddress.ArriveCityName = SelectObj.Name,
this.msg.ArriveCityId = this.OriginAddress.ArriveCityId = SelectObj.ID
}
this.showAddressPreviwe = false
},
//滚动加载
lower(e) {
if (this.msg.pageIndex < this.pageCount) {
this.msg.pageIndex++;
this.status = "loading";
this.getDataList()
} else {
this.status = "nomore";
}
},
getDataList(){
uni.showLoading()
this.apipost("AirTicket_get_GetTicketProduct",this.msg,
(res) => {
if(res.resultCode==1){
// this.pageCount = res.data.pageCount
this.NewDateList = []
this.dataList = res.data
this.dateList.forEach(x => {
this.dataList.forEach(y=>{
y.NewFlightList = []
if(y.FlightList.length>0&&y.FlightList.length<3){
y.FlightList.forEach(z=>{
let obj = {
duration:`${y.DepartureTime.Days>0?y.DepartureTime.Days+'d ':''}${y.DepartureTime.Hours>0?y.DepartureTime.Hours+'h ':''}${y.DepartureTime.Minutes>0?y.DepartureTime.Minutes+'m ':''}`,
...z
}
y.NewFlightList.push(obj)
})
}else if(y.FlightList.length>2){
let obj = {
duration:`${y.DepartureTime.Days>0?y.DepartureTime.Days+'d ':''}${y.DepartureTime.Hours>0?y.DepartureTime.Hours+'h ':''}${y.DepartureTime.Minutes>0?y.DepartureTime.Minutes+'m ':''}`,
frequency: y.FlightList.length-2>1?y.FlightList.length-2:1,
FlightType: y.FlightList[1].FlightType,
...y.FlightList[0]
}
let obj2 = {
duration:`${y.ArrivalTime.Days>0?y.ArrivalTime.Days+'d ':''}${y.ArrivalTime.Hours>0?y.ArrivalTime.Hours+'h ':''}${y.ArrivalTime.Minutes>0?y.ArrivalTime.Minutes+'m ':''}`,
...y.FlightList[y.FlightList.length-1]
}
y.NewFlightList.push(obj)
y.NewFlightList.push(obj2)
}
if(x.times==y.FlightDate){
x.Price = this.isToken?y.B2BPrice:y.B2CPrice
x.B2BSellNum = y.B2BSellNum
x.show = true
this.NewDateList.push(x)
}
})
});
this.StartDateObj = this.NewDateList[0]
this.NewDataList = this.dataList.filter(x=> {
return x.FlightDate==this.NewDateList[0].times
})
}
uni.hideLoading()
});
},
// 当前起止时间
getDateList(day){
for(let i=0;i<day;i++){
let dates = getBeforeDate(-i, new Date())
let date = dates.split('-')
let obj = {
times: dates,
time: date[1]+'-'+date[2],
math: date[1]>=10?date[1]:date[1][1],
date: date[2]>=10?date[2]:date[2][1],
week: getDateWeek(dates),
Price: 0,
B2BSellNum: 0,
show: false,
}
this.dateList.push(obj)
}
this.getDataList()
},
clickSearch(item,type){
if(type==1){
if(this.StartDateObj.times==item.times){
this.StartDateObj = {}
this.NewDataList = JSON.parse(JSON.stringify(this.dataList))
}else{
this.StartDateObj = item
this.msg.StartDate = item.times
this.NewDataList = this.dataList.filter(x=> {
return x.FlightDate==item.times
})
}
}else{
this.activeId = item
}
},
chosenDateResult(obj) {
this.msg.startDate = obj.start;
this.msg.endDate = obj.end;
this.showTimePreviwe = false
this.getDateList(obj.day)
},
OffPopup(){
},
getDataAddressList(){
this.apipost("AirTicket_get_GetTicketCity",this.msgAddress,
(res) => {
if(res.resultCode==1){
this.DepartureCityList = res.data.DepartureCityList
this.ArrivalCity = res.data.ArrivalCity
}
});
},
}
}
</script>
<style scoped>
@import url("@/asset/css/flex.css");
@import url("./style.css");
.StartStopAddress{
padding: 61rpx 54rpx 0 54rpx;
}
.StartStopAddressText-box{
width: 539rpx;
}
.StartStopAddressText{
width: 209rpx;
}
.DepartureTime{
padding: 34rpx 54rpx 27rpx 54rpx;
}
.DepartureTimeList{
padding: 30rpx 0 0 0;
}
.DepartureTimeListC{
width: 106rpx;
height: 123rpx;
border-radius: 20rpx;
margin-right: 48rpx;
}
.DepartureTimeListC.active{
background: linear-gradient(180deg, #DEBF7B, #FFFFFF);
}
.ScreeningCondition{
margin-top: 7rpx;
margin-bottom: 39rpx;
padding: 18rpx 54rpx;
}
.ScreeningConditionC{
width: 134rpx;
height: 64rpx;
line-height: 64rpx;
text-align: center;
border-radius: 20rpx;
border: 1px solid #F5F5F5;
}
.ScreeningConditionC.active{
border-color: #DEBF7B;
}
</style>
\ No newline at end of file
pages/airTicket/components/NavigationHeader.vue 0 → 100644
View file @ 23b75f00
<template>
<view class="NavigationHeader-box">
<!-- #ifdef MP-WEIXIN -->
<view
:style="[titleStyle, { opacity: '100% !important' }]"
class="top-title fixed z-index2 row-aic-n"
style="padding-left: 6rpx;"
>
<view class="flexS" @click="goBack">
<u-icon
name="arrow-left"
size="44"
color=""
></u-icon>
</view>
<view class="ML30 flexG fz32 color1D1D20">
<text class="block width45vh color111 textCenter ellipsis1">{{ title }}</text>
</view>
</view>
<!-- #endif -->
<view class="top-title bgF5 fixed z-index2 row-aic-n" :style="[titleStyle]">
<view class="flexS" @click="goBack">
<!-- #ifdef MP-WEIXIN -->
<u-icon name="arrow-left" size="44"></u-icon>
<!-- #endif -->
</view>
<view
class="ML30 flexG fz32 color1D1D20">
<text class="block width45vh color111 textCenter ellipsis1">{{ title }}</text>
</view>
</view>
</view>
</template>
<script>
export default {
components: {},
props:['title','titleStyle'],
data() {
return {
}
},
onLoad(options){
},
created() {},
mounted() {
},
methods: {
goBack(){
uni.navigateBack({
delta: -1
})
}
}
}
</script>
<style scoped>
@import url("@/asset/css/flex.css");
.NavigationHeader-box{
}
.top-title {
line-height: 45px !important;
padding-top: 20rpx;
left: 0;
right: 0;
top: 0;
width: 100%;
box-sizing: content-box;
z-index: 5;
padding-left: 6rpx;
}
</style>
\ No newline at end of file
pages/airTicket/components/TicketOrderList.vue 0 → 100644
View file @ 23b75f00
<template>
<view class="TicketOrderListCard bgFFF relative">
<view class="TicketOrderListCard-wf absolute bg111 colorFFF fz24 z-index2">异地</view>
<view class="row-sb-n">
<view class="flexG"></view>
<view class="fz24 color111 flexS">
<text>09-28</text>
<text class="ML5 MR10">周六</text>
<text>10:39</text>
</view>
</view>
<view class="MB55" v-for="(item,index) in 2">
<view class="row-sb-n MT10">
<view class="flexS MR20">
<view class="TicketOrderListCard-qc bgE1C278 fz24 color111 overflow textCenter relative relativeFT8">
{{index?'返':'去'}}
<!-- 往返 -->
</view>
</view>
<view class="column flexS">
<text class="fz30 fontBold">09:00 </text>
<text class="fz22 MT5 width100 ellipsis1">天府T2</text>
</view>
<view class="FlightDirection-box relative">
<view class="FlightDirection-Title column">
<!-- :style="{'height':'90rpx'}" -->
<view class="row-ajc-n">
<view class="FlightDirection-zhuan z-index2 MB10">
<text class="block bgECF1F4 fz21 nowrap">转+2</text>
</view>
</view>
<view>
<text class="fz19 textCenter width100 ellipsis1 relative relativeFT8">
武汉 北京
</text>
</view>
</view>
<view class="FlightDirection-line absolute row-aic-n">
<view class="FlightDirection-line-one bgECF1F4"></view>
<view class="FlightDirection-line-two">
<view class="height-line2"></view>
</view>
<view class="FlightDirection-line-one bgECF1F4"></view>
</view>
</view>
<view class="column">
<text class="fz36 fontBold">11:30 </text>
<text class="fz22 MT5 width100 ellipsis1">许家坪</text>
</view>
<view class="ML20 TicketOrderListCard-Pr textRight">
<text v-if="index==1" class="color9999A5 fz32 relative TicketOrderListCard-PrQx">取消</text>
<text v-else class="fz34 fontBold">¥ 5,800</text>
</view>
</view>
<view class="row-w">
<view class="aviationTitle row-aic-n">
<img class="inlineblock flexS" mode="widthFix" style="width: 36rpx;height: 30rpx;"
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1696749257000_469.png"/>
<view class="flexG">
<text class="fz22 ML5 color9999A5 width100One ellipsis1">东航CA1852...</text>
</view>
</view>
</view>
</view>
<view class="row-sb-n MT30">
<view class="fz324 color9999A5 MR30 flexG">
<txet class="block TicketOrderListCard-title width100One ellipsis1">陈伟霆、郑中基等4人</txet>
</view>
<view class="flexS">
<!-- colorDEBF7B -->
<view class="TicketOrderListCard-buttom overflow fz32 fontBold textCenter border1 bgDEBF7B borderDEBF7B"
@click="getDetail">
待付款
</view>
<!-- <view class="TicketOrderListCard-buttom overflow fz32 fontBold textCenter border1 bgF5 borderF5 color9999A5">
已取消
</view>
<view class="TicketOrderListCard-buttom overflow fz32 fontBold textCenter border1 bgFFF borderDEBF7B colorDEBF7B">
已支付
</view> -->
</view>
</view>
</view>
</template>
<script>
export default {
components: {
},
data() {
return {
}
},
onLoad(options){
},
created() {},
mounted() {
},
methods: {
getDetail(item){
uni.navigateTo({
url: '/pages/airTicket/TicketOrderDetails'
});
},
}
}
</script>
<style scoped>
@import url("@/asset/css/flex.css");
@import url("../style.css");
.TicketOrderListCard{
border-radius: 50rpx;
padding: 27rpx 39rpx 34rpx 50rpx;
margin-bottom: 40rpx;
}
.TicketOrderListCard-wf{
left: 0;
top: 0;
border-top-left-radius: 50rpx;
border-bottom-right-radius: 50rpx;
padding: 7rpx 27rpx;
}
.TicketOrderListCard-dashed{
margin-top: 25rpx;
margin-bottom: 25rpx;
}
.TicketOrderListCard-R{
margin-left: 80rpx;
}
.TicketOrderListCard-R>view:last-child{
padding-top: 37rpx;
}
.TicketOrderListCard-buttom{
width: 170rpx;
padding: 18rpx 0;
border-radius: 35rpx;
}
.TicketOrderListCard-qc{
padding: 2rpx 3rpx;
border-radius: 8rpx;
}
.TicketOrderListCard-Pr{
width: 150rpx;
}
.TicketOrderListCard-PrQx{
padding: 10rpx;
top: 34rpx;
}
</style>
\ No newline at end of file
pages/airTicket/components/address/index.vue 0 → 100644
View file @ 23b75f00
<template>
<view class="addressIndex-box">
<view class="fz30 fontBold textCenter MB30">选择{{AddressType==1?'出发地':'目的地'}}</view>
<view class="fz30 fontBold MB30">当前{{AddressType==1?'出发地':'目的地'}}</view>
<view class="MT30">
<view class="addressIndex-Orientation inlineblock bgF5 row-ajc-n textCenter">
<img class="inlineblock MR10" mode="widthFix" style="width: 18rpx;height: 22rpx"
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1696743247000_254.png"/>
<text class="fz30">{{SelectObj.Name?SelectObj.Name:'--'}}</text>
</view>
</view>
<view class="fz30 fontBold MT45">地址</view>
<view class="hidden" style="height: calc(100vh - 60vh);">
<scroll-view :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" :style="{ height: '100%' }">
<view class="addressIndex-toponym row-sb-w">
<template v-for="(item,index) in dataList">
<view class="addressIndex-Orientation inlineblock textCenter MT30 fz30"
:class="[SelectObj.ID==item.ID?'bgDEBF7B':'bgF5']"
@click="getAddress(item)">{{item.Name}}</view>
</template>
</view>
</scroll-view>
</view>
</view>
</template>
<script>
export default {
props:['AddressType','OriginAddressObj','dataList'],
data() {
return {
SelectObj: {
Name: '',
ID: ''
},
}
},
onLoad(options){
},
watch: {
AddressType: {
handler(newVal, oldval) {
if(newVal==1){
this.SelectObj.Name = this.OriginAddressObj.DepartCityName
this.SelectObj.ID = this.OriginAddressObj.DepartCityId
}else{
this.SelectObj.Name = this.OriginAddressObj.ArriveCityName
this.SelectObj.ID = this.OriginAddressObj.ArriveCityId
}
},
deep: false
},
OriginAddressObj: {
handler(newVal, oldval) {
if(this.AddressType==1){
this.SelectObj.Name = newVal.DepartCityName
this.SelectObj.ID = newVal.DepartCityId
}else{
this.SelectObj.Name = newVal.ArriveCityName
this.SelectObj.ID = newVal.ArriveCityId
}
},
deep: true
},
},
created() {},
mounted() {
},
methods: {
getAddress(item){
this.SelectObj = {
Name: item.Name,
ID: item.ID,
}
this.$emit('RenewalAddres',this.SelectObj ,this.AddressType)
// this.$forceUpdate()
},
}
}
</script>
<style scoped>
@import url("@/asset/css/flex.css");
@import url("../../style.css");
.addressIndex-box{
padding: 46rpx 53rpx 139rpx 53rpx;
}
.addressIndex-Orientation{
width: 190rpx;
padding: 15rpx 0;
border-radius: 30rpx;
}
.addressIndex-toponym{
}
</style>
\ No newline at end of file
pages/airTicket/components/airTicketDetails.vue 0 → 100644
View file @ 23b75f00
<template>
<view class="airTicketDetailsList column">
<view v-for="(items,i) in dataList">
<view class="airTicketDetailsCard bgFFF MB40">
<view class="row-sb-n MR50">
<view class="row-aic-n">
<view>
<view class="airTicketDetailsCard-qfc bgE1C278 fz30 color111 fontBold">
去程
</view>
</view>
<view class="fz28 color111 ML20">
<text>09-30</text> <text class="ML10">周六</text>
</view>
<view class="fz28 color111 ML31">
总时长 5h
</view>
</view>
<view class="fz28 colorE1C278 row-aic-n" @click="TicketDetails(items)">
<text>详情</text>
<uni-icons class="ML10" color="#DEBF7B" :type="items.show?'arrowdown':'arrowright'" size="14"></uni-icons>
<!-- <uni-icons class="ML10" color="#DEBF7B" type="arrowright" size="14"></uni-icons> -->
</view>
</view>
<view class="MT60 PX50" v-if="!items.show">
<view class="row relative" v-for="(item,index) in 2"
:class="[index==0?'MB50':'']">
<text v-if="index==1" class="fz18 fontWeight400 colorFF5858 absolute airTicketDetailsCard-timeT">
10-01 周日
</text>
<view class="airTicketDetailsCard-timeL column flexS MR20 textRight">
<view v-if="index==0" class="fz28 fontBold relative relativeFT10">09:00 </view>
<view v-if="index==1" class="MT25 fz28 fontBold">
11:30
</view>
</view>
<view class="flexS MR30">
<view class="width-lineH49 bgE1C278 relative">
<view class="bgE1C278 absolute WH12R50 airTicketDetailsCard-LinT"></view>
<template v-if="index">
<view class="bgE1C278 absolute WH6R50 airTicketDetailsCard-LinT2"></view>
<view class="bgE1C278 absolute WH6R50 airTicketDetailsCard-LinT3"></view>
<view class="bgE1C278 absolute WH6R50 airTicketDetailsCard-LinT4"></view>
</template>
<view class="bgE1C278 absolute WH12R50 airTicketDetailsCard-LinB"></view>
<template v-if="index!=1">
<view class="bgE1C278 absolute WH6R50 airTicketDetailsCard-LinB2"></view>
</template>
</view>
</view>
<view class="column flexG relative">
<view v-if="index==1" class="airTicketDetailsCard-ZhuanNum bgE1C278 fz18 colorFFF absolute">转+2</view>
<view class="airTicketDetailsCard-title row-aic-n absolute" v-if="index==0">
<img class="inlineblock flexS" mode="widthFix" style="width: 20rpx;height: 17rpx;"
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1696749257000_469.png"/>
<view class="flexG">
<text class="block width100One overflow fz20 ML5 color9999A5 fontWeight400">东航 CA1852 </text>
</view>
</view>
<view class="fz28 fontBold relative relativeFT8" v-if="index==0">
<text class="block width100One hidden">CTU 双流机场 T2</text>
</view>
<view class="fz28 fontBold MT25" v-if="index==1">
<text class="block width100One hidden">PEK 首都机场 T3</text>
</view>
</view>
</view>
</view>
<view class="MT60 PX50"
:class="[index!=1?'MB50':'']" v-if="items.show">
<view class="row-aic-n MB70 relative" v-for="(item,index) in 3">
<text v-if="index==2" class="fz18 fontWeight400 colorFF5858 absolute airTicketDetailsCard-timeT">
10-01 周日
</text>
<view class="airTicketDetailsCard-timeL column flexS MR20 textRight">
<view :class="[index?'fz24':'fz28 fontBold']">09:00 </view>
<view class="MT35" :class="[index!=2?'fz24':'fz28 fontBold']">
11:30
</view>
</view>
<view class="flexS MR30">
<view class="width-lineH83 bgE1C278 relative">
<view class="bgE1C278 absolute WH12R50 airTicketDetailsCard-LinT"></view>
<template v-if="index">
<view class="bgE1C278 absolute WH6R50 airTicketDetailsCard-LinT2"></view>
<view class="bgE1C278 absolute WH6R50 airTicketDetailsCard-LinT3"></view>
</template>
<view class="bgE1C278 absolute WH12R50 airTicketDetailsCard-LinB"></view>
<template v-if="index!=2">
<view class="bgE1C278 absolute WH6R50 airTicketDetailsCard-LinB2"></view>
<view class="bgE1C278 fz18 colorFFF absolute airTicketDetailsCard-LinText">中转</view>
</template>
</view>
</view>
<view class="column flexG relative">
<view class="airTicketDetailsCard-title row-aic-n absolute">
<img class="inlineblock flexS" mode="widthFix" style="width: 20rpx;height: 17rpx;"
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1696749257000_469.png"/>
<view class="flexG">
<text class="block width100One overflow fz20 ML5 color9999A5 fontWeight400">东航 CA1852 </text>
</view>
</view>
<view class="fz28 fontBold relative relativeFT8">
<text class="block width100One hidden">CTU 双流机场 T2</text>
</view>
<view class="fz28 fontBold MT25">
<text class="block width100One hidden">PEK 首都机场 T3</text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
components: {
},
data() {
return {
dataList:[
{
show:true
},
{
show:false
},
],
}
},
onLoad(options){
},
created() {},
methods: {
TicketDetails(items){
items.show=!items.show
this.$forceUpdate();
},
}
}
</script>
<style scoped>
@import url("@/asset/css/flex.css");
@import url("../style.css");
.airTicketDetailsList{
margin: 0 54rpx;
}
.airTicketDetailsCard{
border-radius: 50rpx;
padding: 45rpx 0;
}
</style>
\ No newline at end of file
pages/airTicket/components/airTicketHeader.vue 0 → 100644
View file @ 23b75f00
<template>
<view class="header-box row-aic-w">
<img class="block" mode="widthFix"
style="width: 157rpx;height: 61rpx"
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1696747312000_626.png"/>
</view>
</template>
<script>
export default {
components: {},
data() {
return {
}
},
onLoad(options){
},
created() {},
methods: {
}
}
</script>
<style scoped>
.header-box{
padding: 14rpx 44rpx 0 44rpx;
}
</style>
\ No newline at end of file
pages/airTicket/components/airTicketList.vue 0 → 100644
View file @ 23b75f00
<template>
<view>
<view class="aviationCard bgFFF row-sbas-n relative"
v-for="(item,index) in dataList"
@click="getPriceDetail(item)">
<view v-if="item.FlightList.length>2" class="aviationCard-wf absolute bg111 colorFFF fz20 z-index2">异地往返</view>
<view class="column flexG">
<view
:class="[item.FlightList.length-1!=indexs?'MB30':'']"
v-for="(childs,indexs) in item.NewFlightList">
<view class="row-sb-n MT25">
<view class="flexS MR20">
<view class="FlightDirection-qc bgE1C278 fz24 color111 overflow textCenter">
<template v-if="childs.FlightSubType==1">去程</template>
<template v-if="childs.FlightSubType==3">返程</template>
</view>
</view>
<view class="column flexS">
<text class="fz36 fontBold">{{childs.Departure_time}} </text>
<text class="fz22 MT5 width100 ellipsis1">{{childs.dName}}</text>
</view>
<view class="FlightDirection-box relative">
<view class="FlightDirection-Title column">
<!-- :style="{'height':'90rpx'}" -->
<view class="row-ajc-n">
<text class="fz20 color9999A5">{{childs.duration}}</text>
<view class="FlightDirection-zhuan z-index2 ML10" v-if="childs.frequency">
<!-- childs.FlightType==2 -->
<text class="block bgECF1F4 fz21 nowrap">
<template v-if="childs.frequency&&childs.frequency>1">
转+{{childs.frequency}}
</template>
<template v-if="childs.frequency&&childs.frequency==1">
经停
</template>
</text>
</view>
</view>
<view>
<text class="fz19 textCenter width100 ellipsis1">
{{childs.DepartureName}} {{childs.ArrivalCityName}}
</text>
</view>
</view>
<view class="FlightDirection-line absolute row-aic-n">
<view class="FlightDirection-line-one bgECF1F4"></view>
<view class="FlightDirection-line-two">
<view class="height-line1"></view>
</view>
<view class="FlightDirection-line-one bgECF1F4"></view>
</view>
</view>
<view class="relative">
<view class="column">
<text class="fz36 fontBold">{{childs.Arrival_time}} </text>
<text class="fz22 MT5 width100 ellipsis1">{{childs.aName}}</text>
</view>
<!-- <view class="FlightDirection-time absolute colorFF5858 fz20 nowrap">
<text>+</text>
<text class="ML5">1</text>
<text class="ML5">天</text>
</view> -->
</view>
</view>
<view class="row-w MT15">
<view class="aviationTitle row-aic-n">
<img class="inlineblock" mode="widthFix" style="width: 36rpx;height: 30rpx;"
:src="item.AirlineUrl"/>
<text class="fz22 ML10 color9999A5">{{item.AirLineName}}</text>
</view>
</view>
</view>
</view>
<view class="FlightDirection-Price flexS column">
<view class="colorC09D4F fontBold row-aic-n MT25">
<view class="FlightDirection-Price-symbol MR10">
<text class="fz20 relative" v-if="(isToken?item.B2BPrice:item.B2CPrice)>0">¥</text>
</view>
<text :class="[(isToken?item.B2BPrice:item.B2CPrice)>0?'fz36':'fz22 fontWeight400']">
<template v-if="(isToken?item.B2BPrice:item.B2CPrice)>0">
{{isToken?item.B2BPrice:item.B2CPrice}}
</template>
<template v-else>暂无报价</template>
</text>
</view>
<view class="textRight">
<text class="FlightDirection-zhang border1 borde fz18"
:class="[item.B2BSellNum>0?'borderFF5858 colorFF5858':'borderF5 color9999A5']">
<template v-if="item.B2BSellNum>0">剩{{item.B2BSellNum}}张</template>
<template v-if="(isToken?item.B2BPrice:item.B2CPrice)>0&&item.B2BSellNum==0">售罄</template>
</text>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
props:['dataList'],
components: {},
data() {
return {
}
},
onLoad(options){
},
created() {},
methods: {
getPriceDetail(item){
uni.navigateTo({
url: '/pages/airTicket/airTicketDetails'
});
},
}
}
</script>
<style scoped>
@import url("@/asset/css/flex.css");
@import url("../style.css");
.aviationCard{
border-radius: 20rpx;
padding: 37rpx 34rpx 48rpx 37rpx;
margin: 0 30rpx 40rpx;
}
.aviationCard-wf{
left: 0;
top: 0;
border-top-left-radius: 50rpx;
border-bottom-right-radius: 50rpx;
padding: 7rpx 27rpx;
}
.aviationTitle{
margin-right: 31rpx;
}
.aviationTitle:last-child{
margin-right: 0;
}
.FlightDirection-time{
left: 0;
right: 0;
top: -33rpx;
}
.FlightDirection-Price{
margin-left: 45rpx;
}
.FlightDirection-Price>view{
}
.FlightDirection-Price-symbol text{
top: -3rpx;
}
</style>
\ No newline at end of file
pages/airTicket/components/time/day.js 0 → 100644
View file @ 23b75f00
//节假日信息
const day=[
{
year:2022,
month:1,
festival:[
{name:'元旦',day:1},
{name:'除夕',day:31},
]
},
{
year:2022,
month:2,
festival:[
{name:'春节',day:1},
{name:'元宵',day:15},
{name:'情人节',day:14}
]
},
{
year:2022,
month:3,
festival:[
{name:'妇女节',day:8},
]
},
{
year:2022,
month:4,
festival:[
{name:'清明',day:4},
]
},
{
year:2022,
month:5,
festival:[
{name:'劳动节',day:1},
{name:'青年节',day:4},
{name:'母亲节',day:10},
]
},
{
year:2021,
month:6,
festival:[
{name:'儿童节',day:1},
{name:'父亲节',day:21},
{name:'端午',day:14},
]
},
{
year:2021,
month:7,
festival:[
{name:'建党节',day:1}
]
},
{
year:2021,
month:8,
festival:[
{name:'建军节',day:1},
{name:'七夕',day:14},
{name:'中元节',day:22},
]
},
{
year:2021,
month:9,
festival:[
{name:'教师节',day:10},
{name:'中秋',day:21}
]
},
{
year:2021,
month:10,
festival:[
{name:'国庆',day:1},
{name:'重阳',day:14}
]
},
{
year:2021,
month:11,
festival:[
{name:'感恩节',day:26}
]
},
{
year:2021,
month:12,
festival:[
{name:'平安夜',day:24},
{name:'圣诞节',day:25}
]
}
]
export default day
\ No newline at end of file
pages/airTicket/components/time/index.vue 0 → 100644
View file @ 23b75f00
<template>
<view class="content">
<scroll-view :scroll-y="true" style="height: 100%;">
<view class="header">
<!-- <view class="bar"></view>
<view class="set text-gray">
<text @click="close" style="font-size:40upx;">返回</text>
<text @click="reset" style="font-size:35upx;color:#DDDDDD">清空</text>
</view> -->
<!-- <view class="in-and-out">
<view class="item" v-if="start.length > 0">
<view style="font-size:30upx;color:#C0C0C0">出发日期</view>
<view style="font-weight: bold;margin-top:10upx;font-size:36upx">{{ startDay }}</view>
<view style="font-size:24upx;margin-top:10upx">{{ startWeek }}</view>
</view>
<view class="item text" v-if="start.length == 0">
<view>出发日期</view>
</view>
<view class="item">
<view class="count-border" :class="day == 0 ? 'gray' : 'orange'">
<view class="count" style="font-size:26upx;line-height:26upx;">共{{ day }}晚</view>
</view>
</view>
<view class="item text" v-if="end.length == 0">
<view>离店日期</view>
</view>
<view class="item" v-if="end.length > 0">
<view style="font-size:30upx;color:#C0C0C0">离店日期</view>
<view style="font-weight: bold;margin-top:10upx;font-size:36upx">{{ endDay }}</view>
<view style="font-size:24upx;margin-top:10upx">{{ endWeek }}</view>
</view>
</view> -->
<view style="font-size: 32rpx;color:#111;text-align: center;padding:30rpx 0;">
<text>{{title}}</text>
</view>
<view class="week">
<view>日</view>
<view>一</view>
<view>二</view>
<view>三</view>
<view>四</view>
<view>五</view>
<view>六</view>
</view>
</view>
<view class="section">
<view v-for="(res, line) in resDate" class="item" :key="line">
<view class="year">{{ res.year }}年{{ res.month }}月</view>
<view class="day">
<view v-for="week in res.oneDayWeek" class="day-list"
:style="{ width: (dayWidth - 10) / 7 + 'px' }"></view>
<view @tap="selectDay(line, index,(line+1).toString()+index)" v-for="(item, index) in res.day"
:key="index" class="day-list" :class="[
line == start[0] && index == start[1] ? 'bg-orange select-style' : '',
(line >= start[0] && line <= end[0] && index > start[1] && index < end[1]) || (line >= start[0] && index > start[1] && line < end[0]) || (line <= end[0] && index < end[1] && line > start[0]) || (line < end[0] && line > start[0]) ? 'bg-higlt-orange' : '',
line == 0 && index + 1 < nowDay ? 'time-out' : '',
isNaN(item) ? 'is-festival' : '',
(isNaN(item) && line == start[0] && index == start[1]) || (isNaN(item) && line == end[0] && index == end[1]) ? 'not-festival' : '',
(priceStauts.length > 0 && priceStauts[line][index] <0 && start.length>0 && end.length>0) ||(priceStauts.length > 0 && priceStauts[line][index] <0 &&start.length==0 && end.length==0)?'not-sub' : '',
priceStauts.length > 0 && end.length==0 && start.length>0 && priceStauts[line][index]<0 && line+index*2!=lastNot[0]+lastNot[1]*2? 'not-sub' : '',
]" :style="{ width: (dayWidth - 10) / 7 + 'px',borderRadius:line == end[0] && index == end[1]?'0px 6px 6px 0px':'',backgroundColor:line == end[0] && index == end[1]?'#E1C278':'',color:line == end[0] && index == end[1]?'#FFFFFF':''}">
<view style="padding-top:2px;padding-bottom:2px;">{{ item }}</view>
<view class="select-style" v-if="line == start[0] && index == start[1]">最早</view>
<view class="select-style" v-if="line == end[0] && index == end[1]">最晚</view>
<view style="font-size:12px;padding-bottom: 3px;" v-if="priceStauts.length > 0">
<view v-if="priceStauts[line][index]>0">￥{{ priceStauts[line][index] }}</view>
<view v-if="priceStauts[line][index]<0">售罄</view>
</view>
</view>
</view>
</view>
</view>
<view class="submit">
<button class="sub-btn" :disabled="!isSub" @click="submit">
<text v-if="isSub">确定</text>
<text v-if="!isSub">请选择出发日期</text>
</button>
</view>
</scroll-view>
</view>
</template>
<script>
//引入节假日的数据，也可以用后台返回去渲染
import json from './day.js';
export default {
props:['title','StartDate','EndDate'],
computed: {
//房间是否能预订
isSub() {
if (this.priceStauts.length > 0) {
for (var i = this.start[0]; i <= this.end[0]; i++) {
if (i == this.start[0]) {
for (var j = this.start[1]; j < this.date[i].length; j++) {
if (this.priceStauts[i][j] == -1) return false
}
} else if (this.end[0] == this.start[0]) {
for (var j = this.start[1]; j < this.end[1]; j++) {
if (this.priceStauts[i][j] == -1) return false
}
} else if (i == this.end[0]) {
for (var j = 0; j < this.end[1]; j++) {
if (this.priceStauts[i][j] == -1) return false
}
} else {
for (var j = 0; j < this.priceStauts[i].length; j++) {
if (this.priceStauts[i][j] == -1) return false
}
}
}
}
return this.start.length == 2 && this.end.length == 2 ? true : false
},
//计算日历里的节假日
resDate() {
if (this.date.length == 0) return
for (var i = 0; i < this.date.length; i++) {
for (var j = 0; j < this.festival.length; j++) {
if (this.festival[j].year == this.date[i].year && this.festival[j].month == this.date[i].month) {
for (var k = 0; k < this.festival[j].festival.length; k++) {
if (this.date[i].day.indexOf(this.festival[j].festival[k].day) != -1) {
this.date[i].day[this.date[i].day.indexOf(this.festival[j].festival[k].day)] = this
.festival[j].festival[k].name;
}
}
}
}
}
return this.date;
}
},
data() {
return {
out: 0,
festival: json, //节假日
type: '-', //日期分隔符
date: [], //日期数组对象
dayWidth: 0, //日期的宽度
nowDay: 0, //当前时间的日
start: [], //入住时间
count: 6, //显示月的数量
startDay: '', //出发日期
startWeek: '', //入住时间的周几
end: [], //离开时间
endDay: '', //离开日期
endWeek: '', //离开时间的周几
day: 0, //多少晚
priceStauts: [], //价格状态
lastNot: [0, 10] //前置的无房操作
};
},
mounted () {
console.log("进入了....")
uni.getSystemInfo({
success: res => {
this.dayWidth = res.windowWidth;
}
});
this.setDate();
var dateTime=new Date();
dateTime=dateTime.setDate(dateTime.getDate());//dateTime.setDate(dateTime.getDate()+1);
this.nowDay = new Date(dateTime).getDate();
/*默认入住离店日期，今日入住明日离店，此处应在setDefaultDate函数内传入vuex里保存的日期进行默认操作
*不推荐使用本地缓存，下边只是使用缓存的示例
*/
uni.getStorage({
key: 'Time',
success: (res) => {
console.log(res)
if (res && res.data) {
var obj = JSON.parse(res.data)
// this.start = this.setDefaultDate(obj.start);
// this.end = this.setDefaultDate(obj.end);
this.start = this.setDefaultDate(this.StartDate);
this.end = this.setDefaultDate(this.EndDate);
}
},
fail: () => {
this.start = this.setDefaultDate(this.getDefaultDate(0));
this.end = this.setDefaultDate(this.getDefaultDate(1));
}
})
},
watch: {
//离店日期
end(newVal) {
if (this.end.length != 0) {
//计算选择离店日期
this.endDay = this.setMonth(newVal[0]) + this.isFestival(newVal[0], newVal[1]) + '日';
this.endWeek = this.getWeek(this.date[newVal[0]].year + '/' + this.date[newVal[0]].month + '/' + this
.isFestival(newVal[0], newVal[1]));
//计算天数
var startDay = this.date[this.start[0]].year + '/' + this.date[this.start[0]].month + '/' + this
.isFestival(this.start[0], this.start[1]);
var endDay = this.date[newVal[0]].year + '/' + this.date[newVal[0]].month + '/' + this.isFestival(this
.end[0], this.end[1]);
this.day = this.getDay(startDay, endDay);
} else {
this.day = 0;
}
},
//出发日期
start(newVal) {
if (this.start.length > 0) {
this.startDay = this.setMonth(newVal[0]) + this.isFestival(newVal[0], newVal[1]) + '日';
this.startWeek = this.getWeek(this.date[newVal[0]].year + '/' + this.date[newVal[0]].month + '/' + this
.isFestival(
newVal[0], newVal[1]));
}
if (this.priceStauts.length > 0) {
console.log(this.lastNot)
for (var i = newVal[0]; i < this.priceStauts.length; i++) {
if (i == newVal[0]) {
for (var j = newVal[1]; j < this.priceStauts[i].length; j++) {
if (this.priceStauts[i][j] == -1) {
this.lastNot = [i, j]
console.log(this.lastNot)
return
}
}
} else {
for (var j = 0; j < this.priceStauts[i].length; j++) {
if (this.priceStauts[i][j] == -1) {
this.lastNot = [i, j];
console.log(this.lastNot)
return
}
}
}
}
//清空
this.lastNot = []
}
}
},
methods: {
//月份补零
setMonth(dateIndex) {
let month = this.date[dateIndex].month;
if (month < 10) {
month = '0' + month;
}
return month + '月';
},
//如果是节假日名称则返回选择的日期天数
isFestival(line, index, push = false) {
var date = this.date[line].day[index];
if (isNaN(date)) {
var newIndex = this.date[line].day.indexOf(date) + 1;
if (push) return newIndex;
return newIndex < 10 ? '0' + newIndex : newIndex;
} else {
if (push) return date;
return date < 10 ? '0' + date : date;
}
},
//获取今天明天的日期
getDefaultDate(AddDayCount) {
var dd = new Date();
dd.setDate(dd.getDate() + AddDayCount); //获取AddDayCount天后的日期
var year = dd.getFullYear();
var mon = dd.getMonth() + 1; //获取当前月份的日期
var day = dd.getDate();
return year + '-' + mon + '-' + day;
},
//设置入住时间 如果没有传值则根据默认值设置
setDefaultDate(data) {
var arr = [0, parseInt(this.nowDay - 1)];
var start = data.indexOf('-') != -1 ? data.split('-') : data.split('/');
var year = new Date().getFullYear();
var month = new Date().getMonth() + 1;
for (var i = 0; i < this.date.length; i++) {
if (this.date[i].year == start[0] && this.date[i].month == start[1]) {
if (year == start[0] && month == start[1] && start[2] < this.nowDay) {
arr = [i, parseInt(this.nowDay - 1)];
} else {
arr = [i, parseInt(start[2] - 1)];
}
break;
}
}
return arr;
},
//清空
reset() {
this.start = [];
this.end = [];
this.day = 0;
},
//补零操作
setPull(day) {
if (day < 10) {
day = '0' + day;
}
return day
},
//计算天数
getDay(date1, date2) {
//获得天数
//date1：开始日期，date2结束日期
var a1 = Date.parse(new Date(date1));
var a2 = Date.parse(new Date(date2));
var day = parseInt((a2 - a1) / (1000 * 60 * 60 * 24)); //核心：时间戳相减，然后除以天数
return day;
},
//计算周几
getWeek(date) {
var weekDay = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
var myDate = new Date(Date.parse(date));
return weekDay[myDate.getDay()];
},
//选择入住离开
selectDay(line, index) {
if (line == 0 && index + 1 < this.nowDay) return;
//如果有入住情况和价格则需要进行一些列的判断
if (this.priceStauts.length > 0) {
if ((this.start.length == 0 && this.priceStauts[line][index] < 0) || (this.end.length > 0 && this
.priceStauts[line][index] < 0)) {
return uni.showToast({
title: '该日期已被预订',
icon: 'none'
});
}
if ((this.start.length > 0 && line < this.start[0]) || (line == this.start[0] && this.start[1] >
index)) {
if (this.priceStauts[line][index] < 0)
return uni.showToast({
title: '该日期已被预订',
icon: 'none'
});
this.start = [line, index];
this.end = [];
return;
}
if (this.start.length > 0 && this.end.length == 0) {
if (this.start[0] - line == 0) {
for (var j = this.start[1]; j < index; j++) {
if (this.priceStauts[line][j] < 0)
return uni.showToast({
title: '很抱歉，所选入离店时间包含无房日期',
icon: 'none',
mask: true
});
}
} else {
//如果不在同一个月份有三种情况需要处理
for (var i = this.start[0]; i <= line; i++) {
//开始日期到开始日期当月的最大日期是否包含无房情况
if (i == this.start[0]) {
for (var j = this.start[1]; j < this.priceStauts[i].length; j++) {
if (this.priceStauts[i][j] < 0)
return uni.showToast({
title: '很抱歉，所选入离店时间包含无房日期',
icon: 'none',
mask: true
});
}
} else if (i == line) {
//结束日期到当月结束日期之前是否包含无房情况
for (var j = 0; j < index; j++) {
if (this.priceStauts[i][j] < 0)
return uni.showToast({
title: '很抱歉，所选入离店时间包含无房日期',
icon: 'none',
mask: true
});
}
} else {
//中间间隔的月份需要检查每一天是否包含无房情况
for (var j = 0; j < this.priceStauts[i].length; j++) {
if (this.priceStauts[i][j] < 0)
return uni.showToast({
title: '很抱歉，所选入离店时间包含无房日期',
icon: 'none',
mask: true
});
}
}
}
}
}
}
//如果没有入住时间
if (this.start.length == 0) {
//填充入住时间
this.start = [line, index];
} else if (this.start.length > 0 && this.start[0] == line && this.start[1] == index && this.end.length ==
0) {
return;
} else {
//如果没有离开时间
if (this.end.length == 0) {
//如果有价格和入住离开情况则需要进行判断所选的离店时间时候包含无房日期
if (line < this.start[0] || (line == this.start[0] && index < this.start[1])) {
this.end = this.start;
this.start = [line, index];
} else {
//如果离开时间比入住时间晚则填充
this.end = [line, index];
}
} else {
//如果有离开时间则清空离开时间重新填充入住时间
this.start = [line, index];
this.end = [];
}
}
},
//设置日历
setDate() {
//年份
var year = new Date().getFullYear();
//月份
var month = new Date().getMonth();
console.log("执行了...")
for (let i = 0; i < this.count; i++) {
var day = [];
var week = 0;
for (var j = 0; j < new Date(year, month + 1, 0).getDate(); j++) {
day.push(j + 1);
}
this.date.push({
year: year,
month: month + 1,
day: day,
oneDayWeek: new Date(Date.parse(year + '/' + (month + 1) + '/' + '01')).getDay()
});
if (month == 11) {
year += 1;
month = 0;
} else {
month++;
}
}
return this.date;
},
//关闭
close() {
uni.navigateBack({
delta: 1
});
},
//确定入住离店事件提交
submit() {
var obj = {
/* startYMD: this.date[this.start[0]].year + this.type + this.date[this.start[0]].month + this.type + this.isFestival(
this.start[0], this.start[1]),
startMD: this.date[this.start[0]].month + this.type + this.isFestival(this.start[0], this.start[1]),
startDay: this.startDay,
startWeek: this.startWeek,
endYMD: this.date[this.end[0]].year + this.type + this.date[this.end[0]].month + this.type + this.isFestival(this
.end[0], this.end[1]),
emdMD: this.date[this.end[0]].month + this.type + this.type + this.isFestival(this.end[0], this.end[1]),
endDay: this.endDay,
endWeek: this.endWeek,
day: this.day */
startWeek: this.startWeek,
endWeek: this.endWeek,
start: this.date[this.start[0]].year + this.type + this.date[this.start[0]].month + this.type +
this.isFestival(this.start[0], this.start[1], true),
end: this.date[this.end[0]].year + this.type + this.date[this.end[0]].month + this.type + this
.isFestival(this.end[0], this.end[1], true),
startDay: this.date[this.start[0]].month + '-' + this.isFestival(this.start[0], this.start[1],
true),
endDay: this.date[this.end[0]].month + '-' + this.isFestival(this.end[0], this.end[1], true),
day: this.day
};
/*此处应把需要的数据进行保存,如入住离开日期...添加到vuex然后再进行跳转到上一页
*不推荐使用本地缓存,下面是缓存的示例
*/
uni.setStorage({
key: 'Time',
data: JSON.stringify(obj)
})
this.$emit("finish",obj)
//价格清单,应该存入vuex获取缓存中
// if (this.priceStauts.length > 0) {
// var price = []
// if (this.end[0] - this.start[0] == 0) {
// for (var i = this.start[1]; i < this.end[1]; i++) {
// var day = this.date[this.start[0]].year + this.type + this.setPull(this.date[this.start[0]]
// .month) + this.type + this.isFestival(
// this.start[0], i)
// price.push({
// day_str: day,
// price: this.priceStauts[this.start[0]][i]
// })
// }
// } else {
// for (var i = this.start[0]; i <= this.end[0]; i++) {
// console.log(i)
// if (i == this.start[0]) {
// for (var j = this.start[1]; j < this.date[i].day.length; j++) {
// var day = this.date[i].year + this.type + this.setPull(this.date[i].month) + this
// .type + this.isFestival(
// i, j)
// price.push({
// day_str: day,
// price: this.priceStauts[i][j]
// })
// }
// } else if (i == this.end[0]) {
// for (var j = 0; j < this.end[1]; j++) {
// var day = this.date[i].year + this.type + this.setPull(this.date[i].month) + this
// .type + this.isFestival(
// i, j)
// price.push({
// day_str: day,
// price: this.priceStauts[i][j]
// })
// }
// } else {
// for (var j = 0; j < this.date[i].day.length; j++) {
// var day = this.date[i].year + this.type + this.setPull(this.date[i].month) + this
// .type + this.isFestival(
// i, j)
// price.push({
// day_str: day,
// price: this.priceStauts[i][j]
// })
// }
// }
// }
// }
// //加入缓存
// uni.setStorage({
// key: 'Price',
// data: JSON.stringify(price)
// })
// }
//跳转到上一页
// uni.navigateBack({
// delta: 1
// })
},
}
};
</script>
<style scoped>
@import url("@/asset/css/flex.css");
@import url("../../style.css");
/**确认按钮**/
.submit {
width: 100%;
background: #f5f5f5;
position: fixed;
bottom: 0upx;
height: auto;
padding: 30rpx 54rpx;
}
.sub-btn {
height: auto;
border-radius: 50upx;
background: #E1C278;
color: white;
}
.content {
height: 100%;
z-index: 999;
}
/**不能预订**/
/* 入住离开时间的color */
.bg-orange {
background: #E1C278 !important;
border-radius: 6px 0px 0px 6px !important;
}
.bg-higlt-orange {
background-color: #fff;
}
/* 节假日的日期样式 */
.is-festival {
font-size: 22rpx !important;
color: #000 !important;
}
/** 非节假日的日期样式**/
.not-festival {
font-size: 18upx;
color: white;
}
/***入住离开时间的日历样式*/
.not-sub {
color: #222222;
background: #dddddd;
}
.select-out-item {
background: #ffffff;
}
.select-style {
color: white !important;
font-size: 20rpx !important;
/* font-size: 20upx; */
/* padding-top: 4upx; */
}
.time-out {
/* text-decoration: line-through; */
color: #ccc !important;
}
/**
* 点击日期的样式
*/
.bg {
background: orange;
}
/**
* 日期部分
*/
.section {
width: 100%;
padding-bottom: 150upx;
height: auto;
padding-top: 176rpx;
background-color: #F1F4F6;
}
.section>.item>.year {
text-align: center;
height: 50rpx;
font-weight: bold;
/* padding-left:30upx;
padding-right: 30upx; */
font-size: 24rpx;
line-height: 50rpx;
color: #1B1D1E;
}
.section>.item>.day {
display: flex;
flex-wrap: wrap;
text-align: center;
margin-left: 5px;
margin-right: 5px;
}
.section>.item>.day>.day-list {
margin-top: 30upx;
margin-bottom: 30upx;
min-height: 100upx;
max-height: 180upx;
display: flex;
font-size: 26rpx;
flex-direction: column;
align-items: center;
justify-content: center;
color:#1B1D1E;
}
/**
* 头部固定
*/
.header {
position: fixed;
top: 0;
width: 100%;
/* height: 400upx; */
background: white;
box-shadow: 0px 10rpx 30rpx 0px rgba(36, 36, 36, 0.06);
}
.bar {
width: 100%;
height: var(--status-bar-height);
background: #222222;
}
/**
* 关闭清空
*/
.set {
height: 100upx;
padding-left: 30upx;
padding-right: 30upx;
align-items: center;
display: flex;
justify-content: space-between;
}
/**
* 入住离开时间
*/
.in-and-out {
height: 210upx;
padding-left: 30upx;
padding-right: 30upx;
display: flex;
align-items: center;
justify-content: space-between;
}
/**
* 入住离开的view
*/
.in-and-out>.item {
display: flex;
flex-direction: column;
height: 100upx;
}
/**
* 未选择入离时间时的文字样式
*/
.in-and-out>.text {
margin-top: 100upx;
font-weight: bold;
font-size: 36upx;
color: #c0c0c0;
}
/**
* 一共选择了多少晚的样式
*/
.in-and-out>.item>.count-border {
width: 200upx;
font-size: 28upx;
height: 40upx;
margin-top: 48upx;
text-align: center;
}
.gray {
color: #c0c0c0;
border-bottom: 1px solid #c0c0c0;
}
.orange {
color: orange;
border-bottom: 1px solid orange;
}
/**
* 共多少晚
*/
.in-and-out>.item>.count-border>.count {
font-size: 10px;
}
/**
* 周一到周日
*/
.week {
/* height: 70upx; */
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 25px;
padding-right: 25px;
font-size: 24rpx;
color:#1B1D1E;
background: white;
margin-bottom: 16rpx;
}
.isa {
color: red;
}
.isa2 {
color: red;
}
</style>
pages/airTicket/dates.js 0 → 100644
View file @ 23b75f00
/*
*此函数的作用是根据传入的一个日期，返回这一周的日期或者这一个月的日期，
* 如果是月的话注意还包含上个月和下个月的日期，月的话总共数据有 6 * 7 = 42个
*
*/
/*
* 时间格式化函数
* 重要提示，微信小程序new Date('2020-04-16')在ios中无法获取时间对象
* 解决方式: 建议将时间都格式化成'2020/04/16 00:00:00'的格式
* 函数示例: formatDate(new Date(), 'YYYY/MM/dd hh:mm:ss')
*/
export const formatDate = (date, fmt) => {
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
}
let o = {
'M+': date.getMonth() + 1,
'd+': date.getDate(),
'h+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds()
}
for (let k in o) {
if (new RegExp(`(${k})`).test(fmt)) {
let str = o[k] + ''
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str))
}
}
return fmt
}
const padLeftZero = (str) => {
return ('00' + str).substr(str.length)
}
export const judgeType = (s) => {
// 函数返回数据的具体类型
return Object.prototype.toString.call(s).slice(8,-1);
}
export const equalDate = (d1, d2) => {
let result = false;
if (d1.getFullYear() === d2.getFullYear() && d1.getMonth() === d2.getMonth() && d1.getDate() === d2.getDate()) {
result = true;
}
return result;
}
/* 比较时间,时间格式为2020-04-04
*/
export const dateEqual = (before, after) => {
before = new Date(before.replace('-', '/').replace('-', '/'))
after = new Date(after.replace('-', '/').replace('-', '/'))
if (before.getTime() - after.getTime() === 0) {
return true
} else {
return false
}
}
export const gegerateDates = (date = new Date(), type='week') => {
const result = [];
if (judgeType(date) === 'Date') {
// 年，月，日
const y = date.getFullYear();
const m = date.getMonth();
const d = date.getDate();
const days = new Date(y, m+1, 0).getDate();
// 获取日期是星期几
let weekIndex = date.getDay() === 0 ? 7 : date.getDay();
if (type === 'month') {
const dobj = new Date(y,m,1);
weekIndex = dobj.getDay() === 0 ? 7 : dobj.getDay();
}
if (type === 'week') {
for(let i = weekIndex - 1; i >0; i--) {
const dtemp = new Date(y,m,d);
dtemp.setDate(dtemp.getDate() - i);
result.push({
time: dtemp,
show: true,
fullDate: formatDate(dtemp, 'yyyy-MM-dd'),
isToday: equalDate(new Date(), dtemp)
})
}
for(let i = 0; i <= 7 - weekIndex; i++) {
const dtemp = new Date(y,m,d);
dtemp.setDate(dtemp.getDate() + i);
result.push({
time: dtemp,
show: true,
fullDate: formatDate(dtemp, 'yyyy-MM-dd'),
isToday: equalDate(new Date(), dtemp)
})
}
} else if (type === 'month') {
// 上个月
for(let i = weekIndex - 1; i > 0; i--) {
const dtemp = new Date(y,m,1);
dtemp.setDate(dtemp.getDate() - i);
result.push({
time: dtemp,
show: false,
fullDate: formatDate(dtemp, 'yyyy-MM-dd'),
isToday: equalDate(new Date(), dtemp)
});
}
// 这个月的日期
for (let i = 0; i < days; i++) {
const dtemp = new Date(y,m,1);
dtemp.setDate(dtemp.getDate() + i);
result.push({
time: dtemp,
show: true,
fullDate: formatDate(dtemp, 'yyyy-MM-dd'),
isToday: equalDate(new Date(), dtemp)
});
}
const len = 42 - result.length;
// 下个月的日期
for (let i = 1; i <= len;i++) {
const dtemp = new Date(y,m+1,0);
dtemp.setDate(dtemp.getDate() + i);
result.push({
time: dtemp,
show: false,
fullDate: formatDate(dtemp, 'yyyy-MM-dd'),
isToday: equalDate(new Date(), dtemp)
})
}
}
}
return result;
}
// 计算当前日期的前后日期
export const getBeforeDate = (num, time)=> {
let n = num;
let d = '';
if (time) {
d = new Date(time);
} else {
d = new Date();
}
let year = d.getFullYear();
let mon = d.getMonth() + 1;
let day = d.getDate();
if (day <= n) {
if (mon > 1) {
mon = mon - 1;
} else {
year = year - 1;
mon = 12;
}
}
d.setDate(d.getDate() - n);
year = d.getFullYear();
mon = d.getMonth() + 1;
day = d.getDate();
let s = year + "-" + (mon < 10 ? ('0' + mon) : mon) + "-" + (day < 10 ? ('0' + day) : day);
return s;
}
// 获取当前是周几
export const getDateWeek = (time)=> {
let w = new Date(time).getDay()
let week
if(w==1){week = '一'}
else if(w==2){week = '二'}
else if(w==3){week = '三'}
else if(w==4){week = '四'}
else if(w==5){week = '五'}
else if(w==6){week = '六'}
else{week = '日'}
return week;
}
\ No newline at end of file
pages/airTicket/style.css 0 → 100644
View file @ 23b75f00
.FlightDirection-box{
flex-grow: 1;
margin: 0 21rpx;
}
.FlightDirection-Title{
width: 100%;
text-align: center;
}
.FlightDirection-zhuan{
padding: 5rpx 0;
}
.FlightDirection-zhuan text{
border-radius: 8rpx;
width: 60rpx;
height: 28rpx;
line-height: 28rpx;
text-align: center;
margin: auto;
}
.FlightDirection-line{
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.FlightDirection-line-one{
width: 12rpx;
height: 12rpx;
border-radius: 50%;
}
.FlightDirection-line-two{
flex-grow: 1;
}
.FlightDirection-line-one.FlightDirection-line-therr{
background: #FF5858;
}
.FlightDirection-zhang{
padding: 2rpx 9rpx;
border-radius: 8rpx;
-webkit-border-radius: 8rpx;
-moz-border-radius: 8rpx;
-ms-border-radius: 8rpx;
-o-border-radius: 8rpx;
}
.FlightDirection-qc{
width: 33rpx;
padding: 6rpx 0;
border-radius: 8rpx;
-webkit-border-radius: 8rpx;
-moz-border-radius: 8rpx;
-ms-border-radius: 8rpx;
-o-border-radius: 8rpx;
}
.AirplanePassengerList-footer{
padding: 38rpx 54rpx 67rpx 54rpx;
}
.AirplanePassengerList-buttom{
border-radius: 40rpx;
padding: 25rpx 0;
}
.airTicketDetailsInstructionsBox{
padding: 0 53rpx;
}
.airTicketDetailsInstructions{
line-height: 48rpx;
padding-bottom: 220rpx;
}
.airTicketDetailsFooter-order{
padding: 24rpx 47rpx;
border-radius: 40rpx;
}
.TicketOrderDetailsBg{
background: linear-gradient(180deg, #ECDFC4, #F5F5F5);
}
.airTicketDetailsBg{
background: linear-gradient(180deg, #DEBF7B , #F5F5F5);
}
.airTicketDetailsCard-qfc{
padding: 5rpx 15rpx;
border-radius: 0px 14px 14px 0px;
}
.airTicketDetailsCard-timeL{
width: 75rpx;
}
.airTicketDetailsCard-timeT{
bottom: 39rpx;
left: -8rpx;
}
.airTicketDetailsCard-LinT{
top: 0;
left: -4rpx;
}
.airTicketDetailsCard-LinT2{
top: -11rpx;
left: 0px;
}
.airTicketDetailsCard-LinT3{
top: -22rpx;
left: 0px;
}
.airTicketDetailsCard-LinT4{
top: -34rpx;
left: 0px;
}
.airTicketDetailsCard-LinB{
bottom: 0;
left: -4rpx;
}
.airTicketDetailsCard-LinB2{
bottom: -10rpx;
left: -.5rpx;
}
.airTicketDetailsCard-LinText{
bottom: -69rpx;
left: -5px;
border-radius: 6rpx;
padding: 6rpx 4rpx;
}
.airTicketDetailsCard-title{
top: -38rpx;
left: 0;
}
.airTicketDetailsCard-ZhuanNum{
border-radius: 6rpx;
padding: 0rpx 6rpx 3rpx 6rpx;
top: -34rpx;
}
\ No newline at end of file
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