679 lines
15 KiB
Vue
679 lines
15 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="codefun-flex-col section">
|
||
<NavBar :bgColor="data.navBar.bgColor" :buttonGroup="buttonGroup" @button-click="util.clickTitlePopupButton"
|
||
tipLayerType="qunar-train-tickets-tip" isTipLayer tipLayerText="修改车票信息">
|
||
<template v-slot:right>
|
||
<view class="codefun-flex-col group_2">
|
||
<view class="codefun-flex-row group_3">
|
||
<image class="image_4" src="/static/image/other/train-tickets/qunar/tuigaishuoming.png" />
|
||
<image class="image_4 ml-25" src="/static/image/other/train-tickets/qunar/kefu.png" />
|
||
</view>
|
||
<view class="codefun-flex-row codefun-mt-4">
|
||
<text class="font text">退改说明</text>
|
||
<text class="font text_2 ml-11">客服</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</NavBar>
|
||
<view class="codefun-flex-col">
|
||
<view class="codefun-flex-row codefun-justify-between codefun-items-center group_4">
|
||
<view class="codefun-flex-row codefun-items-center">
|
||
<image class="codefun-shrink-0 image_5" src="/static/image/other/train-tickets/qunar/success.png" />
|
||
<text class="text_5 ml-7">出票完成</text>
|
||
<view
|
||
class="codefun-flex-col codefun-justify-start codefun-items-center codefun-shrink-0 text-wrapper ml-7 codefun-justify-center">
|
||
<text class="font_5 text_6">订返程</text>
|
||
</view>
|
||
</view>
|
||
<view class="codefun-flex-col section_2">
|
||
<view class="codefun-self-start group_5">
|
||
<text class="font_2 text_3">¥</text>
|
||
<text class="font_2 text_4">{{ trainTickets.orderInfo.price }}</text>
|
||
</view>
|
||
<image class="codefun-shrink-0 codefun-self-end image_7 image_8"
|
||
src="/static/image/other/train-tickets/qunar/right.png" />
|
||
<text class="codefun-self-start text_7">支付明细</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="main-box">
|
||
<view class="codefun-flex-col section_3">
|
||
<view class="codefun-flex-col view">
|
||
<view class="codefun-flex-row codefun-items-baseline codefun-self-stretch codefun-justify-between">
|
||
<text class="font_5 text_8">取票号:{{ trainTickets.orderInfo.orderNo }}</text>
|
||
<view class="group_9 ml-25">
|
||
<text class="font_6">{{ trainTickets.ticketInfo.gate }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="codefun-flex-row equal-division codefun-justify-between">
|
||
<view class="codefun-flex-col group_10 group_28">
|
||
<text class="codefun-self-stretch font_3 text_16">{{
|
||
formatDateTime(trainTickets.ticketInfo.departureTime,
|
||
trainTickets.ticketInfo.date) }}</text>
|
||
<text class="codefun-self-start font_8 mt-7">{{
|
||
trainTickets.ticketInfo.departureTime.split(' ')[1]
|
||
}}</text>
|
||
</view>
|
||
<view class="codefun-flex-col codefun-items-center group_10 group_29">
|
||
<text class="font_5 text_17">{{ trainTickets.ticketInfo.duration }}</text>
|
||
<image class="image_9 mt-11" src="/static/image/other/train-tickets/qunar/jingtingzhan.png" />
|
||
</view>
|
||
<view class="codefun-flex-col group_10 group_26">
|
||
<text class="codefun-self-start font_3 text_18">{{
|
||
formatDateTime(trainTickets.ticketInfo.arrivalTime,
|
||
trainTickets.ticketInfo.date) }}</text>
|
||
<text class="codefun-self-end font_8 mt-7">{{ trainTickets.ticketInfo.arrivalTime.split(' ')[1]
|
||
}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="codefun-flex-row codefun-justify-center codefun-self-stretch codefun-relative group_11">
|
||
<view class="codefun-flex-row codefun-items-center pos">
|
||
<text class="font_9 text_19">{{ trainTickets.ticketInfo.departureStation }}</text>
|
||
<image class="codefun-shrink-0 image_4 ml-3"
|
||
src="/static/image/other/train-tickets/qunar/location.png" />
|
||
</view>
|
||
<view class="codefun-flex-row codefun-items-center">
|
||
<text class="font_19 text_21">{{ trainTickets.ticketInfo.trainNo }}</text>
|
||
<image class="codefun-shrink-0 image_10 codefun-ml-2"
|
||
src="/static/image/other/train-tickets/qunar/info.png" />
|
||
</view>
|
||
<view class="codefun-flex-row codefun-items-center pos_2">
|
||
<image class="codefun-shrink-0 image_4"
|
||
src="/static/image/other/train-tickets/qunar/location.png" />
|
||
<text class="font_9 text_20 codefun-ml-4">{{ trainTickets.ticketInfo.arrivalStation }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="codefun-flex-col group_12">
|
||
<view class="codefun-flex-col section_1" v-for="item in trainTickets.passengerList" :key="item.id">
|
||
<view class="codefun-flex-col">
|
||
<view class="codefun-flex-row codefun-justify-between codefun-items-center">
|
||
<view class="codefun-flex-row codefun-items-baseline">
|
||
<text class="font_10">{{ item.name }}</text>
|
||
<text class="font_11 text_22 codefun-ml-10">{{ item.idType }}</text>
|
||
</view>
|
||
<view class="codefun-flex-row">
|
||
<view
|
||
class="codefun-flex-col codefun-justify-start codefun-items-center codefun-shrink-0 text-wrapper_8">
|
||
<text v-if="computeSeatNo(item.seatNo)" class="font_4 text_23">{{
|
||
computeSeatNo(item.seatNo) }}</text>
|
||
</view>
|
||
<text class="font_12 text_51 codefun-ml-6">{{ item.carriage }}车{{ item.seatNo }}号</text>
|
||
</view>
|
||
</view>
|
||
<view class="codefun-flex-row codefun-justify-between codefun-mt-8">
|
||
<text class="codefun-self-start font_13">{{ item.idType.includes('身份证') ?
|
||
stringUtil.maskIdCard(item.idNumber) : (item.idType.includes('护照') ?
|
||
stringUtil.maskPassport(item.idNumber) : item.idNumber) }}</text>
|
||
<text class="codefun-self-center font_14 text_25">{{ item.seatType }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="codefun-flex-row codefun-justify-between codefun-items-center group_27 mt-19">
|
||
<text class="font_15 text_50">出票成功</text>
|
||
<view class="codefun-flex-row">
|
||
<view class="codefun-flex-col codefun-justify-center codefun-items-center action-btn">
|
||
<text class="font_16">分享</text>
|
||
</view>
|
||
<view
|
||
class="codefun-flex-col codefun-justify-center codefun-items-center action-btn codefun-ml-6">
|
||
<text class="font_16">改签</text>
|
||
</view>
|
||
<view
|
||
class="codefun-flex-col codefun-justify-center codefun-items-center action-btn codefun-ml-6">
|
||
<text class="font_16">退票</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<Box />
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<script setup>
|
||
import NavBar from '@/components/nav-bar/nav-bar.vue';
|
||
import Box from './components/box.vue';
|
||
import { reactive, ref, computed, toRefs } from 'vue';
|
||
import { onShow, onPageScroll } from '@dcloudio/uni-app';
|
||
import { util, stringUtil } from '@/utils/common.js';
|
||
import CtripTrainTickets from '../ctrip-train-tickets/ctrip-train-tickets.vue';
|
||
|
||
const buttonGroup = [{
|
||
name: "编辑机票信息",
|
||
click: () => {
|
||
goEdit()
|
||
}
|
||
}]
|
||
|
||
function goEdit() {
|
||
util.goPage(`/pages/other/train-tickets/edit/edit?app=qunar&storageKey=${data.STORAGE_KEY}`)
|
||
}
|
||
const data = reactive({
|
||
navBar: {
|
||
bgColor: 'transparent'
|
||
},
|
||
trainTickets: {
|
||
"orderInfo": {
|
||
"orderNo": "EJ66223536",
|
||
"price": "4440"
|
||
},
|
||
"ticketInfo": {
|
||
"departureTime": "01-01 09:19",
|
||
"departureStation": "北京南",
|
||
"arrivalTime": "01-01 14:04",
|
||
"arrivalStation": "上海虹桥",
|
||
"trainNo": "G905",
|
||
"duration": "4时45分",
|
||
"date": "2026.01.01",
|
||
"weekDay": "星期四",
|
||
"gate": "6A、7A进站检票口,6B、7B进站检票",
|
||
"trainName": "复兴号"
|
||
},
|
||
"passengerList": [
|
||
{
|
||
"name": "张元英",
|
||
"type": "成人票",
|
||
"seatType": "商务座",
|
||
"carriage": "01",
|
||
"seatNo": "03C",
|
||
"idType": "外国护照（KR）",
|
||
"idNumber": "KR123456789",
|
||
"price": "2110",
|
||
"status": "已支付",
|
||
"isMe": true,
|
||
"points": 9632
|
||
}
|
||
]
|
||
},
|
||
STORAGE_KEY: 'qunarTrainTickets'
|
||
})
|
||
|
||
let { trainTickets } = toRefs(data)
|
||
|
||
onShow(() => {
|
||
const stored = uni.getStorageSync(data.STORAGE_KEY)
|
||
if (stored) {
|
||
Object.assign(data.trainTickets, stored)
|
||
}
|
||
})
|
||
|
||
onPageScroll((e) => {
|
||
data.navBar.bgColor = e.scrollTop > 40 ? '#F2F5F9' : 'transparent';
|
||
})
|
||
|
||
|
||
const computeSeatNo = (seatNo) => {
|
||
if (seatNo.includes('C') || seatNo.includes('F')) {
|
||
return '靠窗';
|
||
} else if (seatNo.includes('A') || seatNo.includes('D')) {
|
||
return '过道';
|
||
}
|
||
return '';
|
||
}
|
||
|
||
const formatDateTime = (timeStr, dateStr) => {
|
||
if (!timeStr) return '';
|
||
const parts = timeStr.split(' ');
|
||
const md = parts[0];
|
||
if (!md) return '';
|
||
const mdParts = md.split('-');
|
||
let year, month, day;
|
||
|
||
if (mdParts.length === 3) {
|
||
year = mdParts[0];
|
||
month = mdParts[1];
|
||
day = mdParts[2];
|
||
} else if (mdParts.length === 2) {
|
||
month = mdParts[0];
|
||
day = mdParts[1];
|
||
year = new Date().getFullYear();
|
||
if (dateStr) {
|
||
year = dateStr.split('.')[0];
|
||
}
|
||
} else {
|
||
return '';
|
||
}
|
||
|
||
const dateObj = new Date(Number(year), Number(month) - 1, Number(day));
|
||
const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
|
||
const week = isNaN(dateObj.getTime()) ? '' : weekDays[dateObj.getDay()];
|
||
|
||
return `${month}月${day}日 ${week}`;
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
@import '/common/global.css';
|
||
|
||
page {
|
||
background-color: #F2F5F9;
|
||
}
|
||
</style>
|
||
<style lang="less" scoped>
|
||
::v-deep .uni-navbar__header-btns-right {
|
||
width: auto !important;
|
||
}
|
||
|
||
.ml-11 {
|
||
margin-left: 22rpx;
|
||
}
|
||
|
||
.ml-7 {
|
||
margin-left: 14rpx;
|
||
}
|
||
|
||
.ml-25 {
|
||
margin-left: 50rpx;
|
||
}
|
||
|
||
.mt-7 {
|
||
margin-top: 14rpx;
|
||
}
|
||
|
||
.mt-11 {
|
||
margin-top: 22rpx;
|
||
}
|
||
|
||
.ml-3 {
|
||
margin-left: 6rpx;
|
||
}
|
||
|
||
.mt-19 {
|
||
margin-top: 38rpx;
|
||
}
|
||
|
||
.section {
|
||
background: linear-gradient(180deg, #CDF2F6 0%, #F2F5F9 100%);
|
||
|
||
.image_5 {
|
||
width: 44rpx;
|
||
height: 44rpx;
|
||
}
|
||
|
||
.group_2 {
|
||
.group_3 {
|
||
padding-left: 23.26rpx;
|
||
padding-right: 4.64rpx;
|
||
|
||
.image_4 {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
}
|
||
}
|
||
|
||
.font {
|
||
font-size: 18rpx;
|
||
line-height: 16.88rpx;
|
||
color: #363636;
|
||
}
|
||
|
||
.text {
|
||
line-height: 16.68rpx;
|
||
}
|
||
|
||
.text_2 {
|
||
line-height: 16.74rpx;
|
||
}
|
||
}
|
||
|
||
.group_4 {
|
||
padding-left: 20rpx;
|
||
padding-bottom: 30rpx;
|
||
|
||
.text_5 {
|
||
color: #363636;
|
||
font-size: 44rpx;
|
||
font-weight: 700;
|
||
line-height: 41.18rpx;
|
||
}
|
||
|
||
.text-wrapper {
|
||
border-radius: 25rpx;
|
||
width: 106rpx;
|
||
height: 50rpx;
|
||
border: solid 0.5px #28c2dd;
|
||
|
||
.text_6 {
|
||
color: #28c2dd;
|
||
font-size: 24rpx;
|
||
line-height: 50rpx;
|
||
}
|
||
}
|
||
|
||
.section_2 {
|
||
padding: 19.76rpx 16.2rpx 13.54rpx;
|
||
background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
|
||
border-radius: 16rpx 0rpx 0rpx 16rpx;
|
||
width: 160rpx;
|
||
height: 94rpx;
|
||
|
||
.group_5 {
|
||
line-height: 20.46rpx;
|
||
|
||
.font_2 {
|
||
font-size: 26rpx;
|
||
line-height: 21.14rpx;
|
||
color: #fb8517;
|
||
}
|
||
|
||
.text_3 {
|
||
font-size: 28rpx;
|
||
line-height: 19.9rpx;
|
||
}
|
||
|
||
.text_4 {
|
||
font-size: 28rpx;
|
||
line-height: 20.46rpx;
|
||
}
|
||
}
|
||
|
||
.image_7 {
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
}
|
||
|
||
.image_8 {
|
||
margin-right: 11.8rpx;
|
||
}
|
||
|
||
.text_7 {
|
||
margin-left: 2.52rpx;
|
||
margin-top: 3.84rpx;
|
||
color: #363636;
|
||
font-size: 20rpx;
|
||
line-height: 18.62rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.main-box {
|
||
padding: 10rpx 16rpx;
|
||
padding-bottom: 10rpx;
|
||
padding-bottom: calc(10rpx + constant(safe-area-inset-bottom));
|
||
padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
|
||
|
||
.ml-25 {
|
||
margin-left: 50rpx;
|
||
}
|
||
|
||
.section_3 {
|
||
padding: 20rpx 18rpx 0;
|
||
background-color: #ffffff;
|
||
border-radius: 20rpx;
|
||
|
||
.view {
|
||
margin: 0 14rpx;
|
||
padding-top: 2.96rpx;
|
||
|
||
.font_5 {
|
||
font-size: 26rpx;
|
||
line-height: 21.14rpx;
|
||
color: #666666;
|
||
}
|
||
|
||
.text_8 {
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.group_9 {
|
||
line-height: 21.76rpx;
|
||
height: 21.76rpx;
|
||
overflow: hidden;
|
||
overflow-x: auto;
|
||
flex: 1;
|
||
text-align: right;
|
||
|
||
/* 隐藏横向滚动条，但保留滑动效果 */
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
|
||
&::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
.font_6 {
|
||
white-space: nowrap;
|
||
font-size: 22rpx;
|
||
line-height: 24rpx;
|
||
font-weight: 500;
|
||
color: #4FB26E;
|
||
}
|
||
}
|
||
|
||
.equal-division {
|
||
align-self: flex-start;
|
||
margin-top: 21rpx;
|
||
width: 100%;
|
||
|
||
.group_10 {
|
||
flex-shrink: 0;
|
||
|
||
.font_3 {
|
||
font-size: 26rpx;
|
||
line-height: 25.92rpx;
|
||
color: #363636;
|
||
}
|
||
|
||
.text_16 {
|
||
font-size: 28rpx;
|
||
line-height: 24rpx;
|
||
}
|
||
|
||
.font_8 {
|
||
font-size: 52rpx;
|
||
color: #363636;
|
||
}
|
||
|
||
.text_17 {
|
||
font-size: 24rpx;
|
||
line-height: 22.04rpx;
|
||
}
|
||
|
||
.image_9 {
|
||
width: 234rpx;
|
||
height: 44rpx;
|
||
}
|
||
|
||
.text_18 {
|
||
font-size: 28rpx;
|
||
line-height: 24rpx;
|
||
text-align: right;
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.group_28 {
|
||
padding: 16rpx 0;
|
||
width: 200rpx;
|
||
}
|
||
|
||
.group_29 {
|
||
padding: 18.84rpx 0 3.54rpx;
|
||
}
|
||
|
||
.group_26 {
|
||
padding: 16rpx 0;
|
||
width: 200rpx;
|
||
}
|
||
}
|
||
|
||
.group_11 {
|
||
|
||
.pos {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
|
||
.text_19 {
|
||
font-size: 28rpx;
|
||
line-height: 25.96rpx;
|
||
}
|
||
}
|
||
|
||
.font_19 {
|
||
font-size: 26rpx;
|
||
line-height: 28rpx;
|
||
color: #666666;
|
||
}
|
||
|
||
.text_21 {
|
||
font-size: 24rpx;
|
||
line-height: 17.54rpx;
|
||
}
|
||
|
||
.image_10 {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
}
|
||
|
||
.pos_2 {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
|
||
.text_20 {
|
||
font-size: 28rpx;
|
||
line-height: 25.82rpx;
|
||
}
|
||
}
|
||
|
||
.image_4 {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
}
|
||
|
||
.font_9 {
|
||
font-size: 26rpx;
|
||
line-height: 25.92rpx;
|
||
font-weight: 700;
|
||
color: #363636;
|
||
}
|
||
}
|
||
}
|
||
|
||
.group_12 {
|
||
padding: 38rpx 0 0;
|
||
|
||
.section_1 {
|
||
padding: 28rpx 10.58rpx 22rpx 19.1rpx;
|
||
background-color: #f9fbfc;
|
||
border-radius: 16rpx;
|
||
margin-bottom: 24rpx;
|
||
|
||
.text_22 {
|
||
font-size: 24rpx;
|
||
line-height: 22.22rpx;
|
||
}
|
||
|
||
.text-wrapper_8 {
|
||
background-color: #9db2bd;
|
||
border-radius: 8rpx;
|
||
width: 56rpx;
|
||
height: 32rpx;
|
||
|
||
.text_23 {
|
||
line-height: 32rpx;
|
||
}
|
||
}
|
||
|
||
.text_51 {
|
||
margin-top: 2.92rpx;
|
||
}
|
||
|
||
.text_25 {
|
||
margin-right: 4.38rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.group_27 {
|
||
padding: 0 8.98rpx;
|
||
|
||
.text_50 {
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.font_10 {
|
||
font-size: 26rpx;
|
||
line-height: 23.74rpx;
|
||
font-weight: 700;
|
||
color: #363636;
|
||
}
|
||
|
||
.font_11 {
|
||
font-size: 26rpx;
|
||
line-height: 21.14rpx;
|
||
font-weight: 700;
|
||
color: #999999;
|
||
}
|
||
|
||
.font_4 {
|
||
font-size: 20rpx;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.font_12 {
|
||
font-size: 32rpx;
|
||
line-height: 29.6rpx;
|
||
color: #363636;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.font_13 {
|
||
font-size: 26rpx;
|
||
line-height: 19rpx;
|
||
font-weight: 700;
|
||
color: #999999;
|
||
}
|
||
|
||
.font_14 {
|
||
font-size: 26rpx;
|
||
line-height: 25.92rpx;
|
||
color: #545356;
|
||
}
|
||
|
||
.font_15 {
|
||
font-size: 26rpx;
|
||
line-height: 25.92rpx;
|
||
font-weight: 700;
|
||
color: #f5882c;
|
||
}
|
||
|
||
.font_16 {
|
||
font-size: 26rpx;
|
||
line-height: 21.14rpx;
|
||
font-weight: 700;
|
||
color: #363636;
|
||
}
|
||
|
||
.action-btn {
|
||
background-color: #ffffff;
|
||
border-radius: 30rpx;
|
||
width: 104rpx;
|
||
height: 60rpx;
|
||
border: solid 1rpx #e0e4e3;
|
||
|
||
text {
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
</style> |