开发示例:发票小助手

基于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模板代码是:
```

{{ item.company_name }}

纳税人识别号:{{ item.company_id }}
查看二维码

企业地址:{{ item.company_address }}
查看二维码

```

结合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版本效果