maimai.vn api

• Trang chủ
• »
• Demo
• »
• Hóa đơn

Dữ liệu sử dụng được kết nối với maimai.vn demo

Trong dịch vụ quản lý maimai.vn, bạn chọn menu Bán hàng -> Hóa đơn

Mã nguồn

HTML

<div class="demo">
    <div class="header">
        <div class="block">
            Truy xuất hóa đơn:<br />
            <input type="text" id="order-code" style="width:150px" placeholder="Nhập mã hóa đơn" />
            <span onclick="track($('#order-code').val())" style="cursor:pointer">OK</span>
        </div>
        <div class="block">
            Hiển thị:<br />
            <select id="showBy" onchange="list()">
                <option value="2">2 hóa đơn</option>
                <option value="4" selected="selected">4 hóa đơn</option>
                <option value="10">10 hóa đơn</option>
            </select>
        </div>

        <div class="pager" style="float:right"></div>
        <div style="clear:both;"></div>
    </div>
    <ul class="order-list" id="olist"></ul>
    <div class="order-detail " id="odetail"></div>
</div>

<script id="listTemplate" type="text/x-jsrender">
    <li>
        <div class="code">
            <a href="javascript:" onclick="detail({{:id}})">{{:code}}</a>
        </div>
        <div class="datetime">{{>~formatDatetime(creationDate)}}</div>
        <div class="datetime">{{>~formatDatetime(requiredDate)}}</div>
        <div class="val">{{>~formatNumber(totalValue)}}</div>
        <div class="address">-</div>
        <div class="state" title="{{>~formatDatetime(states[0].creationDate)}}">{{:states[0].stateName}}</div>
    </li>
</script>
<script id="trackTemplate" type="text/x-jsrender">
    <li>
        <div class="code">
            <b>{{:code}}</b>
            {{if description}}
            <br />{{:description}}
            {{/if}}
        </div>
        <div class="datetime">{{>~formatDatetime(creationDate)}}</div>
        <div class="datetime">{{>~formatDatetime(requiredDate)}}</div>
        <div class="val">-</div>
        <div class="address">-</div>
        <div class="state" title="{{>~formatDatetime(states[0].creationDate)}}">{{:states[0].stateName}}</div>
    </li>
</script>
<script id="detailTemplate" type="text/x-jsrender">
    <div><b>Mã hóa đơn:</b> {{:code}}</div>
    <div><b>Ngày lập:</b> {{>~formatDatetime(creationDate)}}</div>
    <div><b>Yêu cầu:</b> {{>~formatDatetime(requiredDate)}}</div>
    <div><b>Địa chỉ:</b> {{:address}}</div>
    <div><b>Ghi chú:</b> {{:description}}</div>
    {{if states.length > 0}}
    <div style="font-weight:bold;margin-top:10px;">Trạng thái:</div>
    <ul>
        {{for states}}
        <li>{{:stateName}} {{>~formatDatetime(creationDate)}}</li>
        {{/for}}
    </ul>
    {{/if}}
    <div style="font-weight:bold;margin-top:10px;border-bottom:solid 1px #fff">Mặt hàng trong hóa đơn:</div>
    <ul>
        {{for detail}}
        <li>
            <div class="thumb"><a href="product/{{:seoURL}}"><img src="{{:thumb}}" /></a></div>
            <div class="code">{{:code}} <a href="product/{{:seoURL}}">{{:name}}</a></div>
            <div class="price"><b>{{>~formatNumber(price)}}</b></div>
            <div class="quantity">{{>~formatNumber(quantity)}}</div>
            <div class="line-total"><b>{{>~formatNumber(price * quantity)}}</b></div>
        </li>
        {{/for}}
    </ul>
    <div style="font-weight:bold;padding-top:5px;text-align:right;border-top:solid 1px #fff"><b>Tổng:</b> {{>~formatNumber(totalValue)}}</div>
</script>

Javascript/CSS

<link href="//api.maimai.vn/content/demo.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//api.maimai.vn/scripts/mget.js"></script>
<script src="//api.maimai.vn/scripts/jsrender.js"></script>
<script>
    function formatNumber(str) {
        str += '';
        x = str.split(' ');
        x1 = x[0];
        x2 = x.length > 1 ? ',' + x[1] : '';
        var rgx = /(\d+)(\d{3})/;
        while (rgx.test(x1)) {
            x1 = x1.replace(rgx, '$1' + ' ' + '$2');
        }
        return x1 + x2;
    }
    $.views.helpers({
        formatNumber: function (str) {
            return formatNumber(str);
        },
        formatDatetime: function (date) {
            return date ? mHelper.formatDatetime(date, 'dd/MM/yyyy hh:mm') : '-';
        }
    });

    var page = 0;
    var settings = {
        company: 'demo',
        apikey: 'Xwrok26ZNzWDsoow2CUzDrnOScY5aCJrIxlsh3JQjuE%3d'
    }

    $(document).ready(function () {
        list();
    });
    function list() {
        settings.pageSize = $('#showBy').val();

        mOrder.list(page, settings, onSuccess);
    }
    function onSuccess(page, data) {
        var html = '<li style="margin-bottom:2px">';
        html += '<div class="code"><b>Mã hóa đơn</b></div>';
        html += '<div class="datetime" style="color:black"><b>Ngày lập</b></div>';
        html += '<div class="datetime" style="color:black"><b>Yêu cầu</b></div>';
        html += '<div class="val"><b>Giá trị</b></div>';
        html += '<div class="address"><b>Địa chỉ</b></div>';
        html += '<div class="state"><b>Trạng thái</b></div>';
        html += '</li>';
        html += $('#listTemplate').render(data.orders);

        $('#olist').html(html);
        $('.pager').pager({
            current: page,
            total: data.size,
            onChange: function (page) { mOrder.list(page, settings, onSuccess); }
        });
    }

    function detail(id) {
        if (!id || isNaN(id) || parseInt(id) <= 0) return false;

        mOrder.detail(id, settings, function(data) {
            if (data.order) $('#odetail').html($('#detailTemplate').render(data.order));
            else $('#odetail').html('Không có dữ liệu!');
        });
    }
    function track(code) {
        if (!code) {
            alert('Hãy nhập mã hóa đơn!');
            $('#order-code').focus();
            return;
        }
            
        mOrder.track(code.trim(), settings, function(data) {
            $('#odetail').html('');
            if (data.order) $('#olist').html($('#trackTemplate').render([data.order]));
            else $('#olist').html('Không có dữ liệu!');
        });
    }
</script>

    

Xem thêm mô tả API