开发示例：发票小助手

基于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 = thislet 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 = thislet 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版本效果

轻应用：发票小助手开发示例（Vue + Amaze UI + OkayApi）相关推荐

一个微信小程序开发示例
一个微信小程序开发示例(豆瓣电影) 新版本(不包含工作流)请移步至:https://github.com/zce/weapp-douban 当前仓库会暂缓更新,主要留下来给大家答疑需要基础教程的朋友 ...
基于PySimpleGUI和VXI11的示波器小助手开发项目
1.项目描述 (1)开发一个工具,可以使计算机通过网线操控示波器,完成指令下发.保存截图.运行脚本等功能: (2)环境配置:windows10 PC.Tek示波器(兼容3k.5k系列): (3)使用v ...
H5应用开发大赛落幕 Amaze UI作品榜上有名
近日,由华为和云适配联合主办的HTML5移动应用开发大赛颁奖典礼圆满落幕.其中个人开发者郑张宽所设计的企业IM应用"PenPen"因其使用HTML5开发出良好的用户体验荣获冠军.除 ...
应用实战｜微信小程序开发示例之在线商城
"超能力"数据库-拿来即用,应用开发人员再也不用为撰写API而发愁.MemFire Cloud 为开发者提供了简单易用的云数据库(表编辑器.自动生成API.SQL编辑器.备份恢复. ...
应用实战｜微信小程序开发示例之Super课表
此示例提供了使用 MemFire Cloud 构建一个课表的小程序的步骤.小程序用到的MemFire Cloud的功能包括: 云数据库:存储小程序数据表的信息. 用户验证:小程序使用MemFire C ...
基于 WPF + Modern UI 的公司OA小助手开发总结
前言: 距离上一篇博客,整整一个月的时间了.人不能懒下来,必须有个阶段性的总结,算是对我这个阶段的一个反思.人只有在总结的过程中才会发现自己的不足. 公司每天都要在OA系统上上班点击签到,下班点击签退 ...
校友会小程序开发笔记四：UI基本元素设计
基于微信小程序轻快的特点, 旨在微信生态体系内,建立友好.高效.一致的用户体验,同时最大程度适应和支持不同校友需求,实现校友与小程序服务方的共赢. 为了避免下游在微信中使用小程序服务时,注意力被周围复 ...
基于Android原生开发的理财小助手APP
一.实验题目个人理财小助手二.实验目的掌握 SQLite 数据库及其使用. 熟练掌握布局及常用控件 Button.ListView.EditText.TextView 等. 三.总体设计 (含背 ...
用图片文字识别软件复制微信小助手的开票信息
微信目前有开票小助手的功能,可以保存开票信息,客户经常会发微信开票小助手里的截图,附带有个二维码,这边可以扫描二维码获取抬头,虽然听说有用二维码极速开票的,对于这个不清楚,也不打算了解,本人还是用的传 ...

轻应用：发票小助手开发示例（Vue + Amaze UI + OkayApi）