<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>订单商品明细</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
    <style type="text/css">
        /*您可以将下列样式写入自己的样式表中*/
        /*layui 元素样式改写*/
        .layui-btn-sm {
            line-height: normal;
            font-size: 12.5px;
        }

        .layui-table-view .layui-table-body {
            min-height: 256px;
        }

        .layui-table-cell .layui-input.layui-unselect {
            height: 30px;
            line-height: 30px;
        }

        /*设置 layui 表格中单元格内容溢出可见样式*/
        .table-overlay .layui-table-view,
        .table-overlay .layui-table-box,
        .table-overlay .layui-table-body {
            overflow: visible;
        }

        .table-overlay .layui-table-cell {
            height: auto;
            overflow: visible;
        }

        .imgStyle {
            padding-left: 10px;
            width: 80px;
            height: 50px;
        }

        .layui-table-cell {
            font-size: 14px;
            padding: 0 5px;
            height: auto;
            overflow: visible;
            text-overflow: inherit;
            white-space: normal;
            word-break: break-all;
        }
    </style>
</head>
<body>

<div class="layui-fluid">
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-body">
                <div>收货信息：<font id="id_address" style="margin-right: 30px"></font>
                </div>
                <div style="height: 5px"></div>
                <div id="tableRes" class="table-overlay">
                    <table id="dataTable" lay-filter="dataTable" class="layui-hide"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="../../layuiadmin/layui/layui.js"></script>
<script type="text/html" id="paramImage">
    {{# if(d.images){ }}
    <img src="{{ d.images }}" class="imgStyle"/>
    {{# } }}
</script>
<script>
    layui.config({
        base: '../../../layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table', 'layer',], function () {
        var $ = layui.$
            , admin = layui.admin
            , table = layui.table
            , layer = layui.layer;

        var id = layui.view.getParameterByName('id');
        var editdata = JSON.parse(JSON.stringify(parent.layui.table.editdata)); // 框架有Bug所以这么转换
        $('#id_address').html(editdata.name + '，' + editdata.tel + '，' + editdata.user_address);
        var tbWidth = $("#tableRes").width();
        var layTableId = "layTable";
        var tableIns = table.render({
            elem: '#dataTable',
            id: layTableId,
            data: [],
            width: tbWidth,
            page: false,
            limit: 100,
            loading: true,
            even: true, //不开启隔行背景
            cols: [[
                {title: '序号', type: 'numbers'},
                {field: 'commodity_name', title: '名称', width: '30%',},
                {field: 'price', title: '价格', width: '10%',},
                {field: 'point', title: '积分', width: '10%',},
                {field: 'count', title: '数量', width: '10%',},
                {field: 'amount', title: '总金额', width: '10%',},
                {field: 'point_amount', title: '总积分', width: '10%',},
                {field: 'images', title: '缩略图', templet: '#paramImage', width: '10%',},
            ]]
        });

        admin.req({
            url: '/order/' + id + '/get_details/',
            done: function (res) {
                if (res.code === 0) {
                    var rows = res.data;
                    var oldData = table.cache[layTableId];
                    for (var k in rows) {
                        oldData.push(
                            {
                                commodity_name: rows[k].commodity_name,
                                price: rows[k].price,
                                point: rows[k].point,
                                count: rows[k].count,
                                amount: rows[k].amount,
                                point_amount: rows[k].point_amount,
                                images: rows[k].images,
                            }
                        )
                    }
                    tableIns.reload({
                        data: oldData
                    });
                }else{
                    layer.msg('获取订单明细失败', {icon: 5});
                }
            }
        });

    });

</script>
</body>
</html>
