-
使用 VeeValidate 套件完成表單驗證功能,操作文件(無ESM 版本)
-
使用 loading 套件製作 loading 效果
-
串接前台 API 完成購物車功能
-
新增相同產品到購物車時需累加項目
-
送出訂單後,購物車需要清除原本項目
-
購物車無產品時不建議發出結帳請求
前台頁面表單驗證,驗證內容包含:
- 姓名:必填
- Email:必填 / 需要符合格式 / input type 為 email
- 電話:必填 / 超過 8 碼 / input type 為 tel
- 地址:必填
- 留言:非必填
流程 : 1.渲染產品列表 V 2.單一產品細節V -loadingV -獨立的另一個購物車V 3.加入購物車V -loadingV -apiV 4.購物車列表 -數量調整下拉式(不能讓用戶自動填寫數量)V -單價可以根據數量變化V -刪除單一商品V -刪除全部商品V -總計V -將刪除及扣除寫在同一個 -優惠券 5.表單驗證 -驗證 Veevalidate V -送出訂單 V
- composition api
- 拉出元件