分為轉盤遊戲與拉霸遊戲,皆使用前端技術(原生CSS/JS、少量jquery/bootstrap、sweet alert套件)完成。完成遊戲後呼叫後端程式發送優惠券。系統會做一定判斷,鼓勵會員先用掉優惠券再繼續玩遊戲。
會員專區頁面:
使用HTML/CSS/Bootstrap製作供自己與其他組員使用的會員專區公版版型,其中負責「我的訂單」和「我的優惠」區塊。於「我的訂單」中使用AJAX技術於互動視窗中動態渲染每份訂單的訂單明細;於「我的優惠」中利用後端檢查會員的購物車中是否有東西,藉此判斷要導向商城還是購物車引導結帳。
商城購物流程,我負責從結帳到串接綠界的後段部分。進入結帳頁面後,客人可以更改原本登載的地址(使用AJAX技術向後端發送),也可選擇新增一次性的配送地址(確認輸入完畢後使用JS讓輸入欄位凍結,待按下結帳按鈕再一次用form表單形式,和其他資料一起發送給後端);若地址為空,則不能繼續結帳。使用優惠券部分,皆用JS判斷使用的是哪張、扣除的金額是多少,以及是否滿額。在按下結帳按鈕前都可以反悔更換優惠券,不影響資料庫。
確認所有資料並按下結帳按鈕後,後端程式會依送過來的資料依序生成訂單、將購物車明細轉為此張訂單的明細並刪除、刪除優惠券、扣商城庫存,最後呼叫綠界的API跳轉頁面。本支程式使用spring boot的transactional註解,若在任何環節遇到excaption都會集體roll-back,不影響資料庫。結帳完綠界會呼叫returnURL中的程式驗證本次付款,若驗證成功,訂單才會改為已付款。結帳完後跳轉頁面為回到「我的訂單」,可檢視最新成立的訂單。
商城後台管理中負責寫庫存管理以及訂單管理的部分。庫存管理可以做庫存調整,可即時反應在商城,若庫存為零,商品頁則會顯示熱銷補貨中;訂單則是用JSTL簡單判斷是否已付款,若已付款則可以調整發貨狀態(已發貨/已送達),調整成「已發貨」時會呼叫jmail程式,自動發通知信給使用者。