manghe/app/admin/view/Order/order_list.html

{include file="Public:header3" /}

<div class="layui-fluid">
    <div class="layui-card">
       
        <div class="layui-card-body" >
            <!-- 搜索条件 -->
           <div id="order-list-body">
            <form class="layui-form layui-form-pane">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <div class="layui-input-inline" style="width: 120px;">
                            <input type="text" name="user_id" placeholder="用户ID" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline" style="width: 120px;">
                            <input type="text" name="mobile" placeholder="手机号" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline" style="width: 180px;">
                            <input type="text" name="order_num" placeholder="订单号" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline" style="width: 100px;">
                            <select name="status">
                                <option value="">支付状态</option>
                                <option value="0">未支付</option>
                                <option value="1">已支付</option>
                                <option value="2">已失效</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline" style="width: 100px;">
                            <select name="istest">
                                <option value="0">账号类型</option>
                                <option value="1">推广</option>
                                <option value="2">测试</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline" style="width: 100px;">
                            <select name="u_status">
                                <option value="1">用户状态</option>
                                <option value="2">封号</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline" style="width: 160px;">
                            <input type="text" name="start_time" id="start_time" placeholder="开始时间" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-form-mid">-</div>
                        <div class="layui-input-inline" style="width: 160px;">
                            <input type="text" name="end_time" id="end_time" placeholder="结束时间" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn" lay-submit lay-filter="search-order">
                            <i class="layui-icon layui-icon-search"></i> 搜索
                        </button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        <button type="button" class="layui-btn layui-btn-normal" id="export-order">
                            <i class="layui-icon layui-icon-export"></i> 导出Excel
                        </button>
                    </div>
                </div>
            </form>
           </div>

            <!-- 数据表格 -->
            <table id="order-table" lay-filter="order-table"></table>
        </div>
    </div>
</div>

