CrossGate 商店

Demo

Vue cli 2 https://pvt5r486.github.io/CrossGate/dist/#/index
Vue cli 3 + Vuex + ESlint https://pvt5r486.github.io/CrossGateV3/dist/#/index

聲明

本作品內所有圖片、文字內容，單純為個人前端練習用，不做任何商業用途
所有資料來源皆為 google 搜尋取得

功能

本作品其主要功能有：

• 前台:商品展示、購物車清單、商品下單、優惠券套用、訂單列表、訂單結帳
• 後台:商品管理、客戶訂單管理、優惠券管理

練習技術

• Vue Cli 2
• Vue Router
• Vue Component
• 第三方 Vue 套件的運用
  • vue-loading-overlay
  • vue-awesome-swiper
  • VeeValidate
  • vue-axios
• Webpack 概念
• API的應用
• Bootstrap 4 + 手刻 SCSS 的混合應用

前台內容介紹

loading

全站皆使用的 loading 過場

快速商品展示列

結合 vue-awesome-swiper 包裝而成的元件，除原本swiper的功能外，可藉由傳入的 Props 切換不同的產品類別、商品名稱來提升靈活度

購物專區

重複使用「快速商品展示列」內的部分元件重新排版並實作商品搜尋、類別篩選、商品分頁功能，並於行動裝置時切換至快速商品展示列，避免頁面過長影響瀏覽體驗。

商品介紹

商品詳細介紹，選擇數量後即時顯示加總結果，方便使用者評估金額並加入購物車，提升使用體驗

購物車 & 訂單資料填寫

主要分為兩個部分，左方為購物車內容，右方為整個購物車商品的加總，並可套用優惠券。
表單部分具有驗證功能，並於畫面上方放置步驟導引，提升操作體驗。

我的購物訂單

用於查看自身有哪些訂單並未結帳，可再次進行結帳。

付款 & 付款完成頁面

後台內容簡介

主要使用Bootstrap 4 快速搭建後台，管理前台所需資料內容。