expansion.html 31.3 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>
  <!-- 引入认证工具 -->
  <script src="auth-utils.js"></script>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body {
      font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
      margin: 0;
      min-height: 100vh;
      background: linear-gradient(135deg, #e8f5e9 0%, #b2dfdb 100%);
    }
    .container {
      max-width: 480px;
      margin: 32px auto 0 auto;
      padding: 24px 18px 18px 18px;
      background: #fff;
      border-radius: 18px;
      box-shadow: 0 4px 24px 0 rgba(76, 175, 80, 0.10), 0 1.5px 6px 0 rgba(76, 175, 80, 0.08);
      border: 1.5px solid #c8e6c9;
      box-sizing: border-box;
    }
    h2 {
      text-align: center;
      color: #388e3c;
      margin-bottom: 18px;
      letter-spacing: 2px;
    }
    .form-group { margin-bottom: 18px; }
    label {
      display: block;
      margin-bottom: 6px;
      font-weight: bold;
      color: #388e3c;
      letter-spacing: 1px;
      font-size: 1em;
    }
    .desc {
      font-size: 0.95em;
      color: #6a9c6a;
      margin-bottom: 4px;
      margin-top: -2px;
    }
    input, select, textarea {
      width: 100%;
      padding: 10px 12px;
      border: 1.5px solid #c8e6c9;
      border-radius: 8px;
      font-size: 1em;
      transition: border-color 0.2s, box-shadow 0.2s;
      background: #f9fff9;
      outline: none;
      box-sizing: border-box;
    }
    input:focus, select:focus, textarea:focus {
      border-color: #43a047;
      box-shadow: 0 0 0 2px #a5d6a7;
      background: #fff;
    }
    .readonly { background: #f0f0f0; }
    .section-title {
      margin: 28px 0 14px;
      font-size: 1.1em;
      color: #388e3c;
      border-left: 5px solid #43a047;
      padding-left: 10px;
      background: linear-gradient(90deg, #e8f5e9 60%, #fff 100%);
      border-radius: 4px;
    }
    button {
      width: 100%;
      padding: 14px;
      background: linear-gradient(90deg, #43a047 60%, #66bb6a 100%);
      color: #fff;
      border: none;
      border-radius: 8px;
      font-size: 1.15em;
      font-weight: bold;
      letter-spacing: 2px;
      box-shadow: 0 2px 8px #a5d6a7;
      cursor: pointer;
      transition: background 0.2s, box-shadow 0.2s;
    }
    button:hover, button:active {
      background: linear-gradient(90deg, #388e3c 60%, #43a047 100%);
      box-shadow: 0 4px 16px #a5d6a7;
    }
    button:disabled {
      background: #ccc;
      cursor: not-allowed;
      box-shadow: none;
    }


    textarea {
      resize: vertical;
      min-height: 48px;
      max-height: 120px;
    }
    .flex-row { display: flex; gap: 10px; }
    .flex-row > * { flex: 1; }

    /* 配置区域样式 - 保持与现有样式一致 */
    .config-section {
      background: #f9fff9;
      border-radius: 8px;
      padding: 16px;
      margin-bottom: 20px;
      border: 1.5px solid #c8e6c9;
      display: none; /* 隐藏配置区域 */
    }
    .config-title {
      font-size: 1.1em;
      color: #388e3c;
      margin-bottom: 12px;
      font-weight: bold;
      border-left: 5px solid #43a047;
      padding-left: 10px;
      background: linear-gradient(90deg, #e8f5e9 60%, #f9fff9 100%);
      border-radius: 4px;
    }

    /* 弹窗样式 */
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 1000;
      backdrop-filter: blur(4px);
    }

    .modal {
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
      max-width: 90%;
      width: 400px;
      animation: modalSlideIn 0.3s ease-out;
      border: 1.5px solid #c8e6c9;
      overflow: hidden;
    }

    @keyframes modalSlideIn {
      from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .modal-header {
      background: linear-gradient(120deg, #43e97b 0%, #38f9d7 100%);
      padding: 20px 24px;
      text-align: center;
      position: relative;
    }

    .modal-title {
      color: #fff;
      font-size: 1.2em;
      font-weight: bold;
      margin: 0;
      letter-spacing: 1px;
    }

    .modal-close {
      position: absolute;
      top: 16px;
      right: 20px;
      background: rgba(255, 255, 255, 0.2);
      border: none;
      color: #fff;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      transition: background 0.2s;
    }

    .modal-close:hover {
      background: rgba(255, 255, 255, 0.3);
    }

    .modal-body {
      padding: 24px;
      text-align: center;
    }

    .modal-icon {
      width: 64px;
      height: 64px;
      margin: 0 auto 16px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32px;
    }

    .modal-icon.success {
      background: #e8f5e9;
      color: #43a047;
    }

    .modal-icon.error {
      background: #ffebee;
      color: #f44336;
    }

    .modal-icon.info {
      background: #e3f2fd;
      color: #2196f3;
    }

    .modal-message {
      font-size: 1.1em;
      color: #333;
      margin-bottom: 24px;
      line-height: 1.5;
    }

    .modal-actions {
      display: flex;
      gap: 12px;
      justify-content: center;
    }

    .modal-btn {
      padding: 10px 24px;
      border: none;
      border-radius: 8px;
      font-size: 1em;
      font-weight: bold;
      cursor: pointer;
      transition: all 0.2s;
      min-width: 100px;
    }

    .modal-btn.primary {
      background: linear-gradient(90deg, #43a047 60%, #66bb6a 100%);
      color: #fff;
      box-shadow: 0 2px 8px #a5d6a7;
    }

    .modal-btn.primary:hover {
      background: linear-gradient(90deg, #388e3c 60%, #43a047 100%);
      box-shadow: 0 4px 16px #a5d6a7;
      transform: translateY(-1px);
    }

    .modal-btn.secondary {
      background: #f5f5f5;
      color: #666;
      border: 1px solid #ddd;
    }

    .modal-btn.secondary:hover {
      background: #e0e0e0;
      color: #333;
    }

    /* 加载状态样式 */
    .loading {
      display: inline-block;
      width: 16px;
      height: 16px;
      border: 2px solid #f3f3f3;
      border-top: 2px solid #43a047;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin-right: 8px;
    }
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    /* 测试连接按钮样式 */
    .test-btn {
      width: auto;
      padding: 8px 16px;
      font-size: 0.9em;
      margin-top: 10px;
    }

    /* 环境切换按钮样式 */
    .env-switcher {
      display: flex;
      gap: 8px;
      margin-top: 8px;
    }

    .env-btn {
      padding: 6px 12px;
      border: none;
      border-radius: 6px;
      font-size: 0.85em;
      cursor: pointer;
      transition: all 0.2s;
      flex: 1;
    }

    .env-btn.dev {
      background: #e3f2fd;
      color: #1976d2;
      border: 1px solid #bbdefb;
    }

    .env-btn.dev:hover {
      background: #bbdefb;
      color: #1565c0;
    }

    .env-btn.prod {
      background: #e8f5e9;
      color: #388e3c;
      border: 1px solid #c8e6c9;
    }

    .env-btn.prod:hover {
      background: #c8e6c9;
      color: #2e7d32;
    }

    @media (max-width: 520px) {
      .container { margin: 0; border-radius: 0; box-shadow: none; padding: 16px 4px 12px 4px; }
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>绿纤拓客数据录入</h2>

    <!-- 配置区域 -->
    <div class="config-section">
      <div class="config-title">后端服务配置</div>

      <!-- 环境信息显示 -->
      <div class="form-group" id="envInfo" style="display: none;">
        <label>当前环境</label>
        <div class="desc">
          <span id="currentEnvName">环境名称</span> -
          <span id="currentEnvDesc">环境描述</span>
        </div>
        <div class="env-switcher">
          <button type="button" onclick="switchToDevelopment()" class="env-btn dev">切换到开发环境</button>
          <button type="button" onclick="switchToProduction()" class="env-btn prod">切换到正式环境</button>
        </div>
      </div>

      <div class="form-group">
        <label for="apiBaseUrl">API基础地址</label>
        <div class="desc">后端服务地址，用于数据提交</div>
        <input type="text" id="apiBaseUrl" placeholder="请输入后端服务地址">
      </div>
      <button type="button" onclick="testConnection()" class="test-btn">测试连接</button>
    </div>

    <!-- 弹窗组件 -->
    <div id="modalOverlay" class="modal-overlay">
      <div class="modal">
        <div class="modal-header">
          <h3 class="modal-title" id="modalTitle">提示</h3>
          <button class="modal-close" onclick="closeModal()">&times;</button>
        </div>
        <div class="modal-body">
          <div class="modal-icon" id="modalIcon">
            <span id="modalIconText">ℹ️</span>
          </div>
          <div class="modal-message" id="modalMessage">消息内容</div>
          <div class="modal-actions" id="modalActions">
            <button class="modal-btn primary" id="modalPrimaryBtn" onclick="closeModal()">确定</button>
          </div>
        </div>
      </div>
    </div>

    <form id="expansionForm">
      <div class="section-title">基本信息</div>
      <div class="form-group" style="display: none;">
        <label for="expansionTime">拓客时间</label>
        <div class="desc">负责人创建时间</div>
        <input type="datetime-local" id="expansionTime" name="expansionTime">
      </div>
      <div class="form-group">
        <label for="expansionStore">拓客门店</label>
        <div class="desc">负责人创建门店</div>
        <select id="expansionStore" name="expansionStore" required>
          <option value="">请选择门店</option>
          <option value="旗舰店">旗舰店</option>
          <option value="分店A">分店A</option>
          <option value="分店B">分店B</option>
        </select>
      </div>
      <div class="form-group" style="display: none;">
        <label for="expansionStaff">拓客人员</label>
        <div class="desc">负责人添加参与人员</div>
        <select id="expansionStaff" name="expansionStaff">
          <option value="管理员">管理员</option>
          <option value="张三">张三</option>
          <option value="李四">李四</option>
          <option value="王五">王五</option>
        </select>
      </div>
      <div class="section-title">客户信息</div>
      <div class="form-group">
        <label for="customerName">顾客姓名</label>
        <input type="text" id="customerName" name="customerName" placeholder="请输入顾客姓名" required>
      </div>
      <div class="form-group">
        <label for="customerPhone">电话号码</label>
        <input type="tel" id="customerPhone" name="customerPhone" placeholder="请输入电话号码" maxlength="11" required>

      </div>
      <div class="form-group">
        <label for="buyCount">购买张数</label>
        <input type="number" id="buyCount" name="buyCount" min="1" value="1" placeholder="请输入购买张数" required>
      </div>
      <div class="form-group">
        <label for="payMethod">支付方式</label>
        <select id="payMethod" name="payMethod" required>
          <option value="">请选择支付方式</option>
          <option value="现金">现金</option>
          <option value="微信">微信</option>
          <option value="支付宝">支付宝</option>

        </select>
      </div>
      <div class="form-group">
        <label for="isWeChat">是否加微信</label>
        <select id="isWeChat" name="isWeChat" required>
          <option value="">请选择</option>
          <option value="是">是</option>
          <option value="否">否</option>
        </select>
      </div>
      <div class="form-group">
        <label for="remark">备注</label>
        <textarea id="remark" name="remark" rows="2" placeholder="请输入备注"></textarea>
      </div>
      <button type="submit" id="submitBtn">
        <span id="submitText">提交数据</span>
        <span id="submitLoading" class="loading" style="display: none;"></span>
      </button>
    </form>
  </div>

  <script>
    // 全局变量
    let isSubmitting = false;

    // 页面加载完成后初始化
    document.addEventListener('DOMContentLoaded', function() {
      // 设置默认时间为当前时间
      const now = new Date();
      const localDateTime = new Date(now.getTime() - now.getTimezoneOffset() * 60000).toISOString().slice(0, 16);
      document.getElementById('expansionTime').value = localDateTime;

      // 设置默认拓客人员为当前登录用户
      setDefaultExpansionStaff();

      // 绑定表单提交事件
      document.getElementById('expansionForm').addEventListener('submit', handleFormSubmit);

      // 从localStorage加载配置
      loadConfig();

      // 保存配置到localStorage
      document.getElementById('apiBaseUrl').addEventListener('blur', saveConfig);
    });

    // 设置默认拓客人员
    function setDefaultExpansionStaff() {
      // 优先从认证工具获取用户信息
      if (window.AUTH_UTILS && window.AUTH_UTILS.getUserInfo()) {
        const userInfo = window.AUTH_UTILS.getUserInfo();
        if (userInfo && userInfo.realname) {
          document.getElementById('expansionStaff').value = userInfo.realname;
          console.log('✅ 已设置默认拓客人员:', userInfo.realname);
          return;
        }
      }

      // 如果认证工具不可用，尝试从全局变量获取
      if (window.USER_INFO && window.USER_INFO.realname) {
        document.getElementById('expansionStaff').value = window.USER_INFO.realname;
        console.log('✅ 已设置默认拓客人员:', window.USER_INFO.realname);
        return;
      }

      // 如果都没有，使用默认值
      document.getElementById('expansionStaff').value = '管理员';
      console.log('✅ 已设置默认拓客人员: 管理员');

      // 确保值已设置
      setTimeout(() => {
        const currentValue = document.getElementById('expansionStaff').value;
        if (!currentValue) {
          document.getElementById('expansionStaff').value = '管理员';
          console.log('🔄 重新设置默认拓客人员: 管理员');
        }
      }, 100);
    }

    // 加载配置
    function loadConfig() {
      // 优先使用localStorage中的配置，如果没有则使用配置文件中的默认值
      const savedApiBaseUrl = localStorage.getItem('expansionApiBaseUrl');
      const defaultApiBaseUrl = window.APP_CONFIG ? window.APP_CONFIG.getApiBaseUrl() : 'http://lvqian.antissoft.com';
      const apiBaseUrl = savedApiBaseUrl || defaultApiBaseUrl;

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

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

        // 显示环境信息区域
        showEnvironmentInfo();
      }
    }

    // 显示环境信息
    function showEnvironmentInfo() {
      if (window.APP_CONFIG) {
        const envInfo = document.getElementById('envInfo');
        const currentEnvName = document.getElementById('currentEnvName');
        const currentEnvDesc = document.getElementById('currentEnvDesc');

        currentEnvName.textContent = window.APP_CONFIG.getEnvName();
        currentEnvDesc.textContent = window.APP_CONFIG.getEnvDescription();
        envInfo.style.display = 'block';
      }
    }

    // 切换到开发环境
    function switchToDevelopment() {
      if (window.APP_CONFIG && window.APP_CONFIG.switchEnvironment('development')) {
        // 更新API地址输入框
        document.getElementById('apiBaseUrl').value = window.APP_CONFIG.getApiBaseUrl();

        // 更新环境信息显示
        showEnvironmentInfo();

        // 显示切换成功消息
        showModal('环境切换', '已切换到开发环境', 'info', {
          autoHide: true,
          autoHideDelay: 2000
        });
      }
    }

    // 切换到正式环境
    function switchToProduction() {
      if (window.APP_CONFIG && window.APP_CONFIG.switchEnvironment('production')) {
        // 更新API地址输入框
        document.getElementById('apiBaseUrl').value = window.APP_CONFIG.getApiBaseUrl();

        // 更新环境信息显示
        showEnvironmentInfo();

        // 显示切换成功消息
        showModal('环境切换', '已切换到正式环境', 'info', {
          autoHide: true,
          autoHideDelay: 2000
        });
      }
    }

    // 保存配置
    function saveConfig() {
      const apiBaseUrl = document.getElementById('apiBaseUrl').value;

      localStorage.setItem('expansionApiBaseUrl', apiBaseUrl);
    }

    // 显示弹窗消息
    function showModal(title, message, type = 'info', options = {}) {
      const modalOverlay = document.getElementById('modalOverlay');
      const modalTitle = document.getElementById('modalTitle');
      const modalMessage = document.getElementById('modalMessage');
      const modalIcon = document.getElementById('modalIcon');
      const modalIconText = document.getElementById('modalIconText');
      const modalActions = document.getElementById('modalActions');

      // 设置标题和消息
      modalTitle.textContent = title;
      modalMessage.textContent = message;

      // 设置图标和样式
      modalIcon.className = `modal-icon ${type}`;

      // 根据类型设置图标
      const iconMap = {
        'success': '✅',
        'error': '❌',
        'info': 'ℹ️',
        'warning': '⚠️'
      };
      modalIconText.textContent = iconMap[type] || 'ℹ️';

      // 设置按钮
      if (options.primaryText) {
        const primaryBtn = document.getElementById('modalPrimaryBtn');
        primaryBtn.textContent = options.primaryText;
        primaryBtn.onclick = options.primaryAction || closeModal;
      }

      if (options.secondaryText) {
        // 如果已经有按钮，先清空
        modalActions.innerHTML = '';

        // 添加主按钮
        const primaryBtn = document.createElement('button');
        primaryBtn.className = 'modal-btn primary';
        primaryBtn.textContent = options.primaryText || '确定';
        primaryBtn.onclick = options.primaryAction || closeModal;
        modalActions.appendChild(primaryBtn);

        // 添加次要按钮
        const secondaryBtn = document.createElement('button');
        secondaryBtn.className = 'modal-btn secondary';
        secondaryBtn.textContent = options.secondaryText;
        secondaryBtn.onclick = options.secondaryAction || closeModal;
        modalActions.appendChild(secondaryBtn);
      }

      // 显示弹窗
      modalOverlay.style.display = 'flex';

      // 自动隐藏成功和错误消息（可选）
      if (options.autoHide && (type === 'success' || type === 'error')) {
        setTimeout(() => {
          closeModal();
        }, options.autoHideDelay || 3000);
      }
    }

    // 关闭弹窗
    function closeModal() {
      const modalOverlay = document.getElementById('modalOverlay');
      modalOverlay.style.display = 'none';
    }

    // 点击弹窗外部关闭弹窗
    document.addEventListener('DOMContentLoaded', function() {
      const modalOverlay = document.getElementById('modalOverlay');
      modalOverlay.addEventListener('click', function(e) {
        if (e.target === modalOverlay) {
          closeModal();
        }
      });

      // ESC键关闭弹窗
      document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
          closeModal();
        }
      });
    });

    // 显示消息（兼容性函数）
    function showMessage(message, type = 'info') {
      const titleMap = {
        'success': '成功',
        'error': '错误',
        'info': '提示',
        'warning': '警告'
      };

      showModal(titleMap[type] || '提示', message, type);
    }

    // 隐藏消息（兼容性函数）
    function hideMessage() {
      // 弹窗模式下不需要这个函数，但保留以兼容现有代码
    }

    // 设置提交状态
    function setSubmitState(submitting) {
      isSubmitting = submitting;
      const submitBtn = document.getElementById('submitBtn');
      const submitText = document.getElementById('submitText');
      const submitLoading = document.getElementById('submitLoading');

      if (submitting) {
        submitBtn.disabled = true;
        submitText.style.display = 'none';
        submitLoading.style.display = 'inline-block';
      } else {
        submitBtn.disabled = false;
        submitText.style.display = 'inline';
        submitLoading.style.display = 'none';
      }
    }

    // 验证表单数据
    function validateForm(formData) {
      const requiredFields = [
        'expansionTime', 'expansionStore', 'expansionStaff',
        'customerName', 'customerPhone', 'buyCount', 'payMethod', 'isWeChat'
      ];

      for (const field of requiredFields) {
        if (!formData[field] || formData[field].trim() === '') {
          showMessage(`请填写${getFieldLabel(field)}`, 'error');
          return false;
        }
      }

      // 验证手机号格式
      const phoneRegex = /^1[3-9]\d{9}$/;
      if (!phoneRegex.test(formData.customerPhone)) {
        showMessage('请输入正确的手机号码', 'error');
        return false;
      }

      // 验证购买张数
      if (formData.buyCount < 1) {
        showMessage('购买张数必须大于0', 'error');
        return false;
      }

      return true;
    }

    // 获取字段标签
    function getFieldLabel(fieldName) {
      const labels = {
        'expansionTime': '拓客时间',
        'expansionStore': '拓客门店',
        'expansionStaff': '拓客人员',
        'customerName': '顾客姓名',
        'customerPhone': '电话号码',
        'buyCount': '购买张数',
        'payMethod': '支付方式',
        'isWeChat': '是否加微信'
      };
      return labels[fieldName] || fieldName;
    }

    // 转换数据格式
    function transformFormData(formData) {
      // 转换日期时间格式为时间戳
      const expansionTime = new Date(formData.expansionTime).getTime();

      // 映射支付方式到后端字段
      const payMethodMap = {
        '现金': '现金',
        '微信': '微信',
        '支付宝': '支付宝'
      };

      // 映射微信状态到后端字段
      const wechatMap = {
        '是': '是',
        '否': '否'
      };

      return {
        tksj: expansionTime,           // 拓客时间 (时间戳)
        tkry: formData.expansionStaff, // 拓客人员
        gkxm: formData.customerName,   // 顾客姓名
        dhhm: formData.customerPhone,  // 电话号码
        gmzs: parseInt(formData.buyCount), // 购买张数
        zffs: payMethodMap[formData.payMethod], // 支付方式
        sfjwx: wechatMap[formData.isWeChat],   // 是否加微信
        bz: formData.remark || ''      // 备注
      };
    }

    // 发送数据到后端
    async function sendDataToBackend(data) {
      const apiBaseUrl = document.getElementById('apiBaseUrl').value.trim();

      if (!apiBaseUrl) {
        throw new Error('请配置API基础地址');
      }

      const url = `${apiBaseUrl}/api/Extend/LqTkjlb`;
      const headers = {
        'Content-Type': 'application/json'
      };

      const response = await fetch(url, {
        method: 'POST',
        headers: headers,
        body: JSON.stringify(data)
      });

      if (!response.ok) {
        const errorText = await response.text();
        throw new Error(`HTTP ${response.status}: ${errorText}`);
      }

      return await response.json();
    }

    // 检查手机号码是否重复
    async function checkPhoneNumberDuplicate(phoneNumber) {
      if (!phoneNumber) {
        return { allowed: false, message: '手机号码不能为空' };
      }

      try {
        const apiBaseUrl = document.getElementById('apiBaseUrl').value.trim();
        if (!apiBaseUrl) {
          return { allowed: false, message: 'API地址未配置' };
        }

        console.log('🔍 检查手机号码重复:', phoneNumber);

        // 调用API检查手机号码
        const url = `${apiBaseUrl}/api/Extend/lqtkjlb?dhhm=${encodeURIComponent(phoneNumber)}`;
        const response = await fetch(url, {
          method: 'GET',
          headers: {
            'Accept': 'application/json'
          }
        });

        if (response.ok) {
          const result = await response.json();
          console.log('🔍 API响应:', result);

          // 检查响应结构，判断是否有重复记录
          if (result && result.code === 200) {
            // 检查data.list是否有数据
            if (result.data && result.data.list && Array.isArray(result.data.list) && result.data.list.length > 0) {
              console.log('❌ 手机号码已存在，找到记录数:', result.data.list.length);
              console.log('❌ 重复记录:', result.data.list);
              return {
                allowed: false,
                message: `手机号码 ${phoneNumber} 已存在，不允许重复提交。\n\n已找到 ${result.data.list.length} 条记录，请检查是否为客户本人或联系管理员。`
              };
            }

            // 检查data.total是否有总数
            if (result.data && result.data.pagination && result.data.pagination.total > 0) {
              console.log('❌ 手机号码已存在，总数:', result.data.pagination.total);
              return {
                allowed: false,
                message: `手机号码 ${phoneNumber} 已存在，不允许重复提交。\n\n已找到 ${result.data.pagination.total} 条记录，请检查是否为客户本人或联系管理员。`
              };
            }

            // 如果都没有数据，说明可以提交
            console.log('✅ 手机号码检查通过，可以提交');
            return { allowed: true, message: '手机号码检查通过' };
          } else {
            console.log('⚠️ API返回非成功状态:', result);
            // 如果API返回非成功状态，为了安全起见，允许提交
            return { allowed: true, message: 'API检查异常，允许提交' };
          }
        } else if (response.status === 404) {
          // 404表示没有找到记录，可以提交
          console.log('✅ 手机号码检查通过（404），可以提交');
          return { allowed: true, message: '手机号码检查通过' };
        } else {
          console.log('⚠️ 手机号码检查异常:', response.status);
          // 如果检查失败，为了安全起见，允许提交
          return { allowed: true, message: '手机号码检查异常，允许提交' };
        }

      } catch (error) {
        console.error('手机号码检查失败:', error);
        // 如果检查失败，为了安全起见，允许提交
        return { allowed: true, message: '手机号码检查失败，允许提交' };
      }
    }


    // 处理表单提交
    async function handleFormSubmit(event) {
      event.preventDefault();

      if (isSubmitting) {
        return;
      }

      // 隐藏之前的消息
      hideMessage();

      // 获取表单数据
      const form = event.target;
      const formData = new FormData(form);
      const data = {};

      for (const [key, value] of formData.entries()) {
        data[key] = value;
      }

      // 验证表单数据
      if (!validateForm(data)) {
        return;
      }

      // 检查手机号码是否重复
      const phoneCheckResult = await checkPhoneNumberDuplicate(data.customerPhone);
      if (!phoneCheckResult.allowed) {
        showModal('提交被阻止', phoneCheckResult.message, 'error');
        return;
      }

      try {
        // 设置提交状态
        setSubmitState(true);

        // 转换数据格式
        const transformedData = transformFormData(data);

        // 显示发送中消息
        showModal('提交中', '正在发送数据到后端服务...', 'info');

        // 发送数据到后端
        const result = await sendDataToBackend(transformedData);

        // 显示成功消息
        showModal('提交成功', '拓客数据提交成功！数据已保存到数据库。', 'success', {
          autoHide: true,
          autoHideDelay: 3000
        });

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

        // 重新设置默认时间
        const now = new Date();
        const localDateTime = new Date(now.getTime() - now.getTimezoneOffset() * 60000).toISOString().slice(0, 16);
        document.getElementById('expansionTime').value = localDateTime;

        console.log('提交成功:', result);

      } catch (error) {
        console.error('提交失败:', error);

        // 显示错误消息
        let errorMessage = '数据提交失败';
        if (error.message.includes('Failed to fetch')) {
          errorMessage = '无法连接到后端服务，请检查服务地址和网络连接';
        } else if (error.message.includes('HTTP 401')) {
          errorMessage = '认证失败，请检查访问令牌';
        } else if (error.message.includes('HTTP 500')) {
          errorMessage = '服务器内部错误，请联系管理员';
        } else {
          errorMessage = error.message;
        }

        showMessage(errorMessage, 'error');

      } finally {
        // 恢复提交状态
        setSubmitState(false);
      }
    }

    // 测试连接
    async function testConnection() {
      const apiBaseUrl = document.getElementById('apiBaseUrl').value.trim();

      if (!apiBaseUrl) {
        showMessage('请先配置API基础地址', 'error');
        return;
      }

      try {
        showModal('测试连接', '正在测试连接...', 'info');

        const url = `${apiBaseUrl}/api/Extend/LqTkjlb`;
        const headers = {};

        const response = await fetch(url, {
          method: 'GET',
          headers: headers
        });

        if (response.ok) {
          showModal('连接成功', '✅ 后端服务连接成功！', 'success', {
            autoHide: true,
            autoHideDelay: 3000
          });
        } else {
          showModal('连接失败', `❌ 连接失败: HTTP ${response.status}`, 'error');
        }

      } catch (error) {
        showModal('连接失败', '❌ 连接失败: ' + error.message, 'error');
      }
    }
  </script>
</body>
</html>