iT邦幫忙

2021 iThome 鐵人賽

DAY 2
0
永豐金融APIs

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

[day22]Vue實作-交易建立頁面

交易建立頁面

功能規劃

  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
    選擇轉帳
    畫面如下:
    https://ithelp.ithome.com.tw/upload/images/20211007/20140924nokUnMaSuq.png
    其中因為金額的input,type設定為number
    會進行檢核,只能填入數字。
    目前button點選只會顯示參數,
    https://ithelp.ithome.com.tw/upload/images/20211007/20140924DE6cqBgrEd.png
    明天再來開發呼叫永豐API的部分,預期將會顯示虛擬帳號
    今天事情很多,就只能快速開發個介面,明天再來努力

上一篇
[day21]Vue實作-登出及會員功能實作
下一篇
[day23]Vue實作-交易建立頁面-API串接問題處理
系列文
永豐Vue一下-從生活尋找靈感30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言