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

網頁開發

• 架構
  先談談網頁，預期讓住戶輸入住戶編號及繳費年月查詢繳款紀錄，得到繳費狀態資訊
• 開發
  話不多說，就直接複製歷史交易的頁面來調整，概念是差不多的!!
• 於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. 建立繳費單號
   送出繳費需求
   
   得到繳款資訊
   
2. 查詢結果
   

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