iT邦幫忙

2021 iThome 鐵人賽

DAY 2
0
永豐金融APIs

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

[day27]Vue實作-即時交易查詢

上兩篇進行了歷史交易查詢實作,但當日繳費查詢則就要從訂單直接查詢著手
這整個流程有點亂,我還需要想一下怎麼配置比較好
先把功能做出來囉
美化的部分也待之後再來開發

網頁開發

  • 架構
    先談談網頁,預期讓住戶輸入住戶編號及繳費年月查詢繳款紀錄,得到繳費狀態資訊
  • 開發
    話不多說,就直接複製歷史交易的頁面來調整,概念是差不多的!!
  • 於about.vue加入UI的部分
<template>
  <div class="about">
      <Navbar></Navbar>
      <Login></Login>
    <div class="container">
        <h1 class="text-center p-5">繳費紀錄即時查詢</h1>
    </div>
  <div>
    <b-form @submit="onSubmit" @reset="onReset" v-if="show">
    <b-form-group id="input-group-1" label="住戶代號:" label-for="input-1">
        <b-form-input
          id="input-1"
          v-model="form.name"
          placeholder="Enter account"
          required
        ></b-form-input>
      </b-form-group>
      <b-form-group id="input-group-3" label="費用年月:" label-for="input-3">
      <b-form-input
          id="input-3"
          v-model="form.yyyymm"
          type="number" 
          placeholder="輸入管理費用年月:格式:yyyymm"
          required
        ></b-form-input>
      </b-form-group>
      <b-button v-b-toggle.collapse-2  type="submit" variant="primary">繳款紀錄查詢</b-button>
      <b-button type="reset" variant="danger">重置</b-button>            
    </b-form>
     
    <b-card class="mt-3" header="訂單資訊">
      <span class="order info"> {{orderinfo }}</span> 
    </b-card>
  </div>

  </div>
</template>
  • 於about.vue加入script部分
<script>
import global from '../Global.vue';
import axios from'axios'
  export default {
    data() {
      return {
        form: {
          name: '',
          yyyymm: ''
        },
        sentform: {
          householder: '',
          OrderNo: '',
        },
        orderinfo: "",
        show: true,
        sinopac_api:global.sinopac_api
      }
    },
    methods: {

     async onSubmit(event) {
        event.preventDefault()
        this.sentform.householder = this.form.name
        this.sentform.OrderNo = this.form.yyyymm

        axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*';
        const response =await axios.post(`${this.sinopac_api}`+"sinopacApi_OrderQuery_order?orderNo="+`${this.form.name}` +"_"+`${this.form.yyyymm}`)

        
        let responseStatus=JSON.stringify(response.data["message"])

        let responseResult=JSON.stringify(response.data["decrypt_dist"])
        let decrypt_Result= JSON.stringify(response.data["decrypt_dist"]["OrderList"]["0"])
         let payStatus = ""
        console.log("response.data",response.data)
        console.log("responseStatus",response.data["message"])
        console.log("responseResult",response.data["decrypt_dist"])
        console.log("decrypt_Result",response.data["decrypt_dist"]["OrderList"]["0"])
        console.log("JSON.parse(decrypt_Result).PayStatus",JSON.parse(decrypt_Result).PayStatus)
        console.log( JSON.stringify(JSON.parse(decrypt_Result).PayStatus))
        if ( JSON.parse(decrypt_Result).PayStatus =="1A200" ){
          payStatus= "待付款";
        }
         else if ( JSON.parse(decrypt_Result).PayStatus =="1A400" ){
           payStatus= "付款完成";
         }
         alert(responseStatus)
      },

畫面呈現

  1. 建立繳費單號
    送出繳費需求
    https://ithelp.ithome.com.tw/upload/images/20211013/20140924lxZnQwCoSc.png
    得到繳款資訊
    https://ithelp.ithome.com.tw/upload/images/20211013/20140924jCUeegvVG5.png
  2. 查詢結果
    https://ithelp.ithome.com.tw/upload/images/20211013/20140924infPemR67a.png

其實還有很多要做的,檢核住戶資格,檢核繳費年月輸入是否正確,目前也只有將最基本的狀態顯示,還有例外處理的部分要開發,其實距離完整的網站還有些距離,但基本雛形是大概有個方向。
因為開發的時間有點趕,只能邊做邊補,後面看看能不能再加強一些東西


上一篇
[day26]批次實作-繳款紀錄收檔
下一篇
[day28]優化架構-訂單留存及檢核(1)
系列文
永豐Vue一下-從生活尋找靈感30

尚未有邦友留言

立即登入留言