1200 lines
26 KiB
Vue
1200 lines
26 KiB
Vue
<template>
|
||
<!-- 水印 -->
|
||
<view v-if="$isVip()">
|
||
<watermark dark="light" />
|
||
<liu-drag-button :canDocking="false" @clickBtn="$goRechargePage('watermark')">
|
||
<c-lottie ref="cLottieRef" :src='$watermark()' width="94px" height='74px' :loop="true"></c-lottie>
|
||
</liu-drag-button>
|
||
</view>
|
||
<view class="page-container">
|
||
<view class="bg-color"></view>
|
||
<!-- 导航栏 -->
|
||
<NavBar title="订单详情" :bgColor="data.navBar.bgColor" :buttonGroup="buttonGroup"
|
||
@button-click="util.clickTitlePopupButton" tipLayerType="fliggy-air-tickets-tip" isTipLayer
|
||
tipLayerText="修改机票信息">
|
||
<view class="custom-nav-bar">
|
||
<view class="nav-content">
|
||
<view class="left-icon flex flex-align-center" @click="onBack">
|
||
<image src="/static/image/nav-bar/back-black.png" mode="widthFix" class="back-icon"></image>
|
||
</view>
|
||
<view class="tab-container">
|
||
<view class="tab-item active">
|
||
<text>出行安排</text>
|
||
<view class="active-line hidden"></view>
|
||
</view>
|
||
<view class="tab-item">
|
||
<text class="active-text">订单详情</text>
|
||
<view class="active-line"></view>
|
||
</view>
|
||
</view>
|
||
<view class="right-icons">
|
||
<image src="/static/image/other/air-tickets/fliggy-air/share.png" mode="widthFix"
|
||
class="nav-icon share-icon"></image>
|
||
<image src="/static/image/other/air-tickets/fliggy-air/more.png" mode="widthFix"
|
||
class="nav-icon more-icon"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</NavBar>
|
||
<!-- 滚动区域 -->
|
||
<scroll-view @scroll="onPageScroll" scroll-y class="main-scroll">
|
||
<view class="scroll-content">
|
||
<!-- 状态区域 -->
|
||
<view class="status-section">
|
||
<view class="status-title-row">
|
||
<text class="status-title">出票成功</text>
|
||
<uni-icons type="right" size="12" color="#000000"></uni-icons>
|
||
</view>
|
||
<text class="status-desc">飞猪祝您旅途愉快</text>
|
||
|
||
<view class="action-grid">
|
||
<view class="action-item">
|
||
<text>我要改签</text>
|
||
</view>
|
||
<view class="action-item">
|
||
<text>我要退票</text>
|
||
</view>
|
||
<view class="action-item">
|
||
<text>发票报销</text>
|
||
</view>
|
||
<view class="action-item">
|
||
<text>选座值机</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- Unified Check-in Card -->
|
||
<view class="check-in-card">
|
||
<view class="tip-top">
|
||
<view class="tt-left">
|
||
<image src="/static/image/other/air-tickets/fliggy-air/tips.png" class="tip-icon">
|
||
</image>
|
||
<text class="tip-text">可前往航司官网办理乘机手续</text>
|
||
</view>
|
||
<view class="check-in-btn">选座帮助</view>
|
||
</view>
|
||
<view class="tip-bottom">
|
||
<text class="flight-info-text">{{ airTickrtInfo.flightInfo.startCity }}-{{
|
||
airTickrtInfo.flightInfo.endCity }} {{ flightInfo.date }}({{ flightInfo.week
|
||
}})起飞</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 出行前必读 -->
|
||
<view class="card alert-card">
|
||
<view class="alert-header">
|
||
<view class="alert-title-box">
|
||
<image class="notice-icon" src="/static/image/other/air-tickets/fliggy-air/notice.png">
|
||
</image>
|
||
<text class="alert-title">出行前必读</text>
|
||
<text class="alert-count blue">{{ airTickrtInfo.fligggyOrderInfo.tips.length }}条</text>
|
||
</view>
|
||
<view class="detail-btn">详情</view>
|
||
</view>
|
||
<view class="alert-tags">
|
||
<text v-for="(item, index) in airTickrtInfo.fligggyOrderInfo.tips" :key="index">
|
||
{{ item.content }}
|
||
<text v-if="index < airTickrtInfo.fligggyOrderInfo.tips.length - 1" class="divider">|</text>
|
||
</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- Red Packet Banner -->
|
||
<view class="banner-box">
|
||
<image class="w100" src="/static/image/other/air-tickets/fliggy-air/spring-festival-banner.png"
|
||
mode="widthFix">
|
||
</image>
|
||
</view>
|
||
|
||
<!-- Flight Info Card -->
|
||
<view class="card flight-card">
|
||
<view class="fc-header">
|
||
<view class="fc-price">
|
||
<text class="label">总价</text>
|
||
<view class="symbol">¥</view>
|
||
<text class="value">{{ airTickrtInfo.orderInfo.price }}</text>
|
||
<uni-icons type="right" size="10" color="#1A1A1A"></uni-icons>
|
||
</view>
|
||
<view class="fc-rules">
|
||
<text class="text">退改签、行李额、产品说明</text>
|
||
<uni-icons type="right" size="10" color="#6F66D9"></uni-icons>
|
||
</view>
|
||
</view>
|
||
<view class="order-no">
|
||
<text>订单号 {{ airTickrtInfo.orderInfo.orderNo }}</text>
|
||
<image src="/static/image/other/air-tickets/fliggy-air/copy-black.png" mode="widthFix"
|
||
class="copy-icon">
|
||
</image>
|
||
<text class="copy-text">复制</text>
|
||
</view>
|
||
|
||
<view class="flight-detail-section">
|
||
<view class="fds-header">
|
||
<view class="tag">单程</view>
|
||
<text class="date-info">{{ flightInfo.date }} {{ flightInfo.week }}
|
||
{{ airTickrtInfo.flightInfo.startCity }}-{{ airTickrtInfo.flightInfo.endCity }}</text>
|
||
<view class="status-badge">
|
||
<text>收起</text>
|
||
<uni-icons style="margin-left: 8rpx;margin-right: 2rpx;" type="up" size="10"
|
||
color="#1A1A1A"></uni-icons>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="flight-route">
|
||
<!-- Departure -->
|
||
<view class="route-left">
|
||
<text class="time">{{ airTickrtInfo.flightInfo.startTime }}</text>
|
||
<view class="station">
|
||
<view class="dot grey"></view>
|
||
<text>{{ airTickrtInfo.flightInfo.startAirport }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- Airline Info (Middle) -->
|
||
<view class="airline-middle">
|
||
<view class="flight-meta">
|
||
<image :src="`/static/image/other/air-tickets/air-line/${airlineInfo.icon}.png`"
|
||
mode="widthFix" class="al-icon"></image>
|
||
<text class="flex">{{ airlineInfo.name }}{{ airTickrtInfo.flightInfo.flightNumber
|
||
}}<text class="divider">|</text></text>
|
||
<text class="flex">{{ airTickrtInfo.flightInfo.seatCategory }}<text
|
||
class="divider">|</text></text>
|
||
<text class="flex">{{ airTickrtInfo.flightInfo.aircraftType }}<text
|
||
class="divider">|</text></text>
|
||
<view class="flex">
|
||
<text>{{ airTickrtInfo.flightInfo.meal }}</text>
|
||
<text class="divider">|</text>
|
||
</view>
|
||
<text>到达准点率{{ airTickrtInfo.flightInfo.onTimeRate }}</text>
|
||
<image src="/static/image/other/air-tickets/fliggy-air/blue-right.png"
|
||
class="right-icon">
|
||
</image>
|
||
</view>
|
||
<view class="duration">
|
||
<text>{{ airTickrtInfo.flightInfo.duration }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- Arrival -->
|
||
<view class="route-left">
|
||
<text class="time">{{ airTickrtInfo.flightInfo.endTime }}</text>
|
||
<view class="station">
|
||
<view class="dot grey"></view>
|
||
<text>{{ airTickrtInfo.flightInfo.endAirport }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- Passenger Info -->
|
||
<view class="card passenger-card">
|
||
<view class="pc-header">
|
||
<text class="pc-title">出行信息</text>
|
||
<view class="pc-toggle">
|
||
<text>收起</text>
|
||
<uni-icons style="margin-left: 8rpx;" type="up" size="10" color="#1A1A1A"></uni-icons>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="passenger-list">
|
||
<view class="passenger-item"
|
||
:class="{ 'last-passenger': index === airTickrtInfo.passengersInfo.length - 1 }"
|
||
v-for="(item, index) in airTickrtInfo.passengersInfo" :key="index">
|
||
<text class="label" :class="{ 'empty': index !== 0 }">乘机人</text>
|
||
<view class="info">
|
||
<text class="name">{{ item.name }}</text>
|
||
<text class="id-card">{{ item.idType }}：{{ item.idNumber }}</text>
|
||
<view class="ticket-row">
|
||
<text class="ticket-no">票号：{{ item.ticketNo }}</text>
|
||
<image src="/static/image/other/air-tickets/fliggy-air/copy-blue.png"
|
||
mode="widthFix" class="copy-icon-sm"></image>
|
||
<text class="action-text">复制</text>
|
||
<text class="sub-text">({{ airTickrtInfo.flightInfo.startCity }}-{{
|
||
airTickrtInfo.flightInfo.endCity }})</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="contact-row">
|
||
<text class="label">联系手机</text>
|
||
<view class="contact-info">
|
||
<text class="phone">{{ airTickrtInfo.ticketNumber.replace(/(\d{3})\d{4}(\d{4})/,
|
||
'$1****$2') }}</text>
|
||
<view class="edit-box">
|
||
<image src="/static/image/other/air-tickets/fliggy-air/edit-icon.png"
|
||
class="edit-icon">
|
||
</image>
|
||
<text>修改</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="contact-tip">
|
||
<text>请确保手机畅通，并随时关注邮件通知，以便变更在航班变动时通知送达</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- Insurance Action -->
|
||
<view class="insurance-bar">
|
||
<view class="insurance-item">
|
||
<text class="ins-text">去购买同航班婴童票</text>
|
||
<view class="add-btn">
|
||
<uni-icons type="plus" size="16" color="#0DA3E9"></uni-icons>
|
||
<text style="margin-left: 8rpx;">加订婴童</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- Order Info Footer -->
|
||
<view class="card order-footer">
|
||
<view class="section-title">订单信息</view>
|
||
<view class="info-row">
|
||
<text class="label">创建时间</text>
|
||
<text class="val">{{ airTickrtInfo.orderInfo.orderTime }}</text>
|
||
</view>
|
||
<view class="info-row">
|
||
<text class="label">服务方</text>
|
||
<text class="val">{{ airTickrtInfo.fligggyOrderInfo.serviceProvider }}</text>
|
||
</view>
|
||
<view class="info-row">
|
||
<text class="label">飞猪里程</text>
|
||
<view class="val-flex">
|
||
<text>{{ airTickrtInfo.fligggyOrderInfo.flyingPigMileage }} <uni-icons type="help" size="14"
|
||
color="#999"></uni-icons></text>
|
||
|
||
<view class="miles-tag">赚里程</view>
|
||
</view>
|
||
</view>
|
||
<view class="info-row">
|
||
<text class="label">交易流水号</text>
|
||
<text class="val">{{ airTickrtInfo.fligggyOrderInfo.transactionSerialNumber }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- Bottom Actions -->
|
||
<!-- Note: User image shows floating bottom bar but cut off. Assuming standard action buttons -->
|
||
</view>
|
||
<view class="safe-area-inset-bottom"></view> <!-- Spacer -->
|
||
</scroll-view>
|
||
|
||
<view class="footer-bar">
|
||
<view class="flex flex-justify-between">
|
||
<view class="flex-1 flex flex-align-center flex-justify-center">
|
||
<image class="footer-icon" src="/static/image/other/air-tickets/fliggy-air/zhibo.png" />
|
||
<text class="text">联系飞猪</text>
|
||
</view>
|
||
<view class="line"></view>
|
||
<view class="flex-1 flex flex-align-center flex-justify-center">
|
||
<image class="footer-icon" src="/static/image/other/air-tickets/fliggy-air/logo.png" />
|
||
<text class="text">直播客服</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import NavBar from '@/components/nav-bar/nav-bar.vue';
|
||
import { ref, onMounted, reactive, toRefs, computed } from 'vue';
|
||
import { onShow } from '@dcloudio/uni-app';
|
||
import defualtData from '@/pages/other/air-tickets/commom/defualt.json';
|
||
import airlineJson from '@/static/json/air-line.json';
|
||
import { util, numberUtil } from '@/utils/common.js';
|
||
|
||
const buttonGroup = [{
|
||
name: "编辑机票信息",
|
||
click: () => {
|
||
util.goPage(`/pages/other/air-tickets/edit/edit?ticketsApp=fliggy&storageKey=${data.STORAGE_KEY}`)
|
||
}
|
||
}]
|
||
|
||
const data = reactive({
|
||
STORAGE_KEY: 'fliggyAirTicketsInfo',
|
||
navBar: {
|
||
bgColor: "transparent",
|
||
},
|
||
airTickrtInfo: JSON.parse(JSON.stringify(defualtData)),
|
||
|
||
})
|
||
|
||
let { airTickrtInfo } = toRefs(data);
|
||
|
||
//航空公司信息
|
||
const airlineInfo = computed(() => {
|
||
const airline = airlineJson.airLine.find(item => item.code === airTickrtInfo.value.flightInfo.airlineCode);
|
||
console.log('airline', airline);
|
||
return airline || {};
|
||
});
|
||
|
||
/**
|
||
* 飞机日期信息
|
||
*/
|
||
const flightInfo = computed(() => {
|
||
const dateStr = airTickrtInfo.value.flightInfo.date;
|
||
if (!dateStr) return { date: '', week: '' };
|
||
|
||
// 兼容 iOS：将 YYYY-MM-DD 转换为 YYYY/MM/DD
|
||
const date = new Date(dateStr.replace(/-/g, '/'));
|
||
const month = date.getMonth() + 1;
|
||
const day = date.getDate();
|
||
const weeks = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
|
||
const week = weeks[date.getDay()];
|
||
|
||
return {
|
||
date: `${month}月${day}日`,
|
||
week
|
||
}
|
||
});
|
||
onMounted(() => {
|
||
});
|
||
|
||
// 深度合并函数
|
||
const deepMerge = (target, source) => {
|
||
for (const key in source) {
|
||
if (source[key] && typeof source[key] === 'object' && !Array.isArray(source[key])) {
|
||
if (!target[key] || typeof target[key] !== 'object') {
|
||
target[key] = {};
|
||
}
|
||
deepMerge(target[key], source[key]);
|
||
} else {
|
||
target[key] = source[key];
|
||
}
|
||
}
|
||
return target;
|
||
};
|
||
|
||
onShow(() => {
|
||
const stored = uni.getStorageSync(data.STORAGE_KEY) || "";
|
||
if (stored) {
|
||
// 使用默认数据作为基础，将存储的数据合并进去
|
||
// 这样可以确保新增的默认字段不会被旧的存储数据覆盖丢失
|
||
const baseData = JSON.parse(JSON.stringify(defualtData));
|
||
const mergedData = deepMerge(baseData, stored);
|
||
Object.assign(data.airTickrtInfo, mergedData);
|
||
}
|
||
// #ifdef APP-PLUS
|
||
util.setAndroidSystemBarColor('#ffffff')
|
||
setTimeout(() => {
|
||
plus.navigator.setStatusBarStyle("dark");
|
||
}, 500)
|
||
// #endif
|
||
})
|
||
|
||
const onPageScroll = (e) => {
|
||
const scrollTop = e.detail.scrollTop;
|
||
if (scrollTop > 20) {
|
||
data.navBar.bgColor = "#FCE041";
|
||
} else {
|
||
data.navBar.bgColor = "transparent";
|
||
}
|
||
}
|
||
|
||
const onBack = () => {
|
||
console.log('onBack');
|
||
uni.navigateBack();
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
@import "/common/main.css";
|
||
</style>
|
||
|
||
<style lang="less" scoped>
|
||
.page-container {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
background-color: #F5F6FA;
|
||
|
||
.bg-color {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
background: linear-gradient(180deg, #FCE041 0%, rgba(252, 224, 65, 0) 100%);
|
||
height: 540rpx;
|
||
z-index: 0;
|
||
}
|
||
}
|
||
|
||
.main-scroll {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 1;
|
||
}
|
||
|
||
.scroll-content {
|
||
padding-top: calc(44px + var(--status-bar-height));
|
||
padding-bottom: 26px;
|
||
}
|
||
|
||
/* Custom Nav Bar */
|
||
.custom-nav-bar {
|
||
|
||
.nav-content {
|
||
height: 44px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 12px;
|
||
|
||
.left-icon {
|
||
width: 120rpx;
|
||
|
||
.back-icon {
|
||
width: 44rpx;
|
||
height: 44rpx;
|
||
}
|
||
}
|
||
|
||
.tab-container {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.tab-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
position: relative;
|
||
|
||
text {
|
||
font-size: 30rpx;
|
||
font-weight: 400;
|
||
color: #1A1A1A;
|
||
}
|
||
|
||
.active-text {
|
||
font-weight: bold;
|
||
margin-left: 58rpx;
|
||
}
|
||
|
||
.active-line {
|
||
width: 56rpx;
|
||
height: 6rpx;
|
||
background: #000000;
|
||
border-radius: 4rpx;
|
||
position: absolute;
|
||
bottom: -10rpx;
|
||
left: 50%;
|
||
|
||
&.hidden {
|
||
opacity: 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.right-icons {
|
||
width: 120rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.nav-icon {
|
||
flex-shrink: 0;
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
}
|
||
|
||
.more-icon {
|
||
width: 44rpx;
|
||
height: 44rpx;
|
||
margin-left: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
|
||
|
||
/* Utils */
|
||
.blue {
|
||
color: #4a90e2;
|
||
}
|
||
|
||
.hidden {
|
||
visibility: hidden;
|
||
}
|
||
|
||
.mt-20 {
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
/* Status Section */
|
||
.status-section {
|
||
margin-top: 22rpx;
|
||
margin-bottom: 20rpx;
|
||
padding: 0 18rpx;
|
||
|
||
.status-title-row {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 16rpx;
|
||
line-height: 46rpx;
|
||
padding: 0 18rpx;
|
||
|
||
.status-title {
|
||
font-size: 40rpx;
|
||
font-weight: bold;
|
||
color: #1A1A1A;
|
||
}
|
||
}
|
||
|
||
.status-desc {
|
||
padding: 0 18rpx;
|
||
font-size: 24rpx;
|
||
color: #1A1A1A;
|
||
line-height: 28rpx;
|
||
margin-bottom: 28rpx;
|
||
display: block;
|
||
}
|
||
|
||
.action-grid {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 16rpx;
|
||
padding: 0 6rpx;
|
||
|
||
.action-item {
|
||
background: #fff;
|
||
padding: 18rpx 20rpx;
|
||
border-radius: 40rpx;
|
||
font-size: 30rpx;
|
||
line-height: 35rpx;
|
||
font-weight: bold;
|
||
color: #1A1A1A;
|
||
}
|
||
}
|
||
|
||
/* Unified Check-in Card */
|
||
.check-in-card {
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
margin-bottom: 20rpx;
|
||
overflow: hidden;
|
||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
||
border: 1rpx solid #ffffff;
|
||
|
||
.tip-top {
|
||
background: #FFF5F5;
|
||
padding: 20rpx 26rpx 14rpx 28rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.tt-left {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.tip-icon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
margin-right: 8rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.tip-text {
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
color: #1A1A1A;
|
||
line-height: 32rpx;
|
||
}
|
||
}
|
||
|
||
.check-in-btn {
|
||
background: #FFE33C;
|
||
color: #1A1A1A;
|
||
font-size: 24rpx;
|
||
padding: 8rpx 22rpx;
|
||
border-radius: 30rpx;
|
||
line-height: 28rpx;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
.tip-bottom {
|
||
padding: 22rpx 24rpx 32rpx;
|
||
background: #fff;
|
||
|
||
.flight-info-text {
|
||
font-size: 24rpx;
|
||
color: #636363;
|
||
line-height: 28rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* Alert Card */
|
||
.card {
|
||
background: #fff;
|
||
border-radius: 20rpx;
|
||
margin: 0 18rpx 16rpx;
|
||
padding: 30rpx;
|
||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
|
||
}
|
||
|
||
.alert-card {
|
||
padding: 18rpx 24rpx 14rpx;
|
||
|
||
.alert-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 6rpx;
|
||
|
||
.alert-title-box {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.notice-icon {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
margin-right: 4rpx;
|
||
}
|
||
|
||
.alert-title {
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
color: #1A1A1A;
|
||
margin-right: 4rpx;
|
||
line-height: 28rpx;
|
||
}
|
||
|
||
.alert-count {
|
||
font-size: 28rpx;
|
||
line-height: 28rpx;
|
||
font-weight: bold;
|
||
color: #6968D1;
|
||
}
|
||
}
|
||
|
||
.detail-btn {
|
||
border: 1px solid #CFCFCF;
|
||
padding: 10rpx 46rpx;
|
||
border-radius: 26rpx;
|
||
font-size: 24rpx;
|
||
line-height: 28rpx;
|
||
font-weight: bold;
|
||
color: #1A1A1A;
|
||
}
|
||
}
|
||
|
||
.alert-tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
font-size: 24rpx;
|
||
color: #636363;
|
||
line-height: 41rpx;
|
||
|
||
.divider {
|
||
color: #D8D8D8;
|
||
margin: 0 6rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* Banner */
|
||
.banner-box {
|
||
display: flex;
|
||
width: 100%;
|
||
padding: 0 18rpx;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
/* Flight Card */
|
||
.flight-card {
|
||
margin-left: 0;
|
||
margin-right: 0;
|
||
border-radius: 0;
|
||
padding: 18rpx 24rpx 0;
|
||
|
||
.fc-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 18rpx;
|
||
|
||
.fc-price {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.label {
|
||
font-size: 24rpx;
|
||
color: #636363;
|
||
}
|
||
|
||
.symbol {
|
||
font-size: 24rpx;
|
||
color: #1A1A1A;
|
||
font-weight: 500;
|
||
margin-left: 4rpx;
|
||
}
|
||
|
||
.value {
|
||
font-size: 32rpx;
|
||
color: #1A1A1A;
|
||
font-weight: 500;
|
||
line-height: 32rpx;
|
||
}
|
||
}
|
||
|
||
.fc-rules {
|
||
color: #6F66D9;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 24rpx;
|
||
line-height: 24rpx;
|
||
|
||
.text {
|
||
margin-right: 4rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.order-no {
|
||
font-size: 24rpx;
|
||
color: #1A1A1A;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 20rpx;
|
||
font-weight: 400;
|
||
line-height: 24rpx;
|
||
|
||
.copy-icon {
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
margin-left: 8rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.copy-text {
|
||
color: #1A1A1A;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
.flight-detail-section {
|
||
border-top: 0.5px solid #D8D8D8;
|
||
padding: 26rpx 2rpx 24rpx 6rpx;
|
||
|
||
.fds-header {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 22rpx;
|
||
|
||
.tag {
|
||
background: #FFDE3B;
|
||
color: #1A1A1A;
|
||
font-size: 22rpx;
|
||
line-height: 22rpx;
|
||
padding: 8rpx 6rpx;
|
||
border-radius: 4rpx;
|
||
font-weight: bold;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.date-info {
|
||
font-size: 26rpx;
|
||
color: #1A1A1A;
|
||
font-weight: bold;
|
||
line-height: 26rpx;
|
||
flex: 1;
|
||
}
|
||
|
||
.status-badge {
|
||
display: flex;
|
||
align-items: center;
|
||
font-weight: bold;
|
||
font-size: 24rpx;
|
||
line-height: 24rpx;
|
||
color: #1A1A1A;
|
||
}
|
||
}
|
||
|
||
.flight-route {
|
||
padding-left: 10rpx;
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
|
||
.route-left {
|
||
display: flex;
|
||
align-items: center;
|
||
line-height: 28rpx;
|
||
|
||
.time {
|
||
width: 84rpx;
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
color: #1A1A1A;
|
||
font-family: 'alipayNumber';
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.station {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 28rpx;
|
||
line-height: 28rpx;
|
||
color: #1A1A1A;
|
||
font-weight: bold;
|
||
min-height: 40rpx;
|
||
|
||
.dot {
|
||
width: 18rpx;
|
||
height: 18rpx;
|
||
border-radius: 50%;
|
||
flex-shrink: 0;
|
||
margin-right: 12rpx;
|
||
|
||
&.grey {
|
||
background: #ddd;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.airline-middle {
|
||
border-left: 6rpx solid #D8D8D8;
|
||
position: relative;
|
||
margin-left: 100rpx;
|
||
padding: 22rpx 16rpx;
|
||
font-size: 24rpx;
|
||
|
||
.flight-meta {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 24rpx;
|
||
color: #979797;
|
||
// line-height: 24rpx;
|
||
margin-bottom: 10rpx;
|
||
flex-wrap: wrap;
|
||
|
||
.al-icon {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
}
|
||
|
||
.divider {
|
||
color: #ddd;
|
||
margin: 0 3px;
|
||
}
|
||
|
||
.right-icon {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
margin-left: 4rpx;
|
||
}
|
||
}
|
||
|
||
.ontime-info {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4rpx;
|
||
font-size: 24rpx;
|
||
color: #979797;
|
||
|
||
|
||
}
|
||
|
||
.duration {
|
||
position: absolute;
|
||
left: -12rpx;
|
||
top: 40%;
|
||
font-size: 22rpx;
|
||
color: #979797;
|
||
transform: translateX(-100%);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* Passenger Card */
|
||
.passenger-card {
|
||
margin-left: 0;
|
||
margin-right: 0;
|
||
border-radius: 0;
|
||
padding: 26rpx 24rpx 28rpx;
|
||
|
||
.pc-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 28rpx;
|
||
|
||
.pc-title {
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
line-height: 28rpx;
|
||
color: #1A1A1A;
|
||
}
|
||
|
||
.pc-toggle {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 24rpx;
|
||
line-height: 24rpx;
|
||
font-weight: bold;
|
||
color: #1A1A1A;
|
||
}
|
||
}
|
||
|
||
.passenger-list {
|
||
.passenger-item {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
|
||
.label {
|
||
font-size: 24rpx;
|
||
color: #636363;
|
||
width: 100rpx;
|
||
margin-right: 60rpx;
|
||
line-height: 24rpx;
|
||
|
||
&.empty {
|
||
width: 100rpx;
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
.info {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10rpx;
|
||
|
||
.name {
|
||
font-size: 24rpx;
|
||
color: #1A1A1A;
|
||
line-height: 24rpx;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.id-card {
|
||
font-size: 24rpx;
|
||
line-height: 24rpx;
|
||
color: #1A1A1A;
|
||
margin-bottom: 18rpx;
|
||
}
|
||
|
||
.ticket-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
font-size: 24rpx;
|
||
line-height: 24rpx;
|
||
color: #1A1A1A;
|
||
margin-bottom: 50rpx;
|
||
|
||
.action-text {
|
||
color: #6F66D9;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.copy-icon-sm {
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
}
|
||
|
||
.sub-text {
|
||
color: #999;
|
||
margin-left: 8rpx;
|
||
}
|
||
|
||
.ticket-no {
|
||
color: #333;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.passenger-item.last-passenger {
|
||
padding-bottom: 24rpx;
|
||
box-shadow: 0 0.5px 0 0 #D8D8D8;
|
||
|
||
.ticket-row {
|
||
margin-bottom: 0 !important;
|
||
}
|
||
}
|
||
|
||
.contact-row {
|
||
margin-top: 26rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
line-height: 28rpx;
|
||
|
||
.label {
|
||
font-size: 24rpx;
|
||
color: #636363;
|
||
width: 100rpx;
|
||
margin-right: 60rpx;
|
||
}
|
||
|
||
.contact-info {
|
||
flex: 1;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.phone {
|
||
font-size: 24rpx;
|
||
color: #1A1A1A;
|
||
}
|
||
|
||
.edit-box {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 24rpx;
|
||
color: #6F66D9;
|
||
|
||
.edit-icon {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
margin-right: 4rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.contact-tip {
|
||
margin-left: 160rpx;
|
||
margin-top: 10rpx;
|
||
font-size: 24rpx;
|
||
color: #979797;
|
||
line-height: 34rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.insurance-bar {
|
||
background: #fff;
|
||
margin: 0 0 16rpx;
|
||
padding: 18rpx;
|
||
|
||
.insurance-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
background-color: #F5F6F8;
|
||
padding: 22rpx 44rpx;
|
||
|
||
.ins-text {
|
||
font-size: 26rpx;
|
||
font-weight: bold;
|
||
color: #1A1A1A;
|
||
line-height: 26rpx;
|
||
}
|
||
|
||
.add-btn {
|
||
background-color: #EAF5FC;
|
||
border-radius: 12rpx;
|
||
padding: 10rpx 14rpx 10rpx 8rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 26rpx;
|
||
line-height: 26rpx;
|
||
color: #0DA3E9;
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
|
||
/* Order Footer */
|
||
.order-footer {
|
||
padding: 26rpx 24rpx 1rpx;
|
||
margin: 0;
|
||
border-radius: 0;
|
||
|
||
.section-title {
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
color: #1A1A1A;
|
||
margin-bottom: 46rpx;
|
||
line-height: 28rpx;
|
||
}
|
||
|
||
.info-row {
|
||
display: flex;
|
||
margin-bottom: 34rpx;
|
||
font-size: 26rpx;
|
||
line-height: 26rpx;
|
||
align-items: center;
|
||
|
||
.label {
|
||
color: #636363;
|
||
width: 170rpx;
|
||
margin-right: 4rpx;
|
||
line-height: 26rpx;
|
||
}
|
||
|
||
.val {
|
||
color: #1A1A1A;
|
||
// font-family: 'alipayNumber';
|
||
}
|
||
|
||
.val-flex {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
color: #1A1A1A;
|
||
flex: 1;
|
||
|
||
.miles-tag {
|
||
background: #F7F7F7;
|
||
padding: 12rpx 18rpx;
|
||
border-radius: 24rpx;
|
||
font-size: 24rpx;
|
||
line-height: 24rpx;
|
||
color: #636363;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.safe-area-inset-bottom {
|
||
height: 40px;
|
||
height: calc(40px + constant(safe-area-inset-bottom));
|
||
height: calc(40px + env(safe-area-inset-bottom));
|
||
}
|
||
|
||
.footer-bar {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background-color: #fff;
|
||
padding: 16rpx 0;
|
||
padding-bottom: calc(16rpx + constant(safe-area-inset-bottom));
|
||
padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
|
||
box-shadow: 0 -2rpx 40rpx 2rpx #e5e5e5;
|
||
z-index: 999;
|
||
|
||
.line {
|
||
height: 70rpx;
|
||
width: 1px;
|
||
background: #DCDCDC;
|
||
}
|
||
|
||
.footer-icon {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.text {
|
||
font-size: 30rpx;
|
||
line-height: 30rpx;
|
||
color: #1A1A1A;
|
||
}
|
||
}
|
||
</style> |