开发示例:发票小助手

基于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

Logo

前往低代码交流专区

更多推荐