旅館預約服務

Project Spec

• API Document
• Design Layout

Project Demo

Demo

Project Skills

• Vue Cli （檔案控管）
• Vuex （狀態控管）
• axios（Post/Get API）
• BootstrapVue (輪播圖)
• Vue Router （頁面動態跳轉）
• Vue.js Datepicker(進行日曆客製化)

Project Features

首頁

• 輪播圖：呈現六種房型照片
• 呈現六種房型，點擊每一種房型會進入該房型詳細資訊頁

房型資訊頁

• 輪播圖：呈現選擇房型的照片
• 顯示首頁選擇的房型資訊(房型描述、平日/假日價格、check in /out 時間)
• 日曆：顯示被預約狀態（包含以預定/尚未預約）
• 點擊預約時段可以進行預約（包含表單驗證與計算價格）
• 預約結果： 成功：預約日期顯示在日期上，其他人無法預約 / 失敗：預約日期被人預約了