需求
@新新：客户希望能够扫二维码查订单进度。
实现步骤
设置查询接口
在nxt库中新建一个订单进度查询接口
sql语句中引入一个id变量，用来代入订单号进行模糊匹配：
select top 1 工序1,实际数量1,工序2,实际数量2,工序3,实际数量3
from 工序表
where 订单号 like '%'+{id}+'%'
填个测试值，点击测试查询预览效果：
制作web页面
建一个poQuery.html，里面代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>订单进度</title>
<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/1.1.3/weui.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<div class="weui-cells__title">订单进度</div>
<div v-for="item,key in data1" class="weui-cells" style="margin-top:0">
<div class="weui-cell">
<div class="weui-cell__bd">
<p></p>
</div>
<div class="weui-cell__ft"></div>
</div>
</div>
</div>
<script>
var getUrlKey = function(name){ return decodeURIComponent((new RegExp('[?|&]'+name+'='+'([^&;]+?)(&|#|;|$)').exec(location.href)||[,""])[1].replace(/\+/g,'%20'))||null; };
var app = new Vue({
el: '#app',
data: {
data1: {},
},
created: function () {
var self = this;
axios.post("http://192.168.99.20:88/api/open/getAnonymousToken", { Account: "nxt" }) // 192.168.99.20:88改成自己的服务器
.then(function (r) {
if (r.data.Code == 0) {
axios.post('http://192.168.99.20:88/api/open/getQueryData',
{ AccessToken: r.data.AccessToken, QueryName: "订单进度", InputData: JSON.stringify({id: getUrlKey("id")}) })
.then(function (res) {
self.data1 = res.data.DataList[0];
}).catch(function (err) {
console.log(err);
});
}
}).catch(function (e) {
console.log(e);
});
}
})
</script>
</body>
</html>
这里面调用了nx服务器的openApi，主要分两步，第一步获取AccessToken，第二部获取订单进度数据。
制作二维码
把上述页面放到webserver下，然后将完整URL制作为二维码，客户就能通过订单上的二维码扫码查询这些进度信息了。
拓展练习
增加样式，可定制进度风格，例如timeline模式
小结
- 定义查询接口，使用动态参数。
- 制作web页面，通过openApi调用查询接口。
- 将web的URL打印成二维码。
2019-09-27