完成去哪儿火车票
2
main.js
|
|
@ -27,7 +27,7 @@ export function createApp() {
|
|||
const systemInfo = uni.getStorageSync('systemInfo') || {}
|
||||
app.config.globalProperties.$system = systemInfo.platform == 'ios' ? 'iOS' : 'Android'
|
||||
app.config.globalProperties.$systemInfo = systemInfo
|
||||
uni.setStorageSync('version', '1.0.2.sp9')
|
||||
uni.setStorageSync('version', '1.0.3')
|
||||
app.config.globalProperties.$version = uni.getStorageSync('version')
|
||||
|
||||
app.use(globalMethods);
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
@scroll="handleScroll">
|
||||
<view>
|
||||
<!-- iOS专用:透明点击区域覆盖导航栏左上角 -->
|
||||
<view @click="exit" @tap="exit" :style="{
|
||||
<view @click="exit" :style="{
|
||||
position: 'fixed',
|
||||
top: statusBarHeight + 'px',
|
||||
left: '0px',
|
||||
|
|
|
|||
|
|
@ -204,8 +204,8 @@
|
|||
<text class="label" :class="{ 'empty': index !== 0 }">乘机人</text>
|
||||
<view class="info" @click="goEdit">
|
||||
<text class="name">{{ item.name }}</text>
|
||||
<text class="id-card">{{ item.idType }}:{{ item.idType === '身份证' ?
|
||||
showFristAndLastNumber(item.idNumber) : (item.idType === '护照' ?
|
||||
<text class="id-card">{{ item.idType }}:{{ item.idType.includes('身份证') ?
|
||||
showFristAndLastNumber(item.idNumber) : (item.idType.includes('护照') ?
|
||||
stringUtil.maskPassport(item.idNumber) : item.idNumber) }}</text>
|
||||
<view class="ticket-row">
|
||||
<text class="ticket-no">票号:{{ item.ticketNo }}</text>
|
||||
|
|
|
|||
|
|
@ -198,8 +198,8 @@
|
|||
<view class="row-content"
|
||||
@click="util.goPage('/pages/other/air-tickets/edit/edit')">
|
||||
<view class="p-name">{{ p.name }}</view>
|
||||
<view class="p-sub">{{ p.idType }}: {{ p.idType === '身份证' ?
|
||||
stringUtil.maskIdCard(p.idNumber) : (p.idType === '护照' ?
|
||||
<view class="p-sub">{{ p.idType }}: {{ p.idType.includes('身份证') ?
|
||||
stringUtil.maskIdCard(p.idNumber) : (p.idType.includes('护照') ?
|
||||
stringUtil.maskPassport(p.idNumber) : p.idNumber) }}</view>
|
||||
<view class="p-sub">
|
||||
<text>票号:{{ p.ticketNo }}</text>
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@ const appList = [
|
|||
logo: '/static/image/other/tickets-app/qvnar-logo.png',
|
||||
bgImage: '/static/image/other/tickets-app/qvnar-bg.png',
|
||||
airPath: '/pages/other/air-tickets/qunar-air-tickets/qunar-air-tickets',
|
||||
trainPath: "开发中",
|
||||
trainPath: "/pages/other/train-tickets/qunar-train-tickets/qunar-train-tickets",
|
||||
isHot: false
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
<view class="input">{{ ticketsInfo.orderInfo.orderTime }}</view>
|
||||
</view>
|
||||
</picker>
|
||||
<view v-if="app == 'ctrip'" class="form-item">
|
||||
<view v-if="app != '12306'" class="form-item">
|
||||
<text class="label">订单总价</text>
|
||||
<input class="input" type="number" v-model="ticketsInfo.orderInfo.price" />
|
||||
</view>
|
||||
|
|
@ -126,7 +126,7 @@
|
|||
<text class="label">票价</text>
|
||||
<input class="input" type="number" v-model="passenger.price" @input="onPriceInput" />
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<view v-if="app == 'ctrip'" class="form-item">
|
||||
<text class="label">积分</text>
|
||||
<input class="input" type="number" v-model="passenger.points" />
|
||||
</view>
|
||||
|
|
@ -134,7 +134,7 @@
|
|||
<text class="label">证件类型</text>
|
||||
<input class="input" v-model="passenger.idType" />
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<view v-if="app != 'qunar'" class="form-item">
|
||||
<text class="label">是否本人</text>
|
||||
<switch :checked="passenger.isMe" @change="(e) => passenger.isMe = e.detail.value" />
|
||||
</view>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,278 @@
|
|||
<template>
|
||||
<view class="box">
|
||||
<view class="codefun-flex-row codefun-justify-between codefun-items-center section_5 codefun-mt-8">
|
||||
<view class="codefun-flex-row codefun-items-center">
|
||||
<image class="codefun-shrink-0 image_11" src="/static/image/other/train-tickets/qunar/plan.png" />
|
||||
<text class="font_3 text_31 codefun-ml-4">抢票方案详情</text>
|
||||
</view>
|
||||
<image class="image_4 image_12" src="/static/image/other/train-tickets/qunar/right.png" />
|
||||
</view>
|
||||
<view class="codefun-flex-row codefun-items-center section_6 codefun-mt-8">
|
||||
<view class="codefun-flex-row codefun-flex-1">
|
||||
<image class="codefun-shrink-0 image_13" src="/static/image/other/train-tickets/qunar/child.png" />
|
||||
<view class="codefun-flex-col codefun-items-start codefun-flex-1 group_14 codefun-ml-10">
|
||||
<text class="font_9 text_32">免费携带儿童申报</text>
|
||||
<text class="font_5 text_34 codefun-mt-8">每名成人可免费携带1名6岁以下儿童</text>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="codefun-flex-col codefun-justify-start codefun-items-center codefun-shrink-0 text-wrapper_4 ml-15 codefun-justify-center">
|
||||
<text class="font_9 text_33">去申报</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="codefun-flex-col codefun-justify-start section_7 codefun-mt-8">
|
||||
<view class="codefun-flex-col group_15">
|
||||
<text class="codefun-self-start text_35">专属服务</text>
|
||||
<view
|
||||
class="codefun-flex-row codefun-justify-between codefun-items-center codefun-self-stretch group_16">
|
||||
<view class="codefun-flex-row codefun-items-baseline">
|
||||
<text class="codefun-shrink-0 font_3 text_36">全能抢票套餐</text>
|
||||
<text class="font_19 codefun-ml-24">20元接送站代金券 x2份</text>
|
||||
</view>
|
||||
<image class="image_7" src="/static/image/other/train-tickets/qunar/right.png" />
|
||||
</view>
|
||||
<view v-for="(item, index) in services" :key="index"
|
||||
class="codefun-flex-row codefun-justify-between codefun-items-center codefun-self-end service-item-right">
|
||||
<text class="font_19">{{ item }}</text>
|
||||
<image class="image_7" src="/static/image/other/train-tickets/qunar/right.png" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="codefun-flex-col section_8 codefun-mt-8">
|
||||
<text class="codefun-self-start font_12 text_41">你可能遇到的问题</text>
|
||||
<view class="codefun-flex-col codefun-self-stretch mt-25">
|
||||
<view v-for="(question, index) in questions" :key="index"
|
||||
class="codefun-flex-row codefun-justify-between codefun-items-center faq-item"
|
||||
:class="{ 'mt-34': index > 0 }">
|
||||
<view class="codefun-flex-row codefun-items-center codefun-flex-1">
|
||||
<view class="codefun-flex-col codefun-items-center indicator-wrap">
|
||||
<view class="codefun-shrink-0 section_9"></view>
|
||||
</view>
|
||||
<text class="font_3" style="margin-left: 14rpx;">{{ question.text }}</text>
|
||||
</view>
|
||||
<image class="image_7 faq-arrow" src="/static/image/other/train-tickets/qunar/right.png" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const services = ref([
|
||||
'腾讯视频vip月卡 x2份',
|
||||
'加速包 x2份',
|
||||
'24小时专人抢票 x2份'
|
||||
]);
|
||||
|
||||
const questions = ref([
|
||||
{ text: '为什么会退票失败' },
|
||||
{ text: '退款什么时候到账' },
|
||||
{ text: '已在车站或12306办理退票,退款何时到账' },
|
||||
{ text: '如何退票' }
|
||||
]);
|
||||
</script>
|
||||
<style>
|
||||
@import '/common/global.css';
|
||||
|
||||
page {
|
||||
background-color: #F2F5F9;
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
.mt-25 {
|
||||
margin-top: 50rpx;
|
||||
}
|
||||
|
||||
.box {
|
||||
// padding: 0 16rpx;
|
||||
|
||||
.section_5 {
|
||||
padding: 24rpx 28rpx 23.5rpx;
|
||||
overflow: hidden;
|
||||
border-radius: 20rpx;
|
||||
background-color: #ffffff;
|
||||
|
||||
.image_11 {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
|
||||
.font_3 {
|
||||
font-size: 26rpx;
|
||||
line-height: 25.92rpx;
|
||||
color: #363636;
|
||||
}
|
||||
|
||||
.text_31 {
|
||||
font-size: 28rpx;
|
||||
line-height: 26.04rpx;
|
||||
}
|
||||
|
||||
.image_4 {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
}
|
||||
|
||||
.image_12 {
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.section_6 {
|
||||
padding: 24rpx 32rpx;
|
||||
background-image: url('https://ide.code.fun/api/image?token=69aa2b4a9a40b800116f8c00&name=c0f80a6a5d1e928f0eebbb1c141f11c9.png');
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
.image_13 {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
}
|
||||
|
||||
.group_14 {
|
||||
margin-top: 6.4rpx;
|
||||
|
||||
.text_32 {
|
||||
font-size: 28rpx;
|
||||
line-height: 26.12rpx;
|
||||
}
|
||||
|
||||
.font_5 {
|
||||
font-size: 26rpx;
|
||||
line-height: 21.14rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.text_34 {
|
||||
color: #999999;
|
||||
font-size: 24rpx;
|
||||
line-height: 22.48rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.text-wrapper_4 {
|
||||
background-image: linear-gradient(106.4deg, #ff912b -19.9%, #fc6a11 100.3%);
|
||||
border-radius: 32rpx;
|
||||
width: 140rpx;
|
||||
height: 64rpx;
|
||||
|
||||
.text_33 {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.font_9 {
|
||||
font-size: 26rpx;
|
||||
line-height: 25.92rpx;
|
||||
font-weight: 700;
|
||||
color: #363636;
|
||||
}
|
||||
}
|
||||
|
||||
.section_7 {
|
||||
padding: 46rpx 0 48rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
|
||||
.group_15 {
|
||||
margin-left: 30rpx;
|
||||
margin-right: 36rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.text_35 {
|
||||
color: #363636;
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
line-height: 27.7rpx;
|
||||
}
|
||||
|
||||
.group_16 {
|
||||
margin-top: 34.76rpx;
|
||||
|
||||
.font_3 {
|
||||
font-size: 26rpx;
|
||||
line-height: 25.92rpx;
|
||||
color: #363636;
|
||||
}
|
||||
|
||||
.text_36 {
|
||||
line-height: 24.24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.font_19 {
|
||||
font-size: 26rpx;
|
||||
line-height: 28rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.image_7 {
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
}
|
||||
|
||||
.service-item-right {
|
||||
margin-top: 24rpx;
|
||||
width: 450rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section_8 {
|
||||
padding: 36.12rpx 20.54rpx 46.56rpx 28.54rpx;
|
||||
background-image: linear-gradient(180deg, #f1fbfb -21.5%, #ffffff 67.4%);
|
||||
border-radius: 20rpx;
|
||||
border: solid 4rpx #ffffff;
|
||||
|
||||
.font_12 {
|
||||
font-size: 32rpx;
|
||||
line-height: 29.6rpx;
|
||||
color: #363636;
|
||||
}
|
||||
|
||||
.text_41 {
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
line-height: 31.44rpx;
|
||||
}
|
||||
|
||||
.section_9 {
|
||||
background-color: #02c8e7;
|
||||
border-radius: 50%;
|
||||
width: 8rpx;
|
||||
height: 8rpx;
|
||||
}
|
||||
|
||||
.indicator-wrap {
|
||||
width: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.font_3 {
|
||||
font-size: 26rpx;
|
||||
line-height: 25.92rpx;
|
||||
color: #363636;
|
||||
}
|
||||
|
||||
.image_7 {
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
}
|
||||
|
||||
.faq-arrow {
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
|
||||
.mt-34 {
|
||||
margin-top: 34rpx;
|
||||
}
|
||||
|
||||
.group_21 {
|
||||
line-height: 24.62rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,27 +1,31 @@
|
|||
<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">
|
||||
|
||||
<view class="codefun-flex-col">
|
||||
<NavBar :bgColor="data.navBar.bgColor">
|
||||
<template v-slot:right>
|
||||
<view class="codefun-flex-col group_2">
|
||||
<view class="codefun-flex-row group_3">
|
||||
<image class="image_4"
|
||||
src="https://ide.code.fun/api/image?token=69a8ecc59a40b800116f659f&name=44fab7ee90c95b87261af4a7daf16baa.png" />
|
||||
<image class="image_4 ml-25"
|
||||
src="https://ide.code.fun/api/image?token=69a8ecc59a40b800116f659f&name=65cb30e87fa83964e97ff8fca353aae5.png" />
|
||||
</view>
|
||||
<view class="codefun-flex-row codefun-mt-4">
|
||||
<text class="font text">退改说明</text>
|
||||
<text class="font text_2 ml-11">客服</text>
|
||||
</view>
|
||||
<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>
|
||||
</template>
|
||||
</NavBar>
|
||||
<view class="codefun-flex-row codefun-justify-between codefun-items-center group_4 codefun-mt-10">
|
||||
<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="https://ide.code.fun/api/image?token=69a8ecc59a40b800116f659f&name=9eb41daef3c005e12021a9e662213233.png" />
|
||||
<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">
|
||||
|
|
@ -31,112 +35,221 @@
|
|||
<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">411.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="https://ide.code.fun/api/image?token=69a8ecc59a40b800116f659f&name=57cd551df6c3f5bf9e1926e61e44b652.png" />
|
||||
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">取票号:E452364128</text>
|
||||
<text class="font_5 text_8">取票号:{{ trainTickets.orderInfo.orderNo }}</text>
|
||||
<view class="group_9 ml-25">
|
||||
<text class="font_6">6A、7A进站检票口,6B、7B进站检票 6A、7A进站检票口,6B、7B进站检票</text>
|
||||
<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">10月07日 周二</text>
|
||||
<text class="codefun-self-start font_8 mt-7">12:06</text>
|
||||
<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">3小时2分</text>
|
||||
<image class="image_9 mt-11"
|
||||
src="https://ide.code.fun/api/image?token=69a8ecc59a40b800116f659f&name=04cc1a57adb212e81d9636e2ccf62d52.png" />
|
||||
<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">10月07日 周二</text>
|
||||
<text class="codefun-self-end font_8 mt-7">12:06</text>
|
||||
<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">长沙南</text>
|
||||
<text class="font_9 text_19">{{ trainTickets.ticketInfo.departureStation }}</text>
|
||||
<image class="codefun-shrink-0 image_4 ml-3"
|
||||
src="https://ide.code.fun/api/image?token=69a8ecc59a40b800116f659f&name=d359b87761ae865350a6df0242beabf4.png" />
|
||||
src="/static/image/other/train-tickets/qunar/location.png" />
|
||||
</view>
|
||||
<view class="codefun-flex-row codefun-items-center">
|
||||
<text class="font_19 text_21">G5267</text>
|
||||
<text class="font_19 text_21">{{ trainTickets.ticketInfo.trainNo }}</text>
|
||||
<image class="codefun-shrink-0 image_10 codefun-ml-2"
|
||||
src="https://ide.code.fun/api/image?token=69a8ecc59a40b800116f659f&name=81fda3cc1109a351855d1057b2ba5637.png" />
|
||||
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="https://ide.code.fun/api/image?token=69a8ecc59a40b800116f659f&name=d359b87761ae865350a6df0242beabf4.png" />
|
||||
<text class="font_9 text_20 codefun-ml-4">虎门</text>
|
||||
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">
|
||||
<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">汪鱼</text>
|
||||
<text class="font_11 text_22 codefun-ml-10">成人票</text>
|
||||
<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 class="font_4 text_23">靠窗</text>
|
||||
<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">14车11F号</text>
|
||||
<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">5102**********553</text>
|
||||
<text class="codefun-self-center font_14 text_25">二等座</text>
|
||||
<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-start codefun-items-center text-wrapper_3">
|
||||
<text class="font_16 text_27">分享</text>
|
||||
<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-start codefun-items-center text-wrapper_1 codefun-ml-6">
|
||||
<text class="font_16 text_28">改签</text>
|
||||
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-start codefun-items-center text-wrapper_5 codefun-ml-6">
|
||||
<text class="font_16 text_29">退票</text>
|
||||
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';
|
||||
|
||||
import { reactive } from '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>
|
||||
|
|
@ -147,8 +260,8 @@ page {
|
|||
}
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
.ml-5 {
|
||||
margin-left: 10rpx;
|
||||
::v-deep .uni-navbar__header-btns-right {
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
.ml-11 {
|
||||
|
|
@ -182,34 +295,11 @@ page {
|
|||
.section {
|
||||
background: linear-gradient(180deg, #CDF2F6 0%, #F2F5F9 100%);
|
||||
|
||||
.group {
|
||||
padding: 0 29.34rpx;
|
||||
|
||||
.image {
|
||||
width: 34rpx;
|
||||
height: 22rpx;
|
||||
}
|
||||
|
||||
.image_2 {
|
||||
width: 30rpx;
|
||||
height: 22rpx;
|
||||
}
|
||||
|
||||
.image_3 {
|
||||
width: 48rpx;
|
||||
height: 22.66rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.image_5 {
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
}
|
||||
|
||||
.image_6 {
|
||||
margin: 4rpx 0 3.92rpx;
|
||||
}
|
||||
|
||||
.group_2 {
|
||||
.group_3 {
|
||||
padding-left: 23.26rpx;
|
||||
|
|
@ -243,7 +333,7 @@ page {
|
|||
.text_5 {
|
||||
color: #363636;
|
||||
font-size: 44rpx;
|
||||
font-weight: 800;
|
||||
font-weight: 700;
|
||||
line-height: 41.18rpx;
|
||||
}
|
||||
|
||||
|
|
@ -251,24 +341,18 @@ page {
|
|||
border-radius: 25rpx;
|
||||
width: 106rpx;
|
||||
height: 50rpx;
|
||||
border: solid 1rpx #28c2dd;
|
||||
|
||||
.font_5 {
|
||||
font-size: 26rpx;
|
||||
line-height: 21.14rpx;
|
||||
color: #666666;
|
||||
}
|
||||
border: solid 0.5px #28c2dd;
|
||||
|
||||
.text_6 {
|
||||
color: #28c2dd;
|
||||
font-size: 24rpx;
|
||||
line-height: 21.7rpx;
|
||||
line-height: 50rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.section_2 {
|
||||
padding: 19.76rpx 16.2rpx 13.54rpx;
|
||||
background-image: linear-gradient(270deg, #ffffff00 -64.3%, #ffffff 91.7%);
|
||||
background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
|
||||
border-radius: 16rpx 0rpx 0rpx 16rpx;
|
||||
width: 160rpx;
|
||||
height: 94rpx;
|
||||
|
|
@ -315,6 +399,9 @@ page {
|
|||
|
||||
.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;
|
||||
|
|
@ -345,6 +432,7 @@ page {
|
|||
overflow: hidden;
|
||||
overflow-x: auto;
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
|
||||
/* 隐藏横向滚动条,但保留滑动效果 */
|
||||
scrollbar-width: none;
|
||||
|
|
@ -470,19 +558,20 @@ page {
|
|||
.font_9 {
|
||||
font-size: 26rpx;
|
||||
line-height: 25.92rpx;
|
||||
font-weight: 800;
|
||||
font-weight: 700;
|
||||
color: #363636;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.group_12 {
|
||||
padding: 38rpx 0 24rpx;
|
||||
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;
|
||||
|
|
@ -518,47 +607,6 @@ page {
|
|||
}
|
||||
}
|
||||
|
||||
.section_4 {
|
||||
padding: 28rpx 12.64rpx 22rpx 19.1rpx;
|
||||
background-color: #f9fbfc;
|
||||
border-radius: 16rpx;
|
||||
|
||||
.text_52 {
|
||||
font-size: 24rpx;
|
||||
line-height: 22.22rpx;
|
||||
}
|
||||
|
||||
.text-wrapper_2 {
|
||||
padding: 7.84rpx 0 5.92rpx;
|
||||
background-color: #9db2bd;
|
||||
border-radius: 8rpx;
|
||||
width: 56rpx;
|
||||
height: 32rpx;
|
||||
|
||||
.text_30 {
|
||||
line-height: 18.24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.text_1 {
|
||||
margin-top: 2.92rpx;
|
||||
}
|
||||
|
||||
.text_49 {
|
||||
margin-right: 2.32rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.group_1 {
|
||||
padding-left: 8.98rpx;
|
||||
padding-right: 7.36rpx;
|
||||
|
||||
.text_26 {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.font_10 {
|
||||
font-size: 26rpx;
|
||||
line-height: 23.74rpx;
|
||||
|
|
@ -582,6 +630,7 @@ page {
|
|||
font-size: 32rpx;
|
||||
line-height: 29.6rpx;
|
||||
color: #363636;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.font_13 {
|
||||
|
|
@ -600,24 +649,10 @@ page {
|
|||
.font_15 {
|
||||
font-size: 26rpx;
|
||||
line-height: 25.92rpx;
|
||||
font-weight: 800;
|
||||
font-weight: 700;
|
||||
color: #f5882c;
|
||||
}
|
||||
|
||||
.text-wrapper_3 {
|
||||
padding: 18.14rpx 0 17.54rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 30rpx;
|
||||
width: 104rpx;
|
||||
height: 60rpx;
|
||||
border: solid 1rpx #e0e4e3;
|
||||
|
||||
.text_27 {
|
||||
font-size: 24rpx;
|
||||
line-height: 22.32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.font_16 {
|
||||
font-size: 26rpx;
|
||||
line-height: 21.14rpx;
|
||||
|
|
@ -625,33 +660,20 @@ page {
|
|||
color: #363636;
|
||||
}
|
||||
|
||||
.text-wrapper_1 {
|
||||
padding: 18.18rpx 0 17.52rpx;
|
||||
.action-btn {
|
||||
background-color: #ffffff;
|
||||
border-radius: 30rpx;
|
||||
width: 104rpx;
|
||||
height: 60rpx;
|
||||
border: solid 1rpx #e0e4e3;
|
||||
|
||||
.text_28 {
|
||||
font-size: 24rpx;
|
||||
line-height: 22.3rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.text-wrapper_5 {
|
||||
padding: 19.26rpx 0 17.6rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 30rpx;
|
||||
width: 104rpx;
|
||||
height: 60rpx;
|
||||
border: solid 1rpx #e0e4e3;
|
||||
|
||||
.text_29 {
|
||||
text {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 5.6 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 886 B |
|
After Width: | Height: | Size: 240 B |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 362 B |