---
# System prepended metadata

title: Idea3C Form Document
tags: [Case]

---

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: 居住縣市下拉選項