專案起源

由於疫情當前，許多疫情資訊包括確診數、死亡數、藥局販售快篩數量都公告在不同地方，需要有地方能去整合資料，所以這個作品就這樣問世了。

考量到家人平常只使用手機查看資訊，比較少用電腦，所以此專案就以手機版為優先。

原先是只想做給家人使用，但沒想到後來家人分享給各自公司的同事們，並獲得他們的好評，

有幫助到身邊周遭親人、朋友，覺得非常有成就感，

也更讓我有動力持續做下去！

網站使用技術

• Vue3  開發專案
• Vue Router 建構路由 ( SPA )
• components 元件拆分管理
• 使用 mixins 拆分元件可共用部分出來
• 將常用函式拆分模組 ( ESM )
• AJAX / JSON 串接 RESTful API ( 氣象局、環保署 、政府公開平台、國外疫情網 API )
• ESLint 管控程式品質(standard 風格)
• Bootstrap 5 整合 SCSS 開發
• 使用 RWD 響應式網頁設計
• localStorage 開發收藏功能
• Git 版本控制、良好 commit 命名與管理

快篩數量查詢

• 下拉選單查詢縣市、地區藥局快篩剩餘數量
• 關鍵字查詢藥局快篩剩餘數量 
  • 可輸入藥局名稱或地址查詢
• localStorage 開發收藏功能，加入、移除收藏，
• 只要將家或公司附近的藥局加入收藏，下次開啟網頁，只要點擊查詢已收藏藥局，就能直接查詢。

天氣查詢

• 跑馬燈顯示天氣警報
• 查看縣市、地區的天氣、溫度、紫外線、 降雨率、空氣品質...等，並依照天氣狀況來改變天氣 icon 圖示
• localStorage 開發收藏功能，加入、移除收藏。
  • 點擊已收藏的地區就自動搜尋該縣市天氣，
  • 移動到該地區位置(自動展開該地區 + 高亮)

確診數查詢

• 功能提示教學 (Bootstrap Modal) 
• 查詢今天、昨天、前天疫情狀況
• 可使用下拉選單查詢其他國家的疫情
• 可使用關鍵字查詢各個國家疫情 (英文)
  • 關鍵字英文大小寫都可以 ( toLowerCase )
• 切換國家就更換為該國家的國旗

產品頁面

• 點擊愛心將產品加入收藏、移除收藏 (已收藏產品有自己獨立的頁面)

• 點擊類別可做篩選 (filter)

• 可透過部分關鍵字搜尋產品名稱

• 點擊產品卡片可進入單一產品頁面 ($router.push)

• 加入購物車功能

購物車頁面

• 購物車沒商品時，會有引導客人前往購買的提示 

  • 產品輪播，持續推薦更多的產品刺激購買

• 購物車產品可增加、減少數量

  • 可以勾選刪除、單一刪除、全部刪除

• 購物流程的添加樣式 (watch 監聽)

• 點選訂單編號即可複製編號碼

  • 完成訂單頁面，點擊訂單查詢就會直接跳轉到訂單查詢頁面，並直接幫用戶貼上他的訂單編號，並且直接查詢結果供使用者查看。