交易建立頁面

功能規劃

1. 簡單建置交易建立的頁面，填入住戶代號、金額以及選擇轉帳或信用卡繳費。
2. 交易方式選擇
   • 選擇帳號:顯示永豐虛擬帳號，提供住戶轉帳。
   • 選擇信用卡:跳轉刷卡頁面，提供刷卡。

程式開發

-修改Products.vue

<template>
  <div class="products">
      <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-2" label="管理費用:" label-for="input-2" >
      <b-form-input
          id="input-2"
          v-model="form.bill"
          type="number" 
          placeholder="輸入費用"
          required
        ></b-form-input>
      </b-form-group>
      <!-- <b-form-group id="input-group-3" label="Food:" label-for="input-3">
        <b-form-select
          id="input-3"
          v-model="form.food"
          :options="foods"
          required
        ></b-form-select>
      </b-form-group> -->

      <b-form-group id="input-group-4" v-slot="{ ariaDescribedby }">
        <b-form-checkbox-group
          v-model="form.selected"
          id="selected-4"
          :aria-describedby="ariaDescribedby"
        >
<b-form-radio v-model="form.selected" :aria-describedby="ariaDescribedby" name="some-radios" value="A">轉帳</b-form-radio>
<b-form-radio v-model="form.selected" :aria-describedby="ariaDescribedby" name="some-radios" value="C">信用卡</b-form-radio>

        </b-form-checkbox-group>
      </b-form-group>
      <b-button type="submit" variant="primary">交易建立</b-button>
      <b-button type="reset" variant="danger">重置</b-button>
    </b-form>
    <b-card class="mt-3" header="Form Data Result">
      <pre class="m-0">{{ form }}</pre>
    </b-card>
  </div>


  </div>
</template>


<script>
  export default {
    data() {
      return {
        form: {
          bill: '',
          name: '',
          selected: ''
        },
        show: true
      }
    },
    methods: {
      onSubmit(event) {
        event.preventDefault()
        alert(JSON.stringify(this.form))
      },
      onReset(event) {
        event.preventDefault()
        // Reset our form values
        this.form.bill = ''
        this.form.name = ''
        this.form.selected = ''
        this.show = false
        this.$nextTick(() => {
          this.show = true
        })
      }
    }
  }
</script>

• 畫面呈現
  訂單填入住戶代號D07-1
  填入管理費金額為2001
  選擇轉帳
  畫面如下:
  
  其中因為金額的input，type設定為number
  會進行檢核，只能填入數字。
  目前button點選只會顯示參數，
  
  明天再來開發呼叫永豐API的部分，預期將會顯示虛擬帳號
  今天事情很多，就只能快速開發個介面，明天再來努力