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

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

解决方案

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

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

0015bbf1336ba16a2cde5e1ed0d1c85

使用到的kintone API

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

提前准备

添加必要的字段

选择需要录入快递信息的一个应用。
添加以下字段。

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

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

德邦物流
DHL
EMS
FEDEX
汇通快运
申通
顺丰
天天快递
圆通速递
韵达快运
中通速递
快递公司（下拉菜单）字段的设置：

快递单号（单行文本框）字段的设置：

0015bbefab5dba00ffc68442e4d2068

占位符图片（空白栏）字段的设置：

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

设置自定义JavaScript / CSS

示例代码“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 (resp) {
        var mySpaceFieldButton = kintone.app.record.getSpaceElement('call_button');
        var $button = $('<button class="custom-button" title="配送状态确认"><i class="fa fa-truck"></i></button>');
        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);
        $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：