利用快递100的接口做一个快递信息查询

pokemon发表于:2018年10月11日 15:28:10更新于:2018年10月24日 09:38:02

我们在利用kintone做一个采购管理的应用的时,往往会一起登记商品在网上采购的物流单号,
这次,我们将介绍如何利用这些单号做一个快捷的物流状态查询功能。利用快递100的API,加上一个按钮就能轻松实现物流状态的查询。

解决方案

在申请kintone时,填入快递公司和快递单号。保存后通过点击调用快递100API的按钮,

就能在快递100上显示物流的信息了。


0015bbf1336ba16a2cde5e1ed0d1c85

使用到的kintone API

kintone.events.on 
kintone.app.record.getSpaceElement

提前准备

添加必要的字段

  1. 选择需要录入快递信息的一个应用。

  2. 添加以下字段。

字段名称字段类型字段代码
快递公司下拉菜单Transporter
快递单号单行文本框Number

空行栏call_button

 *下拉菜单字段的菜单根据快递100API的兼容公司设置了以下公司。

  • 德邦物流

  • DHL

  • EMS

  • FEDEX

  • 汇通快运

  • 申通

  • 顺丰

  • 天天快递

  • 圆通速递

  • 韵达快运

  • 中通速递

    快递公司(下拉菜单)字段的设置:

    0015bbef8461bab68fca71307996ae1



     快递单号(单行文本框)字段的设置:

    0015bbefab5dba00ffc68442e4d2068    


     占位符图片(空白栏)字段的设置:

    0015bbefb4585e5ca31f2e5c350725f

    3.  保存添加的字段信息并更新应用。

设置自定义JavaScript / CSS

  1. 示例代码“sample.js”,请以“UTF-8”编码保存。

/*
 * 
 * Copyright (c) 2016 Cybozu
 *
 * Licensed under the MIT License
 */
jQuery.noConflict();
(function($) {
    "use strict";

    kintone.events.on('app.record.detail.show', function(e) {
        var mySpaceFieldButton = kintone.app.record.getSpaceElement('call_button');
        var $button = $('<button class="custom-button" title="配送状态确认"><i class="fa fa-truck"></i></button>');
        var body = {
            "app": kintone.app.getId(),
            "id": kintone.app.record.getId()
        };
        kintone.api('/k/v1/record', 'GET', body).then(function(resp) {
            var company = resp.record.Transporter.value;
            var company_id;
            switch (company) {
                case "德邦物流":
                    company_id = "debangwuliu";
                    break;
                case "DHL":
                    company_id = "dhl";
                    break;
                case "EMS":
                    company_id = "ems";
                    break;
                case "FEDEX":
                    company_id = "fedex";
                    break;
                case "汇通快运":
                    company_id = "huitongkuaidi";
                    break;
                case "申通":
                    company_id = "shentong";
                    break;
                case "顺丰":
                    company_id = "shunfeng";
                    break;
                case "天天快递":
                    company_id = "tiantian";
                    break;
                case "圆通速递":
                    company_id = "yuantong";
                    break;
                case "韵达快运":
                    company_id = "yunda";
                    break;
                case "中通速递":
                    company_id = "zhongtong";
                    break;
                case "":
                    window.alert("没有选择快递公司");
                    return;
                default:
                    window.alert("快递100没有找到相关的快递公司");
                    return;
            }
            var number = resp.record.Number.value;
            var dialog_iframe = '<div style="display:none;overflow:hidden;padding:3px" id="dialog"><iframe frameborder="no" border="0" id="kuaidi100"  scrolling="auto"  width="100%" height="100%" src="https://www.kuaidi100.com/chaxun?com=' + company_id + "&nu=" + number + '"></iframe></div>';
            $(mySpaceFieldButton).append($button).append(dialog_iframe);
        }, function(resp) {
        });

        $button.click(function() {
            $('#dialog').dialog({
                autoOpen: false,
                modal: true,
                resizable: true,
                width: 960,
                height: 640,
                title: "快递查询"
            });
            $("#dialog").dialog("open");
            return;
        });
    });
})(jQuery);

示例代码“sample.css”,请以“UTF-8”编码保存。

.custom-button {
    color: #a8a8a8;
    font-size: 32px;
    display: inline-block;
    padding: 0 16px;
    height: 48px;
    border: 1px solid #e3e7e8;
    background-color: #f7f9fa;
    text-align: center;
}

.custom-button:hover {
    color: #3498db;
}

在“应用的设置 > 通过JavaScript/CSS自定义”中添加sample.js和sample.css。
这里同时也用到了jQuery,jQueryUI以及Font Awesome字体( 可参见:使用Font Awesome 在菜单上创建漂亮按钮的方法 (暂无中文页面))
CDN的URL:

  • jQuery,jQueryUI

  • https://js.cybozu.com/jquery/2.1.4/jquery.min.js

  • https://js.cybozu.cn/jqueryui/1.12.1/jquery-ui.min.js

  • Font Awesome

  • https://js.cybozu.com/font-awesome/v4.7.0/css/font-awesome.min.css

  • jQueryUI css

  • https://js.cybozu.cn/jqueryui/1.12.1/themes/smoothness/jquery-ui.css

JavaScript / CSS自定义设置(请在电脑专用的项目下添加):

同时请确保js的调用顺序(需要优先加载jquery.min.js及jquery-ui.min.js)

0015bcedd2d886a0aec90b75f134d1d

如何使用

创建记录时,选择快递公司并输入跟踪号。
保存记录后,单击记录上的"货车图标"按钮
调用快递100API ,将快递的查询信息显示在弹出框里。

第1步

输入记录内容时,选择快递公司并填写快递单号并保存。

0015bbeffec9167e2568465223dc544


第2步

在记录详情页点击图标,执行查询。

0015bbf0074123199297dad89181be8


第3步

在弹出框中,显示快递100网站,查询快递信息。

0015bcedf242eab815f2291f4dd6dc3

此屏幕是截至2018年10月的截图

最后

相关文章索引:

  1. 第 3篇 在记录详细页面上设置个按钮!

  2. 使用Font Awesome 在菜单上创建漂亮按钮的方法 (暂无中文页面)

因为本文相关的快递100API为外部服务,所以我们无法保证服务期限和内容。

    您需要登录后才可以回复