Files
mgm-daylight-mcrm-mobile-ios/booking/bookingDetail/bookingDetail.vue
T
2026-09-08 17:20:27 +08:00

2080 lines
77 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<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 id="imageContent" v-if="bookingData!=null" 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" :class="getCardColor(bookingData)" style="margin-top:20rpx;">
<view style="width:77%;">{{ msgStr }}</view>
<view :class="getStatusColor(bookingData)" class="hz-btn-status hz-font-min hz-text-center" style="min-width:auto;height:14px;line-height:14px;margin: auto;white-space: nowrap;padding-left: 10px;padding-right: 10px;">{{getStatusText(bookingData)}}</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" :class="showExtend? 'hz-card-booking':'hz-card-extend'" style="margin-top:10px;align-items: center;">
<view v-if="showExtend" class="hz-font-bolder hz-font-md" style="margin-bottom:10px;">
{{$t("bookingConfirm.currentStay")}}
</view>
<view v-if="showExtend" v-for="(item,index) in bookingData.dateList" :key="'extend'+index" style="align-items: center;">
<view class="hz-flex-row" style="align-items: center;">
<image src="../../static/images/ico_calendar_grey.png" style="width:16px;height:16px;"></image>
<span class="hz-font-md hz-font-bolder" style="margin-left:4px;">{{dateFormat(item.date[0])}}&nbsp; {{$t("common.to")}}&nbsp; {{dateFormat(item.date[item.date.length-1])}}</span>
</view>
<view class="hz-flex-row" style="margin-top:8px;">
<view class="hz-flex-row" style="width:33%;align-items: center;">
<image src="../../static/images/ico_night_grey.png" style="width:16px;height:16px;"></image>
<span class="hz-font-md hz-font-bolder" style="margin-left:4px;">{{getNight(item.numOfNight)}}</span>
</view>
<view class="hz-flex-row" style="width:33%;align-items: center;">
<image src="../../static/images/ico_room_grey.png" style="width:16px;height:16px;"></image>
<span class="hz-font-md hz-font-bolder" style="margin-left:4px;">{{getRoom(item.numOfRoom)}}</span>
</view>
<view class="hz-flex-row" style="width:34%;justify-content: right;">
<view :class="getStatusColor(bookingData)" class="hz-btn-status hz-font-min hz-text-center" style="min-width:auto;height:14px;line-height:14px;white-space: nowrap;padding-left: 10px;padding-right: 10px;">{{getStatusText(bookingData)}}</view>
</view>
</view>
</view>
<view v-if="showExtend" class="hz-font-bolder hz-font-md hz-font-color-primary" style="margin-top:20px;margin-bottom:10px;">
{{$t("bookingConfirm.extending")}}
</view>
<view v-for="(item,index) in (showExtend)? bookingData.extendDate:bookingData.dateList" :key="index" style="align-items: center;">
<view class="hz-flex-row" style="align-items: center;">
<image src="../../static/images/ico_calendar.png" style="width:16px;height:16px;"></image>
<span class="hz-font-md hz-font-bolder" style="margin-left:4px;">{{dateFormat(item.date[0])}}&nbsp; {{$t("common.to")}}&nbsp; {{dateFormat(item.date[item.date.length-1])}}</span>
</view>
<view class="hz-flex-row" style="margin-top:8px;">
<view class="hz-flex-row" style="width:33%;align-items: center;">
<image src="../../static/images/ico_night.png" style="width:16px;height:16px;"></image>
<span class="hz-font-md hz-font-bolder" style="margin-left:4px;">{{getNight(item.numOfNight)}}</span>
</view>
<view class="hz-flex-row" style="width:33%;align-items: center;">
<image src="../../static/images/ico_room.png" style="width:16px;height:16px;"></image>
<span class="hz-font-md hz-font-bolder" style="margin-left:4px;">{{getRoom(item.numOfRoom)}}</span>
</view>
<view class="hz-flex-row" style="width:34%;align-items: center;"></view>
</view>
</view>
</view>
<view class="hz-spacing hz-mr-t-30" style="margin-bottom:30px;">
<view class="hz-flex-row">
<view style="width:65%">
<view class="hz-font-color-black hz-font-sm">{{$t("common.property")}}</view>
<view class="hz-font-bolder hz-font-lg" >{{bookingData.propertyName}}</view>
</view>
<view style="width:35%">
<view class="hz-font-color-black hz-font-sm">{{$t("newBooking.roomType")}}</view>
<view class="hz-font-bolder hz-font-lg" >{{getRoomName()}}</view>
<!--<view class="hz-font-color-black hz-font-sm">{{$t("common.block")}}</view>
<view class="hz-font-bolder hz-font-lg" >{{bookingData.block}}</view>-->
</view>
</view>
<view v-if="(bookingData.specialName!=null && bookingData.specialName!='') || (bookingData.bedTypeName!=null && bookingData.bedTypeName!='')" class="hz-flex-row hz-mr-t-30">
<view style="width:100%">
<view class="hz-font-color-black hz-font-sm">{{$t("newBooking.specialPreference")}}</view>
<view class="hz-font-bolder hz-font-lg" >{{getSpecial(bookingData.specialName,bookingData.bedTypeName)}}</view>
</view>
</view>
<view v-if="bookingData.sharerList!=null && bookingData.sharerList.length>0" class="hz-flex-row hz-mr-t-30">
<view style="width:100%">
<view class="hz-font-color-black hz-font-sm">{{$t("bookingRecord.sharer")}}</view>
<view v-for="(item,index) in bookingData.sharerList" :key="'sharer'+index" class="hz-font-bolder hz-font-lg" >{{getSharer(item.playerId,item.name)}}</view>
</view>
</view>
<view v-if="bookingData.remark!=null && bookingData.remark!='' && (bookingData.approveStatus==='W'||bookingData.approveStatus==='WA') " class="hz-flex-row hz-mr-t-30">
<view style="width:100%">
<view class="hz-font-color-black hz-font-sm">{{$t("newWaitlist.remark")}}</view>
<view class="hz-font-bolder hz-font-lg" >{{bookingData.remark}}</view>
</view>
</view>
<view class="hz-flex-row hz-mr-t-30">
<view style="width:65%">
<view class="hz-font-color-black hz-font-sm">{{$t("bookingConfirm.createdOn")}}</view>
<view class="hz-font-bolder hz-font-lg" >{{bookingData.createdAt}}</view>
</view>
<view style="width:35%">
<view class="hz-font-color-black hz-font-sm">{{$t("bookingConfirm.createdBy")}}</view>
<view class="hz-font-bolder hz-font-lg">{{bookingData.createdByName}}</view>
</view>
</view>
<!-- ETA & Misc Charge -->
<view class="hz-flex-row" v-show="showWhenScreenshot">
<view class=" hz-mr-t-30" style="width:65%">
<view style="width:100%">
<view class="hz-font-color-black hz-font-sm">{{ $t("common.etaTime") }}</view>
<view class="hz-font-bolder hz-font-lg" >{{ formatEtaToHHmm(bookingData.eta) || "-" }}</view>
<!-- <view class="hz-font-bolder hz-font-lg" >{{ handleShowWhenScreenshot(bookingData.eta) }}</view> -->
</view>
</view>
<view class="hz-mr-t-30">
<view v-if="(bookingData.propertyCategory == 'OPERA' || bookingData.propertyCategory == 'DAYLIGHT') && bookingData.bookingTypeName != 'IM'" style="width:100%">
<view class="hz-font-color-black hz-font-sm">{{ $t("common.misCharge") }}</view>
<view class="hz-font-bolder hz-font-lg">{{ bookingData.miscCharge || "-" }}</view>
<!-- <view class="hz-font-bolder hz-font-lg" >{{ handleShowWhenScreenshot(bookingData.misCharge) }}</view> -->
</view>
</view>
</view>
<view v-if="getDP(bookingData,0)!=null && NotCapping" class="hz-flex-row hz-mr-t-30">
<view style="width:100%">
<view class="hz-font-color-black hz-font-sm">{{$t("newBooking.deposit")}}</view>
<view class="hz-font-bolder hz-font-lg">
{{getDP(bookingData,0)==0? $t("newBooking.waiveDeposit"):$t("newBooking.collectDeposit")}}
</view>
</view>
</view>
<view v-if="getDP(bookingData,1)!=null && NotCapping" class="hz-flex-row hz-mr-t-30">
<view style="width:100%">
<view class="hz-font-color-black hz-font-sm">{{$t("newBooking.postCharge")}}</view>
<view class="hz-font-bolder hz-font-lg">
{{getDP(bookingData,1)==1? $t("newBooking.yesPost"):$t("newBooking.noPost")}}
</view>
</view>
</view>
<!-- Pending Approval -->
<view v-if="bookingData.approveStatus==='AP'">
<view class="hz-flex-row hz-mr-t-30">
<view style="width:100%">
<view class="hz-font-color-black hz-font-lg">{{$t("newWaitlist.remark")}}: {{bookingData.remark || '-'}}</view>
</view>
</view>
<view class="hz-flex-row hz-mr-t-30">
<view style="width:100%">
<view class="hz-font-color-black hz-font-lg">{{$t("approval.reason")}}: {{bookingData.approvalReason || '-'}}</view>
</view>
</view>
<view class="hz-flex-row hz-mr-t-30">
<view style="width:100%">
<view class="hz-font-color-black hz-font-lg">{{$t("approval.pendingResponse")}}: {{bookingData.approver || '-'}}</view>
</view>
</view>
</view>
</view>
<view :style="'height:'+footFuncHei+'rpx;'"></view>
</view>
<u-tabbar
:fixed="true"
:placeholder="true"
:safeAreaInsetBottom="true"
customStyle="z-index:100;"
:customStyle="{height:58+'px'}"
v-if="showTabbar"
>
<!-- RESERVED -->
<view v-if="currentBookingStatus == 'RESERVED'" class="hz-flex-row hz-spacing" style=" display: flex; justify-content: space-around; width:100%;">
<view v-if="bookingData.createdBy === userData.userId && canCancelBooking && bookingData.isQueue!=true" @click="showCancelPopup()" class="hz-btn hz-bg-primary hz-font-m hz-font-bold hz-font-color-white hz-text-center">{{$t("bookingDetail.cancelBooking")}}</view>
<view v-else @click="showOtherPopup()" class="hz-cancel-disabled hz-btn hz-bg-primary hz-font-m hz-font-bold hz-font-color-white hz-text-center">{{$t("bookingDetail.cancelBooking")}}</view>
<view @click="showETAMsg = true" class="hz-btn hz-bg-primary hz-font-m hz-font-bold hz-font-color-white hz-text-center" style="margin-left:4px;">{{$t("bookingDetail.ETA")}}</view>
<view v-if="bookingData.propertyCategory != 'OTHER'" @click="showMisChargeMsg = true" class="hz-btn hz-bg-primary font-m hz-font-bold hz-font-color-white hz-text-center" style="margin-left:4px;">{{$t("common.misCharge").toUpperCase()}}</view>
<view @click="popupLang()" class="hz-btn hz-bg-primary font-m hz-font-bold hz-font-color-white hz-text-center" style="margin-left:4px;">{{$t("bookingDetail.saveImage")}}</view>
</view>
<!-- DUE_IN -->
<view v-else-if="currentBookingStatus == 'DUE_IN'" class="hz-flex-row hz-spacing" style=" display: flex; justify-content: space-around; width:100%;">
<view v-if="bookingData.createdBy === userData.userId && canCancelBooking && bookingData.isQueue!=true" @click="showCancelPopup()" class="hz-btn hz-bg-primary hz-font-m hz-font-bold hz-font-color-white hz-text-center">{{$t("bookingDetail.cancelBooking")}}</view>
<view v-else @click="showOtherPopup()" class="hz-cancel-disabled hz-btn hz-bg-primary hz-font-m hz-font-bold hz-font-color-white hz-text-center">{{$t("bookingDetail.cancelBooking")}}</view>
<view @click="showETAMsg = true" class="hz-btn hz-bg-primary hz-font-m hz-font-bold hz-font-color-white hz-text-center" style="margin-left:4px;">{{$t("bookingDetail.ETA")}}</view>
<view v-if="bookingData.propertyCategory != 'OTHER'" @click="showMisChargeMsg = true" class="hz-btn hz-bg-primary font-m hz-font-bold hz-font-color-white hz-text-center" style="margin-left:4px;">{{$t("common.misCharge").toUpperCase()}}</view>
<view @click="popupLang()" class="hz-btn hz-bg-primary font-m hz-font-bold hz-font-color-white hz-text-center" style="margin-left:4px;">{{$t("bookingDetail.saveImage")}}</view>
</view>
<!-- DUE_OUT -->
<view v-else-if="currentBookingStatus == 'DUE_OUT'" class="hz-flex-row hz-spacing" style=" display: flex; justify-content: space-around;" :style="showExtendLayout() ? {width:'100%'}:{width:'34%'}">
<view @click="popupLang()" class="hz-btn hz-bg-primary hz-font-lg hz-font-bold hz-font-color-white hz-text-center">{{$t("bookingDetail.saveImage")}}</view>
<view v-if="showExtendLayout()" @click="popupCalendar()" class="hz-btn hz-bg-primary hz-font-lg hz-font-bold hz-font-color-white hz-text-center" style="margin-left:4px;">{{$t("bookingDetail.extension")}}</view>
</view>
<!-- CHECKED_IN -->
<view v-else-if="currentBookingStatus == 'CHECKED_IN'" class="hz-flex-row hz-spacing" style=" display: flex; justify-content: space-around;" :style="showExtendLayout() ? {width:'100%'}:{width:'34%'}">
<view @click="popupLang()" class="hz-btn hz-bg-primary hz-font-lg hz-font-bold hz-font-color-white hz-text-center">{{$t("bookingDetail.saveImage")}}</view>
<view v-if="bookingData.propertyCategory != 'OTHER'" @click="showMisChargeMsg = true" class="hz-btn hz-bg-primary hz-font-lg hz-font-bold hz-font-color-white hz-text-center" style="margin-left:4px;">{{$t("common.misCharge").toUpperCase()}}</view>
<view v-if="showExtendLayout()" @click="popupCalendar()" class="hz-btn hz-bg-primary hz-font-lg hz-font-bold hz-font-color-white hz-text-center" style="margin-left:8px;">{{$t("bookingDetail.extension")}}</view>
</view>
<!-- WAITLIST -->
<view v-else-if="currentBookingStatus == 'WAITLIST'" class="hz-flex-row hz-spacing" style="width:100%;">
<view v-if="bookingData.propertyCategory != 'OTHER'" @click="showMisChargeMsg = true" class="hz-btn hz-bg-primary hz-font-lg hz-font-bold hz-font-color-white hz-text-center">{{$t("common.misCharge").toUpperCase()}}</view>
<view v-if="bookingData.createdBy === userData.userId" @click="showCancelMsg=true;" class="hz-btn hz-bg-primary hz-font-lg hz-font-bold hz-font-color-white hz-text-center" style="margin-left:4px;">{{$t("common.cancel").toUpperCase()}}</view>
<view v-else @click="showOtherPopup()" class="hz-cancel-disabled hz-btn hz-bg-primary hz-font-m hz-font-bold hz-font-color-white hz-text-center" style="margin-left:4px;">{{$t("bookingDetail.cancelBooking")}}</view>
</view>
<!-- PENDING_APPROVAL -->
<view v-else-if="currentBookingStatus == 'PENDING_APPROVAL'" class="hz-flex-row hz-spacing" style="width:100%;">
<view v-if="bookingData.propertyCategory != 'OTHER'" @click="showMisChargeMsg = true" class="hz-btn hz-bg-primary hz-font-lg hz-font-bold hz-font-color-white hz-text-center">{{$t("common.misCharge").toUpperCase()}}</view>
<view @click="showCancelApprovalMsg=true;" v-if="bookingData.createdBy === userData.userId" class="hz-btn hz-bg-primary hz-font-lg hz-font-bold hz-font-color-white hz-text-center" style="margin-left:4px;">{{$t("common.cancel").toUpperCase()}}</view>
<view v-else @click="showOtherPopup()" class="hz-cancel-disabled hz-btn hz-bg-primary hz-font-m hz-font-bold hz-font-color-white hz-text-center" style="margin-left:4px;">{{$t("bookingDetail.cancelBooking")}}</view>
</view>
</u-tabbar>
</view>
<u-calendar
closeOnClickOverlay
:confirmText="confirmText"
:confirmDisabledText="confirmText"
color="#C39A4B"
:title="calendarTitle"
:showTitle=false
:startText="inText"
:endText="outText"
v-if="showCalendar"
:show="showCalendar"
:defaultDate="defaultDate"
:formatter="formatter"
mode="range"
:monthNum="4"
:maxRange="maxRange"
@close="showCalendar = false"
@confirm="confirmDate"
:minDate="minDate"
:maxDate="maxDate"
:fixStartDate="true"
@rangeSelected="rangeSelected"
:showMark="false"
:showRangePrompt="showRangePrompt">
</u-calendar>
<u-modal :show="showETAMsg" :confirmText="saveText" @confirm="submitETA()" confirmColor="#C39A4B" :closeOnClickConfirm="false"
@cancel="showETAMsg=false;" @close="showETAMsg=false;" :cancelText="cancelText" showCancelButton>
<view class="slot-content hz-flex-col" style="align-items: center;">
<image src="../../static/images/time_line.svg" class=" hz-mr-b-30" style="width:48px;height:48px;">
</image>
<view class="hz-font-xl hz-font-bolder">Estimate Time Arrival</view>
<view class="hz-font-md hz-mr-b-30" style="margin-top:8px;color:#666666;">{{bookingData.playerId}} / {{bookingData.memberLastName}}</view>
<view class="hz-flex-row" style="align-items: center;">
<u-code-input v-model="etaTime" :maxlength="4" :isColon="true" space="14" :focus="true" color="#333333" :fontSize="26"
:bold="true"></u-code-input>
</view>
<view class="hz-font-12px hz-mr-b-30" style="margin-top:12px;color:#666666;">( 24h, format: 02:30 )
</view>
</view>
</u-modal>
<u-modal :content="cancelMsgStr" :show="showCancelMsg" :confirmText="yesText" closeOnClickOverlay @confirm="cancelWaitlist" confirmColor="#C39A4B" @cancel="showCancelMsg=false;" @close="showCancelMsg=false;" :cancelText="cancelText" showCancelButton></u-modal>
<u-modal :content="cancelMsgStr" :show="showCancelApprovalMsg" :confirmText="yesText" closeOnClickOverlay @confirm="cancelApproval" confirmColor="#C39A4B" @cancel="showCancelApprovalMsg=false;" @close="showCancelApprovalMsg=false;" :cancelText="cancelText" showCancelButton></u-modal>
<u-modal :content="extendMsgStr" :show="showMsg" :confirmText="yesText" closeOnClickOverlay @confirm="showMsg=false" confirmColor="#C39A4B" ></u-modal>
<u-modal :content="changeStatusMsgStr" :show="showChangeMsg" :confirmText="yesText" closeOnClickOverlay @confirm="navToDetail(backUrl)" confirmColor="#C39A4B" ></u-modal>
<u-modal :content="msgReservedStr" :show="showReservedMsg" :cancelText="cancelText" :confirmText="yesText" showCancelButton closeOnClickOverlay @confirm="confirmReservedMsg" confirmColor="#C39A4B" @cancel="showReservedMsg=false" @close="showReservedMsg=false"></u-modal>
<u-modal :content="approveMsgStr" :show="showApproveMsg" :confirmText="yesText" closeOnClickOverlay @confirm="approveWaitlist" confirmColor="#C39A4B" @cancel="showApproveMsg=false;" @close="showApproveMsg=false;" :cancelText="cancelText" showCancelButton></u-modal>
<u-modal :show="showMisChargeMsg" @cancel="showMisChargeMsg = false;" :confirmText="saveText" :cancelText="cancelText" @close="showMisChargeMsg=false;" confirmColor="#C39A4B" showCancelButton @confirm="changeMiscCharge()">
<view class="slot-content hz-flex-col" style="align-items: center;">
<view class="hz-font-xl hz-font-bolder">{{$t("common.misCharge")}}</view>
<view style="border-bottom: 1px solid #ccc;margin-top: 20px;width: 80%;padding-left: 15px;padding-bottom: 5px;">
<input v-model="misCharge" class="hz-font-md" type="number">
</view>
</view>
</u-modal>
<u-popup
:safeAreaInsetBottom="true"
:safeAreaInsetTop="true"
:mode="'center'"
:round="12"
:show="showMsgBox"
customStyle="width:94%; padding-top: 30px"
:closeable="!showDirBtn"
@close="closeCancelPopup"
>
<view>
<view class="hz-flex-row" style="justify-content:center;align-items:center;width:100%;">
<image :src="iconPath" style="width:64px;height:64px;"></image>
</view>
<view class="hz-font-xl hz-font-bold hz-text-center" style="margin-top:20px;margin-bottom: 20px;margin-left: 15px;margin-right: 15px;white-space:pre-wrap;">
<rich-text v-html="popMsgStr" style="line-height:26px;"></rich-text>
</view>
<view @click="closeCancelPopup()" v-if="showDirBtn" class="hz-btn hz-font-color-white hz-font-lg hz-font-bold hz-text-center" style="width: 90%;margin: 0 auto;margin-bottom: 30px;">
{{$t("common.ok").toUpperCase()}}
</view>
</view>
<view v-if="!showDirBtn">
<view class="hz-spacing" style="margin-top:10px;margin-left:30px;">
<view style="margin-bottom: 10px;text-align: left;"> {{$t("bookingDetail.SelectDate")}}</view>
<u-checkbox-group placement="row" @change="handleDateSelect"
style="flex-direction: unset;display: block;">
<view v-for="(dateItem,index) in showDate" :key="index" style="width:100%;display: inline-flex;" >
<u-checkbox activeColor="#C39A4B" labelColor="#333333" shape="circle"
customStyle="height:38px;width:100%;" :size="28"
:label="dateItem" :name="dateItem"></u-checkbox>
</view>
</u-checkbox-group>
</view>
<view class="hz-flex-col" style="justify-content: center;align-items: center;margin:20px 20px 30px 20px;">
<view @click="handleCancelBooking()" class="hz-btn hz-font-color-white hz-font-lg hz-font-bold hz-text-center" >
{{$t("bookingDetail.cancelBooking").toUpperCase()}}
</view>
<!--<view @click="closeCancelPopup()" class="hz-btn-line hz-font-color-white hz-font-lg hz-font-bold hz-text-center" style="margin-bottom:30px;width: 90%;">
{{$t("common.close").toUpperCase()}}
</view>-->
</view>
</view>
</u-popup>
<u-picker closeOnClickOverlay :show="showPicker" :defaultIndex="currentLangIndex" :columns="langList" @close="showOtherProperty=false" :cancelText="cancelText" :confirmText="okText" confirmColor="#C39A4B" @cancel="showPicker=false" @confirm="confirmLang" keyName="name"></u-picker>
</view>
</template>
<script>
import dayjs from '../../uni_modules/uview-ui/libs/util/dayjs.js';
import {formatDate} from '../../common/stringUtils.js'
import {mapOperaStatus,mapApproveStatus} from '../../common/mapping.js'
import {getBookingByConf,getBookingById,cancelWaitlistBooking,approveWaitlistBooking, cancelApproval, changeMiscCharge} from '../../api/bookingApi.js'
import {getSetting,getCriterias} from '../../api/configApi.js';
import { changeDate,cancelBooking,submitETA } from '../../api/todoApi.js';
export default {
data() {
return {
//数据变量
playerData:null,
bookingData:{
playerId:'',
memberLastName:''
},
// 界面变量
title:'',
msgStr:'',
showPicker:false,
NotCapping:true,
lang:'',
langList:[
[{
name: 'English',
code: 'en'
}, {
name: '繁體中文',
code: 'zh-Hant'
}]
],
currentLangIndex:[0],
extendMsgStr:this.$t("bookingDetail.cannotExtend"),
saveText:this.$t("common.save"),
cancelText:this.$t("common.cancel"),
okText:this.$t("common.ok"),
confirmText:this.$t("common.confirm").toUpperCase(),
inText:this.$t("common.in"),
outText:this.$t("common.out"),
yesText:this.$t("common.yes"),
showTabbar:false,
showCalendar:false,
showExtend:false,
windowWidth:0,
footFuncHei:100,
minDate:'',
dateList:[],
showETAMsg: false,
showMisChargeMsg: false,
showDate:[],
cancelDateList:[],
checkNullList:[],
maxDate:'',
misCharge: '',
etaTime:'',
showMisChargeMsg: false,
canCancelBooking:true,
showDirBtn:true,
cancenRecult:false,
maxRange:0,
showMsg:false,
showCancelApprovalMsg:false,
userData:null,
iconPath:'',
buttonStr:'',
showMsgBox:false,
popMsgStr:'',
cancelMsgStr:this.$t("bookingDetail.confirmCancel"),
showCancelMsg:false,
showCancelBooingMsg:false,
toCancelBooking:false,
backUrl:'',
calendarTitle:"",
defaultDate:[],
from:'',
changeStatusMsgStr:this.$t("bookingDetail.statusChange"),
showChangeMsg:false,
msgReservedStr:'',
showReservedMsg:false,
showRangePrompt:true,
isWaitlistRoom:false,
approveMsgStr:'',
cancelBookingMsgStr:'',
showApproveMsg:false,
approveStatus:'',
currentBookingStatus:'',
showWhenScreenshot: true,
opt: '',
isDaylight:false,
}
},
onLoad(opt) {
// 初始化界面
this.initUI();
this.playerData = uni.getStorageSync("playerData");
this.userData = uni.getStorageSync("userData");
if(opt.from!==undefined && opt.from!='') this.from = opt.from;
this.opt = opt;
this.getBooking(opt);
},
onShow() {
// 检查是否登录
// this.isLogin();
},
methods: {
handleShowWhenScreenshot(data) {
if (data == null || data == "") return "-";
return this.showWhenScreenshot ? data : "-";
},
// ETA 统一显示 HH:mm(兼容 HH:mm:ss / HH:mm)
formatEtaToHHmm(eta) {
if (eta === null || eta === undefined || eta === '') return '';
const str = String(eta).trim();
const m = str.match(/^(\d{1,2}):(\d{2})(?::\d{2})?$/);
if (m) {
const hh = m[1].padStart(2, '0');
return `${hh}:${m[2]}`;
}
const parts = str.split(':');
if (parts.length >= 2) {
return `${parts[0].padStart(2, '0')}:${parts[1]}`;
}
return str;
},
async changeMisCharge() {
if(this.misCharge!==null && this.misCharge!==""){
const newMisNum = Number(this.misCharge);
const existingMiscNum = Number(this.bookingData.miscCharge);
if(this.bookingData.lastOperaStatus=="CHECKED_IN" && newMisNum <= existingMiscNum){
uni.showToast({
title:this.$t("bookingDetail.miscChargeLess"),
icon: "none"
});
return;
}
uni.showLoading({
title: this.$t("common.loading")
});
try{
let params = {};
params.bookingId = this.bookingData.id;
params.misCharge = this.misCharge;
const res = await changeMisCharge(params);
if(res.success!==null && res.success == true){
this.iconPath = '../../static/images/ico_suc.png';
this.popMsgStr = this.$t("bookingDetail.changeMisChargeSuccess");
this.showMsgBox = true;
this.showETAMsg = false;
this.showMisChargeMsg = false;
this.getBooking(this.opt);
}else{
this.iconPath = '../../static/images/ico_err.png';
this.popMsgStr = this.$t("bookingDetail.changeMiscChargeFail");
this.showMsgBox = true;
this.showETAMsg = false;
this.showMisChargeMsg = false;
}
}catch(e){
}finally{
this.misCharge = '';
uni.hideLoading();
}
}else{
uni.showToast({
title:"Please input MisCharge",
icon: "none"
});
}
},
getBookingStatus() {
if (this.bookingData.approveStatus?.toUpperCase() !== 'N') {
const approvalStatus = this.bookingData.approveStatus;
// 審批狀態映射
const approvalStatusMap = {
'W': 'WAITLIST',
'AP': 'PENDING_APPROVAL'
};
return approvalStatusMap[approvalStatus] || null;
}
const lastOperaStatus = this.bookingData.lastOperaStatus?.toUpperCase();
// 主要狀態映射
const operaStatusMap = {
'RESERVED': 'RESERVED',
'DUE_IN': 'DUE_IN',
'CHECKED_IN': 'CHECKED_IN',
'DUE_OUT': 'DUE_OUT'
};
return operaStatusMap[lastOperaStatus] || null;
},
handleShowWhenScreenshot(data) {
if (data == null || data == "") return "-";
return this.showWhenScreenshot ? data : "-";
},
// 數據方法
async getBookingByConf(conf,id){
uni.showLoading({
title: this.$t("common.loading")
});
let requestBody = "";
try{
let params = {};
params.conf = conf;
requestBody = JSON.stringify(params);
const res = await getBookingByConf(params);
if(res!=null && res.success==true){
var pendBook = null;
var originBook = null;
if(res.data.length>0){
for(var b of res.data){
console.log(b.revisionOf);
if(b.revisionOf!=null&&(b.approveStatus=='PN')) {
pendBook = b;
}else if(b.revisionOf==null){
if(b.lastOperaStatus!=null&&b.id==id){
originBook = b;
}
}
}
if(pendBook!=null){
pendBook.extendDate = pendBook.dateList;
pendBook.dateList = originBook.dateList;
this.bookingData = pendBook;
}else{
this.bookingData = originBook;
}
}else{
this.bookingData = res.data[0];
}
if(this.bookingData.requestedCoDate!=null){
let ciDate = this.bookingData.checkoutDate;
let coDatge = dayjs(this.bookingData.requestedCoDate).format("YYYY-MM-DD");
console.log(dayjs(coDatge),dayjs(ciDate))
let dateObj = {
date:[ciDate,coDatge],
numOfNight:dayjs(coDatge).diff(dayjs(ciDate),'days'),
numOfRoom:1,
}
this.bookingData.extendDate = [];
this.bookingData.extendDate.push(dateObj)
this.showExtend = true;
}
this.checkBookingStatus();
this.minDate = dayjs(this.bookingData.dateList[0].date.at(-1)).format("YYYY-MM-DD");
if(this.bookingData.roomForBooking==0&&this.bookingData.roomForWaitlist==1){
this.showRangePrompt = false;
this.isWaitlistRoom = true;
}else{
this.showRangePrompt = true;
this.isWaitlistRoom = false;
}
this.msgDisplay();
this.getSetting();
console.log(this.bookingData.dateList);
this.buildCancelDateOptions();
const status = this.getBookingStatus();
if (status) {
this.currentBookingStatus = status;
}
}
else
{
// write log
uni.$u.toast(res.message,5000);
await this.writeLog(this.userData.userId,"save_booking","","[APP][bookingDetail.vue][getBookingByConf][ErrorMessage]"+res.message,"[RequestData]" + requestBody,"",1,false);
}
}catch(e){
// write log
console.error(e);
uni.$u.toast(e.errMsg,5000);
var request = e.config!=undefined?JSON.stringify(e.config):"";
var response = e.data!=undefined?JSON.stringify(e.data):"";
await this.writeLog(this.userData.userId,"save_booking","","[APP][bookingDetail.vue][getBookingByConf][Catch Exception]"+e.errMsg,request,response,1,false);
}finally{
uni.hideLoading();
}
},
showCancelPopup() {
this.iconPath = '../../static/images/warn.png';
this.popMsgStr = this.$t("bookingDetail.cancelBooking") ;
this.showMsgBox = true; // 显示整个弹窗
this.showDirBtn = false; // 显示内部特定内容
// console.log(this.bookingData.dateList[0].date);
},
buildCancelDateOptions() {
this.showDate = [];
this.cancelDateList = [];
this.checkNullList = [];
const dates = this.bookingData && this.bookingData.dateList && this.bookingData.dateList[0]
? this.bookingData.dateList[0].date
: [];
for(let i=0;i<dates.length;i++){
if(dates[i+1]!=undefined&&dates[i+1]!=null){
this.showDate.push(dates[i]+" To "+dates[i+1]);
}
}
},
showExtendLayout(){
if(this.userData.canNewBooking&&(this.bookingData.lastOperaStatus.toUpperCase() === 'CHECKED_IN' || this.bookingData.lastOperaStatus.toUpperCase() === 'DUE_OUT')){
return true;
}else{
return false;
}
},
showOtherPopup(){
uni.showToast({
title:this.$t("bookingDetail.cannotCancel"),
icon: "none"
});
},
closeCancelPopup() {
this.showMsgBox = false; // 关闭整个弹窗
this.showDirBtn = true;
if(this.cancelResult) {
if(this.backUrl !=null && this.backUrl !== undefined && this.backUrl !==''){
this.navTo(this.backUrl,0,false);
}
this.cancelResult = false;
}
},
handleDateSelect(e){
this.cancelDateList = this.showDate.filter(String => !e.includes(String));
this.checkNullList = e;
},
async getBookingById(id){
uni.showLoading({
title: this.$t("common.loading")
});
let requestBody = "";
try{
let params = {};
params.id = id;
requestBody = JSON.stringify(params);
const res = await getBookingById(params);
if(res!=null && res.success==true){
this.bookingData = res.data[0];
this.checkBookingStatus()
this.minDate = dayjs(this.bookingData.dateList[0].date.at(-1)).format("YYYY-MM-DD");
this.msgDisplay();
this.getSetting();
this.buildCancelDateOptions();
this.currentBookingStatus = this.getBookingStatus();
}
else
{
// write log
uni.$u.toast(res.message,5000);
await this.writeLog(this.userData.userId,"save_booking","","[APP][bookingDetail.vue][getBookingById][ErrorMessage]"+res.message,"[RequestData]" + requestBody,"",1,false);
}
}catch(e){
// write log
console.error(e);
uni.$u.toast(e.errMsg,5000);
var request = e.config!=undefined?JSON.stringify(e.config):"";
var response = e.data!=undefined?JSON.stringify(e.data):"";
await this.writeLog(this.userData.userId,"save_booking","","[APP][bookingDetail.vue][getBookingById][Catch Exception]"+e.errMsg,request,response,1,false);
}finally{
uni.hideLoading();
}
},
getBookingStatus() {
if (this.bookingData.approveStatus?.toUpperCase() !== 'N') {
const approvalStatus = this.bookingData.approveStatus;
// 審批狀態映射
const approvalStatusMap = {
'W': 'WAITLIST',
'AP': 'PENDING_APPROVAL'
};
return approvalStatusMap[approvalStatus] || null;
}
const lastOperaStatus = this.bookingData.lastOperaStatus?.toUpperCase();
// 主要狀態映射
const operaStatusMap = {
'RESERVED': 'RESERVED',
'DUE_IN': 'DUE_IN',
'CHECKED_IN': 'CHECKED_IN',
'DUE_OUT': 'DUE_OUT'
};
return operaStatusMap[lastOperaStatus] || null;
},
msgDisplay(){
if(this.bookingData.approveStatus!=null && (this.bookingData.approveStatus.toUpperCase() === 'PN'||
(this.bookingData.approveStatus.toUpperCase() === 'F'&&this.bookingData.tryTime<5) )){ // pending和pending extend的时候
this.showTabbar = false;
this.msgStr = this.$t("bookingDetail.pendingAlert") ;
if(this.bookingData.lastOperaStatus!=null &&
(this.bookingData.lastOperaStatus.toUpperCase() === 'CHECKED_IN' || this.bookingData.lastOperaStatus.toUpperCase() === 'DUE_OUT') &&
(this.bookingData.approveStatus.toUpperCase() === 'PN') ){
this.showExtend = true;
//this.showTabbar = true;
this.msgStr = this.$t("common.confirmationNo") +': '+ this.bookingData.confirmationNo;
}
}
else if(this.bookingData.approveStatus!=null && this.bookingData.approveStatus.toUpperCase() === 'F'){ // waitlist的时候
this.showTabbar = false;
this.msgStr = this.bookingData.errorMessage!=""?this.bookingData.errorMessage:"System Error";
}
else if(this.bookingData.approveStatus!=null && (this.bookingData.approveStatus.toUpperCase() === 'W' ||this.bookingData.approveStatus.toUpperCase()==='WA')){ // waitlist的时候
this.showTabbar = true;
this.msgStr = this.$t("bookingDetail.waitlistAlert") ;
if(this.bookingData.lastOperaStatus!=null && (this.bookingData.lastOperaStatus.toUpperCase() === 'CHECKED_IN' || this.bookingData.lastOperaStatus.toUpperCase() === 'DUE_OUT')){
this.showExtend = false;
this.showTabbar = true;
// this.msgStr = this.$t("common.confirmationNo") +': '+ this.bookingData.confirmationNo;
this.msgStr = this.$t("bookingDetail.waitlistAlert") ;
}
}
else if(this.bookingData.approveStatus!=null && (this.bookingData.approveStatus.toUpperCase() === 'AP')){ // waitlist的时候
this.showTabbar = true;
this.msgStr = this.$t("bookingDetail.approvalAlert") ;
if(this.bookingData.lastOperaStatus!=null && (this.bookingData.lastOperaStatus.toUpperCase() === 'CHECKED_IN' || this.bookingData.lastOperaStatus.toUpperCase() === 'DUE_OUT')){
this.showExtend = false;
this.showTabbar = true;
// this.msgStr = this.$t("common.confirmationNo") +': '+ this.bookingData.confirmationNo;
this.msgStr = this.$t("bookingDetail.approvalAlert") ;
}
}
else if(this.bookingData.lastOperaStatus.toUpperCase() === 'PENDING CANCEL'){
this.showTabbar = false;
this.msgStr = this.$t("common.confirmationNo") +': '+ this.bookingData.confirmationNo;
}
else{
// extend情況
if(this.bookingData.lastOperaStatus!=null && (this.bookingData.lastOperaStatus.toUpperCase() === 'CHECKED_IN' || this.bookingData.lastOperaStatus.toUpperCase() === 'DUE_OUT')){
this.showTabbar = true;
this.msgStr = this.$t("common.confirmationNo") +': '+ this.bookingData.confirmationNo ;
}
// DUE IN
else if(this.bookingData.lastOperaStatus!=null && (this.bookingData.lastOperaStatus.toUpperCase() === 'DUE_IN' || this.bookingData.lastOperaStatus.toUpperCase() === 'RESERVED')){
this.showTabbar = true;
this.msgStr = this.$t("common.confirmationNo") +': '+ this.bookingData.confirmationNo ;
}
// CHECKED OUT
else if(this.bookingData.lastOperaStatus!=null && this.bookingData.lastOperaStatus.toUpperCase() === 'CHECKED_OUT'){
this.showTabbar = true;
this.msgStr = this.$t("common.confirmationNo") +': '+ this.bookingData.confirmationNo ;
}
}
},
getBooking(opt){
// 如果存在conf,去replicated db拿;
if(opt.conf !== null && opt.conf!==undefined && opt.conf!=='' && opt.conf!=='null' ){
this.getBookingByConf(opt.conf,opt.id);
}
// 否则通过id拿
else if(opt.id!==null && opt.id!==undefined && opt.id!=='' && opt.id!=='null'){
this.getBookingById(opt.id);
}
},
// 界面方法
// #ifdef APP-PLUS
async captureWebview() {
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');
// 将webview内容绘制到Bitmap对象中
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.NotCapping = true;
_this.showTabbar = true;
_this.showWhenScreenshot = true;
//保存到相册
plus.gallery.save(e.target,(e)=>{
plus.nativeUI.toast(_this.$t("common.picSaveSuccess"))
})
},
function(e){
console.log('保存图片失败:'+JSON.stringify(e));
_this.NotCapping = true;
_this.showTabbar = true;
_this.showWhenScreenshot = true;
});
_this.capture = bitmap.toBase64Data();
//保存到相册后,回收Bitmap图片内存
bitmap.recycle();
},function(e){
console.log('截屏绘制图片失败:'+JSON.stringify(e));
_this.NotCapping = true;
_this.showTabbar = true;
_this.showWhenScreenshot = true;
});
},
// #endif
back(){
if(this.from==='booking'){
this.navTo("/pages/findPlayer/findPlayer",1,false);
}else{
this.navBack();
}
},
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){
// uni.setLocale(e.value[0].code);
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.msgStr = this.$t("common.confirmationNo") +": " + this.bookingData.confirmationNo ;
this.showPicker = false;
this.captureWebview();
},
async popupCalendar(){
if(this.maxRange<=this.bookingData.dateList[0].numOfNight){
this.showMsg = true;
return;
}
await this.buildCalendar();
this.showCalendar = true;
},
formatter(day) {
let cdate = dayjs(day.date).format("YYYY-MM-DD");
if(this.bookingData.dateList!=null && this.bookingData.dateList.length>0){
for(let i=0;i<this.bookingData.dateList[0].date.length-1;i++){
let date = this.bookingData.dateList[0].date[i];
if(cdate == date){
day.bottomInfo = 'Check-in'
day.dot = true;
day.disabled = true;
}
}
}
let startDate = dayjs(this.bookingData.dateList[0].date.at(-1));
let endDate = dayjs(this.maxDate);
if(this.criteriaList!=null){
// console.log( dayjs(day.date).isAfter(startDate),dayjs(day.date).isSame(startDate,'day'),
// dayjs(day.date).isBefore(endDate),dayjs(day.date).isSame(endDate,'day'),
// cdate,startDate.format("YYYY-MM-DD"),endDate.format("YYYY-MM-DD"))
if( ( dayjs(day.date).isAfter(startDate) || dayjs(day.date).isSame(startDate,'day')) &&
( dayjs(day.date).isBefore(endDate) ||dayjs(day.date).isSame(endDate,'day')) ){
// console.log(cdate)
var operaStatus = this.bookingData.lastOperaStatus;
var checkExp = (operaStatus.toUpperCase()==='CHECKED_IN')||(operaStatus.toUpperCase()==='DUE_OUT');
if((this.bookingData.expDate==null||this.bookingData.expDate=='')&&checkExp){
day.disabled = true;
}else if(this.bookingData.expDate!="FORM"&&dayjs(day.date).isAfter(dayjs(this.bookingData.expDate),'day')
&&checkExp){
day.disabled = true;
}else{
if(this.criteriaList[cdate]!=undefined){
let criteria =this.criteriaList[cdate];
if(criteria.isWaitlist==1){
day.bottomInfo = 'Waitlist'
day.dot = true
}
if(criteria.protection==1){
day.bottomInfo = 'Protect'
day.dot = true
}
if(criteria.reserved==1){
day.bottomInfo = 'Reserved'
day.dot = true
}
if(criteria.available<=0){
if(!this.isDaylight){
day.bottomInfo = 'APP Full'
day.dot = true
}
}
}else{
if(dayjs(day.date).isBefore(dayjs(),'day')){
day.disabled = true;
}else{
if(!this.isDaylight){
day.bottomInfo = 'APP Full'
day.dot = true
}
}
}
}
}
}
return day
},
// ETA 统一显示 HH:mm(兼容 HH:mm:ss / HH:mm)
formatEtaToHHmm(eta) {
if (eta === null || eta === undefined || eta === '') return '';
const str = String(eta).trim();
const m = str.match(/^(\d{1,2}):(\d{2})(?::\d{2})?$/);
if (m) {
const hh = m[1].padStart(2, '0');
return `${hh}:${m[2]}`;
}
const parts = str.split(':');
if (parts.length >= 2) {
return `${parts[0].padStart(2, '0')}:${parts[1]}`;
}
return str;
},
async changeMiscCharge() {
if(this.misCharge!==null && this.misCharge!==""){
const newMisNum = Number(this.misCharge);
const existingMiscNum = Number(this.bookingData.miscCharge);
if(this.bookingData.lastOperaStatus=="CHECKED_IN" && newMisNum <= existingMiscNum){
uni.showToast({
title:this.$t("bookingDetail.miscChargeLess"),
icon: "none"
});
return;
}
uni.showLoading({
title: this.$t("common.loading")
});
try{
let params = {};
params.bookingId = this.bookingData.id;
params.misCharge = this.misCharge;
const res = await changeMiscCharge(params);
if(res.success!==null && res.success == true){
this.iconPath = '../../static/images/ico_suc.png';
this.popMsgStr = this.$t("bookingDetail.changeMiscChargeSuccess");
this.showMsgBox = true;
this.showETAMsg = false;
this.showMisChargeMsg = false;
this.getBooking(this.opt);
}else{
this.iconPath = '../../static/images/ico_err.png';
this.popMsgStr = this.$t("bookingDetail.changeMiscChargeFail");
this.showMsgBox = true;
this.showETAMsg = false;
this.showMisChargeMsg = false;
}
}catch(e){
}finally{
this.misCharge = '';
uni.hideLoading();
}
}else{
uni.showToast({
title:"Please input MisCharge",
icon: "none"
});
}
},
// 時間格式方法
isValid24HourTime(timeStr) {
if (!timeStr) return false;
const regex = /^([01]?[0-9]|2[0-3]):[0-5][0-9]$/;
return regex.test(timeStr);
},
// isValid24HourTime() {
// return function(timeStr){
// //检查输入时间是否违法
// console.log(timeStr);
// const timeRegex = /^([01]?[0-9]|2[0-3]):[0-5][0-9]$/;
// console.log(timeRegex.test(timeStr))
// return timeRegex.test(timeStr);
// }
// },
async submitETA() {
let paramData = {
items:[]
};
let hotelName = null;
let item={ };
item.hotelName = this.bookingData.propertyName;
item.confNo = this.bookingData.confirmationNo;
if (Object.keys(item).length > 0) {
paramData.items.push(item);
}
// 关闭模态框
uni.showLoading({
title: this.$t("common.loading")
});
let params = {};
params.id = this.bookingData.id;
// 获取用户输入的时间字符串
const etaTimeStr = this.etaTime;
// 檢驗etaTime不能為空
if (!etaTimeStr || etaTimeStr.trim() === '') {
uni.hideLoading();
uni.showToast({ title: this.$t("todo.etaRequired"), icon: "none" });
this.etaTime = '';
return;
}
params.ETATime = `${etaTimeStr.slice(0, 2)}:${etaTimeStr.slice(2)}`;
// 檢驗輸入時間格式是否為24小時制
if (!this.isValid24HourTime(params.ETATime)) {
uni.hideLoading();
uni.showToast({ title: this.$t("todo.etaFormatError"), icon: "none" });
this.etaTime = '';
return;
}
try{
if(this.isValid24HourTime(params.ETATime)){
params.recordInfo = paramData.items;
params.playerId = this.bookingData.playerId;
this.itemOpen = 'none';
const res = await submitETA(params);
if(res.success!==null && res.success == true){
this.iconPath = '../../static/images/ico_suc.png';
this.popMsgStr = this.$t("todo.etaSuccess");
this.showMsgBox = true;
this.showETAMsg = false;
this.getBooking(this.opt);
}else{
if(res.errorCode == 'NO_RECORD'){
this.popMsgStr = this.$t("todo.etaFail")+":[ErrorMessage]:"+ this.$t("todo.notRecord");
}else if(res.errorCode == 'MISS_PARAMETER'){
this.popMsgStr = this.$t("todo.etaFail")+":[ErrorMessage]:"+ this.$t("todo.missParams");
}else{
this.popMsgStr = this.$t("todo.etaFail")+":[ErrorMessage]:"+ res.errorCode;
}
this.showMsgBox = true;
this.showMisChargeMsg = false;
}
}else{
this.iconPath = '../../static/images/ico_err.png';
this.popMsgStr = this.$t("todo.etaFail")+":[ErrorMessage]:"+this.$t("todo.etaFormatError");
this.showMsgBox = true;
}
}catch(e){
this.iconPath = '../../static/images/ico_err.png';
this.popMsgStr = this.$t("todo.etaFail")+":[ErrorMessage]:"+ e.data.error;
this.showMsgBox = true;
}finally{
this.etaTime = '';
uni.hideLoading();
}
// 使用父组件的closeAll方法关闭所有滑块
this.$nextTick(() => {
const swipeRef = this.$refs.swipeAction;
if (!swipeRef) return;
// 查找uni-swipe-action父组件
let parent = this.$refs.swipeAction.$parent;
while (parent && parent.$options.name !== 'uniSwipeAction') {
parent = parent.$parent;
}
if (parent && parent.closeAll) {
parent.closeAll();
}
// 直接设置组件状态
if (this.$refs.swipeAction) {
this.$refs.swipeAction.is_show = 'none';
}
});
},
confirmDate(e){
this.bookingData.criteriaList = [];
this.bookingData.extendDate = [];
this.bookingData.bookType = '1';
let objDate ={
date:e,
status:"1",
checked:false,
remark:'',
numOfNight:dayjs(e[e.length-1]).diff(dayjs(e[0]),'day'),
numOfRoom:1,
submit:false,
bookingStatus:'',
cancelResult:false,
};
for(let i=0;i<e.length;i++){
const date = e[i];
const criterias = this.criteriaList;
if(criterias[date]){
this.bookingData.criteriaList.push(criterias[date]);
}
}
var isWaitlist = false;
var waitlistCount = 0;
var criteriaCount = e.length - 1;
for (var d = 0; d < criteriaCount; d++) {
var date = e[d];
if (this.criteriaList[date] != undefined) {
if (this.criteriaList[date].isWaitlist == 1) {
isWaitlist = true;
waitlistCount++;
}
}
}
if(waitlistCount==criteriaCount||(this.bookingData.roomForBooking==0&&this.bookingData.roomForWaitlist==1)){
this.isWaitlistRoom = true;
}else{
this.isWaitlistRoom = false;
}
if(this.isWaitlistRoom == false){
var consecutiveRes = this.checkConsecutiveNight(e[0],dayjs(e[e.length-1]).diff(dayjs(e[0]),'day'));
if(!consecutiveRes) return false;
}
let checkDate =JSON.parse(JSON.stringify(e));
checkDate.pop();
if(!this.checkDate(checkDate)) return false;
this.bookingData.checkInDate = e[0];
this.bookingData.checkOutDate = e[e.length-1];
this.bookingData.changeCheckinDate = this.bookingData.checkinDate;
this.bookingData.changeCheckoutDate = e[e.length-1];
this.bookingData.extendDate.push(objDate);
this.bookingData.user = this.userData;
uni.setStorageSync("bookingData",this.bookingData);
this.navTo("/booking/bookingConfirm/bookingConfirm");
this.showCalendar = false;
},
cancelDate(){
this.showCalendar = false;
},
/*setLocale(){
const locale = uni.getLocale();
if(locale==='en'){
uni.setLocale('zh-Hant');
this.$i18n.locale = 'zh-Hant';
this.lang = 'English';
}else{
uni.setLocale('en');
this.$i18n.locale = 'en';
this.lang = '繁體中文';
}
this.title = this.$t("bookingDetail.title");
this.msgStr = this.$t("common.confirmationNo") +": " + this.bookingData.confirmationNo ;
},*/
initUI() {
this.deviceData = uni.getStorageSync("deviceData");
this.title = this.$t("bookingDetail.title");
//this.windowWidth = this.deviceData.windowWidth*0.95;
// 判斷iphone下方安全區域
const area = this.deviceData.saveArea;
if(area){
this.footFuncHei = 60;
}
this.lang = this.mapLocale(uni.getLocale());
},
async getSetting(){
uni.showLoading({
title: this.$t("common.loading")
});
var that = this;
const today = new Date();
try{
let params = {};
let cancelStart = '';
let cancelEnd = '';
let enAble = false;
const res = await getSetting(params);
if(res!=null && res.success==true){
for(let i of res.data){
if(i.keys=="MAX_BOOKING_STAY_DAYS"){
let stay = i.keyValues;
if(this.isWaitlistRoom==true){
let mDate = dayjs(that.bookingData.checkinDate).add(999,'day').format("YYYY-MM-DD");
that.maxDate = mDate;
}else{
let mDate = dayjs(that.bookingData.checkinDate).add(stay,'day').format("YYYY-MM-DD");
that.maxDate = mDate
}
that.maxRange = stay;
}
// 获取时间区间
if(i.keys=="OTHERBOOKING_CANCEL_START"){
cancelStart = i.keyValues;
}else if(i.keys=="OTHERBOOKING_CANCEL_END"){
cancelEnd = i.keyValues;
}
// 判断方法是否ENABLE
if(i.keys=="CAN_CANCEL_OTHERBOOKING" && i.keyValues == '1'){
if(this.bookingData.propertyCategory == 'OTHER'){
enAble = true;
}
}
// console.log(that.maxRange)
}
if(this.bookingData.propertyCategory == 'DAYLIGHT'){
this.isDaylight = true;
}else{
this.isDaylight = false;
}
if(enAble){
let today = new Date();
let currentHour = today.getHours();
let currentMinute = today.getMinutes();
// 解析 start 和 end 时间
let startHour = parseInt(cancelStart.split(":")[0]);
let startMinute = parseInt(cancelStart.split(":")[1] || 0);
let endHour = parseInt(cancelEnd.split(":")[0]);
let endMinute = parseInt(cancelEnd.split(":")[1] || 0);
// 将当前时间转换为分钟总数以便比较
let totalCurrent = currentHour * 60 + currentMinute;
let totalStart = startHour * 60 + startMinute;
let totalEnd = endHour * 60 + endMinute;
// 判断当前时间是否在 [start, end) 区间内
if (totalCurrent >= totalStart && totalCurrent < totalEnd
&& that.bookingData.confirmationNo !== null && that.bookingData.confirmationNo !== undefined && that.bookingData.confirmationNo !== "") {
that.canCancelBooking = true;
} else {
that.canCancelBooking = false;
}
}
}
else
{
// write log
uni.$u.toast(res.message,5000);
await this.writeLog(this.userData.userId,"save_booking","","[APP][bookingDetail.vue][getSetting][ErrorMessage]"+res.message,"[RequestData]" + JSON.stringify(params),"",1,false);
}
}catch(e){
console.error(e);
// write log
uni.$u.toast(e.errMsg,5000);
await this.writeLog(this.userData.userId,"save_booking","","[APP][bookingDetail.vue][getSetting][Catch Exception]"+e.errMsg,"[RequestData]" +JSON.stringify(params),"",1,false);
}finally{
uni.hideLoading();
}
},
async buildCalendar(){
uni.showLoading({
title: this.$t("common.loading")
});
try{
this.calendarTitle = this.dateFormat(this.bookingData.dateList[0].date[0]) + " "+this.$t("common.to") + " "+
this.dateFormat(this.bookingData.dateList[0].date.at(-1)) + ";";
this.defaultDate = [this.bookingData.dateList[0].date.at(-1)];
let params = {
roomId:this.bookingData.roomId,
propertyId:this.bookingData.propertyId,
userId:this.userData.userId,
playerId:this.playerData.playerId,
coded:this.playerData.codedFlag,
sectionId:this.userData.sectionId,
blockId:this.bookingData.blockId,
segmentId:this.bookingData.segmentId,
bookingTypeId: this.bookingData.bookingTypeId
};
const res = await getCriterias(params);
console.log(this.bookingData.bookingTypeId);
if(res.success === true){
this.criteriaList = [];
if(res.data!==undefined && res.data!==null){
this.criteriaList = res.data;
}
}else{
// write log
uni.$u.toast(res.message,5000);
await this.writeLog(this.userData.userId,"save_booking","","[APP][bookingDetail.vue][buildCalendar][ErrorMessage]"+res.message,"[RequestData]" + JSON.stringify(params),"",1,false);
}
}catch(e){
// write log
uni.$u.toast(e.errMsg,5000);
var request = e.config!=undefined?JSON.stringify(e.config):"";
var response = e.data!=undefined?JSON.stringify(e.data):"";
await this.writeLog(this.userData.userId,"save_booking","","[APP][bookingDetail.vue][buildCalendar][Catch Exception]"+e.errMsg,"[RequestData]" +JSON.stringify(params),response,1,false);
}finally{
uni.hideLoading();
}
},
async handleCancelBooking(){
uni.showLoading({
title: this.$t("common.loading")
});
let res = [];
this.cancelBookingMsgStr = this.$t("bookingDetail.toCancelBooking");
this.closeCancelPopup();
try{
if(this.cancelDateList.length>0){
// 判断cancelbooking还是changeDate
if(this.cancelDateList.length===1){
let checkinDate = this.cancelDateList[0].split(" To ")[0];
let checkoutDate = this.cancelDateList[0].split(" To ")[1];
let submitBookingData = this.bookingData;
submitBookingData.checkinDate = checkinDate;
submitBookingData.checkoutDate = checkoutDate;
// 获取userInfo
submitBookingData.userId = this.userData.userId;
submitBookingData.userName = this.userData.userName;
res = await changeDate(submitBookingData);
}else{
// 将日期从字符串中分离出来并剔除重复的日期
let submitList = [];
for(let i=0;i<this.cancelDateList.length;i++){
submitList.push(this.cancelDateList[i].split(" To ")[1]);
}
submitList = [...new Set(submitList)];
if(this.checkDateList(submitList)){
let checkinDate = this.cancelDateList[0].split(" To ")[0];
let checkoutDate = this.cancelDateList[this.cancelDateList.length-1].split(" To ")[1];
let submitBookingData = this.bookingData;
submitBookingData.checkinDate = checkinDate;
submitBookingData.checkoutDate = checkoutDate;
// 获取userInfo
submitBookingData.userId = this.userData.userId;
submitBookingData.userName = this.userData.userName;
res = await changeDate(submitBookingData);
}else{
res.errorCode = this.$t("bookingDetail.errorDate");
}
}
}else if(this.checkNullList.length !== 0 && this.cancelDateList.length === 0){
res = await cancelBooking(this.bookingData);
}else{
res.errorCode = this.$t("bookingDetail.nullDate");
}
this.cancelDateList = [];
this.showDirBtn = true; // 显示内部特定内容
if(res.success==true){
this.cancelResult = true;
this.iconPath = '../../static/images/ico_suc.png';
this.backUrl = '/booking/bookingRecord/bookingRecord?from=booking';
this.popMsgStr = this.$t("bookingDetail.cancelSuccessful") ;
this.showMsgBox = true;
}
// 保存失敗彈出錯誤提示框
else
{
this.cancelResult = false;
this.buttonStr = this.$t("common.ok");
this.iconPath = '../../static/images/ico_err.png';
this.backUrl = '';
this.showMsgBox = true;
console.log(res.errorCode)
if(res.errorCode == "ERR_CANCEL_TIME"){
this.popMsgStr = this.$t("bookingDetail.cancelFailed") + ". \n["+this.$t("common.errorMsg")+"]: "+ this.$t("bookingDetail.cancelTimeErr"); // 具體的錯誤信息
}else{
this.popMsgStr = this.$t("bookingDetail.cancelFailed") + ". \n["+this.$t("common.errorMsg")+"]: "+ res.errorCode; // 具體的錯誤信息
}
}
}
catch(e){
console.log(e);
}
finally{
uni.hideLoading();
}
},
async cancelWaitlist(){
uni.showLoading({
title: this.$t("common.loading")
});
try{
let params = {'id':this.bookingData.id,'userId':this.userData.userId};
const res = await cancelWaitlistBooking(params);
// 保存數據成功,彈出對話框,點Back返回bookingRecord
if(res.success==true){
this.cancelResult = true;
this.buttonStr = this.$t("bookingConfirm.backToRecords").toUpperCase();
this.iconPath = '../../static/images/ico_suc.png';
this.popMsgStr = this.$t("bookingDetail.cancelSuccessful") ;
this.bookingData.approveStatus = 'WC';
this.backUrl = '/booking/bookingRecord/bookingRecord?from=booking';
this.showMsgBox = true;
}
// 保存失敗彈出錯誤提示框
else
{
this.buttonStr = this.$t("common.ok");
this.iconPath = '../../static/images/ico_err.png';
this.popMsgStr = this.$t("bookingDetail.cancelFailed") + ". \n["+this.$t("common.errorMsg")+"]: "+ res.errorCode; // 具體的錯誤信息
this.backUrl = '';
this.showMsgBox = true;
}
}catch(e){
// write log
}finally{
this.showCancelMsg = false;
uni.hideLoading();
}
},
async cancelApproval(){
uni.showLoading({
title: this.$t("common.loading")
});
try{
let params = {'id':this.bookingData.id,'userId':this.userData.userId};
const res = await cancelApproval(params);
// 保存數據成功,彈出對話框,點Back返回bookingRecord
if(res.success==true){
this.cancelResult = true;
this.buttonStr = this.$t("bookingConfirm.backToRecords").toUpperCase();
this.iconPath = '../../static/images/ico_suc.png';
this.popMsgStr = this.$t("bookingDetail.cancelSuccessful") ;
this.bookingData.approveStatus = 'AC';
this.backUrl = '/booking/bookingRecord/bookingRecord?from=booking';
this.showMsgBox = true;
}
// 保存失敗彈出錯誤提示框
else
{
this.buttonStr = this.$t("common.ok");
this.iconPath = '../../static/images/ico_err.png';
this.popMsgStr = this.$t("bookingDetail.cancelFailed") + ". \n["+this.$t("common.errorMsg")+"]: "+ res.errorCode; // 具體的錯誤信息
this.backUrl = '';
this.showMsgBox = true;
}
}catch(e){
// write log
}finally{
this.showCancelMsg = false;
uni.hideLoading();
}
},
approveWaitlistAlert(type){
if(type==1){
this.approveMsgStr = this.$t("bookingDetail.confirmReject");
this.approveStatus = "WR";
}else{
this.approveMsgStr = this.$t("bookingDetail.confirmApprove");
this.approveStatus = "WA";
}
console.log(this.showApproveMsg)
this.showApproveMsg = true;
},
async approveWaitlist(){
uni.showLoading({
title: this.$t("common.loading")
});
try{
let params = {
'id':this.bookingData.id,
'userId':this.userData.userId,
'status':this.approveStatus,
'userName':this.userData.userName,
};
const res = await approveWaitlistBooking(params);
// 保存數據成功,彈出對話框,點Back返回bookingRecord
if(res.success==true){
this.buttonStr = this.$t("bookingConfirm.backToRecords").toUpperCase();
this.iconPath = '../../static/images/ico_suc.png';
this.popMsgStr = this.$t("bookingDetail.approve")+this.$t("bookingDetail.successfully") ;
this.bookingData.approveStatus = 'WC';
this.backUrl = '/booking/bookingRecord/bookingRecord?from=booking';
this.showMsgBox = true;
}
// 保存失敗彈出錯誤提示框
else
{
this.buttonStr = this.$t("common.ok");
this.iconPath = '../../static/images/ico_err.png';
this.popMsgStr = this.$t("bookingDetail.reject")+this.$t("bookingDetail.failed") + ". ["+this.$t("common.errorMsg")+"]: "+ res.errorCode; // 具體的錯誤信息
this.backUrl = '';
this.showMsgBox = true;
}
}catch(e){
// write log
}finally{
this.showCancelMsg = false;
uni.hideLoading();
}
},
navToDetail(url){
if(url!=null && url!==undefined && url!==''){
this.navTo(url,0,false);
}else{
this.showMsgBox = false;
}
},
showCancelData(){
this.showDirBtn = false;
},
checkDateList(dateList) {
let result = false;
for(let i=0;i<dateList.length;i++){
if(dateList[i+1]!=undefined&&dateList[i+1]!=null){
const date1 = new Date(dateList[i]);
const date2 = new Date(dateList[i+1]);
// 计算时间差(毫秒)
const timeDiff = Math.abs(date1 - date2);
// 转换为天数差(86400000毫秒=1天)
const dayDiff = timeDiff / (1000 * 60 * 60 * 24);
result = dayDiff === 1 ? true : false;
if(result === false){
return false;
}
}
}
return result;
},
checkDate(date){
var protectList = [];
var fullList = [];
var reservedList = [];
var stayingList = [];
var waitList = [];
for(let d of date){
if(this.criteriaList[d]!=undefined){
if(this.criteriaList[d].available<=0) fullList.push(d);
if(this.criteriaList[d].protection==1) protectList.push(d);
if(this.criteriaList[d].staying==1||this.criteriaList[d].reserved==1) stayingList.push(d);
if(this.criteriaList[d].reserved==1) reservedList.push(d);
if(this.criteriaList[d].isWaitlist==1) waitList.push(d);
}else{
fullList.push(d);
}
}
if(fullList.length>0 && !this.isDaylight){
let msg = this.$t("newBooking.appFull");
msg += " "+fullList.join(',')
uni.$u.toast(msg,5000);
return false;
}
// if(stayingList.length>0){
// let msg = this.$t("newBooking.sameBooking");
// msg += " "+stayingList.join(',')
// uni.$u.toast(msg,5000);
// return false;
// }
if(this.isWaitlistRoom==false){
if(protectList.length>0){
let msg = this.$t("newBooking.protectionPeriod");
msg += " "+protectList.join(',')
uni.$u.toast(msg,5000);
return false;
}
}
// if(waitList.length>0){
// let msg = this.$t("newBooking.waitlist");
// msg += " "+waitList.join(',')
// uni.$u.toast(msg,5000);
// return false;
// }
//disabled waitlist
// if(reservedList.length>0){
// let msg = this.$t("newBooking.reservedBooking");
// msg += " "+reservedList.join(',')
// this.msgReservedStr = msg;
// this.showReservedMsg = true;
// return false;
// }
return true;
},
async rangeSelected(e){
var title = this.calendarTitle;
var current = title.split(';')[0];
var extend = this.calendarTitle = this.dateFormat(e[0]) + " "+this.$t("common.to") + " "+
this.dateFormat(e[e.length-1]) ;
this.calendarTitle = current+";"+extend
},
checkBookingStatus(){
var status = this.bookingData?.approveStatus;
if(status=="WC"||status=="WE"||status=="WF"||status==undefined){
this.showChangeMsg = true;
this.backUrl = '/booking/bookingRecord/bookingRecord?from=booking';
}
},
confirmReservedMsg(){
this.showReservedMsg = false;
this.showCalendar = false;
this.navTo("/booking/bookingConfirm/bookingConfirm");
},
checkConsecutiveNight(checkInDate,night){
var dataList = [];
var range = parseInt(this.maxRange)+1-night;
for(var i=1;i<=range;i++){
var date = dayjs(checkInDate).subtract(i,'day').format("YYYY-MM-DD");
var day = this.criteriaList[date]
if(day){
if(day.reserved!=undefined){
if(day.reserved==1) dataList.push(day);
}
if(day.staying!=undefined){
if(day.staying==1) dataList.push(day);
}
}
}
if(dataList.length == range){
uni.$u.toast(`${this.$t("newBooking.maxNight1")} ${this.maxRange} ${this.$t("newBooking.maxNight2")}`,5000)
return false;
}else{
return true;
}
},
},
computed:{
getCardColor(){
return function (booking) {
let operaStatus = null;
if(booking==null){
return '';
}
if(booking.lastOperaStatus!=null){
operaStatus = booking.lastOperaStatus;
}
let approveStatus = null;
if(booking.approveStatus!=null){
approveStatus = booking.approveStatus;
}
if(approveStatus!==null){
if(approveStatus.toUpperCase()==='AP'){
return 'hz-card-approval';
}
else{
return 'hz-card-booking';
}
}else{
return 'hz-card-booking';
}
}
},
getStatusColor(){
return function (booking) {
let operaStatus = null;
if(booking==null){
return '';
}
if(booking.lastOperaStatus!=null){
operaStatus = booking.lastOperaStatus;
}
let approveStatus = null;
if(booking.approveStatus!=null){
approveStatus = booking.approveStatus;
}
// Opera和Approve Status都不为空的情况
if((operaStatus!=null && operaStatus!=undefined) || (approveStatus!=null && approveStatus!=undefined))
{
if(approveStatus.toUpperCase()==='PN' ||approveStatus.toUpperCase()==='F'){
return 'hz-status-pending';
}else if(approveStatus.toUpperCase()==='N'){
if(operaStatus!==null && operaStatus!==undefined && operaStatus!=='' && operaStatus!=='null'){
if(operaStatus.toUpperCase()==='DUE_IN'){
return 'hz-status-duein';
}
else if(operaStatus.toUpperCase()==='CHECKED_IN'){
return 'hz-status-checkedin';
}
else if(operaStatus.toUpperCase()==='CHECKED_OUT'){
return 'hz-status-waitlist';
}
else if(operaStatus.toUpperCase()==='DUE_OUT'){
return 'hz-status-dueout';
}
else if(operaStatus.toUpperCase()==='RESERVED'){
return 'hz-status-reserved';
}
else if(operaStatus.toUpperCase()==='PENDING CANCEL'){
return 'hz-status-cancel';
}
else
{
return '';
}
}
}else if(approveStatus.toUpperCase()==='W' ||approveStatus.toUpperCase()==='WA'){
return 'hz-status-waitlist';
}else if(approveStatus.toUpperCase()==='AP'){
return 'hz-status-approval';
}
else
{
if(operaStatus==null) return '';
if(operaStatus.toUpperCase()==='DUE_IN'){
return 'hz-status-duein';
}
else if(operaStatus.toUpperCase()==='CHECKED_IN'){
return 'hz-status-checkedin';
}
else if(operaStatus.toUpperCase()==='CHECKED_OUT'){
return 'hz-status-waitlist';
}
else if(operaStatus.toUpperCase()==='DUE_OUT'){
return 'hz-status-dueout';
}
else if(operaStatus.toUpperCase()==='RESERVED'){
return 'hz-status-reserved';
}
else
{
return '';
}
}
}
// Opera status为空,Approve Status不为空的情况
else if((operaStatus==null || operaStatus==undefined) && (approveStatus!=null && approveStatus!=undefined))
{
if(approveStatus.toUpperCase()==='PN'){
return 'hz-status-font-pending';
}else if(approveStatus.toUpperCase()==='W' ||approveStatus.toUpperCase()==='WA'){
return 'hz-status-font-waitlist';
}else{
return '';
}
}
}
},
getStatusTextColor(){
return function (booking) {
let operaStatus = null;
if(booking==null){
return '';
}
if(booking.lastOperaStatus!=null){
operaStatus = booking.lastOperaStatus;
}
let approveStatus = null;
if(booking.approveStatus!=null){
approveStatus = booking.approveStatus;
}
// Opera和Approve Status都不为空的情况
if((operaStatus!=null && operaStatus!=undefined) || (approveStatus!=null && approveStatus!=undefined))
{
if(approveStatus.toUpperCase()==='PN'||approveStatus.toUpperCase()==='F'){
return 'hz-status-font-pending';
}else if(approveStatus.toUpperCase()==='N'){
if(operaStatus!==null && operaStatus!==undefined && operaStatus!=='' && operaStatus!=='null'){
if(operaStatus.toUpperCase()==='DUE_IN'){
return 'hz-status-font-duein';
}
else if(operaStatus.toUpperCase()==='CHECKED_IN'){
return 'hz-status-font-checkedin';
}
else if(operaStatus.toUpperCase()==='CHECKED_OUT'){
return 'hz-status-font-waitlist';
}
else if(operaStatus.toUpperCase()==='DUE_OUT'){
return 'hz-status-font-dueout';
}
else if(operaStatus.toUpperCase()==='RESERVED'){
return 'hz-status-font-reserved';
}
else
{
return '';
}
}
}else if(approveStatus.toUpperCase()==='W' ||approveStatus.toUpperCase()==='WA'){
return 'hz-status-font-waitlist';
}
else
{
if(operaStatus==null) return '';
if(operaStatus.toUpperCase()==='DUE_IN'){
return 'hz-status-font-duein';
}
else if(operaStatus.toUpperCase()==='CHECKED_IN'){
return 'hz-status-font-checkedin';
}
else if(operaStatus.toUpperCase()==='CHECKED_OUT'){
return 'hz-status-font-waitlist';
}
else if(operaStatus.toUpperCase()==='DUE_OUT'){
return 'hz-status-font-dueout';
}
else if(operaStatus.toUpperCase()==='RESERVED'){
return 'hz-status-font-reserved';
}
else
{
return '';
}
}
}
// Opera status为空,Approve Status不为空的情况
else if((operaStatus==null || operaStatus==undefined) && (approveStatus!=null && approveStatus!=undefined))
{
if(approveStatus.toUpperCase()==='PN'||approveStatus.toUpperCase()==='F'){
return 'hz-status-font-pending';
}else if(approveStatus.toUpperCase()==='W'||approveStatus.toUpperCase()==='WA'){
return 'hz-status-font-waitlist';
}
else{
return '';
}
}
}
},
getStatusText(){
return function (booking) {
let operaStatus = null;
if(booking==null){
return;
}
if(booking.lastOperaStatus!=null){
operaStatus = booking.lastOperaStatus;
}
let approveStatus = null;
if(booking.approveStatus!=null){
approveStatus = booking.approveStatus;
}
if((operaStatus!=null && operaStatus!=undefined) || (approveStatus!=null && approveStatus!=undefined))
{
if(approveStatus.toUpperCase()==='PN' || approveStatus.toUpperCase()==='W' ||approveStatus.toUpperCase()==='WA' ||approveStatus.toUpperCase()==='F' ||approveStatus.toUpperCase()==='AP'){
if(approveStatus!==null && approveStatus!==undefined && approveStatus!=='' && approveStatus!=='null'){
if(approveStatus.toUpperCase()==='F'&&booking.tryTime<5){
return "PENDING";
}else{
return mapApproveStatus(approveStatus.toUpperCase());
}
}
}else if( approveStatus.toUpperCase()==='N' || approveStatus.toUpperCase()==='FC'){
if(operaStatus!==null && operaStatus!==undefined && operaStatus!=='' && operaStatus!=='null')
return mapOperaStatus(operaStatus.toUpperCase());
}
}
else if((operaStatus==null || operaStatus==undefined) && (approveStatus!=null && approveStatus!=undefined))
{
if(approveStatus.toUpperCase()==='F'&&booking.tryTime<5){
return "PENDING";
}else{
return mapApproveStatus(approveStatus.toUpperCase());
}
}
}
},
getSpecial(){
return function (specialName,bedTypeName) {
let str = ''
if(bedTypeName!=null && bedTypeName!=''){
str = bedTypeName;
}
if(specialName!=null && specialName!=''){
if(str == ''){
str = specialName;
}else{
str = str+", "+ specialName;
}
}
return str;
}
},
getDP() {
return function (bookingData, type) {
console.log(bookingData);
if (!bookingData?.dateLists) {
return null;
}
console.log(111);
let list;
try {
list = JSON.parse(bookingData.dateLists);
} catch (e) {
console.error("dateLists JSON parse error:", e);
return null;
}
if (!Array.isArray(list) || list.length === 0) {
return null;
}
const first = list[0];
return type === 0
? first.depositType ?? null
: first.isPost ?? null;
};
},
getSharer(){
return function (playerId,name) {
let id = null;
if(playerId!==null && playerId!==undefined && playerId!=='' && playerId!=='null'){
id = playerId;
}
let na = null;
if(name!==null && name!==undefined && name!=='' && name!=='null'){
na = name;
}
let res = '';
if(id!=null){
res = id;
}
if(na!=null){
if(res!==''){
res = res + ' ('+na+')';
}else{
res = na;
}
}
return res;
}
},
dateFormat() {
return function (date) {
if (date != undefined) {
let weekNum = dayjs(date).day();
let week = '';
switch(weekNum){
case 1:
week='Mon'
break;
case 2:
week='Tue';
break;
case 3:
week='Wed';
break;
case 4:
week='Thu';
break;
case 5:
week='Fri';
break;
case 6:
week='Sat';
break;
case 0:
week='Sun';
break;
}
return '('+week+') ' + dayjs(date).format("YYYY-MM-DD");
// return week + ', ' + dayjs(date).format("MMM D/YYYY");
}
}
},
mapLocale() {
return function (lang) {
if(lang=='zh-Hant'){
return '繁體中文';
}else{
return 'English';
}
}
},
getNight(){
return function (num) {
if(num!==null && num!==undefined && num!=='null')
{
if(num>1){
return num + " " + this.$t("common.nights");
}else{
return num + " " + this.$t("common.night");
}
}
else
return '';
}
},
getRoom(){
return function (num) {
if(num!==null && num!==undefined && num!=='null')
{
if(num>1){
return num + " " + this.$t("common.rooms");
}else{
return num + " " + this.$t("common.room");
}
}
else
return '';
}
},
getRoomName(){
return function () {
var book = this.bookingData;
var lang = this.lang;
var rName = book.room;
if(lang=='繁體中文'){
if(book.roomCN!=""&&book.roomCN!=null)rName = book.roomCN;
}
return rName;
}
},
}
}
</script>
<style lang="scss" scoped>
.hz-cancel-disabled{
opacity: 0.4;
}
.font-m{
font-size: 15px;
}
</style>