expansion-template.html 8.44 KB

Edit Raw Blame History

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拓客数据录入</title>
    <!-- 引入配置文件 -->
    <script src="config.js"></script>
    <style>
        body { font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; }
        .form-group { margin-bottom: 15px; }
        label { display: block; margin-bottom: 5px; font-weight: bold; }
        input, select, textarea { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; }
        button { background: #007bff; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; }
        button:hover { background: #0056b3; }
        .message { padding: 10px; margin: 10px 0; border-radius: 4px; }
        .success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
        .error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
        .info { background: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; }
    </style>
</head>
<body>
    <h1>拓客数据录入</h1>

    <!-- 配置区域 -->
    <div style="background: #f8f9fa; padding: 15px; border-radius: 4px; margin-bottom: 20px;">
        <h3>后端服务配置</h3>
        <div class="form-group">
            <label for="apiUrl">API地址:</label>
            <input type="text" id="apiUrl" placeholder="后端服务地址">
        </div>
        <button onclick="testConnection()">测试连接</button>
    </div>

    <!-- 消息显示区域 -->
    <div id="messageBox"></div>

    <!-- 拓客表单 -->
    <form id="expansionForm">
        <div class="form-group">
            <label for="tksj">拓客时间:</label>
            <input type="datetime-local" id="tksj" required>
        </div>

        <div class="form-group">
            <label for="tkry">拓客人员:</label>
            <input type="text" id="tkry" placeholder="请输入拓客人员姓名" required>
        </div>

        <div class="form-group">
            <label for="gkxm">顾客姓名:</label>
            <input type="text" id="gkxm" placeholder="请输入顾客姓名" required>
        </div>

        <div class="form-group">
            <label for="dhhm">电话号码:</label>
            <input type="tel" id="dhhm" placeholder="请输入电话号码" maxlength="11" required>
        </div>

        <div class="form-group">
            <label for="gmzs">购买张数:</label>
            <input type="number" id="gmzs" min="1" placeholder="请输入购买张数" required>
        </div>

        <div class="form-group">
            <label for="zffs">支付方式:</label>
            <select id="zffs" required>
                <option value="">请选择支付方式</option>
                <option value="现金">现金</option>
                <option value="微信">微信</option>
                <option value="支付宝">支付宝</option>

            </select>
        </div>

        <div class="form-group">
            <label for="sfjwx">是否加微信:</label>
            <select id="sfjwx" required>
                <option value="">请选择</option>
                <option value="是">是</option>
                <option value="否">否</option>
            </select>
        </div>

        <div class="form-group">
            <label for="bz">备注:</label>
            <textarea id="bz" rows="3" placeholder="请输入备注信息"></textarea>
        </div>

        <button type="submit">提交数据</button>
    </form>

    <script>
        // 页面加载时设置默认时间和配置
        document.addEventListener('DOMContentLoaded', function() {
            const now = new Date();
            const localDateTime = new Date(now.getTime() - now.getTimezoneOffset() * 60000).toISOString().slice(0, 16);
            document.getElementById('tksj').value = localDateTime;

            // 加载配置
            loadConfig();
        });

        // 加载配置
        function loadConfig() {
            // 优先使用localStorage中的配置，如果没有则使用配置文件中的默认值
            const savedApiUrl = localStorage.getItem('expansionTemplateApiUrl');
            const defaultApiUrl = window.APP_CONFIG ? window.APP_CONFIG.getApiBaseUrl() : 'http://localhost:5000';
            const apiUrl = savedApiUrl || defaultApiUrl;

            document.getElementById('apiUrl').value = apiUrl;

            // 显示当前环境信息
            if (window.APP_CONFIG) {
                console.log('当前环境:', window.APP_CONFIG.getEnvName());
                console.log('默认API地址:', window.APP_CONFIG.getApiBaseUrl());
            }
        }

        // 显示消息
        function showMessage(message, type = 'info') {
            const messageBox = document.getElementById('messageBox');
            messageBox.innerHTML = `<div class="message ${type}">${message}</div>`;
            if (type === 'success' || type === 'error') {
                setTimeout(() => {
                    messageBox.innerHTML = '';
                }, 5000);
            }
        }

        // 测试连接
        async function testConnection() {
            const apiUrl = document.getElementById('apiUrl').value.trim();
            if (!apiUrl) {
                showMessage('请输入API地址', 'error');
                return;
            }

            try {
                showMessage('正在测试连接...', 'info');
                const response = await fetch(`${apiUrl}/api/Extend/LqTkjlb`, {
                    method: 'GET'
                });

                if (response.ok) {
                    showMessage('✅ 连接成功！后端服务正常运行', 'success');
                } else {
                    showMessage(`❌ 连接失败: HTTP ${response.status}`, 'error');
                }
            } catch (error) {
                showMessage('❌ 连接失败: ' + error.message, 'error');
            }
        }

        // 处理表单提交
        document.getElementById('expansionForm').addEventListener('submit', async function(e) {
            e.preventDefault();

            const apiUrl = document.getElementById('apiUrl').value.trim();
            if (!apiUrl) {
                showMessage('请先配置API地址', 'error');
                return;
            }

            // 收集表单数据
            const formData = {
                tksj: new Date(document.getElementById('tksj').value).getTime(),
                tkry: document.getElementById('tkry').value,
                gkxm: document.getElementById('gkxm').value,
                dhhm: document.getElementById('dhhm').value,
                gmzs: parseInt(document.getElementById('gmzs').value),
                zffs: document.getElementById('zffs').value,
                sfjwx: document.getElementById('sfjwx').value,
                bz: document.getElementById('bz').value || ''
            };

            try {
                showMessage('正在提交数据...', 'info');

                const response = await fetch(`${apiUrl}/api/Extend/LqTkjlb`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(formData)
                });

                if (response.ok) {
                    const result = await response.json();
                    showMessage('✅ 数据提交成功！已保存到数据库', 'success');
                    console.log('提交结果:', result);

                    // 重置表单
                    this.reset();

                    // 重新设置默认时间
                    const now = new Date();
                    const localDateTime = new Date(now.getTime() - now.getTimezoneOffset() * 60000).toISOString().slice(0, 16);
                    document.getElementById('tksj').value = localDateTime;
                } else {
                    const errorText = await response.text();
                    showMessage(`❌ 提交失败: HTTP ${response.status} - ${errorText}`, 'error');
                }
            } catch (error) {
                showMessage('❌ 提交失败: ' + error.message, 'error');
                console.error('提交错误:', error);
            }
        });
    </script>
</body>
</html>