開發示例：發票小助手

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

線上示例和原始碼

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

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

實現思路與介面設計

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

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

下面是相關的實現說明。

實現發票新增功能

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

企業名稱 *
納稅人識別號 *
企業地址

```

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

```javascript 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模板程式碼是：
```

```

結合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() ```

渲染出來的效果類似這樣：

執行效果截圖

H5首頁 - 1

H5首頁（發票資訊展示） - 2

H5首頁（新增發票資訊） - 3

PC版本效果