{extend name="layout:home" /}
{block name="container"}
<div class="layui-tab layui-tab-card">
    <div class="layui-tab-content page-tab-content">
        <!-- 搜索框开始 -->
        <div class="search-form">
            <form class="" method="post">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <input type="text" name="user_name"  placeholder="输入用户名称" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-inline">
                        <input type="text" name="product_name"  placeholder="输入服务名称" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-inline">
                        <input type="text" name="userProduct_identity"  placeholder="输入订单号" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-inline">
                        <button type="submit" class="layui-btn search-subBtn">搜索</button>
                    </div>
                </div>
            </form>
        </div>
        <!-- 搜索框结束 -->
        <table class="layui-table lay-even">
            <colgroup>
                <col width="150">
                <col width="200">
                <col>
            </colgroup>
            <thead>
            <tr>
                <th>订单号</th>
                <th>服务名称</th>
                <th>用户名</th>
                <th>购买总时长</th>
                <th>购买时间</th>
                <th>到期时间</th>
            </tr>
            </thead>
            <tbody>
            {if count($userproduct)}
            {volist name="userproduct" id="value"}
            <tr>
                <td>{$value.userProduct_identity}</td>
                <td>{$value.product_name}</td>
                <td>{$value.user_email}</td>
                <td>{$value.userProduct_dayNumber}</td>
                <td>{$value.userProduct_buyTime}</td>
                <td>{$value.userProduct_maturityTime}</td>
            </tr>
            {/volist}
            {else}
            <td colspan="99" style="text-align: center">无数据</td>
            {/if}
            </tbody>
        </table>
        {$show_page}
    </div>
</div>
<script>
    const myHost = "http://" + window.location.host;

    layui.use('laydate', function(){
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#creatTime' //指定元素
        });
        laydate.render({
            elem:'#timeRang',
            range:true,
            format: 'yyyy/MM/dd',
            done: function(value, date){
                /* 时间选择完成后的回调 */
            }
        })
    });
</script>
{/block}