first commit
This commit is contained in:
Mauve
@@ -0,0 +1,389 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user