[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)
      },

2. 调整弹跳视窗资讯
   调整alert资讯

    alert("银行代码 : 807  汇款帐号 : "+ JSON.parse(atmParam).AtmPayNo+" 汇款金额 : "+ JSON.parse(responseResult).Amount/100)

3. 新增订单资讯於主页
   很简单的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. 下订单
   
2. 弹跳视窗
   
3. 显示订单资讯於主页下方