Travel Fun 旅遊趣

4 個月前(已編輯)React, TypeScript

Travel Fun 旅遊趣 - 提供台灣旅遊體驗與行程的線上平台

簡介#

探索世界的精彩,從這裡開始,旅遊趣帶您踏上一場奇幻之旅,發現無盡的冒險和美麗風景。

創店理念#

在這個充滿多元文化和美麗風景的世界中,我們相信每個地方都有其獨特的故事等待著被發現,我們希望為旅行者打造一個平台,讓他們能夠輕鬆地尋找到最適合的旅行目的地和行程安排,不論是探索遙遠的國度、感受當地風情,還是享受豪華的渡假體驗。

我們相信旅行不僅僅是到達目的地,更是一段精彩的旅程,我們的團隊致力於挖掘每個目的地的獨特之處,為旅行者提供深入的文化體驗和豐富的活動選擇,我們以用心的服務和細致的安排,讓每位旅行者在每次旅行中都能獲得滿足感和難忘的回憶。

無論您是探險家、文化愛好者、還是喜愛舒適度假的旅行者,我們都有完美的方案和行程等待著您。

讓我們一同踏上探索世界的旅程,創造屬於您的獨特旅行故事!


專案說明#

  • 使用 Vue.jsVite 進行開發
  • 使用 Composition APITypeScript 進行編程
  • 使用 Vue Router 路由設定
  • 使用 Axios 串接後台 API 資料
  • 使用 props emit pinia 進行元件間資料的傳遞
  • 使用 Tailwind CSS Naive UI 完成版面
  • 使用 Antfu ESlint Style 控管程式碼品質
  • 使用 Git 版本控制

使用技術#

程式碼風格#

code style

設計稿#


前台#

  • 旅遊行程展示:首頁、商品列表、商品介紹等
  • 收藏清單:新增、編輯、刪除收藏商品
  • 購物車:新增、刪除及編輯商品數量
  • 優惠卷:結帳時可套用優惠卷
  • 訂單:創立訂單包含顧客資料、購買時間、購買產品等
  • 結帳:選擇付款方式進行付款

後台#

  • 管理者登入驗證
  • 商品管理:新增、編輯、刪除
  • 訂單管理:編輯部分訂單資訊、刪除
  • 優惠卷管理:新增、修改、刪除

前台頁面介紹#

首頁#

首頁

旅遊行程#

旅遊行程-1 旅遊行程-2 旅遊行程-3

收藏清單#

  • 利用 LocalStorage 儲存使用者收藏紀錄

我的最愛

購物車#

  • 購物車預覽
  • 購物車頁面

購物車預覽

購物車

訂單填寫#

  • 紅色星號為必填項目
  • 每個欄位皆有格式驗證
  • 套用優惠卷

訂單填寫 套用優惠卷

準備付款#

準備付款

訂單建立#

訂單建立


後台頁面介紹#

登入頁面#

登入頁面

旅遊行程管理頁面#

旅遊行程管理頁面

訂單管理#

訂單管理頁面

優惠卷管理#

優惠卷管理頁面


相關連結#