Unmanned-Supermarket/templates/back/product_management.html

<!-- product_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-product-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;
        }

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

        #product-form input[type="text"],
        #product-form input[type="number"],
        #product-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-product-btn">新增库存</button>
    <button id="refresh-button">刷新</button>
    <table id="product-table">
        <thead>
        <tr>
            <th>ID</th>
            <th>商品名</th>
            <th>单价（单位：分）</th>
            <th>剩余库存</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
{#        {% for user_profile in user_profiles %}#}
{#            <tr>#}
{#                <td>{{ user_profile.user.id }}</td>#}
{#                <td>{{ user_profile.user.username }}</td>#}
{#                <td>{{ user_profile.balance }}</td>#}
{#                <td>{% if user_profile.is_vip %}是{% else %}否{% endif %}</td>#}
{#                <td>{{ user_profile.face_id }}</td>#}
{#                <td>#}
{#                    <button class="edit-button" data-user-id="{{ user_profile.user.id }}">修改</button>#}
{#                    <button class="delete-button" data-user-id="{{ user_profile.user.id }}">删除</button>#}
{#                </td>#}
{#            </tr>#}
{#        {% endfor %}#}
        <tr>
            <td>1</td>
            <td>可乐</td>
            <td>300</td>
            <td>20</td>
            <td>
                <button class="edit-button" data-product-id="1">修改</button>
                <button class="delete-button" data-product-id="1">删除</button>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>雪碧</td>
            <td>300</td>
            <td>20</td>
            <td>
                <button class="edit-button" data-product-id="2">修改</button>
                <button class="delete-button" data-product-id="2">删除</button>
        </tr>
        </tbody>
    </table>

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

                <label for="price">单价（单位：分）</label>
                <input type="number" id="price" name="price" required>

                <label for="stock">库存:</label>
                <input type="number" id="stock" name="stock" required>

                <!-- 保存和取消按钮 -->
                <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("product-modal");
        var btn = document.getElementById("add-product-btn");
        var span = document.getElementsByClassName("close")[0];
        var form = document.getElementById("product-form");
        var modalTitle = document.getElementById("modal-title");
        var productIdField = document.getElementById("product-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 productId = button.getAttribute("data-product-id");
                modalTitle.textContent = "修改商品";
                productIdField.value = productId;
                // 根据商品ID获取其他商品信息并填充到表单中
                // 可以通过 AJAX 请求获取商品信息
                // 然后将商品信息填充到表单字段中
                modal.style.display = "block";
            });
        });

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

        // 添加/编辑商品表单提交
        form.addEventListener("submit", function (event) {
            event.preventDefault();
            var productId = productIdField.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-product-btn').click(function() {
            // 显示弹窗
            $('#product-modal').show();
            $('.overlay').show();
            $('#modal-title').text('添加商品');
        });

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

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

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

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

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

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

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

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

        // 刷新商品列表函数
        function refreshproductTable() {
            // 发送GET请求到刷新商品列表的URL
            $.ajax({
                url: '/refresh_products/',
                type: 'GET',
                success: function(response) {
                    // 更新商品列表
                    var products = response.products;
                    var tableBody = $('#product-table tbody');
                    tableBody.empty();

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

        // 页面加载时刷新商品列表
        refreshproductTable();
    });
    </script>
{% endblock %}