窩窩家居WOWROOM

簡介

窩窩家居

窩窩家居，跟您一起品味生活 一切從窩窩開始，快來看看吧！

Demo： https://hungcurry.github.io/JS_WOWOROOM/

頁面：

• 首頁 index
• 後台 admin

專案說明

• RWD與SCSS切版
• 使用 axios 串接 API
• 使用 Git 版本控制

使用技術/相關套件

• SCSS
• Swiper
• axios
• D3、C3
• SweetAlert
• validate
• anime

重點功能展示：

1. API 的應用，處理CRUD資料
2. 資料數據圖表化
3. validation 表單驗證
4. loading 開場畫面
5. 陣列、物件資料處理

(一).開場動畫

使用 anime.js 製作開場動畫 *利用正則分拆 el元素字體，並製作出字體淡入效果

(二).版頭輪播

使用 Swiper 製作圖片交疊輪播

(三).購物車功能

1. 前台產品渲染
2. 篩選前台產品並打API 加入購物車
3. 購物車數量 增加與減少 並計算總金額
4. 判斷是否重複購物商品

(四).表單驗證功能

1. 防呆確認是否購物車有商品
2. 使用validation 表單驗證

(五).資料數據圖表化

使用C3 資料數據圖表化

1. 全類別營收比重
2. 全品項營收比重

(六).後台功能

1. 查看更多 跳出detail資料
2. 手刻 Modal視窗
3. 訂單狀態修改
4. 後台資料渲染與刪除