Unmanned-Supermarket/templates/back/order_management.html

<!-- order_management.html -->
{% extends 'back/base.html' %}

{% block content %}
    <style>
        /* 页面样式 */
        body {
            font-family: Arial, sans-serif;
        }

        h2 {
            margin-bottom: 20px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            padding: 10px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        th {
            background-color: #f2f2f2;
        }

        #add-order-btn,
        #refresh-button {
            padding: 10px 20px;
            margin-bottom: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .modal {
            display: none;
            position: fixed;
            z-index: 999;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
        }

        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 400px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
            border-radius: 4px;
        }

        .close {
            color: #888;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }

        #order-form label {
            display: block;
            margin-top: 10px;
        }

        #order-form input[type="text"],
        #order-form input[type="number"],
        #order-form input[type="checkbox"] {
            width: 100%;
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }

        .modal-buttons {
            margin-top: 20px;
            text-align: right;
        }

        .modal-buttons button {
            margin-left: 10px;
        }

        /* 其他样式 */
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.4);
            z-index: 999;
        }
    </style>

    <h2>订单管理</h2>
    <button id="add-order-btn">添加订单</button>
    <button id="refresh-button">刷新</button>
    <table id="order-table">
        <thead>
        <tr>
            <th>ID</th>
            <th>用户名</th>
            <th>金额</th>
            <th>是否已支付</th>
            <th>用户ID</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
{#        {% for order_profile in order_profiles %}#}
{#            <tr>#}
{#                <td>{{ order_profile.order.id }}</td>#}
{#                <td>{{ order_profile.order.ordername }}</td>#}
{#                <td>{{ order_profile.balance }}</td>#}
{#                <td>{% if order_profile.is_vip %}是{% else %}否{% endif %}</td>#}
{#                <td>{{ order_profile.face_id }}</td>#}
{#                <td>#}
{#                    <button class="edit-button" data-order-id="{{ order_profile.order.id }}">修改</button>#}
{#                    <button class="delete-button" data-order-id="{{ order_profile.order.id }}">删除</button>#}
{#                </td>#}
{#            </tr>#}
{#        {% endfor %}#}
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>100</td>
            <td>是</td>
            <td>1</td>
            <td>
                <button class="edit-button" data-order-id="1">修改</button>
                <button class="delete-button" data-order-id="1">删除</button>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>200</td>
            <td>否</td>
            <td>2</td>
            <td>
                <button class="edit-button" data-order-id="2">修改</button>
                <button class="delete-button" data-order-id="2">删除</button>
            </td>
        </tr>
        </tbody>
    </table>

    <!-- 弹窗 -->
    <div id="order-modal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h3 id="modal-title">添加订单</h3>
            <form id="order-form">
                <!-- 订单信息表单字段 -->
                <input type="hidden" id="order-id" name="order-id">
                <label for="ordername">用户名:</label>
                <input type="text" id="ordername" name="ordername" required>

                <label for="balance">金额:</label>
                <input type="number" id="balance" name="balance" required>

                <label for="vip">是否已支付:</label>
                <input type="checkbox" id="vip" name="vip">

                <!-- 保存和取消按钮 -->
                <div class="modal-buttons">
                    <button type="submit" class="save-button">保存</button>
                    <button type="button" class="cancel-button">取消</button>
                </div>
            </form>
        </div>
    </div>

    <script>
        // 弹窗显示和隐藏
        var modal = document.getElementById("order-modal");
        var btn = document.getElementById("add-order-btn");
        var span = document.getElementsByClassName("close")[0];
        var form = document.getElementById("order-form");
        var modalTitle = document.getElementById("modal-title");
        var orderIdField = document.getElementById("order-id");

        btn.onclick = function () {
            modalTitle.textContent = "添加订单";
            form.reset();
            modal.style.display = "block";
        }

        span.onclick = function () {
            modal.style.display = "none";
        }

        window.onclick = function (event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }

        // 刷新按钮点击事件
        var refreshButton = document.getElementById("refresh-button");
        refreshButton.addEventListener("click", function () {
            // 在这里可以执行获取最新内容的操作
            // 例如：通过 AJAX 请求获取最新的订单列表数据并刷新表格内容
        });

        // 页面加载完成后执行的操作
        window.addEventListener("load", function () {
            // 在这里可以执行页面加载完成后的操作
            // 例如：初始化页面、获取初始数据等
        });

        // 修改按钮点击事件
        var editButtons = document.querySelectorAll(".edit-button");
        editButtons.forEach(function (button) {
            button.addEventListener("click", function () {
                var orderId = button.getAttribute("data-order-id");
                modalTitle.textContent = "修改订单";
                orderIdField.value = orderId;
                // 根据订单ID获取其他订单信息并填充到表单中
                // 可以通过 AJAX 请求获取订单信息
                // 然后将订单信息填充到表单字段中
                modal.style.display = "block";
            });
        });

        // 删除按钮点击事件
        var deleteButtons = document.querySelectorAll(".delete-button");
        deleteButtons.forEach(function (button) {
            button.addEventListener("click", function () {
                var orderId = button.getAttribute("data-order-id");
                // 根据订单ID执行删除订单操作
                // 可以通过 AJAX 请求将订单ID发送到后端进行删除
                // 然后可以根据返回的结果刷新订单列表或进行其他操作
            });
        });

        // 添加/编辑订单表单提交
        form.addEventListener("submit", function (event) {
            event.preventDefault();
            var orderId = orderIdField.value;
            // 在这里可以通过 JavaScript 获取表单字段的值，进行保存等操作
            // 例如：通过 AJAX 请求将表单数据发送到后端进行保存
            // 然后可以根据返回的结果刷新订单列表或进行其他操作
            modal.style.display = "none";
        });

        // 取消按钮点击事件
        var cancelButton = document.querySelector(".cancel-button");
        cancelButton.addEventListener("click", function () {
            modal.style.display = "none";
        });
        $(document).ready(function() {
        // 添加订单按钮点击事件
        $('#add-order-btn').click(function() {
            // 显示弹窗
            $('#order-modal').show();
            $('.overlay').show();
            $('#modal-title').text('添加订单');
        });

        // 关闭弹窗按钮点击事件
        $('.close').click(function() {
            // 隐藏弹窗
            $('#order-modal').hide();
            $('.overlay').hide();
        });

        // 取消按钮点击事件
        $('.cancel-button').click(function() {
            // 隐藏弹窗
            $('#order-modal').hide();
            $('.overlay').hide();
        });

        // 保存按钮点击事件
        $('.save-button').click(function(e) {
            e.preventDefault();

            // 获取表单数据
            var ordername = $('#ordername').val();
            var balance = $('#balance').val();
            var vip = $('#vip').is(':checked');

            // 发送POST请求到添加订单的URL
            $.ajax({
                url: '/add_order/',
                type: 'POST',
                data: {
                    'ordername': ordername,
                    'balance': balance,
                    'vip': vip
                },
               success: function(response) {
                    // 添加订单成功后的处理逻辑
                    // 隐藏弹窗
                    $('#order-modal').hide();
                    $('.overlay').hide();

                    // 清空表单数据
                    $('#ordername').val('');
                    $('#balance').val('');
                    $('#vip').prop('checked', false);

                    // 刷新订单列表
                    refreshOrderTable();
                },
                error: function(xhr, errmsg, err) {
                    // 处理错误情况
                    console.log(errmsg);
                }
            });
        });

        // 刷新按钮点击事件
        $('#refresh-button').click(function() {
            // 刷新订单列表
            refreshOrderTable();
        });

        // 刷新订单列表函数
        function refreshOrderTable() {
            // 发送GET请求到刷新订单列表的URL
            $.ajax({
                url: '/refresh_orders/',
                type: 'GET',
                success: function(response) {
                    // 更新订单列表
                    var orders = response.orders;
                    var tableBody = $('#order-table tbody');
                    tableBody.empty();

                    for (var i = 0; i < orders.length; i++) {
                        var order = orders[i];
                        var row = '<tr>' +
                            '<td>' + order.ordername + '</td>' +
                            '<td>' + order.balance + '</td>' +
                            '<td>' + (order.vip ? '是' : '否') + '</td>' +
                            '</tr>';
                        tableBody.append(row);
                    }
                },
                error: function(xhr, errmsg, err) {
                    // 处理错误情况
                    console.log(errmsg);
                }
            });
        }

        // 页面加载时刷新订单列表
        refreshOrderTable();
    });
    </script>
{% endblock %}