iT邦幫忙

2021 iThome 鐵人賽

DAY 2
0
永豐金融APIs

永豐Vue一下-從生活尋找靈感系列 第 24

[day24]Vue實作-交易建立頁面_完成版

調整

  • 目前雖然可以送交易,但還沒有解析回覆的結果,趁連假第一天來處理一下!!
  1. 解析訂單送出後回覆之資訊
    昨天寫的很急,今天調整了一下內容,並且將API的回應解析也寫入了,
    完整的程式碼如下
async onSubmit(event) {
    event.preventDefault()
    this.sentform.householder = this.form.name
    this.sentform.Amount = parseInt(this.form.bill)
    this.sentform.OrderNo = this.form.yyyymm
    this.sentform.PayType = this.form.selected
    axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*';
    const response =await axios.post(`${this.sinopac_api}`+"sinopacApi_Order", this.sentform)
    let responseResult=JSON.stringify(response.data["decrypt_dist"])
    let atmParam= JSON.stringify(response.data["decrypt_dist"]["ATMParam"])
    console.log(responseResult)
    console.log(atmParam)
    console.log(JSON.parse(responseResult).OrderNo)
    console.log(JSON.parse(atmParam).AtmPayNo)
      },
  1. 調整彈跳視窗資訊
    調整alert資訊
    alert("銀行代碼 : 807  匯款帳號 : "+ JSON.parse(atmParam).AtmPayNo+" 匯款金額 : "+ JSON.parse(responseResult).Amount/100)
  1. 新增訂單資訊於主頁
    很簡單的b-card
<b-card class="mt-3" header="訂單資訊">
  <span class="order info"> {{orderinfo }}</span> 
</b-card>

script增加資訊

this.orderinfo = "銀行代碼 : 807  匯款帳號 : "+ JSON.parse(atmParam).AtmPayNo+" 匯款金額 : "+ JSON.parse(responseResult).Amount/100 ;

更新後如下圖呈現

  1. 下訂單
    https://ithelp.ithome.com.tw/upload/images/20211009/20140924MicsG2zx5T.png
  2. 彈跳視窗
    https://ithelp.ithome.com.tw/upload/images/20211009/201409249ZhYq3iHOn.png
  3. 顯示訂單資訊於主頁下方
    https://ithelp.ithome.com.tw/upload/images/20211009/20140924uMmY2k7nMY.png

上一篇
[day23]Vue實作-交易建立頁面-API串接問題處理
下一篇
[day25]Vue實作-歷史交易查詢畫面
系列文
永豐Vue一下-從生活尋找靈感30

尚未有邦友留言

立即登入留言