輕應用：發票小助手開發示例（Vue + Amaze UI + OkayApi）

黃禪宗發表於2018-01-27

VueUIAPI

開發示例：發票小助手

基於Amaze UI + Vue + OkayApi 開發，構建一個可用於紀錄公司發票資訊的小助手。

線上示例和原始碼

終實現效果，請訪問（同時支援手機端和PC端訪問）：demo.okayapi.com/fabiao/

專案原始碼下載，請前往碼雲okayapi-demo。

實現思路與介面設計

此發票小助手可以在未登入情況下使用，而發票可以多個，因此，關鍵點是：免登入 + 集合資料。因此可以使用小白介面提供的應用集合資料。所以：

新增發票，使用新增元素介面
獲取發票列表，使用獲取集合列表介面
生成二維碼，使用根據文字內容，生成二維碼介面

下面是相關的實現說明。

實現發票新增功能

頁面表單開發好後，使用Vue的表單繫結，將輸入框的輸入與變數繫結。如對於新增發票的表單：

<form class="am-form">
    <label for="company_name" class="about-color">企業名稱 *</label>
    <input id="company_name" type="text" v-model="company_name" placeholder="請輸入企業單位的名稱" >
    <br>
    <label for="company_id" class="about-color">納稅人識別號 *</label>
    <input id="company_id" type="text" v-model="company_id" placeholder="請輸入納稅人識別號" >
    <br>
    <label for="company_address" class="about-color">企業地址</label>
    <input id="company_address" type="text" v-model="company_address" >
    <br>
</form>複製程式碼

然後，在【儲存】按鈕新增響應事件，並通過Ajax介面請求，將發票資訊儲存到應用集合資料。

var addFaBiaoApp = new Vue({
    el: '#addFaBiaoApp',
    data: {
        company_id: '',
        company_name: '',
        company_address: '',
        tips: ''
    },
    methods: {
        add: function() {
            let _self = this
            let cid = retrieveCid()

            let setData = {
                company_id: _self.company_id,
                company_name: _self.company_name,
                company_address: _self.company_address
            }

            $.ajax({
                url: '/okayapi.php',
                dataType: 'json',
                data: { s: 'App.Main_Set.Add', key: cid, data: JSON.stringify(setData) }
            }).done(function (rs) {
                if (rs.data && rs.data.err_code == 0) {
                    _self.tips = '發票新增成功，正在重新整理當前頁面~~'

                    window.location.href = '/fabiao/';
                }
            });
        }
    }
})複製程式碼

成功儲存後，可以在小白後臺檢視到對應的應用集合資料，例如：

這樣，就實現了前端應用的開發，對小白介面的呼叫，以及通過小白後臺進行資料管理。

實現顯示發票列表功能

新增發票資訊後，就可以在頁面初始化時，進行資料列表的獲取了。

通過PHP代理請求：

http://demo.okayapi.com/okayapi.php?s=App.Main_Set.GetList&key=fabiao_1517027656000&sort=2&perpage=4複製程式碼

成功情況下，介面返回的結果資料，類似如下：

{
    "ret": 200,
    "data": {
        "err_code": 0,
        "err_msg": "",
        "items": [
            {
                "id": 12,
                "key": "fabiao_1517027656000",
                "data": {
                    "company_id": "9144xxxxxxx514927N ",
                    "company_name": "深圳市XXX公司",
                    "company_address": "企業地址：深圳市寶安區xxx路xxx號xxx區"
                },
                "keyword": "",
                "weight": 0,
                "add_time": "2018-01-27 14:54:35",
                "update_time": ""
            },
            // 多組，略……
        ],
        "total": 5,
        "page": 1,
        "perpage": 4
    },
    "msg": ""
}複製程式碼

截圖為：

而，發票列表頁面的模板非常簡單，通過for迴圈便可以將資料進行渲染了。HTML模板程式碼是：

<div class="am-u-lg-3 am-u-md-6 am-u-sm-12 detail-mb" v-for="item in fabiao_list" >

  <h3 class="detail-h3">
    <i class="am-icon-smile-o am-icon-sm" aria-hidden="true"></i>

    {{ item.company_name }}
  </h3>

  <p class="detail-p">
  納稅人識別號：{{ item.company_id }}
  <br /><a :href="'http://api.okayapi.com/?service=Ext.QrCode.Png&size=6&data=' + item.company_id " target="_blank" >檢視二維碼</a>
  </p>
  <p class="detail-p">
  企業地址：{{ item.company_address }}
  <br /><a  :href="'http://api.okayapi.com/?service=Ext.QrCode.Png&size=6&data=' + item.company_address " target="_blank" >檢視二維碼</a>
  </p>

</div>複製程式碼

結合Vue，實現JS初始化函式init()即可：

var myFaBiaoApp = new Vue({
    el: '#myFaBiaoApp',
    data: {
        fabiao_list: []
    },
    methods: {
        init: function() {
            let _self = this
            let cid = retrieveCid()

            $.ajax({
              url: '/okayapi.php',
              dataType: 'json',
              data: { s: 'App.Main_Set.GetList', key: cid, sort: "2", perpage: 4 } // 取前4個，按建立時間逆序
            }).done(function (rs) {
                if (rs.data && rs.data.err_code == 0) {
                    $.each(rs.data.items, function (index, el) {
                      let item = {
                        company_id: el.data.company_id,
                        company_name: el.data.company_name,
                        company_address: el.data.company_address,
                        add_time: el.add_time
                      }

                      _self.fabiao_list.push(item)
                    })
                }
            });
        }
    }
})

myFaBiaoApp.init()複製程式碼