Idea3C Form Document
===

###### tags:`Case`

> 文件內容包含客訴表單、退換貨表單、維修表單、收購表單、購買須知、退貨需知、維修服務、舊機估價服務、保固說明

Components
===
> 各元件相關說明
## Button
> 表單尾部之單一按鈕
- 引用元件
- (無)
- 附帶屬性
- content
- 型別: String
- 說明: 顯示於按鈕上之內容
- 範例: "送出"
- color
- 型別: String
- 說明: 按鈕顏色色碼
- 範例: "#8e8d8a"
## Buttons
> 表單尾部之重置、送出按鈕列
- 引用元件
- Button
- 附帶屬性
- (無)
## Header
> 表單頂部之連結列、表單標題列
- 引用元件
- Service
- 附帶屬性
- items
- 型別: Array
- 說明: 欲置放於該列之項目文字
- 範例: [ "購買須知", "維修保固說明服務", "退貨申請" ]
- bgColor
- 型別: String
- 說明: 該列背景顏色
- 範例: "#6e6062"
- 預設: "#6e6062"
- isLink
- 型別: Boolean
- 說明: 置放於該列之項目是否為連結
- 範例: true
- 預設: true
## InputFile
> 上傳檔案之按鈕與已上傳檔案資訊呈現
- 引用元件
- Tag
- 附帶屬性
- value
- 型別: File
- 說明: 欲儲存檔案之變數
- 範例: new File([ ], "")
## ListField
> 下拉式選單欄位與其標籤
- 引用元件
- Tag
- Note
- 附帶屬性
- name
- 型別: String
- 說明: 該欄位之標籤內容
- 範例: "顧客姓名"
- isRequired
- 型別: Boolean
- 說明: 是否為必填欄位
- 範例: true
- message
- 型別: String
- 說明: 該欄位之附註資訊
- 範例: "非本公司購買可留空白"
- list
- 型別: Array
- 說明: 選單之選項
- 範例: [ "基隆市", "台北市", "桃園市" ]
- flex
- 型別: String
- 說明: 與其他欄位並列時所佔之比例
- 範例: "9"
- 預設: "1"
- value
- 型別: String
- 說明: 欲儲存輸入內容之變數
- 範例: ""
## LogoSection
> 表單頂部之置放商標區域
- 引用元件
- (無)
- 附帶屬性
- (無)
## Note
> 欄位或區域之附註資訊
- 引用元件
- (無)
- 附帶屬性
- message
- 型別: String
- 說明: 欲顯示之資訊內容
- 範例: "非本公司購買可留空白"
## NoticeRow
> 注意事項說明頁面常用之橫向排版區域
- 引用元件
- (無)
- 附帶屬性
- heading
- 型別: String
- 說明: 該區域之標題
- 範例: "黑貓宅配"
- imgUrl
- 型別: String
- 說明: 該區域之標題圖片，去除"@/assets/"後的URL
- 範例: "退貨需知/退款方式.png"
## RadioButton
> 圓形選擇按鈕與其選項
- 引用元件
- (無)
- 附帶屬性
- group
- 型別: String
- 說明: 圓形按鈕之群組名稱
- 範例: "returned"
- name
- 型別: String
- 說明: 圓形按鈕之選項內容
- 範例: "退貨"
- value
- 型別: String
- 說明: 欲儲存選擇內容之變數
- 範例: ""
## Section
> 並排欄位區域
- 引入元件
- (無)
- 附帶屬性
- width
- 型別: String
- 說明: 該區域之寬度
- 範例: "100%"
- 預設: "100%"
- space
- 型別: String
- 說明: 並排欄位間之間距
- 範例: "33px"
- isColumn
- 型別: Boolean
- 說明: 頁面為行動裝置大小時是否為轉為直向排版
- 範例: true
- 預設: true
- pcMarginTop
- 型別: String
- 說明: 頁面為電腦大小時之上方間距
- 範例: "10px"
- 預設: "0"
- mbMarginTop
- 型別: String
- 說明: 頁面為行動裝置大小時之上方間距
- 範例: "10px"
- 預設: "0"
- mbMarginRight
- 型別: String
- 說明: 頁面為行動裝置大小時之右方間距
- 範例: "10px"
- 預設: "0"
- mbMarginBottom
- 型別: String
- 說明: 頁面為行動裝置大小時之下方間距
- 範例: "10px"
- 預設: "0"
- mbJustify
- 型別: String
- 說明: 頁面為行動裝置大小時之flex排版方式
- 範例: "flex-start"
- 預設: "space-between"
- remainFlex
- 型別: String
- 說明: 區域右方欲保留之空間所佔比例
- 範例: "6"
- 預設: "0"
## Service
> 表單頂部之連結、表單標題
- 引入元件
- (無)
- 附帶屬性
- label
- 型別: String
- 說明: 欲顯示之連結、標題內容
- 範例: "退貨申請"
- value
- 型別: String
- 說明: 作為連結時欲導向之路由
- 範例: "returnedForm"
- isLink
- 型別: Boolean
- 說明: 是否為連結
- 範例: true
- 預設: true
## ServiceColumn
> 服務說明頁面常用之直向排版區域
- 引入元件
- (無)
- 附帶屬性
- title
- 型別: String
- 說明: 該區域之標題
- 範例: "維修注意事項"
- pcPaddingTopBottom
- 型別: String
- 說明: 電腦版該區域內容之上下空白
- 範例: "20px"
- pcPaddingLeftRight
- 型別: String
- 說明: 電腦版該區域內容之左右空白
- 範例: "20px"
- mbPaddingTopBottom
- 型別: String
- 說明: 手機版該區域內容之上下空白
- 範例: "20px"
- mbPaddingLeftRight
- 型別: String
- 說明: 手機版該區域內容之左右空白
- 範例: "20px"
## Tag
> 欄位標籤、欄位資訊、選項內容
- 引入元件
- (無)
- 附帶屬性
- name
- 型別: String
- 說明: 欲顯示之內容
- 範例: "顧客姓名"
- isRequired
- 型別: Boolean
- 說明: 是否顯示星號
- 範例: true
- 預設: false
## TextArea
> 輸入文字區域與其標籤
- 引入元件
- Tag
- Note
- 附帶屬性
- name
- 型別: String
- 說明: 該欄位之標籤內容
- 範例: "附註"
- isRequired
- 型別: Boolean
- 說明: 是否為必填欄位
- 範例: true
- content
- 型別: String
- 說明: 該欄位未輸入前之顯示內容
- 範例: "您的意見對我們十分重要，謝謝您！"
- message
- 型別: String
- 說明: 該欄位之附註資訊
- 範例: "若您有其他關於商品維修、運送或其他需求，歡迎留言給我們。"
- value
- 型別: String
- 說明: 欲儲存輸入內容之變數
- 範例: ""
## TextField
> 輸入文字/日期欄位與其標籤
- 引入元件
- Tag
- Note
- 附帶屬性
- name
- 型別: String
- 說明: 該欄位之標籤內容
- 範例: "附註"
- isRequired
- 型別: Boolean
- 說明: 是否為必填欄位
- 範例: true
- content
- 型別: String
- 說明: 該欄位未輸入前之顯示內容
- 範例: "您的意見對我們十分重要，謝謝您！"
- message
- 型別: String
- 說明: 該欄位之附註資訊
- 範例: "若您有其他關於商品維修、運送或其他需求，歡迎留言給我們。"
- inputType
- 型別: String
- 說明: 該欄位之類型
- 範例: "date"
- 預設: "text"
- flex
- 型別: String
- 說明: 與其他欄位並列時所佔之比例
- 範例: "9"
- 預設: "1"
- value
- 型別: String
- 說明: 欲儲存輸入內容之變數
- 範例: ""

