开发示例：发票小助手

基于Amaze UI + Vue + OkayApi 开发，构建一个可用于纪录公司发票信息的小助手。

在线示例和源代码

终实现效果，请访问（同时支持手机端和PC端访问）：http://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版本效果

---

© 2017-2018 小白接口 All Rights Reserved. 粤ICP备15028808号-3 技术QQ群：660311764