Skip to content

Commit

Permalink
fix(room): fix room view reservation dialog
Browse files Browse the repository at this point in the history
cc5324 committed Dec 27, 2022
1 parent 52cdff1 commit ace8a87
Showing 3 changed files with 100 additions and 17 deletions.
9 changes: 7 additions & 2 deletions src/components/BaseModal.vue
Original file line number Diff line number Diff line change
@@ -53,10 +53,11 @@ defineProps({
}
.modal {
// width: 425px;
// max-width: 50vw;
min-width: 60vw;
// min-width: 60vw;
background-color: white;
padding: 30px;
padding: 25px 40px;
border-radius: 5px;
button {
@@ -66,6 +67,10 @@ defineProps({
.title {
margin: 0 0;
font-size: 24px;
font-weight: 500;
letter-spacing: 2.5px;
// color: #000000;
}
}
14 changes: 11 additions & 3 deletions src/stores/hotel.js
Original file line number Diff line number Diff line change
@@ -19,6 +19,9 @@ export const useHotelStore = defineStore("hotel", {
},
getRoomAmenities: (state) => camelizeJsonKeys(state.room.amenities),
getBookedDates: (state) => state.booked.map((book) => book.date),
getRoomShortDescription: (state) =>
camelizeJsonKeys(state.room.descriptionShort),
// getRoomProfile: (state) => camelizeJsonKeys(state.room),
},
actions: {
resetRequestState() {
@@ -41,9 +44,14 @@ export const useHotelStore = defineStore("hotel", {
},
async getRoom(roomID) {
try {
const { room, booking } = await API.GET(`room/${roomID}`);
this.room = room[0];
this.booked = booking;
const res = await API.GET(`room/${roomID}`);
this.room = res.room[0];
this.booked = res.booking;
console.log(`get room res`, res);

// const { room, booking } = await API.GET(`room/${roomID}`);
// this.room = room[0];
// this.booked = booking;
} catch (error) {
console.log(error);
router.push({ name: "NotFound" });
94 changes: 82 additions & 12 deletions src/views/RoomView.vue
Original file line number Diff line number Diff line change
@@ -5,6 +5,7 @@ import { useHotelStore } from "@/stores/hotel.js";
import { useRoute } from "vue-router";
import dayjs from "dayjs";
import weekday from "dayjs";
import BaseDatePicker from "@/components/BaseDatePicker.vue";
import RoomAmenities from "@/components/RoomAmenities.vue";
@@ -13,9 +14,12 @@ import BaseModal from "@/components/BaseModal.vue";
import BaseInput from "@/components/BaseInput.vue";
import DateInput from "@/components/DateInput.vue";
import BaseButton from "@/components/BaseButton.vue";
import StripeSeparator from "../components/StripeSeperator.vue";
dayjs.extend(weekday);
const hotelStore = useHotelStore();
const { room } = storeToRefs(hotelStore);
const { room, getRoomShortDescription } = storeToRefs(hotelStore);
const route = useRoute();
const isFormModalOpen = ref(false);
@@ -27,6 +31,25 @@ const dates = ref({
to: dayjs(today).add(1, "day").format("YYYY-MM-DD"),
});
const getWeekday = computed(() => {
const appendix = {
weekday: [1, 2, 3, 4, 5],
weekend: [0, 6],
};
const result = { weekday: 0, weekend: 0 };
const { from, to } = dates.value;
let day = dayjs(from);
while (day.isBefore(to)) {
if (appendix.weekday.includes(dayjs(day).day())) {
result.weekday += 1;
} else {
result.weekend += 1;
}
day = day.add(1, "day");
}
return result;
});
const booking = reactive({
name: "",
tel: "",
@@ -73,12 +96,13 @@ const isSuccess = computed(() => hotelStore.requestState.isSuccess);
{{ room.descriptionShort.GuestMax }}
</p>
<p>房型:{{}}</p>
<p>衛浴數量:{{}} 間</p>
<p>房間大小:{{}} 平方公尺</p>
<p>床型:{{ room.descriptionShort.Bed[0] }}</p>
<p>衛浴數量:{{ getRoomShortDescription.privateBath }} 間</p>
<p>房間大小:{{ room.descriptionShort.Footage }} 平方公尺</p>
</div>
<p class="room-detail-description--en">{{ room.description }}</p>
</div>
<StripeSeparator />
<div class="room-detail-checkInAndOut">
<div class="check check--in">
<span class="check-title">Check In</span>
@@ -122,6 +146,23 @@ const isSuccess = computed(() => hotelStore.requestState.isSuccess);
<BaseInput v-model="booking.name" :label="'姓名'" />
<BaseInput v-model="booking.tel" :label="'電話'" />
<DateInput v-model="dates" :label="'預約時間'" />
<div class="form-calculate">
<p>
<span>平日時段</span>
<span>{{ getWeekday.weekday }} 夜</span>
</p>
<p>
<span>假日時段</span>
<span>{{ getWeekday.weekend }} 夜</span>
</p>
</div>
<div class="form-price">
= NT.
{{
getWeekday.weekday * room.normalDayPrice +
getWeekday.weekend * room.holidayPrice
}}
</div>
<div class="form-buttons">
<button class="light-button" @click="isFormModalOpen = false">
取消
@@ -252,7 +293,7 @@ const isSuccess = computed(() => hotelStore.requestState.isSuccess);
width: 500px;
text-align: right;
font-family: NotoSansCJKtc-Light;
// font-family: NotoSansCJKtc-Light;
&-main {
font-size: 30px;
@@ -270,7 +311,7 @@ const isSuccess = computed(() => hotelStore.requestState.isSuccess);
line-height: 27px;
}
.price-period {
font-family: NotoSansCJKtc-Light;
// font-family: NotoSansCJKtc-Light;
font-size: 14px;
color: #6d7278;
letter-spacing: 1.46px;
@@ -297,12 +338,41 @@ form {
}
}
.form-buttons {
display: flex;
justify-content: space-between;
button {
display: inline-block;
padding: 10px 25px;
.form {
&-calculate {
padding: 15px 40px;
margin: 30px 0 10px;
background-color: #ededed;
color: #6d7278;
font-size: 12px;
> p {
display: flex;
justify-content: space-between;
margin: 0;
font-weight: 500;
letter-spacing: 1.25px;
}
// text-align-last: justify;
}
&-price {
margin-bottom: 30px;
color: #ff5c5c;
font-size: 26px;
text-align: right;
}
&-buttons {
display: flex;
justify-content: space-between;
button {
display: inline-block;
padding: 10px 25px;
}
}
}
</style>

0 comments on commit ace8a87

Please sign in to comment.