云南区块链商户平台：抓包技术自制开票工具(三)

前言

上节我们将登录的流程梳理完毕了，来到了本章重点，既然开发票就肯定要有以下参数： 原工具不支持识别历史记录，对于我们的小商店来说，开票的公司基本就是固定的几个，如果提供下拉支持选择将会大大降低人力检索成本

添加商品

通过抓包分析，我们发现输入数量和单价时，系统会走接口计算金额总价，下一次输入新的商品单价和数量时 ，会返回总计金额，也就是说 这个接口不仅提供单次计算接口，还支持统计当前开票商品总金额，搞明白了这点，就不用js去写计算了

搜索商品

通过商品编码，发现了搜索接口，可以获取到商品的税收商品编码

在这里插入图片描述

问题难点1

现在问题来了，前端假设搜索娃哈哈是可以匹配到的，那是因为库存有这个商品，如果没有怎么办呢？如果还是手动添加商品那和网站有啥区别？便捷点在哪？

我去检索了下，希望能找到一个接口支持通过商品名称得出商品编码，于是有了下面的图片

在这里插入图片描述

该网站没有接口，目测只能自己爬；网站根据使用率进行排名，一般第一个就是正确的商品编码

方案梳理

在这里插入图片描述

快速开票模块

显示基本信息（名称、数量、单价），可修改数量和单价或删除整行记录

添加商品按钮

点击弹出对话框，供检索该账户商品编码库，没有检索到询问是否添加入库，传递商品名去下一个页面，可对商品名进行补全，通过第三方接口计算商品编码完成入库

商品编码快速录入按钮

支持自检该商品税收编码，无需手动查询添加，无需检索商品分类，自动完成

辅助模式

易操作，筛选数据慢；但是针对动手能力弱的商家也能解决问题，可通过顶部配置按钮关闭或开启

具体实现

导入table库插件：t-table

整理静态UI

在这里插入图片描述

数据列表操作

在这里插入图片描述

添加操作

新建按钮添加数据

<button class="b-btn b-btn-blue b-btn-sm" style="margin-top: 10rpx;margin-left: 10rpx;" @click="addRow('1', '测试数据', '35', '23')">添加数据(debug)</button>

addRow(id, name, age, hobby) {  
this.tableList.push({ 
id,  
name,  
age,  
hobby  
});  
},

天机添加时，会自动在末尾加入一条数据

在这里插入图片描述

清空操作

<button class="b-btn b-btn-blue b-btn-sm" style="margin-top: 10rpx;margin-left: 10rpx;" @click="clearList()">清空数据(debug)</button>

clearList() {  
this.tableList = []; // 清空数组  
},

点击后进行数据清空

在这里插入图片描述

编辑和删除

通过edit方法，进行id传输修改指定的数量和单价

通过detele方法，同理进行删除

由于太过简单，直接跳过

数据还原

由于测试的一直是demo部分，我们需要先将具体数据带入，进行还原，方便后面接入

// 表格操作
tableList: [{
id: 0,
shopcode:'',
name: '方便面',
num: 19,
price: '10'
},
{
id: 1,
shopcode:'',
name: '娃哈哈天然矿泉水',
num: 21,
price: '12'
}
],
// 表格操作

在这里插入图片描述

通过以上的整理和规定，对接真实数据时只需要对应填入即可