|
@@ -1,29 +1,180 @@
|
|
|
-<h1><img src="https://play-lh.googleusercontent.com/Dh32PpQ-B2przOY2E87mHu1YmRg_YIE8tCtCgu7WVUPCJtNwuaVsardIVFnh37QXKg" alt="drawing" width="120"/>前後端框架練習</h1>
|
|
|
|
|
-
|
|
|
|
|
-## 架構
|
|
|
|
|
-PHP Laravel, Vue CLI, SQL Server
|
|
|
|
|
-
|
|
|
|
|
-## 功能
|
|
|
|
|
-#### 留言板
|
|
|
|
|
-1. 輸入的地方要有標題、內容、作者、發布時間、送出按鈕
|
|
|
|
|
-2. 留言版的地方標題、內容、作者、發布時間、若是作者本人,會有編輯的按鈕,按下編輯鈕可做編輯
|
|
|
|
|
-#### 權限設計
|
|
|
|
|
-1. 人員登入登出及註冊
|
|
|
|
|
-2. 管理員可以刪除留言板留言
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
-## 參考資料
|
|
|
|
|
-- [Laravel](https://laravel.tw/docs/5.3)
|
|
|
|
|
-- [Vue](https://book.vue.tw/)
|
|
|
|
|
-- [SQL Server](https://www.w3schools.com/sql/)
|
|
|
|
|
-- [模板參考](https://drive.google.com/file/d/14NPG11SHqjjgsV71u0DgT7upszIdXGd0/view?usp=sharing)
|
|
|
|
|
-
|
|
|
|
|
-<br><br><br>
|
|
|
|
|
-## 啟動流程
|
|
|
|
|
-```console
|
|
|
|
|
-npm install --legacy-peer-deps
|
|
|
|
|
-composer install
|
|
|
|
|
-npm run dev
|
|
|
|
|
-php artisan serve
|
|
|
|
|
-npm run watch
|
|
|
|
|
|
|
+# 春酒抽獎系統需求文件
|
|
|
|
|
+
|
|
|
|
|
+## 一、 建立活動頁面
|
|
|
|
|
+
|
|
|
|
|
+#### 1. 是否需要列出歷年的抽獎活動資訊?
|
|
|
|
|
+
|
|
|
|
|
+#### 2. 要可以多活動通用。
|
|
|
|
|
+
|
|
|
|
|
+#### 3. 可新增活動,點擊新增活動按鈕以設定活動名稱、地點以及時間。
|
|
|
|
|
+
|
|
|
|
|
+#### 4. 可設定報到截止時間,預設為19:00。
|
|
|
|
|
+
|
|
|
|
|
+#### 5. 可匯入獎品列表。
|
|
|
|
|
+
|
|
|
|
|
+#### 6. 可匯入來賓列表。
|
|
|
|
|
+
|
|
|
|
|
+## 二、 活動頁面
|
|
|
|
|
+
|
|
|
|
|
+### A. 人員報到頁面
|
|
|
|
|
+
|
|
|
|
|
+#### 1. 公司人員報自己的員工編號, 櫃檯人員輸入員工編號後系統會顯示該
|
|
|
|
|
+
|
|
|
|
|
+#### 人員的員工編號、姓名以及圖像,若確認為該員工則點擊確認按鈕,將
|
|
|
|
|
+
|
|
|
|
|
+#### 該員工的資訊放到報到成功人員列表當中,若櫃檯人員認為並不是正確
|
|
|
|
|
+
|
|
|
|
|
+#### 的員工,則點擊取消按鈕,系統顯示報到失敗畫面。
|
|
|
|
|
+
|
|
|
|
|
+#### 2. 來賓報自己的姓名,櫃檯人員輸入來賓姓名(怕櫃檯人員輸入困難)或是
|
|
|
|
|
+
|
|
|
|
|
+#### 找到來賓編號再輸入來賓編號(來賓是否會很多,找來賓編號動作會不
|
|
|
|
|
+
|
|
|
|
|
+#### 會拖延太多時間)或是來賓會有來賓列表,櫃檯人員可以從賓列表當中
|
|
|
|
|
+
|
|
|
|
|
+#### 選擇來賓以進行報到手續,系統會顯示來賓編號以及姓名,櫃檯人員點
|
|
|
|
|
+
|
|
|
|
|
+#### 擊確認按鈕,並將該來賓的資訊放到報到成功人員列表當中,最後來賓
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+#### 會收到一個來賓名牌以利兌獎。
|
|
|
|
|
+
|
|
|
|
|
+#### 3. 來賓是否只會來北區春酒現場?
|
|
|
|
|
+
|
|
|
|
|
+#### 4. 若櫃台人員輸入員工編號或是來賓姓名錯誤,系統會顯示查無此人的畫
|
|
|
|
|
+
|
|
|
|
|
+#### 面。
|
|
|
|
|
+
|
|
|
|
|
+#### 5. 在報到截止時間到後,可匯出報到成功人員列表。
|
|
|
|
|
+
|
|
|
|
|
+#### 6. 在報到截止時間到後,之後的報到人員只會有參加獎(普獎),無法進行
|
|
|
|
|
+
|
|
|
|
|
+#### 抽獎(小獎、大獎)動作。
|
|
|
|
|
+
|
|
|
|
|
+### B. 抽獎頁面
|
|
|
|
|
+
|
|
|
|
|
+#### 1. 抽獎頁面需要可以單機。
|
|
|
|
|
+
|
|
|
|
|
+#### 2. 可選擇抽取既有獎項或是加碼。
|
|
|
|
|
+
|
|
|
|
|
+#### 3. 抽取既有獎項可設定抽獎名單的地區(北區、中區、南區、來賓、全部),
|
|
|
|
|
+
|
|
|
|
|
+#### 獎品一次只抽單個或是一次全部抽完,獎品數量(再考慮需不需要留),
|
|
|
|
|
+
|
|
|
|
|
+#### 獎項以及獎品,設定完成後即可進行抽獎動作。
|
|
|
|
|
+
|
|
|
|
|
+#### 4. 小獎(2000元、 3000 元等)為一次全部抽完,不需要跑動畫或是全部一
|
|
|
|
|
+
|
|
|
|
|
+#### 起跳2~3秒的動畫。
|
|
|
|
|
+
|
|
|
|
|
+5. 小獎抽完後可匯出中獎名單至google drive,使得參加人員可確認自
|
|
|
|
|
+ 己是否中獎。
|
|
|
|
|
+6. 大獎為一次抽一個,抽獎畫面大約3~5秒即可。
|
|
|
|
|
+7. 小獎以及大獎的列表會事先印出來給兌獎區,抽到獎項後,需要在兌獎
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+#### 區的工作人員手頭紀錄中獎人員。
|
|
|
|
|
+
|
|
|
|
|
+8. 春酒當天俊哥會帶一個大型Enter鍵用來抽大獎,需要先行測試。
|
|
|
|
|
+9. 加碼只需輸入加碼者為何人、加碼獎項以及加碼數量(需要再問)即可,
|
|
|
|
|
+ 加碼獎項可為純數字(10000元),或是文字(高鐵票 10 張),高鐵票 10
|
|
|
|
|
+ 張可能為高鐵票 1 人 10 張或 10 人 1 張。
|
|
|
|
|
+
|
|
|
|
|
+#### 10. 由於加碼獎項當下會立即抽出,因此設定完加碼項目後立即跳轉到抽獎
|
|
|
|
|
+
|
|
|
|
|
+#### 畫面。
|
|
|
|
|
+
|
|
|
|
|
+#### 11. 抽獎設定頁面以及抽獎頁面
|
|
|
|
|
+
|
|
|
|
|
+#### (1). 抽獎設定頁面與抽獎頁面分開,在兌獎區的PC可控制現在的抽獎
|
|
|
|
|
+
|
|
|
|
|
+#### 項目,主持人的PC只需要顯示抽獎畫面就好,不要顯示設定頁面
|
|
|
|
|
+
|
|
|
|
|
+#### 給大家看到。
|
|
|
|
|
+
|
|
|
|
|
+#### (2). 抽獎設定頁面與抽獎頁面分開,主持人的PC上開兩個頁面,一個
|
|
|
|
|
+
|
|
|
|
|
+#### 為抽獎設定頁面,一個為抽獎頁面,主持人只投影抽獎頁面,不顯
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+#### 示設定頁面給大家看。
|
|
|
|
|
+
|
|
|
|
|
+#### (3). 抽獎設定頁面與抽獎頁面放在同個畫面,讓主持人可以在同一台
|
|
|
|
|
+
|
|
|
|
|
+#### PC全部設定完成,對主持人來說比較省事,只是會給大家看到設
|
|
|
|
|
+
|
|
|
|
|
+#### 定的項目為何,可能會給大家看到限區域的抽獎畫面。
|
|
|
|
|
+
|
|
|
|
|
+### C. 兌獎頁面
|
|
|
|
|
+
|
|
|
|
|
+#### 1. 小獎的情況下,員工需要提供員工編號或是手機上產生的條碼,來賓需
|
|
|
|
|
+
|
|
|
|
|
+#### 要提供人員報到時提供的來賓名牌,兌獎區的工作人員需要輸入員工編
|
|
|
|
|
+
|
|
|
|
|
+#### 號或是用掃碼機掃描員工手機上的條碼,系統上會顯示員工的編號、姓
|
|
|
|
|
+
|
|
|
|
|
+#### 名以及圖像,或是來賓的編號以及姓名,確認是正確中獎人員後點擊確
|
|
|
|
|
+
|
|
|
|
|
+#### 認按鈕後即可領獎,領完獎項後需要簽名,若不是正確中獎人員則點擊
|
|
|
|
|
+
|
|
|
|
|
+#### 取消,顯示中獎人員錯誤的畫面。
|
|
|
|
|
+
|
|
|
|
|
+#### 2. 大獎的情況下,中獎人員會上台領獎項,領完獎後須到兌獎區進行簽名
|
|
|
|
|
+
|
|
|
|
|
+#### 動作。
|
|
|
|
|
+
|
|
|
|
|
+#### 3. 加碼的獎項也要列印,兌獎流程參考C1,列印完也要給中獎人員簽名,
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+#### 這裡會有每加一次碼就印一張紙的情況,因為要當下簽名,該怎麼處
|
|
|
|
|
+
|
|
|
|
|
+#### 理。
|
|
|
|
|
+
|
|
|
|
|
+## 三、 參加者介面
|
|
|
|
|
+
|
|
|
|
|
+1. 搜尋得獎紀錄頁面可以連到google drive頁面,當中會有小獎的中獎
|
|
|
|
|
+ 名單,使得員工可以再次確認自己是否中獎(唯讀)。
|
|
|
|
|
+2. 生成員工資訊頁面可以讓員工輸入自己的員工編號,產生條碼,以確認
|
|
|
|
|
+ 身分。
|
|
|
|
|
+3. 要討論是否真的需要參加者介面。
|
|
|
|
|
+
|
|
|
|
|
+## 四、 其他
|
|
|
|
|
+
|
|
|
|
|
+#### 1. 3/16、 17 會再確認一次全公司的人員名單,名單由人資科提供,新進
|
|
|
|
|
+
|
|
|
|
|
+#### 人員也可以參加抽獎。
|
|
|
|
|
+
|
|
|
|
|
+2. 櫃檯會放QRCode連到參加者介面的系統,活動前也會發公告通知全
|
|
|
|
|
+ 公司的員工。
|
|
|
|
|
+3. 所有顯示出來的獎都不需要獎項名稱,只需要顯示金額即可。(再次確
|
|
|
|
|
+ 認)
|
|
|
|
|
+4. 春酒當天會帶一台筆電過去,在那台筆電上直接架設我們的系統,作為
|
|
|
|
|
+ 備用,所有筆電是誰提供的?
|
|
|
|
|
+5. 普獎為扣除所有中獎人員的名單,會在春酒之後在公司由秘書發簽名單
|
|
|
|
|
+ 給各位簽名。
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+#### 6. 在活動結束後(幾天)無法進行獎項的查詢動作,要把中獎名單從
|
|
|
|
|
+
|
|
|
|
|
+```
|
|
|
|
|
+google drive拿掉。
|
|
|
```
|
|
```
|
|
|
|
|
+7. 拍照上傳公司有需要納到系統裡面嗎?
|
|
|
|
|
+8. 春酒後是否需要列出春酒活動總結,列出中獎名單、照片、時間、地點
|
|
|
|
|
+ 等資訊給老闆看。
|
|
|
|
|
+9. 權限分為主辦方(北區)、中南區管理人員、參加人員,主辦方有所有權
|
|
|
|
|
+ 限,中南區管理人員只能管報到,參加人員只能觀看參加者介面。
|
|
|
|
|
+
|
|
|
|
|
+## 五、 例外狀況
|
|
|
|
|
+
|
|
|
|
|
+#### 1. 若在人員報到當中沒有網路,則是預設全公司名單以及所有來賓的名單
|
|
|
|
|
+
|
|
|
|
|
+#### 進行抽獎,小獎中獎時是否要確認得獎者是否在場。
|
|
|
|
|
+
|
|
|
|
|
+#### 2. 當報到之後沒有網路,系統可匯出當前報到名單。
|
|
|
|
|
+
|
|
|
|
|
+#### 3. 若抽獎時無網路,小獎大獎若有抽到中區、南區人員,要怎麼確認身分。
|
|
|
|
|
+
|
|
|
|
|
+## 無網路的時候到底是要連資料庫還是要用匯出的報到名單?
|
|
|
|
|
+
|
|
|
|
|
+
|