基于Amaze UI + Vue + OkayApi 开发，构建一个可用于纪录公司发票信息的小助手。
终实现效果，请访问（同时支持手机端和PC端访问）：http://demo.okayapi.com/fabiao/
项目源代码下载，请前往码云okayapi-demo。
此发票小助手可以在未登录情况下使用，而发票可以多个，因此，关键点是：免登录 + 集合数据。因此可以使用小白接口提供的应用集合数据。所以：
添加发票，使用添加元素接口
获取发票列表，使用获取集合列表接口
生成二维码，使用根据文本内容，生成二维码接口
下面是相关的实现说明。
页面表单开发好后，使用Vue的表单绑定，将输入框的输入与变量绑定。如对于添加发票的表单：
企业名称 *
纳税人识别号 *
企业地址
然后，在【保存】按钮添加响应事件，并通过Ajax接口请求，将发票信息保存到应用集合数据。
varaddFaBiaoApp=newVue({el:'#addFaBiaoApp',data:{company_id:'',company_name:'',company_address:'',tips:''},methods:{add:function(){let_self=thisletcid=retrieveCid()letsetData={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版本效果
© 2017-2018 小白接口 All Rights Reserved. 粤ICP备15028808号-3技术QQ群：660311764
网友评论