tangxinyue
/
alipay-emulator
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

完成携程火车票

This commit is contained in:
tangxinyue 2026-03-04 17:00:36 +08:00
parent b7ae173cd5
commit bf692f48e5
2 changed files with 783 additions and 713 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

315
pages/other/train-tickets/ctrip-train-tickets/ctrip-train-tickets.vue
View File

@ -1,4 +1,11 @@
<template> <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="top-box"> <view class="top-box">
<NavBar title="订单详情" :bgColor="data.navBar.bgColor" :buttonGroup="buttonGroup" <NavBar title="订单详情" :bgColor="data.navBar.bgColor" :buttonGroup="buttonGroup"
@button-click="util.clickTitlePopupButton" tipLayerType="ctrip-train-tickets-tip" isTipLayer @button-click="util.clickTitlePopupButton" tipLayerType="ctrip-train-tickets-tip" isTipLayer
@ -84,43 +91,48 @@
<view class="codefun-flex-col section_5"> <view class="codefun-flex-col section_5">
<view class="codefun-flex-col group_8"> <view class="codefun-flex-col group_8">
<view class="codefun-flex-row codefun-justify-between" style="width: 100%;"> <view class="codefun-flex-row codefun-justify-between" style="width: 100%;">
<text class="font_6 text_12">取票号：E452364128</text> <text class="font_6 text_12">取票号：{{ ticketsInfo.orderInfo.orderNo }}</text>
<text class="font_5 text_13">6A、7A进站检票口,6B、7B进站检票</text> <text class="font_5 text_13">{{ ticketsInfo.ticketInfo.gate }}</text>
</view> </view>
<view class="codefun-flex-row codefun-justify-between codefun-self-stretch group_9"> <view class="codefun-flex-row codefun-justify-between codefun-self-stretch group_9">
<view class="codefun-flex-col"> <view class="codefun-flex-col">
<text class="font_1 text_14">10月07日 周二</text> <text class="font_1 text_14">{{ formatDateTime(ticketsInfo.ticketInfo.departureTime,
ticketsInfo.ticketInfo.date) }}</text>
</view> </view>
<text class="font_1 text_15">3时20分</text> <text class="font_1 text_15">{{ ticketsInfo.ticketInfo.duration }}</text>
<text class="font_1 text_16">10月07日 周二</text> <text class="font_1 text_16">{{ formatDateTime(ticketsInfo.ticketInfo.arrivalTime,
ticketsInfo.ticketInfo.date) }}</text>
</view> </view>
<view <view
class="codefun-flex-row codefun-justify-between codefun-items-center codefun-self-stretch group_10"> class="codefun-flex-row codefun-justify-between codefun-items-center codefun-self-stretch group_10">
<text class="font_7">08:32</text> <text class="font_7" @click="goEdit">{{ ticketsInfo.ticketInfo.departureTime.split(' ')[1] }}</text>
<image class="image_11" src="/static//image/other/train-tickets/ctrip/jingtingxinxi.png" /> <image class="image_11" src="/static//image/other/train-tickets/ctrip/jingtingxinxi.png" />
<text class="font_7">14:32</text> <text class="font_7" @click="goEdit">{{ ticketsInfo.ticketInfo.arrivalTime.split(' ')[1] }}</text>
</view> </view>
<view <view
class="codefun-flex-row codefun-justify-between codefun-items-center codefun-self-stretch group_11"> class="codefun-flex-row codefun-justify-between codefun-items-center codefun-self-stretch group_11">
<view class="codefun-flex-row"> <view class="codefun-flex-row codefun-items-center">
<text class="font_8 text_18">深圳北站</text> <text class="font_8 text_18">{{ ticketsInfo.ticketInfo.departureStation }}</text>
<image class="image_13 codefun-ml-4" <image class="image_13 codefun-ml-4"
src="/static//image/other/train-tickets/ctrip/location.png" /> src="/static//image/other/train-tickets/ctrip/location.png" />
</view> </view>
<view class="codefun-flex-row codefun-items-center"> <view class="codefun-flex-row codefun-items-center">
<text class="font_9 text_19">G5267</text> <text class="font_9 text_19">{{ ticketsInfo.ticketInfo.trainNo }}</text>
<image class="image_12" <view class="codefun-flex-row codefun-items-center train-name">
src="https://ide.code.fun/api/image?token=69a696bb9a40b800116f303a&name=1934a5079ba425afa6258b59758f08c2.png" /> <text class="font_6">{{ ticketsInfo.ticketInfo.trainName }}</text>
<uni-icons type="right" size="10" color="#767676"></uni-icons>
</view>
</view> </view>
<view class="codefun-flex-row"> <view class="codefun-flex-row codefun-items-center">
<image class="image_13" src="/static//image/other/train-tickets/ctrip/location.png" /> <image class="image_13" src="/static//image/other/train-tickets/ctrip/location.png" />
<text class="font_8 text_20 codefun-ml-2">深圳北站</text> <text class="font_8 text_20 codefun-ml-2">{{ ticketsInfo.ticketInfo.arrivalStation }}</text>
</view> </view>
</view> </view>
</view> </view>
<view class="codefun-flex-col list"> <view class="codefun-flex-col list">
<view class="codefun-flex-col codefun-justify-start list-item codefun-mt-8"> <view class="codefun-flex-col codefun-justify-start list-item codefun-mt-8"
<view class="codefun-flex-col group_13"> v-for="item in ticketsInfo.passengerList" :key="item.id">
<view class="codefun-flex-col group_13" @click="goEdit">
<view <view
class="codefun-flex-col codefun-justify-start codefun-items-start codefun-relative group_16"> class="codefun-flex-col codefun-justify-start codefun-items-start codefun-relative group_16">
@ -128,18 +140,19 @@
<view class="codefun-flex-col group_12"> <view class="codefun-flex-col group_12">
<view class="codefun-flex-row codefun-justify-between codefun-items-center"> <view class="codefun-flex-row codefun-justify-between codefun-items-center">
<view class="codefun-flex-row codefun-items-center"> <view class="codefun-flex-row codefun-items-center">
<text class="font_10 text_21">汪鱼</text> <text class="font_10 text_21">{{ item.name }}</text>
<view class="codefun-flex-row codefun-items-center section_1 codefun-ml-4"> <view class="codefun-flex-row codefun-items-center section_1 codefun-ml-4">
<text class="font_11">身份证</text> <text class="font_11">{{ item.type }}</text>
<uni-icons type="right" size="10" color="#767676"></uni-icons> <uni-icons type="right" size="10" color="#767676"></uni-icons>
</view> </view>
</view> </view>
<view class="codefun-flex-row codefun-items-center"> <view class="codefun-flex-row codefun-items-center">
<view <view
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper"> class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper">
<text class="font_6 text_22">靠窗</text> <text class="font_6 text_22" v-if="computeSeatNo(item.seatNo)">{{
computeSeatNo(item.seatNo) }}</text>
</view> </view>
<text class="font_12">01车厢09F号</text> <text class="font_12">{{ item.carriage }}车厢{{ item.seatNo }}号</text>
</view> </view>
</view> </view>
<view class="codefun-flex-row codefun-justify-between codefun-mt-8"> <view class="codefun-flex-row codefun-justify-between codefun-mt-8">
@ -147,8 +160,9 @@
<image class="image_15" <image class="image_15"
src="/static/image/other/train-tickets/ctrip/jifen.png" /> src="/static/image/other/train-tickets/ctrip/jifen.png" />
<view class="group_17"> <view class="group_17">
<text class="font_13">铁路会员积分+1085(价值</text> <text class="font_13">铁路会员积分+{{ item.points }}(价值</text>
<text class="font_14 text_24">¥200</text> <text class="font_14 text_24">¥{{ (item.points *
0.01).toFixed(2) }}</text>
<text class="font_13 text_24 text_25">)</text> <text class="font_13 text_24 text_25">)</text>
</view> </view>
<image class="image_16" <image class="image_16"
@ -156,7 +170,7 @@
</view> </view>
<view class="codefun-flex-row codefun-items-center"> <view class="codefun-flex-row codefun-items-center">
<text class="font_15 text_26">二等座¥200</text> <text class="font_15 text_26">{{ item.seatType }}¥{{ item.price }}</text>
</view> </view>
</view> </view>
</view> </view>
@ -173,7 +187,7 @@
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_3 ml-7"> class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_3 ml-7">
<text class="font_16 text_29">退票</text> <text class="font_16 text_29">退票</text>
</view> </view>
<view <view v-if="item.isMe"
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_1 ml-7"> class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_1 ml-7">
<text class="font_17 text_30">扫码检票</text> <text class="font_17 text_30">扫码检票</text>
</view> </view>
@ -200,38 +214,26 @@
<view <view
class="codefun-flex-row codefun-justify-start codefun-items-center codefun-relative group_23 ml-5"> class="codefun-flex-row codefun-justify-start codefun-items-center codefun-relative group_23 ml-5">
<text class="font_18 ml-5">恭喜获得</text> <text class="font_18 ml-5">恭喜获得</text>
<text class="font_9 text_33">¥25</text> <text class="font_9 text_33">¥{{ ticketsInfo.hotelInfo.cashback }}</text>
<text class="font_18 pos_6">返现机会</text> <text class="font_18 pos_6">返现机会</text>
</view> </view>
</view> </view>
<image class="image_13 image_18" src="/static/image/other/train-tickets/ctrip/help.png" /> <image class="image_13 image_18" src="/static/image/other/train-tickets/ctrip/help.png" />
</view> </view>
<text class="font_19 text_36 mt-7">本单可返现¥25，需在10月10日前预订酒店，并在10月25日前离店</text> <text class="font_19 text_36 mt-7">本单可返现¥{{ ticketsInfo.hotelInfo.cashback }}，需在{{
formatMMDD(ticketsInfo.hotelInfo.startDay)
}}前预订酒店，并在{{
formatMMDD(ticketsInfo.hotelInfo.endDay) }}前离店</text>
</view> </view>
<view class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_4 codefun-ml-20"> <view class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_4 codefun-ml-20">
<text class="font_5 text_35">去完成</text> <text class="font_5 text_35">去完成</text>
</view> </view>
</view> </view>
<view class="codefun-flex-row codefun-mt-6"> <view class="codefun-flex-row codefun-mt-6">
<view class="codefun-flex-col codefun-items-center group_24 group_26"> <view v-for="(item, index) in data.guideList" :key="index"
<image class="image_19" src="/static/image/other/train-tickets/ctrip/youwanzhinan.png" /> class="codefun-flex-col codefun-items-center group_24 group_26">
<text class="font_19 text_34 mt-7">游玩指南</text> <image class="image_19" :src="item.icon" />
</view> <text class="font_19 mt-7" :class="item.textClass">{{ item.name }}</text>
<view class="codefun-flex-col codefun-items-center group_24 group_27">
<image class="image_19" src="/static/image/other/train-tickets/ctrip/ertongshenbao.png" />
<text class="font_19 text_49 mt-7">儿童申报</text>
</view>
<view class="codefun-flex-col codefun-items-center group_24 group_28">
<image class="image_19" src="/static/image/other/train-tickets/ctrip/fapiaobaoxiao.png" />
<text class="font_19 text_48 mt-7">发票报销</text>
</view>
<view class="codefun-flex-col codefun-items-center group_24 group_29">
<image class="image_19" src="/static/image/other/train-tickets/ctrip/jinzhanzhiyin.png" />
<text class="font_19 text_1 mt-7">进站指引</text>
</view>
<view class="codefun-flex-col codefun-items-center group_24 group_30">
<image class="image_19" src="/static/image/other/train-tickets/ctrip/quanbuzhankai.png" />
<text class="font_19 text_50 mt-7">展开全部</text>
</view> </view>
</view> </view>
</view> </view>
@ -240,7 +242,7 @@
<text class="font_20 text_37">支付总额</text> <text class="font_20 text_37">支付总额</text>
<view class="group_25 ml-5"> <view class="group_25 ml-5">
<text class="font_20 text_39">¥</text> <text class="font_20 text_39">¥</text>
<text class="text_38">335</text> <text class="text_38">{{ ticketsInfo.orderInfo.price }}</text>
</view> </view>
</view> </view>
<view class="codefun-flex-row codefun-items-center group_32"> <view class="codefun-flex-row codefun-items-center group_32">
@ -288,12 +290,63 @@ const buttonGroup = [{
} }
}] }]
function goEdit() {
util.goPage(`/pages/other/train-tickets/edit/edit?app=ctrip&storageKey=${data.STORAGE_KEY}`)
}
const data = reactive({ const data = reactive({
navBar: { navBar: {
bgColor: 'transparent' bgColor: 'transparent'
}, },
guideList: [
{ name: '游玩指南', icon: '/static/image/other/train-tickets/ctrip/youwanzhinan.png' },
{ name: '儿童申报', icon: '/static/image/other/train-tickets/ctrip/ertongshenbao.png' },
{ name: '发票报销', icon: '/static/image/other/train-tickets/ctrip/fapiaobaoxiao.png' },
{ name: '进站指引', icon: '/static/image/other/train-tickets/ctrip/jinzhanzhiyin.png' },
{ name: '展开全部', icon: '/static/image/other/train-tickets/ctrip/quanbuzhankai.png' }
],
STORAGE_KEY: 'ctripTrainTicketsInfo',
ticketsInfo: {
"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）",
"price": "2110",
"status": "已支付",
"isMe": true,
"points": 9632
}
],
"hotelInfo": {
"cashback": "25",
"startDay": "01-01",
"endDay": "01-02"
}
},
}) })
let { ticketsInfo } = toRefs(data)
onPageScroll((e) => { onPageScroll((e) => {
if (e.scrollTop > 40) { if (e.scrollTop > 40) {
data.navBar.bgColor = '#BEDDFE' data.navBar.bgColor = '#BEDDFE'
@ -302,6 +355,58 @@ onPageScroll((e) => {
} }
}) })
onShow(() => {
const stored = uni.getStorageSync(data.STORAGE_KEY)
if (stored) {
Object.assign(data.ticketsInfo, stored)
}
})
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}`;
}
const formatMMDD = (mdStr) => {
if (!mdStr) return '';
const [month, day] = mdStr.split('-');
return month && day ? `${month}月${day}日` : '';
}
</script> </script>
<style> <style>
@ -348,6 +453,14 @@ onPageScroll((e) => {
margin-left: 7px; margin-left: 7px;
} }
.train-name {
margin-left: 4rpx;
border: 1rpx solid #F5F5F5;
height: 32rpx;
border-radius: 8rpx;
padding-left: 4rpx;
}
.top-box { .top-box {
background-image: url('/static/image/other/train-tickets/ctrip/ctrip-train-bg.png'); background-image: url('/static/image/other/train-tickets/ctrip/ctrip-train-bg.png');
background-size: 100% 100%; background-size: 100% 100%;
@ -398,10 +511,6 @@ onPageScroll((e) => {
line-height: 9.5px; line-height: 9.5px;
} }
.text_4 {
font-size: 10px;
line-height: 9.5px;
}
} }
.section { .section {
@ -516,7 +625,8 @@ onPageScroll((e) => {
.section_2 { .section_2 {
padding: 8px 14px; padding: 8px 14px;
background-color: #8caae633; background-color: #B6D3FA;
// background-color: #006eec;
border-radius: 10px; border-radius: 10px;
.image_9 { .image_9 {
@ -524,11 +634,6 @@ onPageScroll((e) => {
height: 20px; height: 20px;
} }
.text_7 {
font-size: 12px;
line-height: 11px;
}
.image_10 { .image_10 {
margin-right: 4px; margin-right: 4px;
border-radius: 8px; border-radius: 8px;
@ -544,7 +649,7 @@ onPageScroll((e) => {
.section_3 { .section_3 {
padding-bottom: 86px; padding-bottom: 86px;
background-image: linear-gradient(359.8deg, #cbe4ff00 -46.4%, #beddfe 155.1%); background: linear-gradient(360deg, rgba(203, 228, 255, 0) 0%, #BEDDFE 100%);
.section_4 { .section_4 {
margin: 0 8px; margin: 0 8px;
@ -575,17 +680,6 @@ onPageScroll((e) => {
color: #ffffff; color: #ffffff;
} }
.text_9 {
line-height: 10px;
}
.text_10 {
line-height: 10px;
}
.text_11 {
line-height: 10px;
}
} }
} }
@ -623,11 +717,6 @@ onPageScroll((e) => {
line-height: 12px; line-height: 12px;
} }
.text_15 {
font-size: 12px;
line-height: 11px;
}
.text_16 { .text_16 {
line-height: 12px; line-height: 12px;
text-align: right; text-align: right;
@ -661,10 +750,6 @@ onPageScroll((e) => {
color: #1a1a1a; color: #1a1a1a;
} }
.text_18 {
line-height: 12px;
}
.image_13 { .image_13 {
width: 13px; width: 13px;
height: 13px; height: 13px;
@ -685,9 +770,6 @@ onPageScroll((e) => {
height: 16px; height: 16px;
} }
.text_20 {
line-height: 12px;
}
} }
} }
@ -758,12 +840,12 @@ onPageScroll((e) => {
.section_1 { .section_1 {
padding-bottom: 2px; padding-bottom: 2px;
border-radius: 2px; border-radius: 2px;
height: 12px; height: 16px;
border: solid 0.5px #e6e8ec; border: solid 0.5px #e6e8ec;
.font_11 { .font_11 {
font-size: 9px; font-size: 9px;
line-height: 8.5px; line-height: 16px;
color: #767676; color: #767676;
} }
@ -780,10 +862,6 @@ onPageScroll((e) => {
height: 16px; height: 16px;
border: solid 0.5px #e5e7eb; border: solid 0.5px #e5e7eb;
.text_22 {
font-size: 10px;
line-height: 9.5px;
}
} }
.font_12 { .font_12 {
@ -810,16 +888,8 @@ onPageScroll((e) => {
color: #363636; color: #363636;
} }
.text_26 {
font-size: 12px;
line-height: 11px;
}
} }
.text_27 {
font-size: 12px;
line-height: 11px;
}
} }
} }
@ -831,40 +901,31 @@ onPageScroll((e) => {
.group_18 { .group_18 {
.text-wrapper_2 { .text-wrapper_2 {
padding: 7px 0 7.5px;
background-color: #ffffff; background-color: #ffffff;
border-radius: 6px; border-radius: 6px;
width: 45px; width: 45px;
height: 28px; height: 28px;
border: solid 0.5px #e0e4e3; border: solid 0.5px #e0e4e3;
.text_28 {
line-height: 12px;
}
} }
.text-wrapper_3 { .text-wrapper_3 {
padding: 8px 0 7.5px;
background-color: #ffffff; background-color: #ffffff;
border-radius: 6px; border-radius: 6px;
width: 45px; width: 45px;
height: 28px; height: 28px;
border: solid 0.5px #e0e4e3; border: solid 0.5px #e0e4e3;
.text_29 {
line-height: 11.5px;
}
} }
.font_16 { .font_16 {
font-size: 13px; font-size: 13px;
line-height: 12px; line-height: 28px;
font-weight: 500; font-weight: 500;
color: #363636; color: #363636;
} }
.text-wrapper_1 { .text-wrapper_1 {
padding: 8px 0 6.5px;
background-color: #ffffff; background-color: #ffffff;
border-radius: 6px; border-radius: 6px;
width: 70px; width: 70px;
@ -875,12 +936,10 @@ onPageScroll((e) => {
font-size: 13px; font-size: 13px;
line-height: 12px; line-height: 12px;
font-weight: 500; font-weight: 500;
line-height: 28px;
color: #0f6de5; color: #0f6de5;
} }
.text_30 {
line-height: 12px;
}
} }
} }
} }
@ -1008,25 +1067,14 @@ onPageScroll((e) => {
height: 24px; height: 24px;
} }
.text_34 {
line-height: 10px;
}
.text_49 { .text_49 {
line-height: 10.5px; line-height: 10.5px;
} }
.text_48 {
line-height: 10px;
}
.text_1 { .text_1 {
line-height: 10px; line-height: 10px;
} }
.text_50 {
line-height: 10.5px;
}
} }
.group_26 { .group_26 {
@ -1039,21 +1087,6 @@ onPageScroll((e) => {
color: #696969; color: #696969;
} }
.group_27 {
padding: 4px 0 5px;
}
.group_28 {
padding: 4px 0 5px;
}
.group_29 {
padding: 4px 0 5px;
}
.group_30 {
padding: 4px 0 5px;
}
} }
.section_8 { .section_8 {
@ -1101,10 +1134,6 @@ onPageScroll((e) => {
color: #4e4e4e; color: #4e4e4e;
} }
.text_40 {
line-height: 10px;
}
.image_20 { .image_20 {
width: 10px; width: 10px;
height: 10px; height: 10px;
@ -1126,21 +1155,12 @@ onPageScroll((e) => {
color: #1a1a1a; color: #1a1a1a;
} }
.text_41 {
font-size: 15px;
line-height: 14px;
}
.font_21 { .font_21 {
font-size: 11px; font-size: 11px;
line-height: 10px; line-height: 10px;
color: #4e4e4e; color: #4e4e4e;
} }
.text_42 {
line-height: 10px;
}
.image_20 { .image_20 {
width: 10px; width: 10px;
height: 10px; height: 10px;
@ -1166,9 +1186,6 @@ onPageScroll((e) => {
width: 66px; width: 66px;
height: 28px; height: 28px;
.text_44 {
line-height: 10px;
}
} }
.font_22 { .font_22 {

1181
pages/other/train-tickets/edit/edit.vue
View File

File diff suppressed because it is too large Load Diff