Files
2026-09-08 17:20:27 +08:00

656 lines
22 KiB
Vue
Raw Permalink 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="#ffffff"
titleStyle="font-weight:bold;"
>
<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',0,false)" src="../../static/images/ico_list.png" class="hz-nav-btn"></image>
</view>
</view>
</u-navbar>
<view class="hz-spacing hz-bg-white">
<view class="hz-card-profile" style="margin-bottom:6px;">
<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-for="(item,index) in pendingList" :key="index" class="hz-flex-row hz-pd-30 hz-font-bold hz-font-sm hz-card-booking" style="margin-top:10px;align-items: center;">
<view style="width:100%;">
<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])}} {{$t("common.to")}} {{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="hz-status-pending hz-btn-status hz-font-min hz-text-center" style="width:70%;height:14px;line-height:14px;">{{item.bookingStatus!==undefined && item.bookingStatus!='PN'? 'DUE IN':'PENDING'}}</view>
</view>
</view>
</view>
</view>
<view v-if="waitlist!=null && waitlist.length>1" class="hz-flex-row" style="align-items: center;margin-top:20px;">
<view @click="changeRoom('prev')" style="width:8%;" :class="currentRoomIndex===0? 'hz-disabled':''">
<u-icon name="arrow-left" color="#C39A4B" size="28"></u-icon>
</view>
<view class="hz-text-center hz-font-md hz-font-bolder" style="width:84%;">Waitlist {{currentRoomIndex+1}}</view>
<view @click="changeRoom('next')" style="width:8%;":class="currentRoomIndex===numOfWatilist-1? 'hz-disabled':''">
<u-icon name="arrow-right" color="#C39A4B" size="28"></u-icon>
</view>
</view>
<view v-if="showDateRange" class="hz-flex-row hz-pd-30 hz-font-bold hz-font-md hz-card-extend" style="margin-top:30rpx;align-items: center;">
<view style="width:100%;">
<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;">{{(waitlist[currentRoomIndex].date[0]) +" - " + (waitlist[currentRoomIndex].date[waitlist[currentRoomIndex].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(waitlist[currentRoomIndex].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(waitlist[currentRoomIndex].numOfRoom)}}</span>
</view>
<view class="hz-flex-row" style="width:34%;justify-content: right;">
</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" >{{bookingData.room}}</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 class="hz-flex-row hz-mr-t-30">
<view style="width:65%">
<view class="hz-font-color-black hz-font-sm">{{$t("newBooking.roomType")}}</view>
<view class="hz-font-bolder hz-font-lg" >{{bookingData.room}}</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" >{{bookingData.roomTypeCode}}</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 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.createdOn}}</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!=null?bookingData.createdByName:userData.userName}}
</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("newWaitlist.remark")}}</view>
<view class="hz-font-bolder hz-font-md" style="margin-top:4px;">
<u--textarea v-model="remarkList[currentRoomIndex]" :count="true" :maxlength="255" ></u--textarea>
</view>
</view>
</view>
</view>
<view :style="'height:'+footFuncHei+'rpx;'"></view>
</view>
<u-tabbar
:fixed="true"
:placeholder="true"
:safeAreaInsetBottom="true"
customStyle="z-index:100;height:58px;"
>
<view class="book hz-spacing">
<view @click="submitWaitlist" class="hz-btn-danger hz-font-color-white hz-font-lg hz-font-bold hz-text-center">
{{$t("newWaitlist.submitWaitlist")}}
</view>
</view>
</u-tabbar>
</view>
<u-popup
:safeAreaInsetBottom="true"
:safeAreaInsetTop="true"
:mode="'center'"
:round="12"
:show="showMsgBox"
>
<view
:style="'width:'+ windowWidth + 'px;'"
style="padding:30px;"
>
<view class="hz-flex-row" style="justify-content: center;">
<image :src="iconPath" style="width:64px;height:64px;"></image>
</view>
<view class="hz-font-md hz-font-bold hz-text-center" style="margin-top:20px;">
<rich-text v-html="msgStr" style="line-height:26px;"></rich-text>
</view>
<view @click="navToDetail(url)" class="hz-btn hz-font-color-white hz-font-lg hz-font-bold hz-text-center" style="margin-top:20px;">
{{buttonStr}}
</view>
</view>
</u-popup>
</view>
</template>
<script>
import dayjs from '../../uni_modules/uview-ui/libs/util/dayjs.js';
import {formatDate} from '../../common/stringUtils.js';
import {saveBooking,editBooking} from '../../api/bookingApi.js';
export default {
data() {
return {
//数据变量
playerData:null,
bookingData:null,
userData:null,
remarkList:[],
pendingList:[],
waitlist:[],
// 界面变量
title:'',
type:'',
iconPath:'',
msgStr:'',
url:'',
buttonStr:'',
showMsgBox:false,
showList:false,
showDateRange:false,
currentRoomIndex:0,
numOfWatilist:0,
putInWaitlistText:this.$t("bookingConfirm.putInWaitlist"),
windowWidth:0,
footFuncHei:100,
}
},
onLoad(opt) {
// 初始化界面
this.initUI();
this.playerData = uni.getStorageSync("playerData");
this.userData = uni.getStorageSync("userData");
this.getBooking();
},
async onShow() {
// 检查是否登录
// this.isLogin();
},
methods: {
// 數據方法
getBooking(){
this.bookingData = uni.getStorageSync("bookingData");
if(this.bookingData!==null && this.bookingData!==undefined && this.bookingData!==''){
if(this.bookingData.bookType==1){
for(let i=0;i<this.bookingData.extendDate.length;i++){
let dateObj = this.bookingData.extendDate[i];
if(dateObj.checked===true && dateObj.status===1) {
this.numOfWatilist++;
this.waitlist.push(dateObj);
}
if(dateObj.checked===true && dateObj.status===0) {
this.pendingList.push(dateObj);
}
}
}else{
for(let i=0;i<this.bookingData.dateList.length;i++){
let dateObj = this.bookingData.dateList[i];
if(dateObj.checked===true && dateObj.status===1) {
this.numOfWatilist++;
this.waitlist.push(dateObj);
}
if(dateObj.checked===true && dateObj.status===0) {
this.pendingList.push(dateObj);
}
}
}
this.showDateRange = true;
}else{
// 报错
}
},
async submitWaitlist(){
uni.showLoading({
title: this.$t("common.loading")
});
try{
if(this.bookingData.bookType==1){
for(let i=0;i<this.bookingData.extendDate.length;i++){
if(this.bookingData.extendDate[i].checked===true && this.bookingData.extendDate[i].status===1){
this.bookingData.extendDate[i].remark = this.remarkList[0];
this.bookingData.extendDate[i].submit = true;
this.remarkList.splice(0,1);
}
}
}else{
for(let i=0;i<this.bookingData.dateList.length;i++){
if(this.bookingData.dateList[i].checked===true && this.bookingData.dateList[i].status===1){
this.bookingData.dateList[i].remark = this.remarkList[0];
this.bookingData.dateList[i].submit = true;
this.remarkList.splice(0,1);
}
}
}
uni.setStorageSync("bookingData",this.bookingData);
// 保存waitlist
var res = null;
if(this.bookingData.bookType=='1'){
res = await editBooking(this.bookingData);
}else{
res = await saveBooking(this.bookingData);
}
// 如果成功
if(res.success === true){
const resultBookings = res.data;
if(this.numOfWatilist>1){
//this.url = '/booking/bookingGroup/bookingGroup?groupId='+resultBookings[0].groupId;
this.url = '/booking/bookingRecord/bookingRecord';
this.buttonStr = this.$t("bookingConfirm.backToRecords");
}else if(this.numOfWatilist==1){
this.url = '/booking/bookingDetail/bookingDetail?id='+resultBookings[0].id+'&conf=&from=booking';
this.buttonStr = this.$t("newWailist.viewSubmitedWaitlist");
}else{
// 出错
}
this.msgStr = this.$t("newWaitlist.savesuccessful");
this.iconPath = '../../static/images/ico_suc.png';
this.showMsgBox = true;
}else{
this.msgStr = this.$t("common.saveFail"); // 或者其他錯誤信息
this.buttonStr = this.$t("common.ok");
this.iconPath = '../../static/images/ico_err.png';
this.url = '';
this.showMsgBox = true;
}
}catch(e){
console.error(e);
await this.writeLog(this.userData.userId,"save_booking","","[APP][newWaitlist.vue][submitWaitlist][Catch Exception]"+e.errMsg,"","",1,false);
}finally{
uni.hideLoading();
}
},
// 界面方法
navToDetail(url){
if(url!=null && url!==undefined && url!==''){
this.navTo(url,0,false);
}else{
this.showMsgBox = false;
}
},
changeRoom(type){
if(type==='prev' && this.currentRoomIndex>0){
this.currentRoomIndex = this.currentRoomIndex-1;
}
else if(type==='next' && this.currentRoomIndex<this.numOfWatilist-1){
this.currentRoomIndex = this.currentRoomIndex+1;
}
},
initUI() {
this.deviceData = uni.getStorageSync("deviceData");
this.title = this.$t("newWaitlist.title");
this.windowWidth = this.deviceData.windowWidth-130;
// 判斷iphone下方安全區域
const area = this.deviceData.saveArea;
if(area){
this.footFuncHei = 160;
}
},
},
computed:{
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'){
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'){
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'){
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'){
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'){
return 'hz-status-font-pending';
}else if(approveStatus.toUpperCase()==='W'){
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'){
if(approveStatus!==null && approveStatus!==undefined && approveStatus!=='' && approveStatus!=='null')
return mapApproveStatus(approveStatus.toUpperCase());
}else if( approveStatus.toUpperCase()==='N'){
if(operaStatus!==null && operaStatus!==undefined && operaStatus!=='' && operaStatus!=='null')
return mapOperaStatus(operaStatus.toUpperCase());
}
}
else if((operaStatus==null || operaStatus==undefined) && (approveStatus!=null && approveStatus!=undefined))
{
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;
}
},
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");
}
}
},
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 '';
}
},
}
}
</script>
<style lang="scss" scoped>
</style>