Mauve
389 lines
11 KiB
Vue
389 lines
11 KiB
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 v-for="(item,index) in bookingData.dateList" :key="'date'+index" class="hz-spacing hz-bg-white" style="margin-top:10px;">
|
|
<view class="hz-pd-30 hz-font-bold hz-font-sm hz-card-extend hz-flex-row" style="margin-top:20rpx;align-items: center;">
|
|
<view class="hz-flex-row" style="align-items: center;width:90%;">
|
|
<image src="../../static/images/ico_calendar.png" style="width:16px;height:16px;"></image>
|
|
<span class="hz-font-sm hz-font-bolder" style="margin-left:4px;">{{dateFormat(item.date[0])}} - {{dateFormat(item.date[item.date.length-1])}}</span>
|
|
</view>
|
|
<view @click="delDate(index)" class="hz-flex-row" style="width:10%;justify-content: flex-end;">
|
|
<u-icon name="trash" size="20" color="#c04b41"></u-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-tabbar
|
|
:fixed="true"
|
|
:placeholder="true"
|
|
:safeAreaInsetBottom="true"
|
|
customStyle="z-index:100;height:58px;"
|
|
>
|
|
<view class="hz-btn-leftRight hz-flex-row hz-spacing">
|
|
<view @click="popupCalendar()" class="hz-btn-left hz-bg-light hz-font-lg hz-font-bold hz-font-color-primary" >{{$t("multipleDate.addDate")}}</view>
|
|
<view @click="navToConfirm()" class="hz-btn-right hz-bg-primary hz-font-lg hz-font-bold hz-font-color-white" >{{$t("common.confirm").toUpperCase()}}</view>
|
|
</view>
|
|
</u-tabbar>
|
|
</view>
|
|
<u-modal :content="msgStr" :show="showMsg" :cancelText="cancelText" :confirmText="yesText" showCancelButton closeOnClickOverlay @confirm="confirmDel" confirmColor="#C39A4B" @cancel="cancelMsg" @close="cancelMsg"></u-modal>
|
|
<u-calendar
|
|
closeOnClickOverlay
|
|
:confirmText="confirmText"
|
|
:confirmDisabledText="confirmText"
|
|
color="#C39A4B"
|
|
title=""
|
|
:startText="inText"
|
|
:endText="outText"
|
|
:show="showCalendar"
|
|
:defaultDate="bookingData.dateList.at(-1)!=null?[bookingData.dateList.at(-1).date.at(-1)]:[]"
|
|
:formatter="formatter"
|
|
mode="range"
|
|
:monthNum="monthNum"
|
|
:maxRange="maxRange"
|
|
:footerInfo="footerInfo"
|
|
@close="cancelDate"
|
|
@confirm="confirmDate"
|
|
@rangeSelected="rangeSelected">
|
|
</u-calendar>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import dayjs from '../../uni_modules/uview-ui/libs/util/dayjs.js';
|
|
import {getSetting,getCriterias,getAvailableRoom} from '../../api/configApi.js';
|
|
export default {
|
|
data() {
|
|
return {
|
|
//数据变量
|
|
playerData:null,
|
|
userData:null,
|
|
bookingData:null,
|
|
criteriaList:[],
|
|
maxDate:'',
|
|
defaultDate:[],
|
|
// 界面变量
|
|
title:'',
|
|
msgStr:this.$t("common.removeConfirm"),
|
|
cancelText:this.$t("common.cancel"),
|
|
confirmText:this.$t("common.confirm").toUpperCase(),
|
|
inText:this.$t("common.in"),
|
|
outText:this.$t("common.out"),
|
|
yesText:this.$t("common.yes"),
|
|
showCalendar:false,
|
|
showMsg:false,
|
|
footFuncHei:100,
|
|
footerInfo:"",
|
|
bookNum:1,
|
|
maxRange:0,
|
|
monthNum:0,
|
|
}
|
|
},
|
|
onLoad() {
|
|
// 初始化界面
|
|
this.initUI();
|
|
|
|
this.playerData = uni.getStorageSync("playerData");
|
|
this.userData = uni.getStorageSync("userData");
|
|
this.bookingData = uni.getStorageSync("bookingData");
|
|
},
|
|
onShow() {
|
|
// 检查是否登录
|
|
// this.isLogin();
|
|
this.getSetting();
|
|
},
|
|
methods: {
|
|
// 數據方法
|
|
async buildCalendar(){
|
|
uni.showLoading({
|
|
title: this.$t("common.loading")
|
|
});
|
|
try{
|
|
let params = {
|
|
roomId:this.bookingData.roomId,
|
|
propertyId:this.bookingData.propertyId,
|
|
blockId:this.bookingData.blockId,
|
|
coded:this.playerData.coded,
|
|
userId:this.userData.userId,
|
|
playerId:this.playerData.playerId,
|
|
};
|
|
const res = await getCriterias(params);
|
|
if(res.success === true){
|
|
this.criteriaList = [];
|
|
if(res.data!==undefined && res.data!==null){
|
|
this.criteriaList = res.data;
|
|
}
|
|
}else{
|
|
|
|
}
|
|
}catch(e){
|
|
|
|
}finally{
|
|
uni.hideLoading();
|
|
}
|
|
},
|
|
// 界面方法
|
|
navToConfirm(){
|
|
// 數據檢查，臨時保存，跳轉到確認頁
|
|
if(this.bookingData.dateList.length==0){
|
|
uni.$u.toast(this.$t("multipleDate.pleaseAddDate"));
|
|
return;
|
|
}
|
|
this.navTo("/booking/bookingConfirm/bookingConfirm",0,false);
|
|
},
|
|
async popupCalendar(){
|
|
if(this.bookingData.dateList.length==this.bookNum){
|
|
uni.$u.toast(this.$t("multipleDate.reachMaxBookNum"));
|
|
return;
|
|
}
|
|
await this.buildCalendar();
|
|
this.showCalendar = true;
|
|
},
|
|
confirmDate(e){
|
|
let checkDate =JSON.parse(JSON.stringify(e));
|
|
checkDate.pop();
|
|
if(!this.checkDate(checkDate)) return false;
|
|
let objDate ={
|
|
date:e,
|
|
status:null,
|
|
checked:false,
|
|
remark:'',
|
|
numOfNight:dayjs(e[e.length-1]).diff(dayjs(e[0]),'day'),
|
|
numOfRoom:1,
|
|
};
|
|
// 把對應的criteria也放到booking裡面後面用
|
|
for(let i=0;i<e.length;i++){
|
|
const date = e[i];
|
|
const criterias = this.criteriaList;
|
|
if(criterias[date]!==undefined && criterias[date]!=null)
|
|
this.bookingData.criteriaList.push(criterias[date]);
|
|
}
|
|
this.bookingData.dateList.push(objDate);
|
|
uni.setStorageSync("bookingData",this.bookingData);
|
|
this.showCalendar = false;
|
|
},
|
|
confirmDel(){
|
|
// 從dateList中刪除
|
|
if(this.bookingData.dateList!=undefined && this.bookingData.dateList!=null){
|
|
for(let i=0;i<this.bookingData.dateList[this.deleteIndex].date.length;i++){
|
|
const date1 = this.bookingData.dateList[this.deleteIndex].date[i];
|
|
if(this.bookingData.criteriaList!=null && this.bookingData.criteriaList.length>0){
|
|
for(let a=0;a<this.bookingData.criteriaList.length;a++){
|
|
let date2 = this.bookingData.criteriaList[a].bookDate;
|
|
if(date1 == date2){
|
|
this.bookingData.criteriaList.splice(a,1);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
this.bookingData.dateList.splice(this.deleteIndex,1);
|
|
|
|
uni.setStorageSync("bookingData",this.bookingData);
|
|
}
|
|
this.showMsg = false;
|
|
},
|
|
delDate(index){
|
|
this.showMsg = true;
|
|
this.deleteIndex = index;
|
|
},
|
|
cancelMsg(){
|
|
this.showMsg = false;
|
|
},
|
|
cancelDate(){
|
|
this.showCalendar = false;
|
|
},
|
|
formatter(day) {
|
|
if(this.criteriaList!=null){
|
|
let cdate = dayjs(day.date).format("YYYY-MM-DD");
|
|
for(let i=0;i<this.bookingData.dateList.length;i++){
|
|
let dates = this.bookingData.dateList[i].date;
|
|
for(let j=0;j<dates.length;j++){
|
|
let date = dates[j];
|
|
if(cdate == date){
|
|
day.picked = true
|
|
if(j!=dates.length-1) // 可以连接上日期的处理
|
|
day.disabled = true
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
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.available==0){
|
|
day.bottomInfo = 'Full'
|
|
day.dot = true
|
|
}
|
|
}else{
|
|
day.bottomInfo = 'Full'
|
|
day.dot = true
|
|
}
|
|
}
|
|
return day
|
|
},
|
|
initUI() {
|
|
this.deviceData = uni.getStorageSync("deviceData");
|
|
this.title = this.$t("multipleDate.title");
|
|
// 判斷iphone下方安全區域
|
|
const area = this.deviceData.saveArea;
|
|
if(area){
|
|
this.footFuncHei = 160;
|
|
}
|
|
},
|
|
async getSetting(){
|
|
uni.showLoading({
|
|
title: this.$t("common.loading")
|
|
});
|
|
var that = this;
|
|
try{
|
|
let params = {};
|
|
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;
|
|
that.maxRange = stay;
|
|
}else if(i.keys=="NUM_OF_MULTIPLE_DATE_RANGE"){
|
|
that.bookNum = i.keyValues;
|
|
}else if(i.keys=="MAX_ADVANCE_BOOKING_DAYS"){
|
|
var monthNum = i.keyValues/30;
|
|
that.monthNum = Math.ceil(monthNum)+1;
|
|
let mDate = dayjs().add(i.keyValues,'day').format("YYYY-MM-DD");
|
|
that.maxDate = mDate
|
|
}
|
|
}
|
|
}
|
|
else
|
|
{
|
|
// write log
|
|
}
|
|
}catch(e){
|
|
// write log
|
|
}finally{
|
|
uni.hideLoading();
|
|
}
|
|
},
|
|
async rangeSelected(e){
|
|
var isWaitlist = false;
|
|
for(let d of e){
|
|
if(this.criteriaList[d]!=undefined){
|
|
if(this.criteriaList[d].isWaitlist==1)isWaitlist = true;
|
|
}
|
|
}
|
|
if(isWaitlist){
|
|
try{
|
|
let params = {
|
|
roomId:this.modelBooking.roomId,
|
|
propertyId:this.modelBooking.propertyId,
|
|
blockId:this.modelBooking.blockId,
|
|
selectDate: [e[0],e[e.length-1]],
|
|
};
|
|
const res = await getAvailableRoom(params);
|
|
if(res.success === true){
|
|
if(res.data.length>0) {
|
|
this.footerInfo = "Available Room:"+res.data.join(',');
|
|
}else{
|
|
this.footerInfo = "";
|
|
}
|
|
}
|
|
}catch(e){
|
|
|
|
}
|
|
}else{
|
|
this.footerInfo = "";
|
|
}
|
|
},
|
|
checkDate(date){
|
|
var protectList = [];
|
|
var fullList = [];
|
|
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);
|
|
}else{
|
|
fullList.push(d);
|
|
}
|
|
}
|
|
if(fullList.length>0){
|
|
let msg = this.$t("newBooking.appFull");
|
|
msg += " "+fullList.join(',')
|
|
uni.$u.toast(msg,3000);
|
|
return false;
|
|
}
|
|
if(protectList.length>0){
|
|
let msg = this.$t("newBooking.protectionPeriod");
|
|
msg += " "+protectList.join(',')
|
|
uni.$u.toast(msg,3000);
|
|
return false;
|
|
}
|
|
return true;
|
|
|
|
}
|
|
},
|
|
computed:{
|
|
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("MMM D/YYYY");
|
|
}
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
</style> |