Views
===
## AcquisitionForm
> 收購換機表單
- 引用元件
- Header
- Tag
- Note
- Section
- TextField
- ListField
- InputFile
- Buttons
- 變數定義
- links
- 型別: Array
- 說明: 頁面上方header顯示之連結
- 範例: [{label: "舊機估價服務",value: "evaluationservice"}]
- 備註: 陣列中之物件屬性，label為UI顯示之連結名稱，value為欲導向之router-link連結
- times
- 型別: Array
- 說明: 引入之常數(方便聯絡時間)
- ways
- 型別: Array
- 說明: 引入之常數(訊息管道)
- customerName
- 型別: String
- 說明: 綁定顧客姓名之輸入內容
- phoneNumber
- 型別: String
- 說明: 綁定連絡電話之輸入內容
- contactTime
- 型別: String
- 說明: 綁定方便聯絡時間選擇之選項
- email
- 型別: String
- 說明: 綁定電子郵件輸入之內容
- receiveLocation
- 型別: String
- 說明: 綁定收件地址輸入之內容
- saleItem
- 型別: String
- 說明: 綁定欲出售商品輸入之內容
- photos
- 型別: Array
- 說明: 綁定檔案上傳區域之內容
- expectPrice
- 型別: String
- 說明: 綁定預期價格輸入之內容
- messageSource
- 型別: String
- 說明: 綁定訊息管道選擇之選項
- examCode
- 型別: String
- 說明: 綁定驗證碼輸入之內容
- answerCode
- 型別: String
- 說明: 正確之驗證碼
## ComplaintForm
> 客訴表單
- 引用元件
- Header
- Section
- TextField
- ListField
- TextArea
- Buttons
- 變數定義
- links
- 型別: Array
- 說明: 頁面上方header顯示之連結
- 範例: [{label: "舊機估價服務",value: "evaluationservice"}]
- 備註: 陣列中之物件屬性，label為UI顯示之連結名稱，value為欲導向之router-link連結
- times
- 型別: Array
- 說明: 引入之常數(方便聯絡時間)
- locations
- 型別: Array
- 說明: 引入之常數(居住縣市)
- customerName
- 型別: String
- 說明: 綁定顧客姓名之輸入內容
- phoneNumber
- 型別: String
- 說明: 綁定連絡電話之輸入內容
- contactTime
- 型別: String
- 說明: 綁定方便聯絡時間選擇之選項
- homeLocation
- 型別: String
- 說明: 綁定居住縣市選擇之選項
- email
- 型別: String
- 說明: 綁定電子郵件輸入之內容
- purchaseItem
- 型別: String
- 說明: 綁定購買商品輸入之內容
- purchaseDate
- 型別: String
- 說明: 綁定購買日期輸入之內容
- serverName
- 型別: String
- 說明: 綁定服務人員輸入之內容
- opinion
- 型別: String
- 說明: 綁定您的意見輸入之內容
- examCode
- 型別: String
- 說明: 綁定驗證碼輸入之內容
- answerCode
- 型別: String
- 說明: 正確之驗證碼
## EvaluationService
> 舊機估價服務
- 引用元件
- Header
- ServiceColumn
- 變數定義
- links
- 型別: Array
- 說明: 頁面上方header顯示之連結
- 範例: [{label: "舊機估價服務",value: "evaluationservice"}]
- 備註: 陣列中之物件屬性，label為UI顯示之連結名稱，value為欲導向之router-link連結
## Home
> 首頁
- 引用元件
- Header
## PurchaseNotice
> 購買須知
- 引用元件
- Header
- NoticeRow
- 變數定義
- links
- 型別: Array
- 說明: 頁面上方header顯示之連結
- 範例: [{label: "舊機估價服務",value: "evaluationservice"}]
- 備註: 陣列中之物件屬性，label為UI顯示之連結名稱，value為欲導向之router-link連結
## RepairForm
> 維修表單
- 引用元件
- Header
- Section
- TextField
- ListField
- TextArea
- Buttons
- 變數定義
- links
- 型別: Array
- 說明: 頁面上方header顯示之連結
- 範例: [{label: "舊機估價服務",value: "evaluationservice"}]
- 備註: 陣列中之物件屬性，label為UI顯示之連結名稱，value為欲導向之router-link連結
- times
- 型別: Array
- 說明: 引入之常數(方便聯絡時間)
- customerName
- 型別: String
- 說明: 綁定顧客姓名之輸入內容
- phoneNumber
- 型別: String
- 說明: 綁定連絡電話之輸入內容
- contactTime
- 型別: String
- 說明: 綁定方便聯絡時間選擇之選項
- email
- 型別: String
- 說明: 綁定電子郵件輸入之內容
- receiveLocation
- 型別: String
- 說明: 綁定取件地址輸入之內容
- repairItem
- 型別: String
- 說明: 綁定送修商品輸入之內容
- itemId
- 型別: String
- 說明: 綁定商品編號輸入之內容
- faultReason
- 型別: String
- 說明: 綁定故障原因描述輸入之內容
- note
- 型別: String
- 說明: 綁定備註輸入之內容
- examCode
- 型別: String
- 說明: 綁定驗證碼輸入之內容
- answerCode
- 型別: String
- 說明: 正確之驗證碼
## RepairService
> 維修服務
- 引用元件
- Header
- ServiceColumn
- 變數定義
- links
- 型別: Array
- 說明: 頁面上方header顯示之連結
- 範例: [{label: "舊機估價服務",value: "evaluationservice"}]
- 備註: 陣列中之物件屬性，label為UI顯示之連結名稱，value為欲導向之router-link連結
- isMacPriceShow
- 型別: Boolean
- 說明: 是否顯示MAC維修價格
- isIphonePriceShow
- 型別: Boolean
- 說明: 是否顯示IPhone維修價格
- isIpadPriceShow
- 型別: Boolean
- 說明: 是否顯示IPad維修價格
## ReturnedForm
> 退換貨表單
- 引用元件
- Header
- Section
- TextField
- RadioButton
- TextArea
- Buttons
- 變數定義
- links
- 型別: Array
- 說明: 頁面上方header顯示之連結
- 範例: [{label: "舊機估價服務",value: "evaluationservice"}]
- 備註: 陣列中之物件屬性，label為UI顯示之連結名稱，value為欲導向之router-link連結
- serviceOption
- 型別: String
- 說明: 綁定我想要選擇之選項
- customerName
- 型別: String
- 說明: 綁定顧客姓名之輸入內容
- phoneNumber
- 型別: String
- 說明: 綁定連絡電話之輸入內容
- email
- 型別: String
- 說明: 綁定電子郵件輸入之內容
- receiveLocation
- 型別: String
- 說明: 綁定取件地址輸入之內容
- itemsInfo
- 型別: Array
- 說明: 綁定所有退換貨商品之編號及退換貨原因輸入之內容
- 備註: 陣列中之物件屬性，itemId對應該物品之編號，returnReason對應該物品之退換貨原因
- refundWay
- 型別: String
- 說明: 綁定退款方式輸入之內容
- bankName
- 型別: String
- 說明: 綁定銀行名稱輸入之內容
- bankId
- 型別: String
- 說明: 綁定銀行代碼輸入之內容
- refundAccount
- 型別: String
- 說明: 綁定退款帳號輸入之內容
- examCode
- 型別: String
- 說明: 綁定驗證碼輸入之內容
- answerCode
- 型別: String
- 說明: 正確之驗證碼
## ReturnedNotice
> 退換貨須知
- 引用元件
- Header
- NoticeRow
- ServiceColumn
- 變數定義
- links
- 型別: Array
- 說明: 頁面上方header顯示之連結
- 範例: [{label: "舊機估價服務",value: "evaluationservice"}]
- 備註: 陣列中之物件屬性，label為UI顯示之連結名稱，value為欲導向之router-link連結
## WarrantyExplain
> 保固說明
- 引用元件
- Header
- 變數定義
- links
- 型別: Array
- 說明: 頁面上方header顯示之連結
- 範例: [{label: "舊機估價服務",value: "evaluationservice"}]
- 備註: 陣列中之物件屬性，label為UI顯示之連結名稱，value為欲導向之router-link連結

Router
===
> 各項表單路由
- 客訴表單: /complaintForm
- 退換貨表單: /returnedForm
- 維修表單: /repairForm
- 收購換機表單: /acquisitionForm
- 購買須知: /purchasenotice
- 退換貨須知: /returnednotice
- 維修服務: /repairservice
- 舊機估價服務: /evaluationservice
- 保固說明: /warrantyexplain

Constants
===
> 各項常數
- times: 方便聯絡時間下拉選項
- ways: 訊息管道下拉選項
- locations: 居住縣市下拉選項