{include file=comm/head.html}
<main role="main" class=""> {include file=comm/position.html}
  <div class="container mt-5">
	  
<div class="text-center">
<div class="section-title-two">
<h3 class="title fw-bold">订单查询</h3>
<p class="text-customer">未登录用户可以使用单号或者手机号查询</p>
</div>
</div>
	  
    <div class="row"> 
      <form id="orderQueryForm">
            <div class="mb-3 row">
                <div class="col-md-6">
                    <label for="searchType" class="form-label">查询方式</label>
                    <select class="form-select" id="searchType" name="searchType">
                        <option value="orderNumber">订单号</option>
                        <option value="phoneNumber">手机号</option>
                    </select>
                </div>
                <div class="col-md-6">
                    <label for="searchValue" class="form-label" id="searchValueLabel">订单号</label>
                    <input type="text" class="form-control" id="searchValue" name="searchValue" required>
                </div>
            </div>
            <div class="mb-3 input-group">
                <label for="verificationCode" class="input-group-text">验证码</label>
                <input type="text" class="form-control" id="verificationCode" name="verificationCode" required>
                <img title="点击刷新" id="codeimg" src="/core/code.php" onclick="this.src='/core/code.php?'+Math.round(Math.random()*10);" class="input-group-text">
            </div>
            <button type="submit" class="btn btn-primary">查询</button>
        </form>
        <div id="result" class="mt-3"></div>
    </div>
		
    
    <div class="row my-5">
      <div class="col-md-12"> </div>
    </div>
  </div>
</main>
 <script>
$(document).ready(function () {
            $('#searchType').change(function () {
                if ($(this).val() === 'orderNumber') {
                    $('#searchValueLabel').text('订单号');
                } else {
                    $('#searchValueLabel').text('手机号');
                }
            });

            $('#orderQueryForm').submit(function (e) {
                e.preventDefault();
                var searchType = $('#searchType').val();
                var searchValue = $('#searchValue').val();
                var verificationCode = $('#verificationCode').val();

                $.ajax({
                    url: '/shop/orderinfo',
                    method: 'POST',
                    data: {
                        searchType: searchType,
                        searchValue: searchValue,
                        verificationCode: verificationCode
                    },
                    success: function (response) {
                        var data = typeof response === 'string' ? JSON.parse(response) : response;
                        if (data.code === 0) {
                            $('#codeimg').click();
                            Swal.fire('', data.message, "warning");
                        } else {
                            $('#codeimg').click();
                            Swal.fire('', '查询成功', "success");

                            // 创建表格元素
                            var table = $('<table class="table table-bordered">');
                            var thead = $('<thead><tr>');
                            var tbody = $('<tbody>');

                            // 定义要显示的字段
                            var fields = ['order_no', 'product_name', 'product_type', 'amount', 'quantity', 'order_time'];
                            var fieldLabels = ['订单号', '商品名称', '商品类型', '金额', '数量', '下单时间'];

                            // 添加表头
                            fieldLabels.forEach(function (label) {
                                thead.append('<th>' + label + '</th>');
                            });
                            thead.append('</tr></thead>');

                            // 处理多条订单数据
                            if (Array.isArray(data.data)) {
                                data.data.forEach(function (order) {
                                    var row = $('<tr>');
                                    fields.forEach(function (field) {
                                        if (field === 'product_name') {
                                            var productLink = order.product_link;
                                            var productName = order.product_name;
                                            row.append('<td><a href="' + productLink + '" target="_blank">' + productName + '</a></td>');
                                        } else {
                                            row.append('<td>' + order[field] + '</td>');
                                        }
                                    });
                                    tbody.append(row);
                                });
                            } else {
                                var row = $('<tr>');
                                fields.forEach(function (field) {
                                    if (field === 'product_name') {
                                        var productLink = data.data.product_link;
                                        var productName = data.data.product_name;
                                        row.append('<td><a href="' + productLink + '" target="_blank">' + productName + '</a></td>');
                                    } else {
                                        row.append('<td>' + data.data[field] + '</td>');
                                    }
                                });
                                tbody.append(row);
                            }

                            // 将表头和数据行添加到表格
                            table.append(thead);
                            table.append(tbody);

                            // 将表格插入到 #result 元素中
                            $('#result').empty().append(table);
                        }
                    },
                    error: function () {
                        $('#codeimg').click();
                        Swal.fire('', "查询失败，请稍后重试！", "error");
                    }
                });
            });
        });
	 
</script>
{include file=comm/foot.html}