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