python：基于django的html订单提交页面

前言

这里给出一个基于django 的html订单提交页面，具有文件上传 和订单提交 两个功能，使用javascript来代理实现交互功能。

注意：这只是前端html代码和css代码，没有包含后端数据处理

代码

service.html

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>服务详情页面</title>
    <link rel="stylesheet" href="/static/css/all.min.css">
    <link rel="stylesheet" href="/static/css/detail_css.css">
    <link rel="stylesheet" href="/static/css/back_page.css">
</head>
<body>
<!-- 返回链接，使用图片作为图标 -->
    <a href="javascript:history.back()" class="back-link">
        <img src="/static/image/back.png" alt="返回" />
    </a>
    <div class="container">
        <h1>服务详情页面</h1>

        <div class="service-info">
            <h2>{{ service.service_name }}</h2>
            <p>{{ service.service_desc }}</p>
            <p>服务收费：¥ {{ service.price }} 元/次</p>
        </div>

        <div class="provider-list">
            <h2>可选服务商</h2>
                <div class="provider">
                    <label for="provider-select">选择服务商:</label>
                    <select id="provider-select">
                        {% for server in servers %}
                            <option title="完成单数量：{{ server.all_done }} | 完单率 {{ server.success_rate }} %" value="{{ server.user_id }}">{{ server.username }}(
                                <span style="color: red;">完成单数量：{{ server.all_done }}</span> |
                                <span style="color: yellow;">完单率{{ server.success_rate }} %</span>
                            )</option>
                        {% endfor %}
                        <!-- 更多服务商... -->
                    </select>
                </div>
        </div>

        <div class="order-config">
            <h2>订单配置参数</h2>
            <label for="order-quantity">文字要求:</label>
            <input id="desc_text" placeholder="尽量简短" />

            <!-- 文件上传表单 -->
            <label for="fileInput">选择文件 (最多10个，单个文件不超过10MB):</label>
            <input type="file" id="fileInput" name="fileInput" multiple>
            <input type="hidden" id="fileListInput" name="file_list" value="" hidden/>
            <input type="submit" id="file_upload" name="file_upload" onclick="uploadFile()" value="上传文件">

        </div>

        <button class="submit-button" onclick="uploadOrder()">提交订单</button>
    </div>
</body>

<script>
    function uploadFile() {
        const fileInput = document.getElementById("fileInput");
        const files = fileInput.files;
        var selectElement = document.getElementById("provider-select");

        // 获取所选的 option
        var selectedOption = selectElement.options[selectElement.selectedIndex];
        
        if (!selectedOption) {
            alert('请选择执行者！');
            return;
        }


        if (files.length === 0) {
            alert('请先选择文件');
            return;
        }

        // 创建 FormData 对象
        const formData = new FormData();
        for (let i = 0; i < files.length; i++) {
            formData.append('files', files[i]);
        }

        fetch('/file/upload', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.status === true) {
                document.getElementById('fileListInput').value = data.msg;
                alert("文件上传成功");
            } else {
                alert("文件上传失败: " + data.msg);
            }
        })
        .catch(error => {
            console.error('文件上传失败:', error);
            alert("文件上传失败，请重试");
        });
    }

    function uploadOrder() {
        var fileInput = document.getElementById("fileListInput").value;
        var desc_text = document.getElementById("desc_text").value;
        var selectElement = document.getElementById("provider-select");
        var type_no = {{ type_no }};

        // 获取所选的 option
        var selectedOption = selectElement.options[selectElement.selectedIndex];
        
        if (!selectedOption) {
            alert('请选择执行者！');
            return;
        }
        
        // 获取选中项的值和文本
        var selectedValue = selectedOption.value; // 选项的值


        if (fileInput.trim() === "" && desc_text.trim() === "") {
            alert('文件或内容不可同时为空项，请填入您的要求！');
            return;
        }

        var jsonData = JSON.stringify({
            "file_str": fileInput,
            "desc_text": desc_text,
            "performer": selectedValue,
            "type_no": type_no,
        });

        fetch('', {
            method: 'POST',
            headers: {
                    'Content-Type': 'application/json',
                },
            body: jsonData
        })
        .then(response => response.json())
        .then(data => {
            if (data.status === true) {
                alert("订单提交成功");
                window.location.href = '/order/detail?order_id=' + data.msg;
            } else {
                alert("订单提交失败: " + data.msg);
            }
        })
        .catch(error => {
            console.error('订单提交失败:', error);
            alert("订单提交失败，请重试");
        });
    }
</script>

</html>

detail_css.css

css 复制代码

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}
.container {
    width: 80%;
    margin: 20px auto;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
h1 {
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}
.service-info, .provider-list, .order-config {
    margin-bottom: 20px;
}
.service-info {
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}
.provider-list {
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}
.provider {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 10px;
    background-color: #f9f9f9;
}
.provider h3 {
    margin: 0;
    color: #444;
}
.provider p {
    margin: 5px 0;
    color: #666;
}
.order-config label {
    display: block;
    margin: 10px 0 5px;
    color: #333;
}
.order-config input, .order-config select, .order-config textarea {
    width: calc(100% - 22px);
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 10px;
    box-sizing: border-box;
}
.submit-button {
    display: block;
    width: 100%;
    padding: 15px;
    background-color: #4CAF50;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    text-align: center;
}
.submit-button:hover {
    background-color: #45a049;
}
.provider select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}