# 綠界金流Api串接（前端）
🐑 🐑 🐑
------------
## 流程說明

### 建立訂單
1. 跟後端建立後端訂單資料
2. 建立成功後用訂單編號當url跳轉至ECpay

### 建立ECpay
1. 用router取的編號後跟後端取的訂單資料
2. 判斷訂單資料的狀態

    paymentStatus: {
        1: 未付款
        2: 付款中
        3: 完成付款
    }
    ecpayStatus: {
        1: 第一次建立訂單
        2: 重建訂單
        3: 完成訂單
    }

**如果ecpayStatus === 3 前往/{payment}/{no} 結果頁面**
4. 顯示資料跟開始付款按鈕
5. 按下開始付款後 跟後端取得表單資料放上v-html後submit跳窗前往綠界站外付

### ECpay
#### 付款完成
會有返回商店按鈕 點選後會根據付款類型前往不同的地方
- 前往/{payment}/{no} 結果頁面
- 前往/{no} 重新判定訂單狀態
#### 付款失敗或訂單建立失敗
1. 綠界通知後端付款失敗 後端重新建立綠界訂單 狀態改為重建訂單(2)
2. 使用者點選返回按鈕前往/{no} 重新判定訂單狀態


## 檔案分層
### page

|-Money
  |-_id.vue
  |-index.vue
  |-_payment/_no/index.vue

### component

|-Money
 |-Ecpay.vue
 |-Info
  |-ATM.vue
  |-Barcode.vue
  |-CREDIT.vue
  |-CVS.vue
  |-WebATM.vue
  |-CREDIT
   |-Installment.vue
   |-Payoff.vue
   |-Period.vue

## 新增的套件
- 一維條碼(jsBarcode)
> https://github.com/lindell/JsBarcode
- 二維條碼 qrcode
> https://www.npmjs.com/package/qrcode.vue

### JsbarCode使用範例
裝進去

npm i jsbarcode

載入

template
barcode可為svg、img、canvas

jsbarcode("htmlid",String);

### qrcode.vue使用範例

npm install --save qrcode.vue # yarn add qrcode.vue 

於component中引入

import QrcodeVue from 'qrcode.vue'

templete

<qrcode-vue :value="value" :size="size" level="H"></qrcode-vue>

## 銀行與付款方式對照表
用於CVS Barcode ATM 返回付款中Info data.PaymentType

## 付款方式
- ATM 一般atm匯款
- CVS 超商號碼 and 條碼
- WebATM 網路銀行（需讀卡機
- Barcode 一般條碼
- Credit 信用卡
- payoff 一次付清
- installment 分期付款
- period 定期定額

## 遇到問題Vue
### 資料尚未拿到時資料呈現
template 取得data 為 order[]
order透過api取回 如果預設data不為

order:{
    buyer: {}
}

則結果會為顯示為undefind需要向下訂到第二層
### Props問題
由於htmltag props採駝峰命名導致props失敗
htmltag 由於都會轉成小寫不建議採大寫命名
props則無所謂 大駝峰小駝峰都可以

<div id="vm">
<!--post-title 跟 post-content 都是props -->
  <blog-post post-title="Blog1" post-content="I\'m content1"></blog-post>
</div>

<script>
Vue.component("blog-post", {
  props: ["PostTitle", "postContent"],
  template: `<div>
    <h3>{{ PostTitle }}</h3>
    <div>{{ postContent }}</div>
  </div>`
});
</script>

### HotReLoad-Boom!

npm run dev

模式中開啟過多分頁會導致nuxt啟的node server crash

npm run build
npm run start

則不會
## 電子發票細項
- 回應代碼: rtnCode
- 特店編號: IISMerID
- 發票號碼: IISNumber
- 特店自訂編號: IISRelateNumber
- 客戶編號: IISCustomerID
- 買方統編: IISIdentifier
- 客戶名稱: IISCustomerName
- 客戶地址: IISCustomerAddr
- 客戶手機號碼: IISCustomerPhone
- 客戶電子信箱: IISCustomerEmail
- 通關方式: IISClearanceMark
- 發票種類: IISType
- 發票類別: IISCategory
- 課稅別: IISTaxType
- 特種稅額類別: specialTaxType
- 稅率: IISTaxRate
- 稅金: IISTaxAmount
- 發票金額: IISSalesAmount
- 發票檢查碼: IISCheckNumber
- 載具類別: IISCarrierType
- 載具編號: IISCarrierNum
- 捐款單位捐贈碼: IISLoveCode
- 發票開立IP: IISIP
- 發票開立時間: IISCreateDate
- 發票開立狀態: IISIssueStatus
- 發票作廢狀態: IISInvalidStatus
- 發票上傳狀態: IISUploadStatus
- 發票上傳時間: IISUploadDate
- 發票上傳後接收狀態: IISTurnkeyStatus
- 折讓剩餘金額: IISRemainAllowanceAmt
- 列印旗標: IISPrintFlag
- 中獎期標: IISAwardFlag
- 中獎種類: IISAwardType
- 隨機碼: IISRandomNumber
- 發票備註: invoiceRemark
- 顯示電子發票BARCODE用: posBarCode
- 顯示電子發票QRCODE左邊用: QRCodeLeft
- 顯示電子發票QRCODE右邊用: QRCodeRight