<!-- 操作栏模板 -->
<script type="text/html" id="operator-toolbar">
    <div style="white-space: nowrap;">
        <a class="layui-btn layui-btn-xs" lay-event="detail">详情</a>
        {{# if(d.status == 1){ }}
        <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="prize_log">日志</a>
        {{# } }}
    </div>
</script>

<!-- 订单号模板 -->
<script type="text/html" id="order-num-tpl">
    <div>
        <p>{{d.order_num}}</p>
        <p><b>订单Id：{{d.id}}</b></p>
        <p><b>支付商户：{{appConfigManager.getWxPayConfigByType(d.order_num)?.name}}</b></p>
        <p><b>商户Id：{{appConfigManager.getWxPayConfigByType(d.order_num)?.mch_id}}</b></p>
    </div>
</script>

<!-- 盒子图片模板 -->
<script type="text/html" id="goods-img-tpl">
    <img src="{{d.goods_imgurl}}" style="max-width: 50px; max-height: 50px;" onerror="this.src='/static/admin/images/nopic.jpg'">
</script>


<!-- 盒子详情模板（合并图片和信息） -->
<script type="text/html" id="goods-detail-tpl">
    <div style="display: flex; width: 100%;">
        <div style="width: 30%; margin-right: 10px; display: flex; align-items: center; justify-content: center;">
            <img src="{{d.goods_imgurl}}" style="max-width: 100%; max-height: 80px;" onerror="this.src='/static/admin/images/nopic.jpg'">
        </div>
        <div style="width: 70%;">
            <p><b>名称：</b>{{d.goods_title}}</p>
            <p><b>价格：</b>{{d.goods_price}}</p>
            <p><b>类型：</b>{{appConfigManager.getGoodsTypeName(d.order_type)}}</p>
            <p><b>套数：</b>{{d.num}}</p>
        </div>
    </div>
</script>

<!-- 金额详情模板 -->
<script type="text/html" id="money-info-tpl">
    <div style="font-size: 15px;">
        <p style="margin: 2px 0; line-height: 1.4;"><b>订单金额：</b>{{d.order_zhe_total}}</p>
        <p style="margin: 2px 0; line-height: 1.4;"><b>RMB支付：</b>{{d.price}}</p>
        <p style="margin: 2px 0; line-height: 1.4;"><b>钻石支付：</b>{{d.use_money}}</p>
        <p style="margin: 2px 0; line-height: 1.4;"><b>UU币支付：</b>{{d.use_integral}}</p>
        <p style="margin: 2px 0; line-height: 1.4;"><b>达达券支付：</b>{{d.use_money2}}</p>
        <p style="margin: 2px 0; line-height: 1.4;"><b>优惠券抵扣：</b>{{d.use_coupon}}</p>
    </div>
</script>

<!-- 用户信息模板 -->
<script type="text/html" id="user-info-tpl">
    <div>
        <p style="margin: 2px 0; line-height: 1.4;"><b>UID：</b>{{d.uid}}</p>
        <p style="margin: 2px 0; line-height: 1.4;"><b>真实ID：</b>{{d.user_id}}</p>
        <p style="margin: 2px 0; line-height: 1.4;"><b>昵称：</b>{{d.nickname}}</p>
        <p style="margin: 2px 0; line-height: 1.4;"><b>手机：</b>{{d.mobile}}</p>
        <p style="margin: 2px 0; line-height: 1.4;"><b>账号状态：</b>
            {{# if(d.u_status == 1){ }}
            <span>正常</span>
            {{# }else if(d.u_status == 2){ }}
            <span style="color: #FF5722;">封号</span>
            {{# }else{ }}
            <span>未知</span>
            {{# } }}
        </p>
        <p style="margin: 2px 0; line-height: 1.4;"><b>账号类型：</b>
            {{# if(d.istest == 0){ }}
            <span>正常</span>
            {{# }else if(d.istest == 1){ }}
            <span>推广</span>
            {{# }else if(d.istest == 2){ }}
            <span>测试</span>
            {{# }else{ }}
            <span>未知</span>
            {{# } }}
        </p>
    </div>
</script>

<!-- 抽奖情况模板 -->
<script type="text/html" id="prize-info-tpl">
    <div>
        <p><b>抽奖数量：</b>{{d.prize_num}}</p>
        <p><b>出货金额：</b>{{d.sc_money}}</p>
    </div>
</script>

<!-- 支付信息模板 -->
<script type="text/html" id="payment-info-tpl">
    <div>
        <p>
            <b>支付状态：</b>
            {{# if(d.status == 1){ }}
            <span class="layui-btn layui-btn-xs" style="background-color: #FF8C00;">{{d.status_text}}</span>
            {{# }else if(d.status == 0){ }}
            <span class="layui-btn layui-btn-xs layui-btn-normal">{{d.status_text}}</span>
            {{# }else if(d.status == 2){ }}
            <span class="layui-btn layui-btn-xs layui-btn-danger">{{d.status_text}}</span>
            {{# }else{ }}
            <span class="layui-btn layui-btn-xs layui-btn-primary">{{d.status_text}}</span>
            {{# } }}
        </p>
        <p><b>购买时间：</b>{{d.addtime}}</p>
        <p><b>支付时间：</b>{{d.pay_time || '-'}}</p>
    </div>
</script>

{include file="Public:footer3" /}
<script>
    layui.use(['table', 'form', 'laydate'], function () {
        var table = layui.table,
            form = layui.form,
            laydate = layui.laydate,
            $ = layui.jquery;

        // 日期时间选择器
        laydate.render({
            elem: '#start_time',
            type: 'datetime'
        });

        laydate.render({
            elem: '#end_time',
            type: 'datetime'
        });

        // 初始化表格
        table.render({
            elem: '#order-table',
            url: "{:url('get_order_list')}",
            page: true,
            height: 'full-'+($("#order-list-body").height()+40),
            lineStyle: 'height:170px',
            limit: 10,
            limits: [10, 20, 50, 100],
            cols: [[
                { type: 'numbers', title: '序号', width: 60, fixed: 'left' },
                { field: 'order_num', title: '订单号', minWidth: 300, templet: '#order-num-tpl' },
                { field: 'user_info', title: '用户信息', width: 180, templet: '#user-info-tpl' },
                { field: 'goods_detail', title: '盒子详情', width: 280, templet: '#goods-detail-tpl' },
                { field: 'money_info', title: '金额详情', width: 200, templet: '#money-info-tpl' },
                { field: 'prize_info', title: '抽奖情况', width: 150, templet: '#prize-info-tpl' },
                { field: 'payment_info', title: '支付信息', width: 230, templet: '#payment-info-tpl' },
                { title: '操作', width: 120, toolbar: '#operator-toolbar', fixed: 'right' }
            ]],
            response: {
                statusCode: 0
            },
            parseData: function (res) {
                return {
                    "code": res.code,
                    "msg": res.msg,
                    "count": res.count,
                    "data": res.data
                };
            }
        });

        // 搜索表单提交
        form.on('submit(search-order)', function (data) {
            table.reload('order-table', {
                page: {
                    curr: 1
                },
                where: data.field
            });
            return false;
        });

        // 监听工具条事件
        table.on('tool(order-table)', function (obj) {
            var data = obj.data;
            if (obj.event === 'detail') {
                // 弹出订单详情窗口
                layer.open({
                    type: 2, 
                    title: '订单详情',
                    area: ['90%', '90%'],
                    content: "/admin/buy_order_detail?id=" + data.id, // iframe的url
                    maxmin: true,
                    shadeClose: true
                });
            } else if (obj.event === 'prize_log') {
                // 查看抽奖日志
                layer.open({
                    type: 2, 
                    title: '操作日志',
                    area: ['90%', '90%'],
                    content: "/admin/markdown/order_info?goods_id=" + data.goods_id + "&order_num=" + data.order_num,
                    maxmin: true,
                    shadeClose: true
                });
            }
        });

        // 导出Excel
        $('#export-order').on('click', function() {
            var formData = $('.layui-form').serialize();
            window.location.href = "{:url('export_order_list')}?" + formData;
        });
    });
</script>