---
# System prepended metadata

title: Product Spec 第一階段版本

---

# Product Spec 第一階段版本


### ☞ 產品簡介與功能(Product Value)

#### 產品名稱：
* 限食取餐 meal time

#### 產品簡介：
* 限食取餐 meal time 是因剩食議題而誕生的食物交易贈送平台。資源豐沛的現代社會帶給人們許多便利，但同時也造成了許多食物的浪費。透過限食取餐 meal time，可以即時將過剩的食物放上平台，提供給需要的人，讓食物不再有浪費。
* 本產品不具備商業目標，故本平台不會向賣方或買方酌收任何手續費用。


### ☞ 系統架構：
[會員系統](#會員系統) rex
* [會員註冊](#會員註冊)
* [會員登入](#會員登入)
* [會員編輯資料](#會員編輯資料)

[賣家系統](#賣家系統)
* [會員註冊為賣家/編輯資訊](#會員註冊為賣家/編輯資訊)
* [賣場頁面](#賣場頁面)

[商品系統](#商品系統) rex
* [網站搜尋功能](#搜尋功能)
* [網站分類功能](#分類功能)
* [賣家刊登商品](#刊登功能)
* [商品列表](#商品列表)
* [賣家管理商品](#賣家管理商品)

[購物車系統](#購物車系統) milu
* [商品加入購物車](#商品加入購物車)
* [買家選擇購物車商品結帳](#買家選擇購物車商品結帳)
* p3[商品異動即時更新](#商品異動即時更新)

[訂單系統](#訂單系統) milu 
* [買家編輯訂單狀態](#買家編輯訂單狀態)
* [賣家編輯訂單狀態](#賣家編輯訂單狀態)

[後台管理系統](#後台管理系統) peichuan
* [管理後台首頁](#管理後台首頁)
* [管理用戶頁](#管理用戶頁)
* [管理訂單頁](#管理訂單頁)
* [管理商家分類頁](#管理商家分類頁)
* [管理商品分類頁](#管理商品分類頁)
* p2[FAQ編輯頁](#FAQ編輯頁)

[訊息系統](#訊息系統)
* [使用者訊息](#使用者訊息)
* [賣場訊息](#賣場訊息)
* [管理員訊息](#管理員訊息)

[網站系統](#網站系統) peichuan
* [查看FAQ頁](#查看FAQ頁)

[地圖系統](#地圖系統) haoting
* [地圖頁面](#地圖頁面)


[資料庫欄位表](https://hackmd.io/@finalProject-foodBank/BJVlZRpMF)

## 權限分級

| 權限   | 分級 | 管理員 | 賣家 | 會員 | 訪客 |
| ------ | ---- | ------ | ---- | ---- | ---- |
| 所有人 | 1    | O      | O    | O    | O    |
| 會員   | 2    | O      | O    | O    |      |
| 賣家   | 3    | O      | O    |      |      |
| 管理員 | 4    | O      |      |      |      |

## 會員系統

### 會員註冊
#### ☞ 描述
第一階段僅需讓使用者自行輸入帳號密碼即可，不需要串接 facebook 或 google 的登入方法

#### ☞ 條件
|角色|權限|狀態|
|-|-|-|
|訪客|1|未登入|

#### ☞ 路由
###### 渲染

###### 路由
| 路由                      | 按鈕 |
| ------------------------- | ---- |
| 返回上一頁 | 返回 |


###### 操作
| 操作 | 按鈕 | Method | 後端 API      | NEXT             |
| --- | ---- | ------ | ------------- | ---------------- |
| 註冊會員 | 註冊 | POST   | /users/register | 註冊成功跳至登入頁面 |


#### ☞ 介面
##### 會員註冊頁面
|元素|規則|錯誤提示|
|- |- |- |
|個人頭像|僅接受 PNG、JPG、JPEG 檔|僅接受 PNG、JPG、JPEG 格式檔案|
|帳號|必填 + 僅接受英文、數字、底線 + 不接受空行|帳號密碼暱稱僅接受英文、數字、符號|
|暱稱|必填 + 不接受空行||
|密碼|必填 + 僅接受 8 ~ 16 碼大小寫英文、數字、組合 + 不接受空行|帳號密碼暱稱僅接受英文、數字、符號|
|再次輸入密碼|必須與密碼欄位相同|密碼輸入不一致|
|電子郵件|必填 + 不接受空行 + 需包含 @ 字元|此欄位為必填|
|電話|必填 + 不接受空行 + 需 09 開頭|此欄位為必填|
|註冊|跳到登入頁面||

#### ☞ 邏輯
|流程|規則|
|-|-|
|驗證|確認欄位是否符合規則、確認帳號是否已被註冊|

#### ☞ 異常情形處理

暫無

#### ☞ 資料結構

|欄位|型態|長度|必填|預設|備註|
|-|-|-|-|-|-|
|username|varchar|64|Y|||
|nickname|varchar|64|Y|||
|password|varchar|64|Y|||
|email|varchar|64|Y|||
|phone|varchar|16|Y|||
|avatar|file||||.png, .jpg, .jpeg|


### 會員登入
#### ☞ 描述
目前僅需讓使用者自行輸入帳號密碼即可，尚不需要串接 facebook 或 google 的登入方法

#### ☞ 條件
|角色|權限|狀態|
|-|-|-|
|訪客|1|未登入|

#### ☞ 路由

##### 渲染

無

##### 路由
| 路由                      | 按鈕 |
| ------------------------- | ---- |
| 返回上一頁 | 返回 |

##### 操作
| 操作 | 按鈕 | Method | 後端 API   | NEXT             |
| --- | ---- | ------ | ---------- | ---------------- |
| 登入網站 | 登入 | POST   | /users/login | 成功後跳轉至首頁 |

#### ☞ 介面
##### 會員登入頁面
|元素|規則|錯誤提示|
|- |- |- |
|帳號|必填|帳號或密碼錯誤|
|密碼|必填|帳號或密碼錯誤|
|登入|成功後跳至首頁||


#### ☞ 邏輯
![](https://i.imgur.com/898u1Lb.png)
|流程|規則|
|-|-|
|驗證|確認帳號密碼是否正確|


#### ☞ 異常情形處理
暫無

#### ☞ 資料結構

|欄位|型態|長度|必填|預設|備註|
|-|-|-|-|-|-|
|username|varchar|24|Y|||
|password|varchar|64|Y||需經過 hash 比對|

### 會員編輯資料
#### ☞ 描述
查看及編輯個人資料

#### ☞ 條件
|類型|角色|權限|狀態|
|-|-|-|-|
|編輯個人資料|會員|2|登入|


#### ☞ 路由
##### 渲染
| 說明                 | Method | 後端 API      |
| -------------------- | ------ | ------------- |
| 取得自己的使用者資料 | GET    | /users/profile/me |

##### 路由
| 路由                              | 按鈕     |
| --------------------------------- | -------- |
| /member_password ([編輯會員密碼頁面](#編輯會員密碼頁面)) | 更改密碼 |
| 回到上一頁 | 返回 |


##### 操作
| 操作     | 按鈕     | Method | 後端 API      | 備註                           |
| -------- | -------- | ------ | ------------- | ------------------------------ |
| 刪除大頭照 | 刪除照片     |   |  |                                |
| 更改內容 | 更新     | PATCH  | /users/profile/me |                                |

#### 介面
##### 會員編輯資料頁面
|元素|規則|錯誤提示|
|- |- |- |
|使用者帳號|唯讀，不可修改||
|暱稱|必填 + 不接受空行|此欄位為必填|
|電子郵件|必填 + 不接受空行 + 需包含 @ 字元|此欄位為必填|
|電話|必填 + 不接受空行 + 需 09 開頭|此欄位為必填|
|大頭照|選填 + 檔案大小 <= 1MB|照片檔案過大|
|刪除大頭照|按下按鈕後設為 true ||

#### ☞ 資料結構

|欄位|型態|長度|必填|預設|備註|
|-|-|-|-|-|-|
|username|varchar|64|Y|||
|nickname|varchar|64|Y|||
|email|varchar|64|Y|||
|phone|varchar|16|Y|||
|avatar|file||||
|isDeleteAvatar|boolean|||false|


### 會員編輯密碼
#### ☞ 描述
更新會員密碼

#### ☞ 條件
|類型|角色|權限|狀態|
|-|-|-|-|
|編輯個人資料|會員|2|登入|


#### ☞ 路由
##### 渲染
無
##### 路由
| 路由                              | 按鈕     |
| --------------------------------- | -------- |
| 回到上一頁 | 返回 |


##### 操作
| 操作     | 按鈕     | Method | 後端 API      | 備註                           |
| -------- | -------- | ------ | ------------- | ------------------------------ |
| 更改內容 | 確定     | PATCH  | /users/password |                                |

#### 介面
##### 編輯會員密碼頁面
|元素|規則|錯誤提示|
|- |- |- |
|舊密碼|必填 + 唯讀，不可修改|此欄位為必填 / 舊密碼錯誤|
|新密碼|必填 + 8 ~ 16 碼大小寫英文或數字的組合|此欄位為必填 / 新密碼與舊密碼相同|
|再次輸入新密碼|必填 + 8 ~ 16 碼大小寫英文或數字的組合|此欄位為必填 / 兩次密碼輸入不同|

#### ☞ 資料結構

|欄位|型態|長度|必填|預設|備註|
|-|-|-|-|-|-|
|oldPassword|varchar|16|Y|||
|newPassword|varchar|16|Y|||
|confirmPassword|varchar|16|Y|||

## 賣家系統
### 會員註冊為賣家/編輯資訊
#### ☞ 描述
一般用戶註冊後即享有購買權限
欲申請為賣家，只需新增賣家資訊即可

#### ☞ 條件
|類型|角色|權限|狀態|
|-|-|-|-|
|新增資料|會員|2|登入|
|編輯資料|賣家|3|登入 + 賣家身份|

#### ☞ 路由
##### 路由
| 路由       | 按鈕 |
| ---------- | ---- |
| 回到上一頁 | 取消 |

##### 渲染
| 說明                   | Method | 後端 API        |
| ---------------------- | ------ | --------------- |
| 取得該使用者的賣家資料 | GET    | /vendors/profile/me |
| 店家分類 | GET    | /vendor-categories |

##### 操作
| 操作         | 按鈕 | Method | 後端 API | 備註 |
| ------------ | ---- | ------ | -------- | ---- |
| 上傳大頭貼 | 選擇圖片 |  | |  |
| 刪除大頭貼 | 刪除圖片 |  | |  |
| 上傳 Banner | 選擇圖片 | |  |  |
| 刪除大頭貼 | 刪除圖片 |  | |  |
| 提交內容 | 註冊 | POST |  /vendors/register  |      |
| 提交內容 | 確認更新 | PATCH |  /vendors/profile/me  |      |
| 設定賣場開啟或關閉 | 關閉賣場 / 開啟賣場 | PATCH |  /vendors/set-open |      |


#### ☞ 邏輯
|流程|規則|
|-|-|
|申請|確認資訊完整、欄位是否符合規則|

#### ☞ 介面

##### [我的賣場資料頁面]()
|元素|規則|錯誤提示|
|- |- |- |
|店家頭像|僅限 .png/.jpg/.jpeg 檔案，大小 <1MB|檔案過大|
|店家主圖|僅限 .png/.jpg/.jpeg 檔案，大小 <1MB|檔案過大|
|店家名稱|必填 + 僅接受英文、數字 + 不接受空行、符號|請確認資訊完整|
|營業時間|必填 + 依週一～週日填入每日營業時間|請確認資訊完整|
|店家地址|必填 + 僅接受中文、數字 + 不接受空行、符號|請確認資訊完整|
|電話|必填 + 不接受空行 + 需 09 開頭|此欄位為必填|
|分類|必填 + 未填預設為 1|此欄位為必填|
|地圖|輸入地址後自動定位在地圖上|地址錯誤|
|店家描述|||
|大頭照|選填 + 檔案大小 <= 1000K|照片檔案過大|
|封面照|選填 + 檔案大小 <= 1500K|照片檔案過大|


#### ☞ 資料結構
|欄位|型態|長度|必填|預設|備註|
|-|-|-|-|-|-|
|id|int||Y|A.I.||
|userId|integer|64|Y||"users"."id"|
|vendorName|varchar|64|Y|||
|address|varchar|128|Y|||
|latlng|varchar|64|Y||輸入地址後自動轉換|
|phone|varchar|16|Y|||
|avatar|varchar|64||||
|banner|varchar|64||||
|categoryId|int||Y|1|"vendor_categories"."id"|
|description|text|||||
|openingHour|varchar|64|Y|||
|isOpen|boolean||Y|true||


### 賣場頁面
#### ☞ 描述
賣場主頁

#### ☞ 條件
|類型|角色|權限|狀態|
|-|-|-|-|
|查看資訊|任何|1||

#### ☞ 路由 

##### 路由
| 路由       | 按鈕 |
| ---------- | ---- |
| /message ([使用者訊息頁面](#使用者訊息)) | 傳送訊息 |
| /products  ([單一商品頁面](#單一商品詳細頁面))| 商品圖示 |

##### 渲染
| 說明                   | Method | 後端 API        |
| ---------------------- | ------ | --------------- |
| 取得賣場資料 | GET    | /vendors/profil:id |
| 取得賣場之商品 | GET    | /products/vendor/:id |

##### 操作

| 操作     | 按鈕     | Method | 後端 API      | 備註                           |
| -------- | -------- | ------ | ------------- | ------------------------------ |
| 依商品分類篩選 | 分類     | GET  | /products/vendor/:id?category=`<categoryId>` |     |
  
  
#### ☞ 邏輯
無

#### ☞ 資料結構

## 商品系統
### 商品列表頁
#### ☞ 描述
使用者可以在此頁面檢視商品，並透過點擊商品查看商品詳細資料

#### ☞ 條件
|類型|角色|權限|狀態|
|-|-|-|-|
|搜尋商品|任何|1|x|

#### ☞ 路由

###### 渲染
| 說明         | Method | 後端 API               |
| ------------ | ------ | ---------------------- |
| 取得商品列表 | GET    | /products |


###### 路由
| 路由                                | 按鈕           |
| ----------------------------------- | -------------- |
| 前往[單一商品詳細頁面](#單一商品詳細頁面) | 商品卡片 |

###### 操作

| 操作             | 按鈕     | Method | 後端 API               | 備註    |
| ---------------- | -------- | ------ | ---------------------- | --- |
| 顯示供應中商品 | 最新上架 | GET | /products?sort=id&order=DESCpage=1 |   |
| 顯示未供應商品 | 低價優先 | GET | /products?sort=price&order=ASC&page=1 |   |
| 顯示已售完商品 | 即期優先 | GET | /products?sort=expiryDate&order=ASC&page=1 |   |
| 依最新商品排序 | 過期與完售商品 | GET | /products?sort=`目前排序依據`&order=`目前排序依據`&page=1&notSupplied=true | 開關按鈕，再次點擊可取消顯示過期與完售商品  |
| 載入不同分頁商品資料 | 分頁按鈕 | GET    | products?page=`指定頁數` | 每頁預設檢視十筆商品 |

#### ☞ 介面
[商品搜尋結果]()

#### ☞ 資料結構
暫無

### 搜尋功能
#### ☞ 描述
使用者可透過搜尋欄位，輸入關鍵字即可查詢包含關鍵字的商品

#### ☞ 條件
|類型|角色|權限|狀態|
|-|-|-|-|
|搜尋商品|任何|1|x|

#### ☞ 路由

###### 渲染
| 說明         | Method | 後端 API               |
| ------------ | ------ | ---------------------- |
| 取得搜尋商品 | GET    | products/search?`<keyword>` |


###### 路由
| 路由                                | 按鈕           |
| ----------------------------------- | -------------- |
| 前往[搜尋結果頁面]()   | 搜尋 icon      |
| 前往[單一商品詳細頁面](#單一商品詳細頁面) | 商品卡片 |

###### 操作

| 操作             | 按鈕     | Method | 後端 API               | 備註    |
| ---------------- | -------- | ------ | ---------------------- | --- |
| 顯示供應中商品 | 最新上架 | GET | /products/search?keyword=`關鍵字`&sort=id&order=DESCpage=1 |   |
| 顯示未供應商品 | 低價優先 | GET | /products/search?keyword=`關鍵字`&sort=price&order=ASC&page=1 |   |
| 顯示已售完商品 | 即期優先 | GET | /products/search?keyword=`關鍵字`&sort=expiryDate&order=ASC&page=1 |   |
| 依最新商品排序 | 過期與完售商品 | GET | /products/search?keyword=`關鍵字`&sort=`目前排序依據`&order=`目前排序依據`&page=1&notSupplied=true | 開關按鈕，再次點擊可取消顯示過期與完售商品  |
| 載入不同分頁商品資料 | 分頁按鈕 | GET    | products/search?keyword=`關鍵字`&page=`指定頁數` | 每頁預設檢視十筆商品 |

#### ☞ 介面
[商品搜尋結果]()


#### ☞ 異常情形處理
搜尋結果為無產品時，則顯示「沒有相關產品」
#### ☞ 資料結構
暫無

### 分類功能
#### ☞ 描述
使用者可以藉由點選分類列表的按鈕選擇欲檢視的分類商品

#### ☞ 條件
|類型|角色|權限|狀態|
|-|-|-|-|
|瀏覽任一分類商品|任何|1|x|

#### ☞ 路由
###### 渲染
| 說明           | Method | 後端 API                    |
| -------------- | ------ | --------------------------- |
| 取得分類商品 | GET    | 	/products/category/:id |

###### 路由
| 路由                                | 按鈕           |
| ----------------------------------- | -------------- |
| 前往[分類商品頁面]()   | 分類選單上任一分類      |
| 前往[單一商品詳細頁面](#單一商品詳細頁面) | 商品卡片 |
###### 操作

| 操作             | 按鈕     | Method | 後端 API               | 備註    |
| ---------------- | -------- | ------ | ---------------------- | --- |
| 顯示供應中商品 | 最新上架 | GET | /products/category/:id?sort=id&order=DESCpage=1 |   |
| 顯示未供應商品 | 低價優先 | GET | /products/category/:id?sort=price&order=ASC&page=1 |   |
| 顯示已售完商品 | 即期優先 | GET | /products/category/:id?sort=expiryDate&order=ASC&page=1 |   |
| 依最新商品排序 | 過期與完售商品 | GET | /products/category/:id?sort=`目前排序依據`&order=`目前排序依據`&page=1&notSupplied=true | 開關按鈕，再次點擊可取消顯示過期與完售商品  |
| 載入不同分頁商品資料 | 分頁按鈕 | GET    | products/category/:id?page=`指定頁數` | 每頁預設檢視十筆商品 |
#### ☞ 介面
[商品分類頁面]()

#### ☞ 邏輯
暫無
#### ☞ 異常情形處理
該分類無商品時，則顯示「沒有相關產品」
#### ☞ 資料結構
暫無


### 單一商品詳細頁面
#### ☞ 描述
點選商品圖片或名稱即可瀏覽該商品詳細資訊

#### ☞ 條件
|類型|角色|權限|狀態|
|-|-|-|-|
|瀏覽單一商品|任何|1|x|

#### ☞ 路由
###### 渲染
| 說明           | Method | 後端 API | 備註 |
| -------------- | ------ | -------- |---|
| 取得該商品資料 | GET    | products/:id   ||
| 取得該商品的賣場資料 | GET    | products/vendor/:id   ||
| 取得該賣家三個商品 | GET    | /products/vendor/:id?limit=3   |
| 取得該分類三個商品 | GET    | /products/category/:id?limit=3   |

###### 路由
| 路由                                | 按鈕           |
| ----------------------------------- | -------------- |
| 前往[某商品頁面](#單一商品詳細頁面) | 商品卡片 |
| 前往[某分類商品頁面](#分類功能) | 商品資訊下的類別按鈕/此分類其他食物 看更多 |
| 前往[賣家頁面](#賣家賣場頁面)       | 賣家頭像或名稱 / 此賣家更多食物 看更多         |

###### 操作
| 操作                 | 按鈕       | Method | 後端 API                | 備註 |
| -------------------- | ---------- | ------ | ----------------------- | ---- |
| 將商品加入購物車     | 加入購物車 |     | 	 |  存入 localStorage    |

#### ☞ 邏輯
|流程|規則|
|-|-|
|加入購物車|使用者須登入，且 1 ≤ 購物車數量 ≤ (商品最大數量 - 購物車內數量)  |
|數量 +1|當 購物車數量 < (商品最大數量 - 購物車內數量) 時點擊數量可 +1|
|數量 -1|當 購物車數量 > 0 時點擊數量可 -1|

#### ☞ 介面
[單一商品詳細資料]()

### 刊登功能
#### ☞ 描述
賣家可在後台刊登新商品

#### ☞ 條件
|類型|角色|權限|狀態|
|-|-|-|-|
|刊登商品|用戶|3|登入 + 賣家身份|

#### ☞ 路由

###### 路由
| 路由         | 按鈕   |
| ------------ | ------ |
| 回上一頁 | 取消 |

###### 操作
| 操作         | 按鈕     | Method | 後端 API         | 備註                           |
| ------------ | -------- | ------ | ---------------- | ------------------------------ |
| 上傳商品照片 | 選擇照片 |        |                  | 串 Imgur API 將 url 放進 input |
| 新增商品     | 送出(網頁版) 確定新增商品(手機版)     | POST   | products/add |                                |

#### ☞ 介面
[刊登商品]()
|元素|規則|錯誤提示|
|- |- |- |
|食物名稱|必填|此欄位為必填|
|食物介紹|必填|此欄位為必填|
|圖片|檔案大小 <= 1500K|此欄位為必填|
|分類|必填|此欄位為必填|
|價格|選填||
|數量|必填|此欄位為必填|

#### ☞ 資料結構
Table products
|欄位|型態|長度|必填|預設|備註|
|-|-|-|-|-|-|
|id|int||Y|A.I.||
|vendor_id|int||Y||"vendors"."id"|
|name|varchar|64|Y|||
|categoryId|int||Y|1|"product_categories"."id"|
|pictureUrl|varchar|64||||
|price|int||Y|||
|quantity|int||Y|||
|manufactureDate|date||Y|||
|expiryDate|date||Y|||
|description|text||Y|||
|isAvailable|boolean||Y|true||
|createdAt|datetime||Y|CURRENTTIME||
|updatedAt|datetime||Y|CURRENTTIME||


### 商品列表
#### ☞ 描述
賣家可以在後台管理查看所有商品列表

#### ☞ 條件
|類型|角色|權限|狀態|
|-|-|-|-|
|管理商品|賣家|3|登入 + 賣家身份|

#### ☞ 路由
##### 路由
| 路由         | 按鈕   |
| ------------ | ------ |
| /product_edit/:id ([編輯商品頁面](#編輯商品頁面)) | 編輯 |
| /product/:id ([單一商品頁面](#單一商品詳細頁面)) | 該商品圖片 |

##### 渲染
| 說明                   | Method | 後端 API        |
| ---------------------- | ------ | --------------- |
| 取得賣家所有商品 | GET    | /products/vendor/manage/:id |


##### 操作
| 操作 | 按鈕  | Method | 後端 API | 備註 |
| ------- | --- | -- | --- | -- |
| 刪除商品 | 刪除 | DELETE | /products/:id |   |
| 顯示全部商品 | 全部 | GET | /products/vendor/manage/:id?filter=all |   |
| 顯示供應中商品 | 供應中 | GET | /products/vendor/manage/:id?filter=available |   |
| 顯示未供應商品 | 未供應 | GET | /products/vendor/manage/:id?filter=unavailable |   |
| 顯示已售完商品 | 已售完 | GET | /products/vendor/manage/:id?filter=soldOut |   |
| 顯示已過期商品 | 已過期 | GET | /products/vendor/manage/:id?filter=expiry |   |
| 依最新商品排序 | 最新上架 | GET | /products/vendor/manage/:id?sort=id&order=DESC |   |
| 依有效期限排序 | 即期優先 | GET | /products/vendor/manage/:id?sort=expiryDate&order=ASC |   |


### 編輯商品頁面

###### 渲染
| 說明             | Method | 後端 API            |
| ---------------- | ------ | ------------------- |
| 取得自己的賣家商品 | GET    | /vendor/:id/products/ |

###### 路由
| 路由                                     | 按鈕         |
| ---------------------------------------- | ------------ |
| 前往[某商品頁面](#單一商品詳細頁面) | 檢視 |
| 前往[編輯商品頁面](#編輯商品頁面)  | 編輯  |


###### 操作
|操作|按鈕|Method|後端API|備註|
|-|-|-|-|-|
|將商品改為下架狀態|下架|PATCH|/products/:id|

### 賣家管理商品
#### ☞ 描述
賣家可以在後台管理上架/未上架商品

#### ☞ 條件
|類型|角色|權限|狀態|
|-|-|-|-|
|管理商品|用戶|3|登入 + 賣家身份|

#### ☞ 路由

##### 編輯商品頁面
###### 路由
| 路由         | 按鈕   |
| ------------ | ------ |
| 回上一頁 | 取消 |

###### 操作
| 操作 | 按鈕  | Method | 後端 API | 備註 |
| ------- | --- | -- | --- | -- |
| 上傳商品照片 | 上傳照片 |  |  | 串 Imgur API 將 url 放進 input |
| 編輯商品 | 送出(網頁版) | PATCH | products/:id |   |

#### ☞ 介面
[賣家商店頁面]()
[賣家後台頁面]()
[編輯商品頁面]()
|元素|規則|錯誤提示|
|- |- |- |
|名稱|必填|此欄位為必填|
|商品介紹|必填|此欄位為必填|
|圖片|檔案大小 <= 1500K|此欄位為必填|
|分類|必填|此欄位為必填|
|價格|選填||
|數量|必填|此欄位為必填|
|取貨地點|必填|此欄位為必填|
|取貨時間|必填|此欄位為必填|
|取貨方式|預設為面交||
|付款方式|預設為面交||

#### ☞ 資料結構
Table products

------

## 購物車系統

### 商品加入購物車

#### ☞ 描述
會員必須登入才能將商品加入購物車，可以在商品頁面選擇數量並加入購物車，並且可以在購物車頁面看到自己所有購物車商品

#### ☞ 條件
| 角色 | 權限 | 狀態  |
| --- | --- | ----- |
| 會員 | 2   | 登入  |

操作
| 操作      | 按鈕     | 備註             |
| -------- | ------- | ---------------- |
| 加入購物車 |加入購物車| 存入 localStorage |

#### ☞ 資料結構
`{"cartId${userId}":[
    {"id": 5, "quantity": 3},
    {"id": 155, "quantity": 3}
]}`

### 購物車頁面
#### ☞ 描述
買家可以選擇購物車內單一賣家的商品並進入預約時間畫面

#### ☞ 條件
| 角色 | 權限 | 狀態   |
| ---- | ---- | ------ |
| 會員 | 2    | 登入 |

渲染
| 說明                | Method | 後端 API |
| ------------------ | ------ | ------- |
| 取得自己所有購物車商品 | POST   | /cart   |

路由
| 路由         | 按鈕  |
| ----------- | ----- |
| 打開預訂時間表 | 預訂 |

操作
| 操作             | 按鈕   | 說明 |
| --------------- | ----- | --------------------------- |
| 選擇單一賣家食物   |checkbox|選擇單一賣家所有的食物進行預約    |
| 更改購物車商品數量 |- 數量 + |更改 localStorage 中該商品的數量|
| 刪除購物車商品    | x      |從 localStorage 中移除該商品   |

#### ☞ 介面
##### [購物車頁面]()

### 訂單預約畫面

| 說明                     | Method | 後端 API             | 
| ----------------------- | ------ | -------------------- |
| 取得欲結帳食物的賣家營業時間 | GET    | /vendors/profile/:id |

操作
| 操作        | 按鈕         | Method | 後端 API  | 備註            |
| ---------- | ------------ | ------ | -------- | -------------- |
| 預約面交時間 | 選擇日期、時間  |        |         | 需在店家營業時間內 |
| 訂單成立    | 確定          | POST   | /orders | 預約時間必填      |

------

## 訂單系統

### 買家訂單詳情

#### ☞ 描述
可以看到所有購買的訂單，並可依照全部、待取貨、已完成、已取消篩選訂單

#### ☞ 條件
| 角色 | 權限 | 狀態  |
| ---- | --- | ---- |
| 會員 | 2    | 登入 |

#### ☞ 路由
| 路由         | 按鈕        |
| ----------- | ---------- |
| 單一訂單詳情  | 查看訂單詳情 |

渲染
| 說明               | Method | 後端 API    |
| ------------------ | ----- | ----------- |
| 取得所有購買的訂單資料 | GET   | /orders/buy |

#### ☞ 介面
##### [買家訂單列表頁面]()

### 賣家訂單詳情

#### ☞ 描述
可以看到所有銷售的訂單，並可依照全部、待取貨、已完成、已取消篩選訂單

#### ☞ 條件
| 角色 | 權限 | 狀態 |
| ---- | ---- | ---- |
| 賣家 | 3    | 登入 |

#### ☞ 路由
| 路由         | 按鈕        |
| ----------- | ---------- |
| 單一訂單詳情  | 查看訂單詳情 |

渲染
| 說明                  | Method | 後端 API    |
| -------------------- | ------ | ----------- |
| 取得所有銷售的訂單資料   | GET    | /orders/sell |

#### ☞ 介面
##### [賣家訂單列表頁面]()

### 單一訂單詳情頁面

#### ☞ 描述
- 訂單成立之後，買/賣家皆可以完成訂單
- 訂單成立之後，買/賣家皆可以取消訂單

#### ☞ 條件
| 角色 | 權限 | 狀態 |
| --- | --- | --- |
| 會員 | 2   | 登入 |
| 賣家 | 3   | 登入 |

渲染
| 說明           | Method | 後端 API     |
| ------------- | ------ | ------------ |
| 取得單一訂單資訊 | GET    | /orders/:id |

操作
| 操作     | 按鈕    | Method | 後端 API             | 備註 |
| ------- | ------ | ------ | -------------------- | --- |
| 取消訂單 | 取消訂單 | PATCH  | /orders/cancel/:id   |     |
| 完成訂單 | 完成訂單 | PATCH  | /orders/complete/:id |     |

#### ☞ 介面
##### [訂單詳情頁面]()

#### ☞ 資料結構
Table order
|欄位|型態|長度|必填|預設|備註|
|-|-|-|-|-|-|
|id|int||Y|A.I.||
|orderNumber|varchar(16)||Y||每張訂單自己的流水編號|
|vendorId|int||Y||"vendors"."id"|
|clientId|int||Y||"users"."id"|
|totalQuantity|int||Y|||
|totalPrice|int||Y|||
|pickupTime|datetime||Y|||
|remarks|text||Y||訂單備註|
|isPaid|boolean||Y|false||
|isCompleted|boolean||Y|false||
|isCanceledByVendor|boolean||Y|false||
|isCanceledByClient|boolean||Y|false||
|createdAt|datetime||Y|CURRENTTIME||
|updatedAt|datetime||Y|CURRENTTIME||

------

## 後台管理系統

### 管理後台首頁
#### ☞ 描述
#### ☞ 條件
|類型|角色|權限|狀態|
|-|-|-|-|
|跳轉至其他管理頁面|管理員|4|O |
#### ☞ 路由
| 路由       | 按鈕 |
| ---------- | ---- |
| 前往[管理用戶頁](#管理用戶頁) | 連結 |
| 前往[管理訂單頁](#管理訂單頁) | 連結 |
| 前往[訊息匣頁](#訊息匣頁) | 連結 |
| 前往[管理商家分類頁](#管理商家分類頁) | 連結 |
| 前往[管理商品分類頁](#管理商品分類頁) | 連結 |
| 前往[FAQ編輯頁](#FAQ編輯頁) | 連結 |
| 前往[賣家頁面](#賣家頁面) | 連結 |
| 回到平台首頁 | LOGO    |
| 登出| 登出   |
| FAQ| FAQ   |
| 關於我們| 關於我們  |
#### ☞ 操作
#### ☞ 介面
#### ☞ 邏輯
#### ☞ 異常情形處理
#### ☞ 資料結構

### 管理用戶頁
#### ☞ 描述
管理員在這個頁面可以檢視用戶是否具有賣家身分，也可以檢視編輯用戶的權限。
每一頁檢視十筆用戶資料，可透過搜尋、下一頁、上一頁、首頁、最後一頁等方式顯示不同的資料。
權限分為停權與正常兩種，若用戶權限為正常，則編輯權限按鈕顯示停權，反之則會顯示復權。點擊之後「停權/復權」會彈出確認/取消的確認框，若選確認才會改變用戶權限。
若用戶有賣家身分，管理員可以透過連結跳轉到到用戶的賣家頁面查看資料。

#### ☞ 條件
|類型|角色|權限|狀態|
|-|-|-|-|
|查看用戶的賣家頁面|管理員|4|O |
|編輯用戶的權限|管理員|4|O |
#### ☞ 路由
| 路由       | 按鈕 |
| ---------- | ---- |
| 前往[管理用戶頁](#管理用戶頁) | 連結 |
| 前往[管理訂單頁](#管理訂單頁) | 連結 |
| 前往[訊息匣頁](#訊息匣頁) | 連結 |
| 前往[管理商家分類頁](#管理商家分類頁) | 連結 |
| 前往[管理商品分類頁](#管理商品分類頁) | 連結 |
| 前往[FAQ編輯頁](#FAQ編輯頁) | 連結 |
| 前往[賣家頁面](#賣家頁面) | 連結 |
| 選擇賣家權限為 正常 or 停權 | 正常/停權 |
| 確認編輯賣家權限 | 確認 |
| 取消編輯賣家權限 | 取消 |
| 首頁 | 返回 |
| 上一頁 | 返回 |
| 下一頁 | 前往 |
| 最後一頁 | 前往 |
| 載入搜尋結果的前 10 筆用戶資料 | 搜尋     |
| 回到管理首頁 |回到管理首頁     |
| 回到平台首頁 | LOGO    |
| 登出| 登出   |
| FAQ| FAQ   |
| 關於我們| 關於我們  |

#### ☞ 操作
| 操作                           | 按鈕     | Method | 後端 API                        | 備註   |
| ------------------------------ | -------- | ------ | ------------------------------- | ------ |
| 重新載入前 10 筆用戶資料       | 用戶管理 | GET    | /users?limit=10       | 不換頁 |
| 載入搜尋結果的前 10 筆用戶資料 | 搜尋     | GET    | /users/:name?limit=10 | 不換頁 |
| 載入第一頁                     | 首頁     | GET    | /users?limit=10       | 不換頁 |
| 載入下一頁的 10 筆用戶資料     | 下一頁   | GET    | /users?limit=10       | 不換頁 |
| 載入上一頁的 10 筆用戶資料     | 上一頁   | GET    | /users?limit=10       | 不換頁 |
| 載入最後一頁的用戶資料         | 最後一頁 | GET    | /users?limit=10       | 不換頁 |
| 編輯使用者權限 | 確認 | PATCH  |/user/ban/:id |    不換頁   |

#### ☞ 介面
[管理用戶頁面]()
#### ☞ 邏輯
x
#### ☞ 異常情形處理
x
#### ☞ 資料結構
<!-- |欄位|型態|長度|必填|預設|備註|
|-|-|-|-|-|-|
|is_admin（1:管理員）|boolean||Y|||
|avatar_url用戶照片|varchar||Y|||
| status權限|tinyint||Y||0: 正常、1：停權|
| username用戶名稱|varchar  ||Y|||
| id|int  ||||| -->

### 管理訂單頁
#### ☞ 描述
管理員可以檢視所有的訂單與其目前狀態，每頁檢視 10 筆訂單。
點擊訂單編號可以跳轉至訂單詳情頁面，點擊訂單賣家可以跳轉至賣場頁面。
可透過搜尋用戶來查詢訂單。
#### ☞ 條件
|類型|角色|權限|狀態|
|-|-|-|-|
|查看訂單詳情|管理員|4|O |
#### ☞ 路由
| 路由       | 按鈕 |
| ---------- | ---- |
| 前往[管理用戶頁](#管理用戶頁) | 連結 |
| 前往[管理訂單頁](#管理訂單頁) | 連結 |
| 前往[訊息匣頁](#訊息匣頁) | 連結 |
| 前往[管理商家分類頁](#管理商家分類頁) | 連結 |
| 前往[管理商品分類頁](#管理商品分類頁) | 連結 |
| 前往[FAQ編輯頁](#FAQ編輯頁) | 連結 |
| 前往[賣家頁面](#賣家頁面) | 連結 |
| 前往訂單詳情 | 連結 |
| 首頁 | 返回 |
| 上一頁 | 返回 |
| 下一頁 | 前往 |
| 最後一頁 | 前往 |
| 載入搜尋結果的前 10 筆訂單資料 | 搜尋     |
| 回到管理首頁 |回到管理首頁     |
| 回到平台首頁 | LOGO    |
| 登出| 登出   |
| FAQ| FAQ   |
| 關於我們| 關於我們  |
#### ☞ 操作
| 操作                           | 按鈕     | Method | 後端 API                        | 備註   |
| ------------------------------ | -------- | ------ | ------------------------------- | ------ |
| 重新載入前 10 筆訂單資料       | 訂單管理 | GET    | /orders?limit=10       | 不換頁 |
| 載入搜尋結果的前 10 筆訂單資料 | 搜尋     | GET    | /orders/:user?limit=10 | 不換頁 |
| 載入第一頁                     | 首頁     | GET    | /orders?limit=10       | 不換頁 |
| 載入下一頁的 10 筆訂單資料     | 下一頁   | GET    | /orders?limit=10       | 不換頁 |
| 載入上一頁的 10 筆訂單資料     | 上一頁   | GET    | /orders?limit=10       | 不換頁 |
| 載入最後一頁的訂單資料         | 最後一頁 | GET    | /orders?limit=10       | 不換頁 |
#### ☞ 介面
#### ☞ 邏輯
#### ☞ 異常情形處理
#### ☞ 資料結構

### 管理商家分類頁
#### ☞ 描述
管理員在這個頁面可以新增、編輯、刪除商家分類。
#### ☞ 條件
|類型|角色|權限|狀態|
|-|-|-|-|
|新增商家分類|管理員|4|O |
|編輯商家分類|管理員|4|O |
|刪除商家分類|管理員|4|O |
#### ☞ 路由
| 路由       | 按鈕 |
| ---------- | ---- |
| 前往[管理用戶頁](#管理用戶頁) | 連結 |
| 前往[管理訂單頁](#管理訂單頁) | 連結 |
| 前往[訊息匣頁](#訊息匣頁) | 連結 |
| 前往[管理商家分類頁](#管理商家分類頁) | 連結 |
| 前往[管理商品分類頁](#管理商品分類頁) | 連結 |
| 前往[FAQ編輯頁](#FAQ編輯頁) | 連結 |
| 回到管理首頁 |回到管理首頁     |
| 回到平台首頁 | LOGO    |
| 登出| 登出   |
| FAQ| FAQ   |
| 關於我們| 關於我們  |
#### ☞ 操作
| 操作                       | 按鈕         | Method | 後端 API         | 備註   |
|:-------------------------- | ------------ | ------ | ---------------- | ------ |
| 載入商家分類               | 管理商家分類 | GET    | /vendor-category | 不換頁 |
| 新增商家分類               | 新增         | POST   | /vendor-category | 不換頁 |
| 編輯商家分類               | 編輯         | PATCH    | /vendor-category/:id        | 不換頁 |
| 刪除商家分類 | 刪除       | GET    | /vendor-category/:id        | 不換頁 |

#### ☞ 介面
#### ☞ 邏輯
#### ☞ 異常情形處理
#### ☞ 資料結構


### 管理商品分類頁
#### ☞ 描述
管理員在這個頁面可以新增、編輯、刪除商品分類。
#### ☞ 條件
|類型|角色|權限|狀態|
|-|-|-|-|
|新增商品分類|管理員|4|O |
|編輯商品分類|管理員|4|O |
|刪除商品分類|管理員|4|O |
#### ☞ 路由
| 路由       | 按鈕 |
| ---------- | ---- |
| 前往[管理用戶頁](#管理用戶頁) | 連結 |
| 前往[管理訂單頁](#管理訂單頁) | 連結 |
| 前往[訊息匣頁](#訊息匣頁) | 連結 |
| 前往[管理商家分類頁](#管理商家分類頁) | 連結 |
| 前往[管理商品分類頁](#管理商品分類頁) | 連結 |
| 前往[FAQ編輯頁](#FAQ編輯頁) | 連結 |
| 回到管理首頁 |回到管理首頁     |
| 回到平台首頁 | LOGO    |
| 登出| 登出   |
| FAQ| FAQ   |
| 關於我們| 關於我們  |
#### ☞ 操作
| 操作                       | 按鈕         | Method | 後端 API         | 備註   |
|:-------------------------- | ------------ | ------ | ---------------- | ------ |
| 載入商品分類               | 管理商品分類 | GET    | /vendor-category | 不換頁 |
| 新增商品分類               | 新增         | POST   | /vendor-category | 不換頁 |
| 編輯商品分類               | 編輯         | PATCH    | /vendor-category/:id        | 不換頁 |
| 刪除商品分類 | 刪除       | GET    | /vendor-category/:id        | 不換頁 |

#### ☞ 介面
#### ☞ 邏輯
#### ☞ 異常情形處理
#### ☞ 資料結構


### FAQ編輯頁
#### ☞ 描述
管理員在這個頁面可以新增、編輯、刪除 FAQ。
#### ☞ 條件
|類型|角色|權限|狀態|
|-|-|-|-|
|新增 FAQ|管理員|4|O |
|編輯 FAQ|管理員|4|O |
|刪除 FAQ|管理員|4|O |
#### ☞ 路由
| 路由       | 按鈕 |
| ---------- | ---- |
| 前往[管理用戶頁](#管理用戶頁) | 連結 |
| 前往[管理訂單頁](#管理訂單頁) | 連結 |
| 前往[訊息匣頁](#訊息匣頁) | 連結 |
| 前往[管理商家分類頁](#管理商家分類頁) | 連結 |
| 前往[管理商品分類頁](#管理商品分類頁) | 連結 |
| 前往[FAQ編輯頁](#FAQ編輯頁) | 連結 |
| 回到管理首頁 |回到管理首頁     |
| 回到平台首頁 | LOGO    |
| 登出| 登出   |
| FAQ| FAQ   |
| 關於我們| 關於我們  |
#### ☞ 操作
| 操作                       | 按鈕         | Method | 後端 API         | 備註   |
|:-------------------------- | ------------ | ------ | ---------------- | ------ |
| 載入 FAQ               | 管理 FAQ | GET    | /vendor-category | 不換頁 |
| 新增 FAQ               | 新增         | POST   | /vendor-category | 不換頁 |
| 編輯 FAQ               | 編輯         | PATCH    | /vendor-category/:id        | 不換頁 |
| 刪除 FAQ | 刪除       | GET    | /vendor-category/:id        | 不換頁 |

#### ☞ 介面
#### ☞ 邏輯
#### ☞ 異常情形處理
#### ☞ 資料結構

------

## 訊息系統

### 使用者訊息
#### ☞ 描述
使用者查看、發送訊息給賣家及管理員、及賣家發送訊息給使用者

#### ☞ 條件
|類型|角色|權限|狀態|
|-|-|-|-|
|查看及發送使用者訊息|會員|2|登入|
|查看及發送賣場訊息|賣家|3|登入 + 賣家身份|

#### ☞ 路由
###### 渲染
| 說明                   | Method | 後端 API        |
| ---------------------- | ------ | --------------- |
| 取得所有訊息 | GET    | /messages/user |
| 取得系統訊息 | GET    | /messages-to-admin |

###### 路由
| 路由                      | 按鈕 |
| ------------------------- | ---- |
| 前往[賣場訊息頁面](#賣場訊息) | 賣場訊息 |


###### 操作
| 操作 | 按鈕 | Method | 後端 API      | 
| --- | ---- | ------ | ------------- |
| 點選傳訊對象 | (訊息列表之賣家) | GET   | /messages/user/:id |
| 發送訊息 | 傳送 | POST   | /messages/user/:id |
| 點選傳訊對象為系統訊息 | 系統訊息 | GET   | /messages-to-admin |
| 發送訊息 | 傳送 | POST   | /messages-to-admin |


#### ☞ 介面

|元素|規則|錯誤提示|
|- |- |- |
|訊息內容|不可為空|無|

#### ☞ 邏輯
|流程|規則|
|-|-|
|驗證|確認使用者未被停權，否則無法傳送訊息|
|驗證|確認選擇之傳訊對象未被停權，否則無法傳送訊息|
|驗證|確認訊息內容不為空|

#### ☞ 異常情形處理

暫無

#### ☞ 資料結構

|欄位|型態|長度|必填|預設|備註|
|-|-|-|-|-|-|
|id|int||Y|||
|content|text||Y|||

### 賣場訊息
#### ☞ 描述
賣家查看、發送訊息發送訊息給使用者

#### ☞ 條件
|類型|角色|權限|狀態|
|-|-|-|-|
|查看及發送賣場訊息|賣家|3|登入 + 賣家身份|

#### ☞ 路由
###### 渲染
| 說明                   | Method | 後端 API        |
| ---------------------- | ------ | --------------- |
| 取得所有訊息 | GET    | /messages/vendor |

###### 路由
| 路由                      | 按鈕 |
| ------------------------- | ---- |
| 前往[使用者訊息頁面](#使用者訊息) | 使用者訊息 |


###### 操作
| 操作 | 按鈕 | Method | 後端 API      | 
| --- | ---- | ------ | ------------- |
| 點選傳訊對象 | (訊息列表之使用者) | GET   | /messages/vendor/:id |
| 發送訊息 | 傳送 | POST   | /messages/vendor/:id |


#### ☞ 介面

|元素|規則|錯誤提示|
|- |- |- |
|訊息內容|不可為空|無|

#### ☞ 邏輯
|流程|規則|
|-|-|
|驗證|確認使用者及賣家身份未被停權，否則無法傳送訊息|
|驗證|確認選擇之傳訊對象未被停權，否則無法傳送訊息|
|驗證|確認訊息內容不為空|

#### ☞ 異常情形處理

暫無

#### ☞ 資料結構

|欄位|型態|長度|必填|預設|備註|
|-|-|-|-|-|-|
|id|int||Y|||
|content|text||Y|||

-----


### 管理員訊息
#### ☞ 描述
管理員查看、發送訊息發送訊息給使用者

#### ☞ 條件
|類型|角色|權限|狀態|
|-|-|-|-|
|查看及發送訊息|管理員|4|登入 + 管理員身份|

#### ☞ 路由
###### 渲染
| 說明                   | Method | 後端 API        |
| ---------------------- | ------ | --------------- |
| 取得所有訊息 | GET    | /messages-to-admin/admin |

###### 路由


###### 操作
| 操作 | 按鈕 | Method | 後端 API      | 
| --- | ---- | ------ | ------------- |
| 點選傳訊對象 | (訊息列表之使用者) | GET   | /messages-to-admin/admin/:id |
| 發送訊息 | 傳送 | POST   | /messages-to-admin/admin/:id |


#### ☞ 介面

|元素|規則|錯誤提示|
|- |- |- |
|訊息內容|不可為空|無|

#### ☞ 邏輯
|流程|規則|
|-|-|
|驗證|確認訊息內容不為空|

#### ☞ 異常情形處理

暫無

#### ☞ 資料結構

|欄位|型態|長度|必填|預設|備註|
|-|-|-|-|-|-|
|id|int||Y|||
|content|text||Y|||

-----


## 網站系統

### 查看FAQ頁
#### ☞ 描述
此頁面上可以檢視關於網站的常見問題
#### ☞ 條件
|類型|角色|權限|狀態|
|-|-|-|-|
|查看常見問題|任何|1|x|

#### ☞ 路由
渲染
| 說明           | Method | 後端 API |
| -------------- | ------ | -------- |
| 取得所有 FAQ | GET    | /faqs |

#### ☞ 介面
#### ☞ 邏輯
暫無
#### ☞ 異常情形處理
暫無
#### ☞ 資料結構
------


## 地圖系統

### 地圖頁面
#### ☞ 描述
此頁面上可以檢視買家、賣家的所在位置，並透過連結跳轉至賣場頁面。
#### ☞ 條件
|類型|角色|權限|狀態|
|-|-|-|-|
|檢視地圖|任何|1|x|

#### ☞ 路由
##### 路由
| 路由                      | 按鈕 |
| ------------------------- | ---- |
| 前往[賣場頁面](#賣場頁面) | 賣場名稱 |
| 前往[商品頁面](#單一商品詳細頁面) | 商品圖示 |

##### 渲染
| 說明           | Method | 後端 API |
| -------------- | ------ | -------- |
| 店家資料 | GET    | /vendors/profile |
| 店家分類 | GET    | /vendor-categories |


##### 操作
| 操作             | 按鈕               | Method | 後端 API                             | 備註 |
|:---------------- | ------------------ | ------ | ------------------------------------ | ---- |
| 檢視單一店家資料 | 店家點位           | GET    | /vendors/profile/:id                         |      |
| 店家商品資料     | 載入店家時同時載入 | GET    | /product/vendor/:id&limit=5 |      |

#### ☞ 邏輯
暫無
#### ☞ 異常情形處理
暫無
#### ☞ 資料結構