Mauve
828 lines
28 KiB
Vue
828 lines
28 KiB
Vue
<template>
|
||
<view>
|
||
<view class="hz-page">
|
||
<u-navbar
|
||
@leftClick="back()"
|
||
:safeAreaInsetTop="true"
|
||
:placeholder="true"
|
||
:title="title"
|
||
:fixed="true"
|
||
:autoBack="false"
|
||
leftIconColor="#000000"
|
||
titleStyle="font-weight:bold;"
|
||
v-if="NotCapping"
|
||
>
|
||
<view
|
||
style="margin-top:2px;margin-right:3px;"
|
||
slot="right"
|
||
>
|
||
<view style="border:1rpx solid #ccc;border-radius: 14px;padding:4px 12px;" class="hz-flex-row hz-flex-vertical-mid">
|
||
<image @click="navTo('/pages/findPlayer/findPlayer',1,false)" src="../../static/images/ico_find_player.png" class="hz-nav-btn"></image>
|
||
<view style="height:20px;border-left:1px solid #ccc;margin-left:8px;margin-right:8px;"></view>
|
||
<image @click="navTo('/booking/bookingRecord/bookingRecord?from=booking',2,false)" src="../../static/images/ico_list.png" class="hz-nav-btn"></image>
|
||
</view>
|
||
</view>
|
||
</u-navbar>
|
||
|
||
<view v-if="limoData" class="hz-spacing hz-bg-white" style="margin-top:8px;">
|
||
<view class="hz-flex-row" v-if="!NotCapping" style="margin-top:20rpx;justify-content: center;">
|
||
<image src="../../static/images/mgm_logo_1.png" style="width:130px;height:40px;"></image>
|
||
</view>
|
||
<view class="hz-flex-row hz-pd-30 hz-font-md hz-font-bolder hz-card-booking" style="margin-top:20rpx;align-items:center;">
|
||
<view style="width:72%;">Conf # : {{ getConfirmationNo(limoData) }}</view>
|
||
<view class="hz-btn-status hz-text-center hz-limo-status-tag" :style="getLimoStatusStyle(limoData.status)">{{ getStatusText(limoData) }}</view>
|
||
</view>
|
||
|
||
<view class="hz-card-profile hz-mr-b-30 hz-mr-t-30">
|
||
<view class="hz-flex-row">
|
||
<view style="width:60%">
|
||
<view class="hz-font-color-light hz-font-sm">{{$t("common.playerId")}}</view>
|
||
<view class="hz-font-bolder hz-font-lg" >{{ playerData.playerId }}</view>
|
||
</view>
|
||
<view style="width:40%">
|
||
<view class="hz-font-color-light hz-font-sm">{{$t("common.tier")}}</view>
|
||
<view class="hz-font-bolder hz-font-lg" >{{ playerData.tierName }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="hz-flex-row hz-mr-t-30">
|
||
<view style="width:100%">
|
||
<view class="hz-font-color-light hz-font-sm">{{$t("common.name")}}</view>
|
||
<view class="hz-font-bolder hz-font-lg" >{{playerData.salutation + " " + playerData.name }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="hz-pd-30 hz-font-bolder hz-font-md hz-card-extend limo-info-card" style="margin-top:10px;">
|
||
<view class="limo-info-grid">
|
||
<view class="limo-info-item">
|
||
<image src="../../static/images/ico_calendar.png" class="limo-info-icon"></image>
|
||
<view class="hz-font-bold hz-font-md">{{ getPickupDate(limoData.pickUpDate) }}</view>
|
||
</view>
|
||
<view class="limo-info-item">
|
||
<image src="../../static/images/clock.png" class="limo-info-icon"></image>
|
||
<view class="hz-font-bold hz-font-md">{{ getPickupTime(limoData.pickUpDate) }}</view>
|
||
</view>
|
||
<view class="limo-info-item">
|
||
<u-icon name="account-fill" size="18" color="#C39A4B" class="limo-info-icon"></u-icon>
|
||
<view>{{ limoData.noOfPax }} Pax</view>
|
||
</view>
|
||
<!-- <view class="limo-info-item">
|
||
<image src="../../static/images/car_no.png" class="limo-info-icon"></image>
|
||
<view class="hz-font-bold hz-font-md">{{ getCarNo(limoData.carNo) }}</view>
|
||
</view> -->
|
||
</view>
|
||
<view v-if="canEditLimo(limoData)" @click="editLimoBooking()" class="limo-edit-button">
|
||
<image src="/static/images/edit.png" mode="aspectFit" class="limo-edit-icon"></image>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="hz-spacing hz-mr-t-30" style="margin-bottom:30px;">
|
||
<view class="hz-flex-row">
|
||
<view style="width:100%">
|
||
<view class="hz-font-color-black hz-font-sm">{{$t("limoBookingDetail.pickupPoint")}}</view>
|
||
<view class="hz-font-bolder hz-font-lg">{{limoData.pickUpPoint}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="hz-flex-row hz-mr-t-30">
|
||
<view v-if="limoData.flightDetail!=null && limoData.flightDetail != ''" style="width:55%">
|
||
<view class="hz-font-color-black hz-font-sm">{{$t("limoBookingDetail.flightNo")}}</view>
|
||
<view class="hz-font-bolder hz-font-lg">
|
||
<view>
|
||
{{ limoData.flightDetail }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-if="limoData.greetType!=null && limoData.greetType != ''" style="width:45%">
|
||
<view class="hz-font-color-black hz-font-sm">{{$t("limoBookingDetail.greetType")}}</view>
|
||
<view class="hz-font-bolder hz-font-lg">
|
||
<view>
|
||
{{ limoData.greetType }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-if="hasExtraDropOffPoint(limoData)" class="hz-flex-row hz-mr-t-30">
|
||
<view style="width:100%">
|
||
<view class="hz-font-color-black hz-font-sm">{{$t("limoBookingDetail.extraDropoff")}}</view>
|
||
<view class="hz-font-bolder hz-font-lg">
|
||
<view v-for="(extraDropOffPoint,index) in getExtraDropOffPointDisplayItems(limoData.extraDropOffPoint)" :key="'extra-dropoff-'+index">
|
||
<view>#{{index + 1}} {{extraDropOffPoint.zh}}</view>
|
||
<view v-if="extraDropOffPoint.en">{{extraDropOffPoint.en}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="hz-flex-row hz-mr-t-30">
|
||
<view style="width:100%">
|
||
<view class="hz-font-color-black hz-font-sm">{{$t("limoBookingDetail.dropoffPoint")}}</view>
|
||
<view class="hz-font-bolder hz-font-lg">
|
||
<view v-for="(dropOffPoint,index) in getDropOffPointLines(limoData.dropOffPoint)" :key="'dropoff-'+index">
|
||
{{dropOffPoint}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="hz-flex-row hz-mr-t-30">
|
||
<view style="width:55%">
|
||
<view class="hz-font-color-black hz-font-sm">{{$t("bookingConfirm.createdOn")}}</view>
|
||
<view class="hz-font-bolder hz-font-lg">{{limoData.createdAt}}</view>
|
||
</view>
|
||
<view style="width:45%">
|
||
<view class="hz-font-color-black hz-font-sm">{{$t("bookingConfirm.createdBy")}}</view>
|
||
<view class="hz-font-bolder hz-font-lg">{{limoData.createdBy ? limoData.createdBy : '-'}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="hz-flex-row hz-mr-t-30">
|
||
<view v-if="NotCapping" style="width:55%">
|
||
<view class="hz-font-color-black hz-font-sm">{{$t("limoBookingDetail.overrideBy")}}</view>
|
||
<view class="hz-font-bolder hz-font-lg">{{limoData.overrideBy ? limoData.overrideBy : '-'}}</view>
|
||
</view>
|
||
<view style="width:45%">
|
||
<view class="hz-flex-row hz-mr-t-30" @click="copyDriverInfo(limoData)">
|
||
<view class="hz-font-color-black hz-font-sm">{{$t("limoBookingDetail.carTypeAndPlate")}}</view>
|
||
<image src="/static/images/copy.png" style="height: 20px;width: 20px"></image>
|
||
</view>
|
||
<view class="hz-font-bolder hz-font-lg" style="white-space: pre-wrap;">{{formatCarTypeAndCarNo(limoData)}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="hz-flex-row hz-mr-t-30">
|
||
<view v-if="NotCapping" style="width:55%">
|
||
<view class="hz-font-color-black hz-font-sm">{{$t("limoBookingDetail.tripPrice")}}</view>
|
||
<view class="hz-font-bolder hz-font-lg">{{formatTripPrice(limoData.totalAmount)}}</view>
|
||
</view>
|
||
<view v-if="!NotCapping" style="width:55%">
|
||
</view>
|
||
<view style="width:45%">
|
||
<view class="hz-font-color-black hz-font-sm">{{$t("limoBookingDetail.driverContact")}}</view>
|
||
<view class="hz-font-bolder hz-font-lg" style="white-space: pre-wrap;">{{GetDriverContact(limoData)}}</view>
|
||
</view>
|
||
</view>
|
||
<view v-if="NotCapping" class="hz-flex-row hz-mr-t-30">
|
||
<view style="width:55%">
|
||
<view class="hz-font-color-black hz-font-sm">{{$t("limoBookingDetail.driverSource")}}</view>
|
||
<view class="hz-font-bolder hz-font-lg">{{limoData.driverSource != null && limoData.driverSource != '' ? limoData.driverSource : "N/A"}}</view>
|
||
</view>
|
||
</view>
|
||
<view v-if="limoData.remarks != null && limoData.remarks != '' && NotCapping" class="hz-flex-row hz-mr-t-30">
|
||
<view style="width:100%">
|
||
<view class="hz-font-color-black hz-font-sm">{{$t("limoBookingDetail.remark")}}</view>
|
||
<view class="hz-font-bolder hz-font-lg">{{ limoData.remarks }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view style="height:100rpx;"></view>
|
||
</view>
|
||
|
||
<u-empty
|
||
v-if="loadError"
|
||
mode="search"
|
||
:text="dataNotFoundStr"
|
||
>
|
||
</u-empty>
|
||
|
||
<u-tabbar
|
||
:fixed="true"
|
||
:placeholder="true"
|
||
:safeAreaInsetBottom="true"
|
||
customStyle="z-index:100;height:58px;"
|
||
v-if="limoData && showTabbar"
|
||
>
|
||
<view class="book hz-flex-row hz-spacing" style="width: 45%;">
|
||
<view class="hz-btn hz-font-color-white hz-font-sm hz-font-bold hz-text-center" @click="popupLang()">
|
||
{{$t("bookingDetail.saveImage")}}
|
||
</view>
|
||
</view>
|
||
<view class="book hz-flex-row hz-spacing" style="width: 45%;" :class="limoData.status !=='PENDING' ? 'hz-disabled' :''">
|
||
<view class="hz-btn hz-font-color-white hz-font-sm hz-font-bold hz-text-center" @click="cancelLimoBooking()">
|
||
{{$t("bookingDetail.cancelBooking")}}
|
||
</view>
|
||
</view>
|
||
</u-tabbar>
|
||
<u-popup :show="showCancelBookingSuccessPopup" mode="center" round="16px" :closeable="false" @close="closeCancelBookingSuccessPopup">
|
||
<view class="booking-popup-card booking-popup-card--success"
|
||
:style="'width:' + windowWidth + 'px;'">
|
||
<view class="booking-popup-icon-row">
|
||
<image :src="iconPath" style="width:64px;height:64px;"></image>
|
||
</view>
|
||
<view class="booking-popup-title booking-popup-title--success hz-font-md hz-font-bold hz-text-center">
|
||
Cancel Booking Successfully
|
||
</view>
|
||
<view
|
||
@click="closeCancelBookingSuccessPopup"
|
||
class="booking-popup-button booking-popup-button--primary booking-popup-button--success hz-btn hz-font-color-white hz-font-lg hz-font-bold hz-text-center"
|
||
>
|
||
OK
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
<u-popup :show="showSaveImageSuccessPopup" mode="center" round="16px" :closeable="false" @close="closeSaveImageSuccessPopup">
|
||
<view class="booking-popup-card booking-popup-card--success"
|
||
:style="'width:' + windowWidth + 'px;'">
|
||
<view class="booking-popup-icon-row">
|
||
<image src="../../static/images/ico_suc.png" style="width:64px;height:64px;"></image>
|
||
</view>
|
||
<view class="booking-popup-title booking-popup-title--success hz-font-md hz-font-bold hz-text-center">
|
||
Image Saved Successfully
|
||
</view>
|
||
<view
|
||
@click="closeSaveImageSuccessPopup"
|
||
class="booking-popup-button booking-popup-button--primary booking-popup-button--success hz-btn hz-font-color-white hz-font-lg hz-font-bold hz-text-center"
|
||
>
|
||
OK
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
<u-picker closeOnClickOverlay :show="showPicker" :defaultIndex="currentLangIndex" :columns="langList" @close="showPicker=false" :cancelText="cancelText" :confirmText="okText" confirmColor="#C39A4B" @cancel="showPicker=false" @confirm="confirmLang" keyName="name"></u-picker>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { getLimoBookingById, getLimoBookingByConf } from '../../api/limoApi.js';
|
||
import { cancelLimoBooking } from '../../api/limoApi.js';
|
||
export default {
|
||
data() {
|
||
return {
|
||
playerData:null,
|
||
userData:null,
|
||
deviceData:null,
|
||
limoData:null,
|
||
loadError:false,
|
||
dataNotFoundStr:this.$t("common.dataNotFound"),
|
||
title:'',
|
||
from:'',
|
||
conf:'',
|
||
windowWidth:0,
|
||
showSaveImageSuccessPopup:false,
|
||
showCancelBookingSuccessPopup:false,
|
||
NotCapping:true,
|
||
showTabbar:true,
|
||
showWhenScreenshot:true,
|
||
capture:'',
|
||
showPicker:false,
|
||
lang:'',
|
||
langList:[
|
||
[{
|
||
name: 'English',
|
||
code: 'en'
|
||
}, {
|
||
name: '繁體中文',
|
||
code: 'zh-Hant'
|
||
}]
|
||
],
|
||
currentLangIndex:[0],
|
||
cancelText:this.$t("common.cancel"),
|
||
okText:this.$t("common.ok"),
|
||
iconPath: ''
|
||
}
|
||
},
|
||
onLoad(opt) {
|
||
this.initUI();
|
||
this.playerData = uni.getStorageSync("playerData");
|
||
this.userData = uni.getStorageSync("userData");
|
||
this.deviceData = uni.getStorageSync("deviceData");
|
||
this.windowWidth = this.deviceData && this.deviceData.windowWidth ? this.deviceData.windowWidth - 70 : 290;
|
||
if(opt.from!==undefined && opt.from!='') this.from = opt.from;
|
||
if(opt.conf!==undefined && opt.conf!='') this.conf = opt.conf;
|
||
// this.getLimoData();
|
||
this.getBooking(opt);
|
||
},
|
||
onShow() {
|
||
this.$i18n.locale = uni.getLocale();
|
||
},
|
||
methods: {
|
||
initUI() {
|
||
this.title = this.$t("bookingDetail.title");
|
||
},
|
||
restoreScreenshotView() {
|
||
this.NotCapping = true;
|
||
this.showTabbar = true;
|
||
this.showWhenScreenshot = true;
|
||
},
|
||
// #ifdef APP-PLUS
|
||
async captureWebview() {
|
||
uni.pageScrollTo({
|
||
scrollTop: 0
|
||
});
|
||
this.NotCapping = false;
|
||
this.showTabbar = false;
|
||
this.showWhenScreenshot = false;
|
||
await uni.$u.sleep(1000);
|
||
var _this = this;
|
||
var ws = plus.webview.getTopWebview();
|
||
var bitmap = new plus.nativeObj.Bitmap('capScreen');
|
||
ws.draw(bitmap, function(){
|
||
console.log('截屏绘制图片成功');
|
||
bitmap.save('_doc/a.png', {},
|
||
async function(e){
|
||
console.log('保存图片成功：' + JSON.stringify(e));
|
||
await uni.$u.sleep(1000);
|
||
_this.restoreScreenshotView();
|
||
plus.gallery.save(e.target, () => {
|
||
plus.nativeUI.toast(_this.$t("common.picSaveSuccess"));
|
||
}, (err) => {
|
||
console.log('保存到相册失败：' + JSON.stringify(err));
|
||
});
|
||
},
|
||
function(e){
|
||
console.log('保存图片失败：' + JSON.stringify(e));
|
||
_this.restoreScreenshotView();
|
||
}
|
||
);
|
||
_this.capture = bitmap.toBase64Data();
|
||
bitmap.recycle();
|
||
}, function(e){
|
||
console.log('截屏绘制图片失败：' + JSON.stringify(e));
|
||
_this.restoreScreenshotView();
|
||
});
|
||
},
|
||
// #endif
|
||
back(){
|
||
if(this.from==='list'){
|
||
this.navTo('/booking/bookingRecord/bookingRecord?from=booking',2,false);
|
||
}else{
|
||
this.navBack();
|
||
}
|
||
},
|
||
getPickupDate(str){
|
||
if(!str) return '';
|
||
let datePart = str.split(' ')[0];
|
||
// Assume DD/MM/YYYY
|
||
let parts = datePart.split('/');
|
||
if(parts.length===3){
|
||
let dateObj = new Date(parts[2], parts[1]-1, parts[0]);
|
||
let weeks = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
|
||
let week = weeks[dateObj.getDay()];
|
||
return `(${week}) ${parts[2]}-${parts[1]}-${parts[0]}`;
|
||
}
|
||
return datePart;
|
||
},
|
||
getPickupTime(str){
|
||
if(!str) return '';
|
||
return str.split(' ')[1] || '';
|
||
},
|
||
getCarNo(carNo){
|
||
if(carNo!== undefined && carNo !== null && carNo !== ''){
|
||
return carNo
|
||
}else{
|
||
return 'N/A';
|
||
}
|
||
},
|
||
getDropOffPointLines(dropOffPoint){
|
||
if(dropOffPoint === null || dropOffPoint === undefined || dropOffPoint === '') return [''];
|
||
return String(dropOffPoint).split(/[;；]/).map(item => item.trim()).filter(item => item !== '');
|
||
},
|
||
getExtraDropOffPointDisplayItems(extraDropOffPoint) {
|
||
return this.getDropOffPointLines(extraDropOffPoint).map((item) => {
|
||
const parts = String(item).split('/');
|
||
return {
|
||
zh: String(parts[0] || '').trim(),
|
||
en: String(parts.slice(1).join('/') || '').trim()
|
||
};
|
||
});
|
||
},
|
||
getExtraDropOffPointFromBooking(booking) {
|
||
if (!booking) {
|
||
return '';
|
||
}
|
||
const value =
|
||
booking.extraDropOffPoint != null && String(booking.extraDropOffPoint).trim() !== ''
|
||
? booking.extraDropOffPoint
|
||
: '';
|
||
return String(value || '').trim();
|
||
},
|
||
hasExtraDropOffPoint(limoData) {
|
||
return (
|
||
limoData &&
|
||
limoData.extraDropOffPoint != null &&
|
||
String(limoData.extraDropOffPoint).trim() !== ''
|
||
);
|
||
},
|
||
formatDate(date, format = 'YYYY-MM-DD HH:mm:ss') {
|
||
if(date === null || date === undefined || date === '') return '';
|
||
let normalizedDate = date;
|
||
if(typeof normalizedDate === 'string' && /^\d+$/.test(normalizedDate)){
|
||
normalizedDate = Number(normalizedDate);
|
||
}
|
||
if(typeof normalizedDate === 'number' && normalizedDate < 1000000000000){
|
||
normalizedDate = normalizedDate * 1000;
|
||
}
|
||
const d = new Date(normalizedDate);
|
||
if(Number.isNaN(d.getTime())) return '';
|
||
|
||
const map = {
|
||
YYYY: d.getFullYear(),
|
||
MM: String(d.getMonth() + 1).padStart(2, '0'),
|
||
DD: String(d.getDate()).padStart(2, '0'),
|
||
HH: String(d.getHours()).padStart(2, '0'),
|
||
mm: String(d.getMinutes()).padStart(2, '0'),
|
||
ss: String(d.getSeconds()).padStart(2, '0')
|
||
};
|
||
return format.replace(/YYYY|MM|DD|HH|mm|ss/g, matched => map[matched]);
|
||
},
|
||
normalizeStatus(status){
|
||
if(status==null || status===undefined){
|
||
return '';
|
||
}
|
||
return String(status).toUpperCase().replace(/\s+/g,' ').trim();
|
||
},
|
||
canEditLimo(limo){
|
||
return this.normalizeStatus(limo && limo.status) === 'PENDING';
|
||
},
|
||
getLimoStatusStyle(status){
|
||
const normalizedStatus = this.normalizeStatus(status);
|
||
const style = {
|
||
minWidth: 'auto',
|
||
height: 'auto',
|
||
lineHeight: '1.2',
|
||
whiteSpace: 'nowrap',
|
||
paddingTop: '6px',
|
||
paddingBottom: '6px',
|
||
paddingLeft: '12px',
|
||
paddingRight: '12px',
|
||
flex: 1,
|
||
borderRadius: '6px',
|
||
fontSize: '12px',
|
||
fontWeight: '700',
|
||
backgroundColor: 'rgb(148, 148, 148)',
|
||
color: '#ffffff'
|
||
};
|
||
if(normalizedStatus === 'CONFIRMED'){
|
||
style.backgroundColor = '#439048';
|
||
}
|
||
if(normalizedStatus === 'DRIVER_DEPARTED'){
|
||
style.backgroundColor = '#439048';
|
||
}
|
||
if(normalizedStatus === 'DRIVER_ASSIGNED'){
|
||
style.backgroundColor = '#439048';
|
||
}
|
||
if(normalizedStatus === 'DRIVER_ARRIVED'){
|
||
style.backgroundColor = '#439048';
|
||
}
|
||
if(normalizedStatus === 'GUEST_PICKED'){
|
||
style.backgroundColor = '#439048';
|
||
}
|
||
|
||
return style;
|
||
},
|
||
editLimoBooking(){
|
||
if(!this.canEditLimo(this.limoData)){
|
||
return;
|
||
}
|
||
uni.setStorageSync('limoEditData', this.limoData);
|
||
this.navTo('/limo/newLimo/newLimo?mode=edit&from=limoDetail',0,false);
|
||
},
|
||
async cancelLimoBooking() {
|
||
if(this.limoData.status !== 'PENDING') return null;
|
||
|
||
let updatedBy = this.limoData.updatedBy;
|
||
let bookingId = this.limoData.id;
|
||
|
||
let params = {
|
||
updatedBy: updatedBy,
|
||
id: bookingId
|
||
};
|
||
|
||
try {
|
||
const res = await cancelLimoBooking(params);
|
||
if(res && res.success) {
|
||
this.iconPath = '../../static/images/ico_suc.png';
|
||
this.showCancelBookingSuccessPopup = true;
|
||
} else {
|
||
this.iconPath = '../../static/images/ico_err.png';
|
||
}
|
||
} catch (e) {
|
||
console.error(e)
|
||
}
|
||
},
|
||
showSaveImageSuccessDialog(){
|
||
this.showSaveImageSuccessPopup = true;
|
||
},
|
||
popupLang(){
|
||
this.currentLangIndex = [];
|
||
for(let i=0;i<this.langList[0].length;i++){
|
||
if(this.langList[0][i].code === this.$i18n.locale){
|
||
this.currentLangIndex.push(i);
|
||
break;
|
||
}
|
||
}
|
||
this.showPicker = true;
|
||
},
|
||
async confirmLang(e){
|
||
this.$i18n.locale = e.value[0].code;
|
||
this.lang = e.value[0].name;
|
||
this.title = this.$t("bookingDetail.title");
|
||
this.cancelText = this.$t("common.cancel");
|
||
this.okText = this.$t("common.ok");
|
||
this.showPicker = false;
|
||
this.captureWebview();
|
||
},
|
||
closeSaveImageSuccessPopup(){
|
||
this.showSaveImageSuccessPopup = false;
|
||
},
|
||
closeCancelBookingSuccessPopup(){
|
||
this.showCancelBookingSuccessPopup = false;
|
||
this.navTo('/booking/bookingRecord/bookingRecord?from=booking',2,false);
|
||
},
|
||
getLimoData(){
|
||
const limoBookingList = [];
|
||
getBooking();
|
||
|
||
},
|
||
async getDataByConfNo(confNo) {
|
||
if (confNo == null || confNo === '' || confNo === 'null') {
|
||
return;
|
||
}
|
||
await this.getLimoBookingByConf(confNo);
|
||
},
|
||
async getLimoBookingByConf(conf,id) {
|
||
this.loadError = false;
|
||
uni.showLoading({ title: this.$t("common.loading") });
|
||
try{
|
||
let params = {};
|
||
params.conf = conf;
|
||
const res = await getLimoBookingByConf(params);
|
||
if(res!=null && res.success==true){
|
||
|
||
let tempBooking = res.data;
|
||
|
||
let temp = {
|
||
id: tempBooking.id,
|
||
confirmationNo: tempBooking.confirmationNo,
|
||
status: tempBooking.bookingStatus,
|
||
bookingType: tempBooking.bookingType,
|
||
serviceType: tempBooking.serviceType,
|
||
pickUpDate: this.formatDate(tempBooking.pickUpDatetime, 'DD/MM/YYYY HH:mm'),
|
||
greetType: tempBooking.greetType,
|
||
signage: tempBooking.signage,
|
||
tripPrice: tempBooking.tripPrice,
|
||
tripContact: tempBooking.tripContact,
|
||
bookingContact: tempBooking.bookingContact,
|
||
tenOutContact: tempBooking.tenOutContact,
|
||
guestContact: tempBooking.guestContact,
|
||
isHighImportance: tempBooking.isHighImportance,
|
||
isTenOut: tempBooking.isTenOut,
|
||
isConnectGuestDirectly: tempBooking.isConnectGuestDirectly,
|
||
noOfPax: tempBooking.noOfPax,
|
||
pickUpPoint: tempBooking.pickUpPoint,
|
||
carType: tempBooking.carType,
|
||
extraDropOffPoint: this.getExtraDropOffPointFromBooking(tempBooking),
|
||
extraOffPoint: this.getExtraDropOffPointFromBooking(tempBooking),
|
||
dropOffPoint: tempBooking.dropOffPoint,
|
||
remarks: tempBooking.remarks,
|
||
isHourlyRate: tempBooking.isHourlyRate,
|
||
hourlyRate: tempBooking.hourlyRate,
|
||
flightDetail: tempBooking.flightDetail,
|
||
flightEta: tempBooking.flightEta,
|
||
flightStatus: tempBooking.flightStatus,
|
||
approver: tempBooking.approver,
|
||
approverId: tempBooking.approverId,
|
||
paymentMethod: tempBooking.paymentMethod,
|
||
createdAt: this.formatDate(tempBooking.createdAt, "YYYY-MM-DD HH:mm:ss"),
|
||
createdBy: tempBooking.createdBy,
|
||
overrideBy: tempBooking.overrideBy,
|
||
carNo:tempBooking.carNo,
|
||
driverContact:tempBooking.driverContact,
|
||
driverSource:tempBooking.driverSource,
|
||
totalAmount:tempBooking.totalAmount
|
||
}
|
||
|
||
this.limoData = temp;
|
||
|
||
|
||
}else{
|
||
this.loadError = true;
|
||
uni.$u.toast(res.message,5000);
|
||
}
|
||
}catch(e){
|
||
this.loadError = true;
|
||
console.error(e);
|
||
uni.$u.toast(e.errMsg,5000);
|
||
}finally{
|
||
uni.hideLoading();
|
||
}
|
||
},
|
||
async getLimoBookingById(id) {
|
||
this.loadError = false;
|
||
uni.showLoading({ title: this.$t("common.loading") });
|
||
try{
|
||
let params = {};
|
||
params.id = id;
|
||
const res = await getLimoBookingById(params);
|
||
if(res!=null && res.success==true){
|
||
|
||
let tempBooking = res.data;
|
||
|
||
let temp = {
|
||
id: tempBooking.id,
|
||
confirmationNo: tempBooking.confirmationNo,
|
||
status: tempBooking.bookingStatus,
|
||
bookingType: tempBooking.bookingType,
|
||
serviceType: tempBooking.serviceType,
|
||
pickUpDate: this.formatDate(tempBooking.pickUpDatetime, 'DD/MM/YYYY HH:mm'),
|
||
greetType: tempBooking.greetType,
|
||
signage: tempBooking.signage,
|
||
tripPrice: tempBooking.tripPrice,
|
||
tripContact: tempBooking.tripContact,
|
||
bookingContact: tempBooking.bookingContact,
|
||
tenOutContact: tempBooking.tenOutContact,
|
||
guestContact: tempBooking.guestContact,
|
||
isHighImportance: tempBooking.isHighImportance,
|
||
isTenOut: tempBooking.isTenOut,
|
||
isConnectGuestDirectly: tempBooking.isConnectGuestDirectly,
|
||
noOfPax: tempBooking.noOfPax,
|
||
pickUpPoint: tempBooking.pickUpPoint,
|
||
carType: tempBooking.carType,
|
||
extraDropOffPoint: this.getExtraDropOffPointFromBooking(tempBooking),
|
||
extraOffPoint: this.getExtraDropOffPointFromBooking(tempBooking),
|
||
dropOffPoint: tempBooking.dropOffPoint,
|
||
remarks: tempBooking.remarks,
|
||
isHourlyRate: tempBooking.isHourlyRate,
|
||
hourlyRate: tempBooking.hourlyRate,
|
||
flightDetail: tempBooking.flightDetail,
|
||
flightEta: tempBooking.flightEta,
|
||
flightStatus: tempBooking.flightStatus,
|
||
approver: tempBooking.approver,
|
||
approverId: tempBooking.approverId,
|
||
paymentMethod: tempBooking.paymentMethod,
|
||
createdAt: this.formatDate(tempBooking.createdAt, "YYYY-MM-DD HH-mm-ss"),
|
||
createdBy: tempBooking.createdBy,
|
||
overrideBy: tempBooking.overrideBy,
|
||
totalAmount:tempBooking.totalAmount
|
||
}
|
||
|
||
this.limoData = temp;
|
||
}else{
|
||
this.loadError = true;
|
||
uni.$u.toast(res.message,5000);
|
||
}
|
||
}catch(e){
|
||
this.loadError = true;
|
||
console.error(e);
|
||
uni.$u.toast(e.errMsg,5000);
|
||
}finally{
|
||
uni.hideLoading();
|
||
}
|
||
},
|
||
getBooking(opt) {
|
||
const confNo =
|
||
opt.confNo != null && opt.confNo !== '' && opt.confNo !== 'null'
|
||
? opt.confNo
|
||
: opt.conf;
|
||
if (
|
||
confNo != null &&
|
||
confNo !== undefined &&
|
||
confNo !== '' &&
|
||
confNo !== 'null'
|
||
) {
|
||
this.getDataByConfNo(confNo);
|
||
return;
|
||
}
|
||
if (
|
||
opt.id != null &&
|
||
opt.id !== undefined &&
|
||
opt.id !== '' &&
|
||
opt.id !== 'null'
|
||
) {
|
||
this.getLimoBookingById(opt.id);
|
||
}
|
||
},
|
||
formatTripPrice(value) {
|
||
if (value === null || value === undefined || value === '') return '-';
|
||
const text = String(value).replace(/,/g, '');
|
||
const parts = text.split('.');
|
||
parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
||
return parts.join('.');
|
||
},
|
||
formatCarTypeAndCarNo(limoBooking) {
|
||
const carType = limoBooking.carType !== null ? limoBooking.carType : 'N/A';
|
||
const carNo = this.getCarNo(limoBooking.carNo);
|
||
console.log(limoBooking);
|
||
return ""+carType + "\n (" + carNo+")";
|
||
},
|
||
GetDriverContact(limoBooking) {
|
||
const driverContact = limoBooking && limoBooking.driverContact != null
|
||
? String(limoBooking.driverContact).trim()
|
||
: '';
|
||
if (!driverContact) {
|
||
return 'N/A';
|
||
}
|
||
const phoneNumbers = driverContact
|
||
.split(/[,，]/)
|
||
.map((phoneNumber) => phoneNumber.trim())
|
||
.filter(Boolean);
|
||
if (phoneNumbers.length <= 1) {
|
||
return phoneNumbers[0] || 'N/A';
|
||
}
|
||
return phoneNumbers
|
||
.map((phoneNumber, index) => `Phone No${index + 1}:${phoneNumber}`)
|
||
.join('\n');
|
||
},
|
||
copyDriverInfo(limoBooking){
|
||
const carType = limoBooking.carType !== null ? limoBooking.carType : 'N/A';
|
||
const carNo = this.getCarNo(limoBooking.carNo);
|
||
const driverContact = limoBooking.driverContact != null && limoBooking.driverContact != undefined && limoBooking.driverContact != "" ? limoBooking.driverContact : 'N/A';
|
||
const locale = this.$i18n && this.$i18n.locale ? this.$i18n.locale : uni.getLocale();
|
||
const isEnglish = String(locale || '').toLowerCase().startsWith('en');
|
||
const data = isEnglish
|
||
? `The details of your reserved limousine service are as follows:\nVehicle Type: ${carType}\nLicense Plate: ${carNo}\nDriver Phone: ${driverContact}`
|
||
: `阁下预订的贵宾车资料如下：\n車型：${carType}\n車牌號碼：${carNo}\n司機電話：${driverContact}`;
|
||
uni.setClipboardData({
|
||
data: data,
|
||
success: function () {
|
||
//调用方法成功
|
||
console.log('success');
|
||
}
|
||
})
|
||
}
|
||
},
|
||
computed:{
|
||
getConfirmationNo(){
|
||
return function (booking) {
|
||
if(booking!==undefined && booking!==null){
|
||
if(booking.confirmationNo!==undefined && booking.confirmationNo!==null &&
|
||
booking.confirmationNo!=='null' && booking.confirmationNo!=='' && booking.approveStatus!='W'){
|
||
return booking.confirmationNo;
|
||
}
|
||
}
|
||
return 'N/A';
|
||
}
|
||
},
|
||
getStatusText(){
|
||
return function (booking) {
|
||
console.log(booking);
|
||
if(booking!==undefined && booking!==null){
|
||
if(booking.status !==undefined && booking.status!==null) return booking.status.replace("_"," ");
|
||
}
|
||
}
|
||
},
|
||
|
||
|
||
}
|
||
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.limo-info-card {
|
||
position: relative;
|
||
padding-right: 54px;
|
||
}
|
||
.limo-info-grid {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.9fr);
|
||
column-gap: 18px;
|
||
row-gap: 12px;
|
||
}
|
||
.limo-info-item {
|
||
display: flex;
|
||
align-items: center;
|
||
min-width: 0;
|
||
white-space: nowrap;
|
||
}
|
||
.limo-info-icon {
|
||
width: 18px;
|
||
height: 18px;
|
||
margin-right: 8px;
|
||
flex: 0 0 18px;
|
||
}
|
||
.limo-edit-button {
|
||
position: absolute;
|
||
top: 28px;
|
||
right: 24px;
|
||
width: 30px;
|
||
height: 30px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
}
|
||
.limo-edit-icon {
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
.booking-popup-card {
|
||
padding: 20px;
|
||
background-color: #ffffff;
|
||
border-radius: 16px;
|
||
}
|
||
.booking-popup-icon-row {
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
.booking-popup-title {
|
||
margin-top: 20px;
|
||
}
|
||
.booking-popup-title--success {
|
||
line-height: 1.4;
|
||
}
|
||
.booking-popup-button {
|
||
margin-top: 40px;
|
||
}
|
||
.booking-popup-button--primary {
|
||
background-color: #C39A4B;
|
||
}
|
||
.booking-popup-button--success {
|
||
width: 100%;
|
||
}
|
||
</style>
|