Skip to content

J
jz_Travel
Commit 9ba7ce44 authored by 黄奎's avatar 黄奎
Browse files
Options

页面修改

parent 4844b6dc
Hide whitespace changes
Inline Side-by-side
Showing with 309 additions and 317 deletions
pages/airTicket/components/airTicketDetails.vue
View file @ 9ba7ce44
<template> <template>
<view class="airTicketDetailsList column"> <view class="airTicketDetailsList column">
<view v-for="(items,i) in dataList"> <view v-for="(items,i) in dataList">
<view class="airTicketDetailsCard bgFFF MB40"> <view class="airTicketDetailsCard bgFFF MB40">
<view class="row-sb-n MR50"> <view class="row-sb-n MR50">
<view class="row-aic-n"> <view class="row-aic-n">
<view> <view>
<view class="airTicketDetailsCard-qfc bgE1C278 fz30 color111 fontBold"> <view class="airTicketDetailsCard-qfc bgE1C278 fz30 color111 fontBold">
<template v-if="items.FlightSubType==1">去程</template> <template v-if="items.FlightSubType==1">去程</template>
<template v-if="items.FlightSubType==3">返程</template> <template v-if="items.FlightSubType==3">返程</template>
</view> </view>
</view> </view>
<view class="fz28 color111 ML20"> <view class="fz28 color111 ML20">
<text>{{items.time}}</text> <text class="ML10">周{{items.week}}</text> <text>{{items.time}}</text> <text class="ML10">周{{items.week}}</text>
</view> </view>
<view class="fz28 color111 ML31"> <view class="fz28 color111 ML31">
总时长 {{items.duration}} <!-- 总时长 {{items.duration}} -->
</view> </view>
</view> </view>
<view v-if="items.FlightList.length>1" class="fz28 colorE1C278 row-aic-n" @click="TicketDetails(items)"> <view v-if="items.FlightList.length>1" 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="items.show?'arrowdown':'arrowright'" size="14"></uni-icons> </view>
<!-- <uni-icons class="ML10" color="#DEBF7B" type="arrowright" size="14"></uni-icons> --> </view>
</view> <view class="MT60 PX50" v-if="!items.show">
</view> <view class="row relative" v-for="(item,index) in items.NewFlightList" :class="[index==0?'MB50':'']">
<view class="MT60 PX50" v-if="!items.show"> <text v-if="index==1" class="fz18 fontWeight400 colorFF5858 absolute airTicketDetailsCard-timeT">
<view class="row relative" v-for="(item,index) in items.NewFlightList" {{item.time}} 周{{item.week}}
:class="[index==0?'MB50':'']"> </text>
<text v-if="index==1" class="fz18 fontWeight400 colorFF5858 absolute airTicketDetailsCard-timeT"> <view class="airTicketDetailsCard-timeL column flexS MR20 textRight">
{{item.time}} 周{{item.week}} <view v-if="index==0" class="fz28 fontBold relative relativeFT10">{{item.Departure_time}} </view>
</text> <view v-if="items.NewFlightList.length-1==index" class="MT25 fz28 fontBold">
<view class="airTicketDetailsCard-timeL column flexS MR20 textRight"> {{item.Arrival_time}}
<view v-if="index==0" class="fz28 fontBold relative relativeFT10">{{item.Departure_time}} </view> </view>
<view v-if="items.NewFlightList.length-1==index" class="MT25 fz28 fontBold"> </view>
{{item.Arrival_time}} <view class="flexS MR30">
</view> <view class="width-lineH49 bgE1C278 relative">
</view> <view class="bgE1C278 absolute WH12R50 airTicketDetailsCard-LinT"></view>
<view class="flexS MR30"> <template v-if="index">
<view class="width-lineH49 bgE1C278 relative"> <view class="bgE1C278 absolute WH6R50 airTicketDetailsCard-LinT2"></view>
<view class="bgE1C278 absolute WH12R50 airTicketDetailsCard-LinT"></view> <view class="bgE1C278 absolute WH6R50 airTicketDetailsCard-LinT3"></view>
<template v-if="index"> <view class="bgE1C278 absolute WH6R50 airTicketDetailsCard-LinT4"></view>
<view class="bgE1C278 absolute WH6R50 airTicketDetailsCard-LinT2"></view> </template>
<view class="bgE1C278 absolute WH6R50 airTicketDetailsCard-LinT3"></view> <view class="bgE1C278 absolute WH12R50 airTicketDetailsCard-LinB"></view>
<view class="bgE1C278 absolute WH6R50 airTicketDetailsCard-LinT4"></view> <template v-if="index!=1">
</template> <view class="bgE1C278 absolute WH6R50 airTicketDetailsCard-LinB2"></view>
<view class="bgE1C278 absolute WH12R50 airTicketDetailsCard-LinB"></view> </template>
<template v-if="index!=1"> </view>
<view class="bgE1C278 absolute WH6R50 airTicketDetailsCard-LinB2"></view> </view>
</template> <view class="column flexG relative">
</view> <view v-if="items.frequency&&index!=0" class="airTicketDetailsCard-ZhuanNum bgE1C278 fz18 colorFFF absolute">
</view> 转
<view class="column flexG relative"> <template v-if="items.frequency>1">+{{items.frequency}}</template>
<view v-if="items.frequency&&index!=0" class="airTicketDetailsCard-ZhuanNum bgE1C278 fz18 colorFFF absolute"> </view>
转 <view class="airTicketDetailsCard-title row-aic-n absolute" v-if="index==0">
<template v-if="items.frequency>1">+{{items.frequency}}</template> <img class="inlineblock flexS" mode="widthFix" style="width: 20rpx;height: 17rpx;" :src="item.AlImage" />
</view> <view class="flexG">
<view class="airTicketDetailsCard-title row-aic-n absolute" v-if="index==0"> <text class="block width100One overflow fz20 ML5 color9999A5 fontWeight400">{{item.AlName}}
<img class="inlineblock flexS" mode="widthFix" style="width: 20rpx;height: 17rpx;" {{item.Flight_number}} </text>
:src="item.AlImage"/> </view>
<view class="flexG"> </view>
<text class="block width100One overflow fz20 ML5 color9999A5 fontWeight400">{{item.AlName}} {{item.Flight_number}} </text> <view class="width436">
</view> <view class="fz28 fontBold relative relativeFT8" v-if="index==0">
</view> <text class="block width100One hidden ellipsis1">{{item.DepartureName?item.DepartureName:''}} {{item.dName}}</text>
<view class="width436"> </view>
<view class="fz28 fontBold relative relativeFT8" v-if="index==0"> <view class="fz28 fontBold MT25" v-if="index==1">
<text class="block width100One hidden ellipsis1">{{item.DepartureName?item.DepartureName:''}} {{item.dName}}</text> <text class="block width100One hidden ellipsis1">{{item.ArrivalCityName?item.ArrivalCityName:''}} {{item.aName}}</text>
</view> </view>
<view class="fz28 fontBold MT25" v-if="index==1"> </view>
<text class="block width100One hidden ellipsis1">{{item.ArrivalCityName?item.ArrivalCityName:''}} {{item.aName}}</text>
</view> </view>
</view> </view>
</view>
</view> <template v-if="items.show">
</view> <view class="MT60 PX50" v-for="(item,index) in items.FlightList" :class="[items.FlightList.length-1!=index?'MB50':'']">
</view> <view class="row-aic-n relative" :class="[items.FlightList.length-1!=index?'MB70':'']">
<template v-if="items.show"> <text v-if="items.FlightList.length-1==index" class="fz18 fontWeight400 colorFF5858 absolute airTicketDetailsCard-timeT">
<view class="MT60 PX50" v-for="(item,index) in items.FlightList" {{item.time}} 周{{item.week}}
:class="[items.FlightList.length-1!=index?'MB50':'']"> </text>
<view class="row-aic-n relative" <view class="airTicketDetailsCard-timeL column flexS MR20 textRight">
:class="[items.FlightList.length-1!=index?'MB70':'']"> <view :class="[index?'fz24':'fz28 fontBold']">{{item.Departure_time}} </view>
<text v-if="items.FlightList.length-1==index" class="fz18 fontWeight400 colorFF5858 absolute airTicketDetailsCard-timeT"> <view class="MT35" :class="[items.FlightList.length-1!=index?'fz24':'fz28 fontBold']">
{{item.time}} 周{{item.week}} {{item.Arrival_time}}
</text> </view>
<view class="airTicketDetailsCard-timeL column flexS MR20 textRight"> </view>
<view :class="[index?'fz24':'fz28 fontBold']">{{item.Departure_time}} </view> <view class="flexS MR30">
<view class="MT35" :class="[items.FlightList.length-1!=index?'fz24':'fz28 fontBold']"> <view class="width-lineH83 bgE1C278 relative">
{{item.Arrival_time}} <view class="bgE1C278 absolute WH12R50 airTicketDetailsCard-LinT"></view>
</view> <template v-if="index">
</view> <view class="bgE1C278 absolute WH6R50 airTicketDetailsCard-LinT2"></view>
<view class="flexS MR30"> <view class="bgE1C278 absolute WH6R50 airTicketDetailsCard-LinT3"></view>
<view class="width-lineH83 bgE1C278 relative"> </template>
<view class="bgE1C278 absolute WH12R50 airTicketDetailsCard-LinT"></view> <view class="bgE1C278 absolute WH12R50 airTicketDetailsCard-LinB"></view>
<template v-if="index"> <template v-if="items.FlightList.length-1>index">
<view class="bgE1C278 absolute WH6R50 airTicketDetailsCard-LinT2"></view> <view class="bgE1C278 absolute WH6R50 airTicketDetailsCard-LinB2"></view>
<view class="bgE1C278 absolute WH6R50 airTicketDetailsCard-LinT3"></view> <view class="bgE1C278 fz18 colorFFF absolute airTicketDetailsCard-LinText">
</template> 中转
<view class="bgE1C278 absolute WH12R50 airTicketDetailsCard-LinB"></view> </view>
<template v-if="items.FlightList.length-1>index"> </template>
<view class="bgE1C278 absolute WH6R50 airTicketDetailsCard-LinB2"></view> </view>
<view class="bgE1C278 fz18 colorFFF absolute airTicketDetailsCard-LinText"> </view>
中转 <view class="column flexG relative">
</view> <view class="airTicketDetailsCard-title row-aic-n absolute">
</template>
</view> </view>
</view> <view class="width436">
<view class="column flexG relative"> <view class="fz28 fontBold relative relativeFT8">
<view class="airTicketDetailsCard-title row-aic-n absolute"> <text class="block width100One hidden ellipsis1">{{item.DepartureName?item.DepartureName:''}} {{item.dName}}
<img class="inlineblock flexS" mode="widthFix" style="width: 20rpx;height: 17rpx;" </text>
:src="item.AlImage"/> </view>
<view class="flexG"> <view class="fz28 fontBold MT25">
<text class="block width100One overflow fz20 ML5 color9999A5 fontWeight400">{{item.AlName}} {{item.Flight_number}}</text> <text class="block width100One hidden ellipsis1">{{item.ArrivalCityName?item.ArrivalCityName:''}}
</view> {{item.aName}} </text>
</view> </view>
<view class="width436"> </view>
<view class="fz28 fontBold relative relativeFT8"> </view>
<text class="block width100One hidden ellipsis1">{{item.DepartureName?item.DepartureName:''}} {{item.dName}} </text> </view>
</view> </view>
<view class="fz28 fontBold MT25"> </template>
<text class="block width100One hidden ellipsis1">{{item.ArrivalCityName?item.ArrivalCityName:''}} {{item.aName}} </text> </view>
</view> </view>
</view> </view>
</view>
</view>
</view>
</template>
</view>
</view>
</view>
</template> </template>
<script> <script>
export default { export default {
props:['DetailsList'], props: ['DetailsList'],
components: { components: {
}, },
data() { data() {
return { return {
dataList:[ dataList: [{
{ show: true
show:true },
}, {
{ show: false
show:false },
}, ],
], }
} },
}, onLoad(options) {
onLoad(options){
},
}, watch: {
watch: { DetailsList: {
DetailsList:{ handler(newVal, oldval) {
handler(newVal, oldval) { this.dataList = JSON.parse(JSON.stringify(this.DetailsList))
this.dataList = JSON.parse(JSON.stringify(this.DetailsList)) },
}, deep: true,
deep: true, immediate: true
immediate: true }
} },
}, created() {},
created() {}, methods: {
methods: { TicketDetails(items) {
TicketDetails(items){ items.show = !items.show
items.show=!items.show this.$forceUpdate();
this.$forceUpdate(); },
}, }
} }
}
</script> </script>
<style scoped> <style scoped>
@import url("@/asset/css/flex.css"); @import url("@/asset/css/flex.css");
@import url("../style.css"); @import url("../style.css");
.airTicketDetailsList{
margin: 0 54rpx; .airTicketDetailsList {
} margin: 0 54rpx;
.airTicketDetailsCard{ }
border-radius: 50rpx;
padding: 45rpx 0;
}
</style> .airTicketDetailsCard {
\ No newline at end of file border-radius: 50rpx;
padding: 45rpx 0;
}
</style>
pages/airTicket/components/airTicketList.vue
View file @ 9ba7ce44
<template> <template>
<view> <view>
<view class="aviationCard bgFFF row-sbas-n relative" <view class="aviationCard bgFFF row-sbas-n relative" v-for="(item,index) in dataList" @click="getPriceDetail(item)">
v-for="(item,index) in dataList" <view v-if="item.FlightList.length>2" class="aviationCard-wf absolute bg111 colorFFF fz20 z-index2">异地往返</view>
@click="getPriceDetail(item)"> <view class="column flexG">
<view v-if="item.FlightList.length>2" class="aviationCard-wf absolute bg111 colorFFF fz20 z-index2">异地往返</view> <view :class="[indexs?'':'MB10']" v-for="(childs,indexs) in item.NewFlightList">
<view class="column flexG"> <view class="row-sb-n MT25">
<view <view class="flexS MR20">
:class="[indexs?'':'MB10']" <view class="FlightDirection-qc bgE1C278 fz24 color111 overflow textCenter">
v-for="(childs,indexs) in item.NewFlightList"> <template v-if="childs.FlightSubType==1">去程</template>
<view class="row-sb-n MT25"> <template v-if="childs.FlightSubType==3">返程</template>
<view class="flexS MR20"> </view>
<view class="FlightDirection-qc bgE1C278 fz24 color111 overflow textCenter"> </view>
<template v-if="childs.FlightSubType==1">去程</template> <view class="column flexS">
<template v-if="childs.FlightSubType==3">返程</template> <text class="fz36 fontBold">{{childs.Departure_time}} </text>
</view> <text class="fz22 MT5 width100 ellipsis1">{{childs.dName}}</text>
</view> </view>
<view class="column flexS"> <view class="FlightDirection-box relative">
<text class="fz36 fontBold">{{childs.Departure_time}} </text> <view class="FlightDirection-Title column">
<text class="fz22 MT5 width100 ellipsis1">{{childs.dName}}</text> <!-- :style="{'height':'90rpx'}" -->
</view> <view class="row-ajc-n">
<view class="FlightDirection-box relative"> <!-- <text class="fz20 color9999A5">{{childs.duration}}</text> -->
<view class="FlightDirection-Title column"> <view class="FlightDirection-zhuan z-index2 ML10" v-if="childs.frequency">
<!-- :style="{'height':'90rpx'}" --> <text class="block bgECF1F4 fz21 nowrap">
<view class="row-ajc-n"> 转<template v-if="childs.frequency>1">+{{childs.frequency}}</template>
<text class="fz20 color9999A5">{{childs.duration}}</text> </text>
<view class="FlightDirection-zhuan z-index2 ML10" v-if="childs.frequency"> </view>
<text class="block bgECF1F4 fz21 nowrap"> </view>
转<template v-if="childs.frequency>1">+{{childs.frequency}}</template> <view>
</text> <text class="fz19 textCenter width100 ellipsis1">
</view> {{childs.DepartureName}} {{childs.ArrivalCityName}}
</view> </text>
<view> </view>
<text class="fz19 textCenter width100 ellipsis1"> </view>
{{childs.DepartureName}} {{childs.ArrivalCityName}} <view class="FlightDirection-line absolute row-aic-n">
</text> <view class="FlightDirection-line-one bgECF1F4"></view>
</view> <view class="FlightDirection-line-two">
</view> <view class="height-line1"></view>
<view class="FlightDirection-line absolute row-aic-n"> </view>
<view class="FlightDirection-line-one bgECF1F4"></view> <view class="FlightDirection-line-one bgECF1F4"></view>
<view class="FlightDirection-line-two"> </view>
<view class="height-line1"></view> </view>
</view> <view class="relative">
<view class="FlightDirection-line-one bgECF1F4"></view> <view class="column">
</view> <text class="fz36 fontBold">{{childs.Arrival_time}} </text>
</view> <text class="fz22 MT5 width100 ellipsis1">{{childs.aName}}</text>
<view class="relative"> </view>
<view class="column"> <view class="FlightDirection-time absolute colorFF5858 fz20 nowrap" v-if="childs.Days">
<text class="fz36 fontBold">{{childs.Arrival_time}} </text> <text>+</text>
<text class="fz22 MT5 width100 ellipsis1">{{childs.aName}}</text> <text class="ML5">{{childs.Days}}</text>
</view> <text class="ML5">天</text>
<view class="FlightDirection-time absolute colorFF5858 fz20 nowrap" v-if="childs.Days"> </view>
<text>+</text> </view>
<text class="ML5">{{childs.Days}}</text>
<text class="ML5">天</text> </view>
</view> <view class="row-w MT15">
</view> <view class="aviationTitle row-aic-n">
<view>
</view> <img class="inlineblock flexS" mode="widthFix" style="width: 36rpx;height: 30rpx;" :src="item.AirlineUrl" />
<view class="row-w MT15"> </view>
<view class="aviationTitle row-aic-n"> <text class="fz22 ML10 color9999A5">{{item.AirLineName}}</text>
<view> </view>
<img class="inlineblock flexS" mode="widthFix" style="width: 36rpx;height: 30rpx;" </view>
:src="item.AirlineUrl"/> </view>
</view> </view>
<text class="fz22 ML10 color9999A5">{{item.AirLineName}}</text> <view class="FlightDirection-Price flexS column">
</view> <view class="colorC09D4F fontBold row-aic-n MT25">
</view> <view class="FlightDirection-Price-symbol MR10">
</view> <text class="fz20 relative" v-if="item.Price>0">¥</text>
</view> </view>
<view class="FlightDirection-Price flexS column"> <text :class="[item.Price>0?'fz36':'fz22 fontWeight400']">
<view class="colorC09D4F fontBold row-aic-n MT25"> <template v-if="item.Price>0">
<view class="FlightDirection-Price-symbol MR10"> {{item.Price}}
<text class="fz20 relative" v-if="item.Price>0">¥</text> </template>
</view> <template v-else>暂无报价</template>
<text :class="[item.Price>0?'fz36':'fz22 fontWeight400']"> </text>
<template v-if="item.Price>0"> </view>
{{item.Price}} <view class="textRight">
</template> <text class="FlightDirection-zhang border1 borde fz18" :class="[item.B2BSellNum>0?'borderFF5858 colorFF5858':'borderF5 color9999A5']">
<template v-else>暂无报价</template> <template v-if="item.B2BSellNum>0">剩{{item.B2BSellNum}}张</template>
</text> <template v-if="item.Price>0&&item.B2BSellNum==0">售罄</template>
</view> </text>
<view class="textRight"> </view>
<text class="FlightDirection-zhang border1 borde fz18" </view>
:class="[item.B2BSellNum>0?'borderFF5858 colorFF5858':'borderF5 color9999A5']"> </view>
<template v-if="item.B2BSellNum>0">剩{{item.B2BSellNum}}张</template> </view>
<template v-if="item.Price>0&&item.B2BSellNum==0">售罄</template>
</text>
</view>
</view>
</view>
</view>
</template> </template>
<script> <script>
export default { export default {
props:['dataList'], props: ['dataList'],
components: {}, components: {},
data() { data() {
return { return {}
} },
}, onLoad(options) {
onLoad(options){
}, },
created() {}, created() {},
methods: { methods: {
getPriceDetail(item){ getPriceDetail(item) {
uni.navigateTo({ uni.navigateTo({
url: `/pages/airTicket/airTicketDetails?TCID=${item.TCID}&Price=${item.Price}` url: `/pages/airTicket/airTicketDetails?TCID=${item.TCID}&Price=${item.Price}`
}); });
}, },
} }
} }
</script> </script>
<style scoped> <style scoped>
@import url("@/asset/css/flex.css"); @import url("@/asset/css/flex.css");
@import url("../style.css"); @import url("../style.css");
.aviationCard{
border-radius: 20rpx; .aviationCard {
padding: 37rpx 34rpx 48rpx 37rpx; border-radius: 20rpx;
margin: 0 30rpx 40rpx; padding: 37rpx 34rpx 48rpx 37rpx;
} margin: 0 30rpx 40rpx;
.aviationCard-wf{ }
left: 0;
top: 0; .aviationCard-wf {
border-top-left-radius: 50rpx; left: 0;
border-bottom-right-radius: 50rpx; top: 0;
padding: 7rpx 27rpx; border-top-left-radius: 50rpx;
} border-bottom-right-radius: 50rpx;
.aviationTitle{ padding: 7rpx 27rpx;
margin-right: 31rpx; }
}
.aviationTitle:last-child{ .aviationTitle {
margin-right: 0; margin-right: 31rpx;
} }
.FlightDirection-time{
left: 0; .aviationTitle:last-child {
right: 0; margin-right: 0;
top: -33rpx; }
}
.FlightDirection-Price{ .FlightDirection-time {
margin-left: 45rpx; left: 0;
} right: 0;
.FlightDirection-Price>view{ top: -33rpx;
}
}
.FlightDirection-Price-symbol text{ .FlightDirection-Price {
top: -3rpx; margin-left: 45rpx;
} }
</style>
\ No newline at end of file .FlightDirection-Price>view {}
.FlightDirection-Price-symbol text {
top: -3rpx;
}
</style>
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