Files
mgm-daylight-mcrm-mobile-ios/booking/bookingRecord/bookingRecord.vue
T
2026-09-16 10:43:59 +08:00

586 lines
20 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
:safeAreaInsetTop="true"
:placeholder="true"
:title="title"
:fixed="true"
:autoBack="false"
leftIconColor="#000000"
titleStyle="font-weight:bold;"
@leftClick="back()"
>
<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 v-if="userData && userData.canViewCalendar === true" @click="navToPlayerRoomCalendar" src="../../static/images/calendar-line.png" class="hz-nav-btn"></image>
<image v-else @click="getDataByPage" src="../../static/images/ico_list.png" class="hz-nav-btn"></image>
</view>
</view>
</u-navbar>
<view class="hz-spacing hz-bg-white" style="margin-top:8px;">
<view class="hz-card-profile hz-mr-b-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 v-if="!showEmpty">
<!-- 'hz-card-extend' disable extend -->
<view @click="navToDetail(booking)" v-for="(booking,index) in bookingList" :key="index"
:class="getRecordColor(booking)" class="hz-pd-30 hz-font-bold hz-font-sm" style="margin-top:20rpx;align-items: center;">
<view class="hz-flex-row">
<view>
<view class="hz-font-md">{{$t("common.confirmationNo")}}: {{ getConfirmationNo(booking)}}</view>
</view>
<view style="margin-left:auto">
<view class="hz-font-md" :class="getStatusTextColor(booking)">{{getStatusText(booking)}}</view>
</view>
</view>
<view class="hz-flex-row" style="margin-top:6px;">
<view style="width:55%;">
<view class="hz-font-md">{{$t("common.checkInDate")}}: {{ booking.checkinDate }}</view>
</view>
<view style="width:50%;">
<view style="text-align: right;" class="hz-font-md">{{ booking.propertyName }}</view>
</view>
</view>
<view class="hz-flex-row" style="margin-top:6px;">
<view style="width:55%;">
<view class="hz-font-md">{{$t("common.checkOutDate")}}: {{ booking.checkoutDate }}</view>
</view>
<!-- enable sharer and extend 2024-09-27 -->
<view class="hz-flex-row" style="width:50%;text-align: right;justify-content: flex-end;" v-if="userData.canNewBooking&&booking.propertyCategory!='OTHER'">
<view v-if="(booking.sharer!==null && booking.sharer!=='[]')||booking.isShare" class="hz-btn-sharer hz-font-min" style="width:40%;height:14px;line-height:14px;margin-right: 3px;">{{$t("bookingRecord.sharer").toUpperCase()}}</view>
<!-- <view @click="navToDetail(booking)" v-if="((booking.lastOperaStatus==='DUE_OUT' || booking.lastOperaStatus==='CHECKED_IN') && booking.confirmationNo!=null && (booking.approveStatus!='W'&&booking.approveStatus!='PN'))" class="hz-btn-extend hz-font-min" style="width:40%;height:14px;line-height:14px;">{{$t("bookingRecord.extend").toUpperCase()}}</view> -->
<!-- <view @click="navTo('/booking/bookingGroup/bookingGroup?groupId='+booking.groupId,0,false)" v-if="booking.groupId!==undefined && booking.groupId!==null && booking.groupId!==''" class="hz-btn-group" style="margin-left:8px;">{{$t("bookingRecord.group")}}</view> -->
</view>
</view>
<view class="hz-flex-row" style="margin-top:6px;">
<view v-show="booking.eta!==null && booking.eta!=='00:00:00'" class="hz-font-md">{{$t("common.etaTime")}}: {{formatEtaToHHmm(booking.eta)}}</view>
<span v-show="booking.eta!==null && booking.eta!=='00:00:00' && booking.miscCharge!==null" class="hz-font-md" style="padding:0 6px;">|</span>
<view v-show="booking.miscCharge!==null" class="hz-font-md">{{$t("common.misCharge")}}: {{formatWithThousands(booking.miscCharge)}}</view>
</view>
</view>
<!-- <u-loadmore :status="showLoadMore" :loadmoreText="loadMoreStr" :nomoreText="nomoreStr" :fontSize="14" color="#ccc" :line="true" /> -->
</view>
<u-empty
v-if="showEmpty"
mode="search"
:text="dataNotFoundStr"
>
</u-empty>
</view>
<u-tabbar
:fixed="true"
:placeholder="true"
:safeAreaInsetBottom="true"
customStyle="z-index:100;height:58px;"
v-if="userData.canNewBooking"
>
<view class="book hz-flex-row hz-spacing">
<view class="hz-btn hz-font-color-white hz-font-lg hz-font-bold hz-text-center" @click="navToNewBooking()">
{{$t("bookingRecord.newsBooking")}}
</view>
</view>
</u-tabbar>
<u-modal :content="msgStr" :show="showMsg" :confirmText="yesText" :showCancelButton="false" closeOnClickOverlay @confirm="showMsg=false" confirmColor="#C39A4B" @close="showMsg=false"></u-modal>
</view>
</view>
</template>
<script>
import {playerLookup} from '../../api/mgmApi.js'
import {mapOperaStatus,mapApproveStatus} from '../../common/mapping.js'
import {getBookingsMock,getBookings} from '../../api/bookingApi.js';
import dayjs from '../../uni_modules/uview-ui/libs/util/dayjs.js';
export default {
data() {
return {
//数据变量
playerData:null,
userData:null,
bookingList:[],
dataNotFoundStr:this.$t("common.dataNotFound"),
// 界面变量
from:'',
showEmpty:false,
title:'',
footFuncHei:100,
currentIndex:0,
showMsg:false,
msgStr:this.$t("bookingRecord.operaProfile"),
yesText:this.$t("common.ok"),
currentTask:null,
getDataByPageRequestId:0,
}
},
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.getDataByPage();
},
onShow() {
this.$i18n.locale = uni.getLocale();
// 检查是否登录
this.isLogin();
// 拿localstorage中的playerData
this.getDataByPage();
},
// 下拉刷新(页面生命周期,需与 onLoad/onShow 同级)
onPullDownRefresh() {
this.pullDownRefresh();
},
methods: {
navToPlayerRoomCalendar(){
const userData = uni.getStorageSync("userData");
if (!userData || userData.canViewCalendar !== true) return;
this.navTo('/booking/playerRoomCalendar/playerRoomCalendar',0,false);
},
// 數據方法
async getDataByPage(){
if(this.userData.canViewBooking==false) return;
if(this.currentTask){
try{
this.currentTask.abort();
}catch(err){
}
}
const requestId = ++this.getDataByPageRequestId;
let params = {};
uni.showLoading({
title: this.$t("common.loading")
});
try{
if(this.playerData.nameIds.length==0){
await this.getProfileByPlayerId(requestId)
}else{
params.member = this.playerData
params.userId = this.userData.userId;
const res = await getBookings(params, {
getTask: (task, options) => {
this.currentTask = task;
}
});
if(requestId !== this.getDataByPageRequestId) return;
this.currentTask = null;
this.bookingList = [];
if(res.length>0){
if(res!==undefined && res!==null){
this.bookingList = res;
}
}else{
}
}
}catch(e){
if(e.errMsg!==undefined && e.errMsg.includes("abort")){
return;
}
// console.log(e);
// write log
uni.$u.toast(e.errMsg,5000);
await this.writeLog(this.userData.userId,"save_booking","","[APP][bookingDetail.vue][getDataByPage][Catch Exception]"+e.errMsg,"[RequestData]" +JSON.stringify(params),"",1,false);
}finally{
if(requestId === this.getDataByPageRequestId){
this.currentTask = null;
uni.hideLoading();
}
}
},
pullDownRefresh(){
try{
this.getDataByPage('refresh');
}finally{
uni.stopPullDownRefresh();
}
},
// 界面方法
back(){
if(this.from==='booking'){
this.navTo("/pages/findPlayer/findPlayer",1,false);
}else{
this.navBack();
}
},
navToDetail(booking){
this.navTo('/booking/bookingDetail/bookingDetail?id='+booking.id+"&conf="+booking.confirmationNo+"&from=list",0,false)
},
// 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;
},
formatWithThousands(value) {
if (value === null || value === undefined || value === '') return '-';
const str = String(value).trim();
if (/^-?\d{1,3}(,\d{3})*(\.\d+)?$/.test(str)) return str;
const normalized = str.replace(/,/g, '');
if (/^-?\d+(\.\d+)?$/.test(normalized)) {
const n = Number(normalized);
return n.toLocaleString('en-US');
}
return value;
},
initUI() {
this.deviceData = uni.getStorageSync("deviceData");
this.title = this.$t("bookingRecord.title");
},
navToNewBooking(){
this.getDataByPage();
uni.showLoading({
title: this.$t("common.loading")
});
// remove no opera restrict
// if(this.playerData.nameIds.length==0){
// this.showMsg = true;
// }else{
// this.navTo('/booking/newBooking/newBooking',0,false)
// }
this.navTo('/booking/newBooking/newBooking',0,false)
uni.hideLoading();
},
async getProfileByPlayerId(requestId){
try{
let params = {playerId:this.playerData.playerId,userId:this.userData.userId};
const res = await playerLookup(params, {
getTask: (task, options) => {
this.currentTask = task;
}
});
if(requestId !== this.getDataByPageRequestId) return;
if(res.success == true){
var player = res.data;
if(player !== null){
if(player.codedFlag==1){
uni.setStorageSync("playerData",player);
this.playerData = uni.getStorageSync("playerData");
let params = {};
params.member = player
params.userId = this.userData.userId;
const res = await getBookings(params, {
getTask: (task, options) => {
this.currentTask = task;
}
});
if(requestId !== this.getDataByPageRequestId) return;
this.currentTask = null;
this.bookingList = [];
if(res.length>0){
if(res!==undefined && res!==null){
this.bookingList = res;
}
}else{
}
}
}
}
}catch(e){
if(e.errMsg!==undefined && e.errMsg.includes("abort")){
return;
}
console.error(e);
var request = e.config!=undefined?JSON.stringify(e.config):"";
var response = e.data!=undefined?JSON.stringify(e.data):"";
await this.writeLog(this.userData.userId,"find_player","","[APP][findPlayer.vue][getProfileByPlayerId][Catch Exception]"+e.errMsg,request,response,1,false);
}finally{
}
},
},
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;
}
else
{
return 'N/A';
}
}else{
return 'N/A';
}
}
},
dateFormat() {
return function (date) {
if (date != undefined) {
return dayjs(date).format("DD/MM/YY");
}
}
},
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'){
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
{
return '';
}
}
}else if(approveStatus.toUpperCase()==='W' ||approveStatus.toUpperCase()==='WA'){
return 'hz-status-waitlist';
}
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 if(approveStatus.toUpperCase()==='AP'){
console.log(111);
return 'hz-status-font-approval'
}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' || approveStatus.toUpperCase()==="FC"){
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 if(operaStatus.toUpperCase()==='PENDING CANCEL'){
return 'hz-status-font-cancel';
}
else
{
return '';
}
}
}else if(approveStatus.toUpperCase()==='W'|| approveStatus.toUpperCase()==='WA'){
return 'hz-status-font-waitlist';
}else if(approveStatus.toUpperCase()==='AP'){
return 'hz-status-font-approval';
}
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());
}
}
}
},
getRecordColor(){
return function (booking) {
if(booking.approveStatus==='W'|| booking.approveStatus==='WA'){
return 'hz-card-waitlist'
}else if(booking.approveStatus==='AP'){
return 'hz-card-approval'
}else if((booking.lastOperaStatus==='DUE_OUT' || booking.lastOperaStatus==='CHECKED_IN') && booking.confirmationNo!=null && (booking.sharer==null || booking.sharer==='[]' || booking.sharer==='')){
return 'hz-card-booking'
}else{
return 'hz-card-booking'
}
}
},
getETA(){
return function(ETA){
let returnStr = [];
if(ETA !== null && ETA !== undefined){
returnStr = ETA.split(":");
return returnStr[0] + ":" +returnStr[1];
}
return null;
}
}
}
}
</script>
<style lang="scss" scoped>
</style>