mgm-daylight-mcrm-mobile-ios/booking/bookingGroup/bookingGroup.vue

<template>
	<view>
		<view class="hz-page">
			 <u-navbar
				:safeAreaInsetTop="true" 
				:placeholder="true" 
				:title="title"
				:fixed="true"
				:autoBack="true"
				leftIconColor="#000000"
				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" 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">
					<view v-for="(booking,index) in bookingList" :key="index" :class="(booking.lastOperaStatus==='DUE_OUT' || booking.lastOperaStatus==='CHECKED_IN') && booking.confirmationNo!=null? 'hz-card-extend':'hz-card-booking'" class="hz-pd-30 hz-font-bold hz-font-sm"  style="margin-top:20rpx;align-items: center;">
						<view @click="navToDetail(booking)" class="hz-flex-row">
							<view style="width:60%;">
								<view>{{$t("common.property")}}: {{ booking.propertyName }}</view>
							</view>
							<view style="width:40%;">
								<view>{{$t("common.roomType")}}: {{ booking.roomTypeCode }}</view>
							</view>
						</view>
						<view  @click="navToDetail(booking)" class="hz-flex-row" style="margin-top:8px;">
							<view style="width:60%;">
								<view>{{$t("common.checkInDate")}}: {{ dateFormat(booking.checkinDate) }}</view>
							</view>
							<view style="width:40%;">
								<view>{{$t("common.confirmationNo")}}: {{ getConfirmationNo(booking) }}</view>
							</view>
						</view>
						<view class="hz-flex-row" style="margin-top:8px;">
							<view  @click="navToDetail(booking)" style="width:60%;">
								<view>{{$t("common.checkOutDate")}}: {{ dateFormat(booking.checkoutDate) }}</view>
							</view>
							<view class="hz-flex-row" style="width:40%;justify-content: flex-end;">
								<view  @click="navToDetail(booking)" v-if="(booking.sharer===null || booking.sharer==='[]') && ((booking.lastOperaStatus==='DUE_OUT' || booking.lastOperaStatus==='CHECKED_IN') && booking.confirmationNo!=null)" class="hz-btn-extend">{{$t("bookingRecord.extend")}}</view>
								<view @click="navTo('/booking/bookingGroup/bookingGroup?groupId='+booking.groupId,0,false)" v-if="booking.groupId!==undefined && booking.groupId!==''" class="hz-btn-group" style="margin-left:8px;">{{$t("bookingRecord.group")}}</view>
								<view v-if="booking.sharer!==null && booking.sharer!=='[]'" class="hz-btn-sharer" style="margin-left:8px;">{{$t("bookingRecord.sharer")}}</view>
							</view>
						</view>
					</view>
					<view :style="'height:'+footFuncHei+'rpx;'"></view>
				</view>
				<u-empty
					v-if="showEmpty"
					mode="search"
					:text="dataNotFoundStr"
				>
				</u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	import dayjs from '../../uni_modules/uview-ui/libs/util/dayjs.js';
	import {getBookingsByGroupId} from '../../api/bookingApi.js';
	export default {
		data() {
			return {
				//数据变量
				playerData:null,
				bookingList:[],
				userData:null,
				groupId:'',
				// 界面变量
				dataNotFoundStr:this.$t("common.dataNotFound"),
				showEmpty:false,
				title:'',
				footFuncHei:100,
			}
		},
		onLoad(opt) {
			// 初始化界面
			this.initUI();
			this.playerData = uni.getStorageSync("playerData");
			this.userData = uni.getStorageSync("userData");
			this.groupId = opt.groupId;
			this.getBookings();
		},
		onShow() {
			
		},
		methods: {
			// 數據方法
			async getBookings(){
				uni.showLoading({
					title: this.$t("common.loading")
				});
				try{
					let params = {};
					params.groupId =  this.groupId;
					const res = await getBookingsByGroupId(params);
			
					if(res.success == true){
						this.bookingList = [];
						this.bookingList = res.data;
						this.showEmpty = false;
					}else{
						// 出错
						this.showEmpty = true;
					}
				}catch(e){
					console.error(e);
					this.showEmpty = true;
				}finally{
					uni.hideLoading();
				}
			},
			//下拉刷新
			onPullDownRefresh() {
				this.pullDownRefresh();
			},
			pullDownRefresh(){
				try{
					this.getBookings();
				}finally{
					uni.stopPullDownRefresh();
				}
			},
			// 界面方法
			navToDetail(booking){
				this.navTo('/booking/bookingDetail/bookingDetail?id='+booking.id+"&conf="+booking.confirmationNo+"&from=list",0,false)	
			},
			initUI() {
			  this.deviceData = uni.getStorageSync("deviceData");
			  this.title = this.$t("bookingRecord.title");
			  // 判斷iphone下方安全區域
			  const area = this.deviceData.saveArea;
			  if(area){
			  	this.footFuncHei = 160;
			  }
			},
			
		},
		computed:{
			getConfirmationNo(){
				return function (booking) {
					if(booking!==undefined && booking!==null){
						if(booking.confirmationNo!==undefined  && booking.confirmationNo!==null && booking.confirmationNo!=='null' && booking.confirmationNo!==''){
							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");
				}
			  }
			},
		}
	}
</script>

<style lang="scss" scoped>

</style>