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

開發示例：發票小助手

基於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()複製代碼

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

運行效果截圖

H5首頁 - 1

H5首頁（發票信息展現） - 2

H5首頁（添加發票信息） - 3

PC版本效果

 小白接口  技術QQ羣：660311764