完成携程火车票
This commit is contained in:
tangxinyue
parent
b7ae173cd5
commit
bf692f48e5
|
|
@ -1,4 +1,11 @@
|
|||
<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">
|
||||
<NavBar title="订单详情" :bgColor="data.navBar.bgColor" :buttonGroup="buttonGroup"
|
||||
@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 group_8">
|
||||
<view class="codefun-flex-row codefun-justify-between" style="width: 100%;">
|
||||
<text class="font_6 text_12">取票号：E452364128</text>
|
||||
<text class="font_5 text_13">6A、7A进站检票口,6B、7B进站检票</text>
|
||||
<text class="font_6 text_12">取票号：{{ ticketsInfo.orderInfo.orderNo }}</text>
|
||||
<text class="font_5 text_13">{{ ticketsInfo.ticketInfo.gate }}</text>
|
||||
</view>
|
||||
<view class="codefun-flex-row codefun-justify-between codefun-self-stretch group_9">
|
||||
<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>
|
||||
<text class="font_1 text_15">3时20分</text>
|
||||
<text class="font_1 text_16">10月07日 周二</text>
|
||||
<text class="font_1 text_15">{{ ticketsInfo.ticketInfo.duration }}</text>
|
||||
<text class="font_1 text_16">{{ formatDateTime(ticketsInfo.ticketInfo.arrivalTime,
|
||||
ticketsInfo.ticketInfo.date) }}</text>
|
||||
</view>
|
||||
<view
|
||||
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" />
|
||||
<text class="font_7">14:32</text>
|
||||
<text class="font_7" @click="goEdit">{{ ticketsInfo.ticketInfo.arrivalTime.split(' ')[1] }}</text>
|
||||
</view>
|
||||
<view
|
||||
class="codefun-flex-row codefun-justify-between codefun-items-center codefun-self-stretch group_11">
|
||||
<view class="codefun-flex-row">
|
||||
<text class="font_8 text_18">深圳北站</text>
|
||||
<view class="codefun-flex-row codefun-items-center">
|
||||
<text class="font_8 text_18">{{ ticketsInfo.ticketInfo.departureStation }}</text>
|
||||
<image class="image_13 codefun-ml-4"
|
||||
src="/static//image/other/train-tickets/ctrip/location.png" />
|
||||
</view>
|
||||
<view class="codefun-flex-row codefun-items-center">
|
||||
<text class="font_9 text_19">G5267</text>
|
||||
<image class="image_12"
|
||||
src="https://ide.code.fun/api/image?token=69a696bb9a40b800116f303a&name=1934a5079ba425afa6258b59758f08c2.png" />
|
||||
<text class="font_9 text_19">{{ ticketsInfo.ticketInfo.trainNo }}</text>
|
||||
<view class="codefun-flex-row codefun-items-center train-name">
|
||||
<text class="font_6">{{ ticketsInfo.ticketInfo.trainName }}</text>
|
||||
<uni-icons type="right" size="10" color="#767676"></uni-icons>
|
||||
</view>
|
||||
<view class="codefun-flex-row">
|
||||
</view>
|
||||
<view class="codefun-flex-row codefun-items-center">
|
||||
<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 class="codefun-flex-col list">
|
||||
<view class="codefun-flex-col codefun-justify-start list-item codefun-mt-8">
|
||||
<view class="codefun-flex-col group_13">
|
||||
<view class="codefun-flex-col codefun-justify-start list-item codefun-mt-8"
|
||||
v-for="item in ticketsInfo.passengerList" :key="item.id">
|
||||
<view class="codefun-flex-col group_13" @click="goEdit">
|
||||
<view
|
||||
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-row codefun-justify-between 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">
|
||||
<text class="font_11">身份证</text>
|
||||
<text class="font_11">{{ item.type }}</text>
|
||||
<uni-icons type="right" size="10" color="#767676"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<view class="codefun-flex-row codefun-items-center">
|
||||
<view
|
||||
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>
|
||||
<text class="font_12">01车厢09F号</text>
|
||||
<text class="font_12">{{ item.carriage }}车厢{{ item.seatNo }}号</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="codefun-flex-row codefun-justify-between codefun-mt-8">
|
||||
|
|
@ -147,8 +160,9 @@
|
|||
<image class="image_15"
|
||||
src="/static/image/other/train-tickets/ctrip/jifen.png" />
|
||||
<view class="group_17">
|
||||
<text class="font_13">铁路会员积分+1085(价值</text>
|
||||
<text class="font_14 text_24">¥200</text>
|
||||
<text class="font_13">铁路会员积分+{{ item.points }}(价值</text>
|
||||
<text class="font_14 text_24">¥{{ (item.points *
|
||||
0.01).toFixed(2) }}</text>
|
||||
<text class="font_13 text_24 text_25">)</text>
|
||||
</view>
|
||||
<image class="image_16"
|
||||
|
|
@ -156,7 +170,7 @@
|
|||
</view>
|
||||
<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>
|
||||
|
|
@ -173,7 +187,7 @@
|
|||
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_3 ml-7">
|
||||
<text class="font_16 text_29">退票</text>
|
||||
</view>
|
||||
<view
|
||||
<view v-if="item.isMe"
|
||||
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_1 ml-7">
|
||||
<text class="font_17 text_30">扫码检票</text>
|
||||
</view>
|
||||
|
|
@ -200,38 +214,26 @@
|
|||
<view
|
||||
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_9 text_33">¥25</text>
|
||||
<text class="font_9 text_33">¥{{ ticketsInfo.hotelInfo.cashback }}</text>
|
||||
<text class="font_18 pos_6">返现机会</text>
|
||||
</view>
|
||||
</view>
|
||||
<image class="image_13 image_18" src="/static/image/other/train-tickets/ctrip/help.png" />
|
||||
</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 class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_4 codefun-ml-20">
|
||||
<text class="font_5 text_35">去完成</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="codefun-flex-row codefun-mt-6">
|
||||
<view class="codefun-flex-col codefun-items-center group_24 group_26">
|
||||
<image class="image_19" src="/static/image/other/train-tickets/ctrip/youwanzhinan.png" />
|
||||
<text class="font_19 text_34 mt-7">游玩指南</text>
|
||||
</view>
|
||||
<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 v-for="(item, index) in data.guideList" :key="index"
|
||||
class="codefun-flex-col codefun-items-center group_24 group_26">
|
||||
<image class="image_19" :src="item.icon" />
|
||||
<text class="font_19 mt-7" :class="item.textClass">{{ item.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -240,7 +242,7 @@
|
|||
<text class="font_20 text_37">支付总额</text>
|
||||
<view class="group_25 ml-5">
|
||||
<text class="font_20 text_39">¥</text>
|
||||
<text class="text_38">335</text>
|
||||
<text class="text_38">{{ ticketsInfo.orderInfo.price }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<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({
|
||||
navBar: {
|
||||
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) => {
|
||||
if (e.scrollTop > 40) {
|
||||
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>
|
||||
|
||||
<style>
|
||||
|
|
@ -348,6 +453,14 @@ onPageScroll((e) => {
|
|||
margin-left: 7px;
|
||||
}
|
||||
|
||||
.train-name {
|
||||
margin-left: 4rpx;
|
||||
border: 1rpx solid #F5F5F5;
|
||||
height: 32rpx;
|
||||
border-radius: 8rpx;
|
||||
padding-left: 4rpx;
|
||||
}
|
||||
|
||||
.top-box {
|
||||
background-image: url('/static/image/other/train-tickets/ctrip/ctrip-train-bg.png');
|
||||
background-size: 100% 100%;
|
||||
|
|
@ -398,10 +511,6 @@ onPageScroll((e) => {
|
|||
line-height: 9.5px;
|
||||
}
|
||||
|
||||
.text_4 {
|
||||
font-size: 10px;
|
||||
line-height: 9.5px;
|
||||
}
|
||||
}
|
||||
|
||||
.section {
|
||||
|
|
@ -516,7 +625,8 @@ onPageScroll((e) => {
|
|||
|
||||
.section_2 {
|
||||
padding: 8px 14px;
|
||||
background-color: #8caae633;
|
||||
background-color: #B6D3FA;
|
||||
// background-color: #006eec;
|
||||
border-radius: 10px;
|
||||
|
||||
.image_9 {
|
||||
|
|
@ -524,11 +634,6 @@ onPageScroll((e) => {
|
|||
height: 20px;
|
||||
}
|
||||
|
||||
.text_7 {
|
||||
font-size: 12px;
|
||||
line-height: 11px;
|
||||
}
|
||||
|
||||
.image_10 {
|
||||
margin-right: 4px;
|
||||
border-radius: 8px;
|
||||
|
|
@ -544,7 +649,7 @@ onPageScroll((e) => {
|
|||
|
||||
.section_3 {
|
||||
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 {
|
||||
margin: 0 8px;
|
||||
|
|
@ -575,17 +680,6 @@ onPageScroll((e) => {
|
|||
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;
|
||||
}
|
||||
|
||||
.text_15 {
|
||||
font-size: 12px;
|
||||
line-height: 11px;
|
||||
}
|
||||
|
||||
.text_16 {
|
||||
line-height: 12px;
|
||||
text-align: right;
|
||||
|
|
@ -661,10 +750,6 @@ onPageScroll((e) => {
|
|||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.text_18 {
|
||||
line-height: 12px;
|
||||
}
|
||||
|
||||
.image_13 {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
|
|
@ -685,9 +770,6 @@ onPageScroll((e) => {
|
|||
height: 16px;
|
||||
}
|
||||
|
||||
.text_20 {
|
||||
line-height: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -758,12 +840,12 @@ onPageScroll((e) => {
|
|||
.section_1 {
|
||||
padding-bottom: 2px;
|
||||
border-radius: 2px;
|
||||
height: 12px;
|
||||
height: 16px;
|
||||
border: solid 0.5px #e6e8ec;
|
||||
|
||||
.font_11 {
|
||||
font-size: 9px;
|
||||
line-height: 8.5px;
|
||||
line-height: 16px;
|
||||
color: #767676;
|
||||
}
|
||||
|
||||
|
|
@ -780,10 +862,6 @@ onPageScroll((e) => {
|
|||
height: 16px;
|
||||
border: solid 0.5px #e5e7eb;
|
||||
|
||||
.text_22 {
|
||||
font-size: 10px;
|
||||
line-height: 9.5px;
|
||||
}
|
||||
}
|
||||
|
||||
.font_12 {
|
||||
|
|
@ -810,16 +888,8 @@ onPageScroll((e) => {
|
|||
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 {
|
||||
.text-wrapper_2 {
|
||||
padding: 7px 0 7.5px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 6px;
|
||||
width: 45px;
|
||||
height: 28px;
|
||||
border: solid 0.5px #e0e4e3;
|
||||
|
||||
.text_28 {
|
||||
line-height: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.text-wrapper_3 {
|
||||
padding: 8px 0 7.5px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 6px;
|
||||
width: 45px;
|
||||
height: 28px;
|
||||
border: solid 0.5px #e0e4e3;
|
||||
|
||||
.text_29 {
|
||||
line-height: 11.5px;
|
||||
}
|
||||
}
|
||||
|
||||
.font_16 {
|
||||
font-size: 13px;
|
||||
line-height: 12px;
|
||||
line-height: 28px;
|
||||
font-weight: 500;
|
||||
color: #363636;
|
||||
}
|
||||
|
||||
.text-wrapper_1 {
|
||||
padding: 8px 0 6.5px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 6px;
|
||||
width: 70px;
|
||||
|
|
@ -875,12 +936,10 @@ onPageScroll((e) => {
|
|||
font-size: 13px;
|
||||
line-height: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 28px;
|
||||
color: #0f6de5;
|
||||
}
|
||||
|
||||
.text_30 {
|
||||
line-height: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1008,25 +1067,14 @@ onPageScroll((e) => {
|
|||
height: 24px;
|
||||
}
|
||||
|
||||
.text_34 {
|
||||
line-height: 10px;
|
||||
}
|
||||
|
||||
.text_49 {
|
||||
line-height: 10.5px;
|
||||
}
|
||||
|
||||
.text_48 {
|
||||
line-height: 10px;
|
||||
}
|
||||
|
||||
.text_1 {
|
||||
line-height: 10px;
|
||||
}
|
||||
|
||||
.text_50 {
|
||||
line-height: 10.5px;
|
||||
}
|
||||
}
|
||||
|
||||
.group_26 {
|
||||
|
|
@ -1039,21 +1087,6 @@ onPageScroll((e) => {
|
|||
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 {
|
||||
|
|
@ -1101,10 +1134,6 @@ onPageScroll((e) => {
|
|||
color: #4e4e4e;
|
||||
}
|
||||
|
||||
.text_40 {
|
||||
line-height: 10px;
|
||||
}
|
||||
|
||||
.image_20 {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
|
|
@ -1126,21 +1155,12 @@ onPageScroll((e) => {
|
|||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.text_41 {
|
||||
font-size: 15px;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
.font_21 {
|
||||
font-size: 11px;
|
||||
line-height: 10px;
|
||||
color: #4e4e4e;
|
||||
}
|
||||
|
||||
.text_42 {
|
||||
line-height: 10px;
|
||||
}
|
||||
|
||||
.image_20 {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
|
|
@ -1166,9 +1186,6 @@ onPageScroll((e) => {
|
|||
width: 66px;
|
||||
height: 28px;
|
||||
|
||||
.text_44 {
|
||||
line-height: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.font_22 {
|
||||
|
|
|
|||
|
|
@ -14,13 +14,17 @@
|
|||
<text class="label">订单号</text>
|
||||
<input class="input" v-model="ticketsInfo.orderInfo.orderNo" />
|
||||
</view>
|
||||
<picker mode="date" fields="day" :value="getPickerDate(ticketsInfo.orderInfo.orderTime)"
|
||||
@change="onOrderTimeChange">
|
||||
<picker v-if="app == '12306'" mode="date" fields="day"
|
||||
:value="getPickerDate(ticketsInfo.orderInfo.orderTime)" @change="onOrderTimeChange">
|
||||
<view class="form-item">
|
||||
<text class="label">下单时间</text>
|
||||
<view class="input">{{ ticketsInfo.orderInfo.orderTime }}</view>
|
||||
</view>
|
||||
</picker>
|
||||
<view v-if="app == 'ctrip'" class="form-item">
|
||||
<text class="label">订单总价</text>
|
||||
<input class="input" type="number" v-model="ticketsInfo.orderInfo.price" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
|
@ -75,6 +79,10 @@
|
|||
<text class="label">历时</text>
|
||||
<input class="input" v-model="ticketsInfo.ticketInfo.duration" />
|
||||
</view>
|
||||
<view v-if="app == 'ctrip'" class="form-item">
|
||||
<text class="label">火车名称</text>
|
||||
<input class="input" v-model="ticketsInfo.ticketInfo.trainName" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
|
@ -116,7 +124,11 @@
|
|||
|
||||
<view class="form-item">
|
||||
<text class="label">票价</text>
|
||||
<input class="input" v-model="passenger.price" />
|
||||
<input class="input" type="number" v-model="passenger.price" @input="onPriceInput" />
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="label">积分</text>
|
||||
<input class="input" type="number" v-model="passenger.points" />
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="label">证件类型</text>
|
||||
|
|
@ -136,16 +148,20 @@
|
|||
</view>
|
||||
|
||||
<!-- 酒店广告 -->
|
||||
<view class="section-container">
|
||||
<view v-if="app == '12306' || app == 'ctrip'" class="section-container">
|
||||
<view class="section-header" @click="toggleSection('hotelInfo')">
|
||||
<text class="section-title">酒店广告</text>
|
||||
<text class="section-title">{{ app == '12306' ? '酒店广告' : '返现任务' }}</text>
|
||||
<uni-icons :type="collapsed.hotelInfo ? 'bottom' : 'top'" size="16" color="#666"></uni-icons>
|
||||
</view>
|
||||
<view class="card" v-show="!collapsed.hotelInfo">
|
||||
<view class="form-item">
|
||||
<view v-if="app == '12306'" class="form-item">
|
||||
<text class="label">城市</text>
|
||||
<input class="input" v-model="ticketsInfo.hotelInfo.city" />
|
||||
</view>
|
||||
<view v-if="app == 'ctrip'" class="form-item">
|
||||
<text class="label">返现金额</text>
|
||||
<input class="input" type="number" v-model="ticketsInfo.hotelInfo.cashback" />
|
||||
</view>
|
||||
<uni-datetime-picker type="daterange" v-model="hotelDateRange" :border="false">
|
||||
<view class="form-item">
|
||||
<text class="label">入住/离店日期</text>
|
||||
|
|
@ -162,18 +178,20 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import NavBar from '@/components/nav-bar/nav-bar.vue'
|
||||
import {
|
||||
import NavBar from '@/components/nav-bar/nav-bar.vue'
|
||||
import {
|
||||
reactive,
|
||||
toRefs,
|
||||
onMounted,
|
||||
computed
|
||||
} from 'vue';
|
||||
} from 'vue';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
|
||||
const defaultData = {
|
||||
const defaultData = {
|
||||
"orderInfo": {
|
||||
"orderNo": "EJ66223536",
|
||||
"orderTime": "2026.01.01"
|
||||
"orderTime": "2026.01.01",
|
||||
"price": "4440"
|
||||
},
|
||||
"ticketInfo": {
|
||||
"departureTime": "01-01 09:19",
|
||||
|
|
@ -184,7 +202,8 @@
|
|||
"duration": "4时45分",
|
||||
"date": "2026.01.01",
|
||||
"weekDay": "星期四",
|
||||
"gate": "6B"
|
||||
"gate": "6B",
|
||||
"trainName": "复兴号"
|
||||
},
|
||||
"passengerList": [{
|
||||
"name": "张元英",
|
||||
|
|
@ -195,62 +214,79 @@
|
|||
"idType": "外国护照（KR）",
|
||||
"price": "2110",
|
||||
"status": "已支付",
|
||||
"isMe": true
|
||||
"isMe": true,
|
||||
"points": 9632
|
||||
}],
|
||||
"hotelInfo": {
|
||||
"city": "上海",
|
||||
"cashback": "25",
|
||||
"startDay": "01-01",
|
||||
"endDay": "01-02"
|
||||
}
|
||||
}
|
||||
// 车票类型
|
||||
const ticketType = [{
|
||||
}
|
||||
// 车票类型
|
||||
const ticketType = [{
|
||||
label: '成人票',
|
||||
value: '1'
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
label: '儿童票',
|
||||
value: '2'
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
label: '学生票',
|
||||
value: '3'
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
label: '残疾军人票',
|
||||
value: '4'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
const data = reactive({
|
||||
const data = reactive({
|
||||
ticketsInfo: JSON.parse(JSON.stringify(defaultData)),
|
||||
collapsed: {
|
||||
orderInfo: true,
|
||||
ticketInfo: false, // Default open ticket info as it is most likely to be edited
|
||||
passengerList: false,
|
||||
hotelInfo: true
|
||||
}
|
||||
})
|
||||
},
|
||||
app: '12306',
|
||||
STORAGE_KEY: 'ticketInfo'
|
||||
})
|
||||
|
||||
let { app } = toRefs(data)
|
||||
|
||||
|
||||
const {
|
||||
const {
|
||||
ticketsInfo,
|
||||
collapsed
|
||||
} = toRefs(data)
|
||||
} = toRefs(data)
|
||||
|
||||
const ticketYear = computed(() => {
|
||||
onLoad((options) => {
|
||||
console.log("options", options)
|
||||
if (options.app) {
|
||||
data.app = options.app
|
||||
}
|
||||
if (options.storageKey) {
|
||||
data.STORAGE_KEY = options.storageKey
|
||||
}
|
||||
})
|
||||
|
||||
const ticketYear = computed(() => {
|
||||
const dateStr = data.ticketsInfo.ticketInfo.date;
|
||||
if (dateStr && dateStr.length >= 4) {
|
||||
return dateStr.substring(0, 4);
|
||||
}
|
||||
return new Date().getFullYear().toString();
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
/**
|
||||
|
||||
/**
|
||||
* 获取酒店日期范围
|
||||
*/
|
||||
const hotelDateRange = computed({
|
||||
const hotelDateRange = computed({
|
||||
get() {
|
||||
const year = ticketYear.value;
|
||||
const start = data.ticketsInfo.hotelInfo.startDay ?
|
||||
|
|
@ -268,19 +304,33 @@
|
|||
data.ticketsInfo.hotelInfo.endDay = val[1].substring(5);
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
const stored = uni.getStorageSync('ticketsInfo')
|
||||
onMounted(() => {
|
||||
const stored = uni.getStorageSync(data.STORAGE_KEY)
|
||||
if (stored) {
|
||||
Object.assign(data.ticketsInfo, stored)
|
||||
}
|
||||
updateDuration();
|
||||
})
|
||||
/**
|
||||
})
|
||||
/**
|
||||
* 更新总价
|
||||
*/
|
||||
const onPriceInput = () => {
|
||||
setTimeout(() => {
|
||||
let total = 0;
|
||||
data.ticketsInfo.passengerList.forEach(item => {
|
||||
const price = Number(item.price) || 0;
|
||||
total += price;
|
||||
});
|
||||
data.ticketsInfo.orderInfo.price = total.toString();
|
||||
}, 50);
|
||||
}
|
||||
|
||||
/**
|
||||
* 确认
|
||||
*/
|
||||
const handleRightButtonClick = () => {
|
||||
const handleRightButtonClick = () => {
|
||||
console.log("handleRightButtonClick", data.ticketsInfo)
|
||||
const orderTimeStr = data.ticketsInfo.orderInfo.orderTime;
|
||||
const ticketDateStr = data.ticketsInfo.ticketInfo.date;
|
||||
|
|
@ -312,38 +362,39 @@
|
|||
}
|
||||
}
|
||||
|
||||
uni.setStorageSync('ticketsInfo', data.ticketsInfo)
|
||||
uni.setStorageSync(data.STORAGE_KEY, data.ticketsInfo)
|
||||
uni.navigateBack()
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* 切换折叠状态
|
||||
* @param {string} key
|
||||
*/
|
||||
const toggleSection = (key) => {
|
||||
const toggleSection = (key) => {
|
||||
data.collapsed[key] = !data.collapsed[key]
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* 删除乘客
|
||||
* @param {number} index
|
||||
*/
|
||||
const removePassenger = (index) => {
|
||||
const removePassenger = (index) => {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要删除该乘客吗？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
data.ticketsInfo.passengerList.splice(index, 1)
|
||||
data.ticketsInfo.passengerList.splice(index, 1);
|
||||
onPriceInput();
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* 添加乘客
|
||||
*/
|
||||
const addPassenger = () => {
|
||||
const addPassenger = () => {
|
||||
const oldPassenger = data.ticketsInfo.passengerList[data.ticketsInfo.passengerList.length - 1]
|
||||
const newPassenger = {
|
||||
name: '新乘客',
|
||||
|
|
@ -354,17 +405,19 @@
|
|||
idType: '中国居民身份证',
|
||||
price: oldPassenger.price || '0',
|
||||
status: '已支付',
|
||||
isMe: false
|
||||
}
|
||||
data.ticketsInfo.passengerList.push(newPassenger)
|
||||
isMe: false,
|
||||
points: oldPassenger.points || '2898',
|
||||
}
|
||||
data.ticketsInfo.passengerList.push(newPassenger);
|
||||
onPriceInput();
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* 获取选择器日期
|
||||
* @param {string} dateStr
|
||||
* @returns {string}
|
||||
*/
|
||||
const getPickerDate = (dateStr) => {
|
||||
const getPickerDate = (dateStr) => {
|
||||
if (!dateStr) return '';
|
||||
// Handle YYYY.MM.DD format
|
||||
if (dateStr.includes('.')) {
|
||||
|
|
@ -377,34 +430,34 @@
|
|||
return `${year}-${dateStr}`;
|
||||
}
|
||||
return dateStr;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* 切换下单时间
|
||||
* @param {*} e
|
||||
*/
|
||||
const onOrderTimeChange = (e) => {
|
||||
const onOrderTimeChange = (e) => {
|
||||
const val = e.detail.value;
|
||||
if (val) {
|
||||
data.ticketsInfo.orderInfo.orderTime = val.replace(/-/g, '.');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* 切换乘客类型
|
||||
* @param {*} e
|
||||
* @param {*} index
|
||||
*/
|
||||
const onTicketTypeChange = (e, index) => {
|
||||
const onTicketTypeChange = (e, index) => {
|
||||
const val = e.detail.value;
|
||||
data.ticketsInfo.passengerList[index].type = ticketType[val].label;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* 切换出发日期
|
||||
* @param {*} e
|
||||
*/
|
||||
const onTicketDateChange = (e) => {
|
||||
const onTicketDateChange = (e) => {
|
||||
const val = e.detail.value; // YYYY-MM-DD
|
||||
if (val) {
|
||||
// Update Date: YYYY.MM.DD
|
||||
|
|
@ -415,30 +468,30 @@
|
|||
const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
|
||||
data.ticketsInfo.ticketInfo.weekDay = days[dateObj.getDay()];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* 获取时间
|
||||
* @param {string} fullStr
|
||||
* @returns {string}
|
||||
*/
|
||||
const getTimeHHMM = (fullStr) => {
|
||||
const getTimeHHMM = (fullStr) => {
|
||||
if (!fullStr) return '';
|
||||
if (fullStr.length > 5) return fullStr.split(' ')[1];
|
||||
return fullStr;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* 获取出发时间
|
||||
*/
|
||||
const departureTimeHHMM = computed(() => {
|
||||
const departureTimeHHMM = computed(() => {
|
||||
return getTimeHHMM(data.ticketsInfo.ticketInfo.departureTime);
|
||||
})
|
||||
})
|
||||
|
||||
/**
|
||||
/**
|
||||
* 获取出发时间选择器范围
|
||||
*/
|
||||
const departureTimeRange = computed(() => {
|
||||
const departureTimeRange = computed(() => {
|
||||
const hours = Array.from({
|
||||
length: 24
|
||||
}, (_, i) => i < 10 ? '0' + i : '' + i);
|
||||
|
|
@ -446,12 +499,12 @@
|
|||
length: 60
|
||||
}, (_, i) => i < 10 ? '0' + i : '' + i);
|
||||
return [hours, minutes];
|
||||
})
|
||||
})
|
||||
|
||||
/**
|
||||
/**
|
||||
* 获取出发时间索引
|
||||
*/
|
||||
const departureTimeIndex = computed(() => {
|
||||
const departureTimeIndex = computed(() => {
|
||||
const timeStr = getTimeHHMM(data.ticketsInfo.ticketInfo.departureTime);
|
||||
if (!timeStr) return [0, 0];
|
||||
const [h, m] = timeStr.split(':');
|
||||
|
|
@ -462,12 +515,12 @@
|
|||
let mIdx = minutes.indexOf(m);
|
||||
if (mIdx === -1) mIdx = 0;
|
||||
return [hIdx, mIdx];
|
||||
})
|
||||
})
|
||||
|
||||
/**
|
||||
/**
|
||||
* 获取到达时间日期范围
|
||||
*/
|
||||
const arrivalRange = computed(() => {
|
||||
const arrivalRange = computed(() => {
|
||||
const dateStr = data.ticketsInfo.ticketInfo.date; // YYYY.MM.DD
|
||||
const dates = [];
|
||||
if (dateStr) {
|
||||
|
|
@ -488,12 +541,12 @@
|
|||
length: 60
|
||||
}, (_, i) => i < 10 ? '0' + i : '' + i);
|
||||
return [dates, hours, minutes];
|
||||
})
|
||||
})
|
||||
|
||||
/**
|
||||
/**
|
||||
* 获取到达时间索引
|
||||
*/
|
||||
const arrivalIndex = computed(() => {
|
||||
const arrivalIndex = computed(() => {
|
||||
const arrTime = data.ticketsInfo.ticketInfo.arrivalTime;
|
||||
if (!arrTime || arrTime.length < 5) return [0, 0, 0];
|
||||
// Might be HH:mm or MM-DD HH:mm
|
||||
|
|
@ -524,13 +577,13 @@
|
|||
if (mIdx === -1) mIdx = 0;
|
||||
|
||||
return [dateIdx, hIdx, mIdx];
|
||||
})
|
||||
})
|
||||
|
||||
/**
|
||||
/**
|
||||
* 切换到达时间
|
||||
* @param {*} e
|
||||
*/
|
||||
const onArrivalChange = (e) => {
|
||||
const onArrivalChange = (e) => {
|
||||
const idxs = e.detail.value;
|
||||
const range = arrivalRange.value;
|
||||
if (!range[0][idxs[0]]) return;
|
||||
|
|
@ -562,17 +615,17 @@
|
|||
|
||||
data.ticketsInfo.ticketInfo.arrivalTime = newArrTime;
|
||||
updateDuration();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* 切换出发时间
|
||||
* @param e
|
||||
*/
|
||||
/**
|
||||
/**
|
||||
* 切换出发时间
|
||||
* @param e
|
||||
*/
|
||||
const onDepartureTimeChange = (e) => {
|
||||
const onDepartureTimeChange = (e) => {
|
||||
let val = e.detail.value; // Array [hIdx, mIdx]
|
||||
|
||||
// Convert array to HH:mm string
|
||||
|
|
@ -625,12 +678,12 @@
|
|||
let mmdd = `${dateParts[1]}-${dateParts[2]}`;
|
||||
data.ticketsInfo.ticketInfo.departureTime = `${mmdd} ${val}`;
|
||||
updateDuration();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* 更新时长
|
||||
*/
|
||||
const updateDuration = () => {
|
||||
const updateDuration = () => {
|
||||
// Helper to parse MM-DD HH:mm to timestamp (using current year)
|
||||
// Safer to use "/" for cross-platform compatibility
|
||||
const getTs = (str) => {
|
||||
|
|
@ -649,53 +702,53 @@
|
|||
const diffMins = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));
|
||||
data.ticketsInfo.ticketInfo.duration = `${diffHrs}时${diffMins}分`;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import "@/common/main.css";
|
||||
@import "@/common/main.css";
|
||||
|
||||
page {
|
||||
page {
|
||||
background-color: #F8F8F8;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.container {
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
}
|
||||
}
|
||||
|
||||
.form-content {
|
||||
.form-content {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
padding: 24rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.section-container {
|
||||
.section-container {
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.section-header {
|
||||
.section-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 24rpx 12rpx 16rpx;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.section-title {
|
||||
.section-title {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
.card {
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 0 24rpx;
|
||||
|
|
@ -722,9 +775,9 @@
|
|||
color: #FF4D4F;
|
||||
padding: 4rpx 12rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-item {
|
||||
.form-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
|
@ -747,9 +800,9 @@
|
|||
color: #333;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.add-btn-box {
|
||||
.add-btn-box {
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
|
|
@ -764,9 +817,9 @@
|
|||
font-size: 30rpx;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
.placeholder {
|
||||
height: 60rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue