appointment - 副本 (2).html 67.2 KB

Edit Raw Blame History

<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%);
      padding: 20px;
    }

    .container {
      width: 100%;
      max-width: 480px;
      margin: 0 auto;
    }

    .header {
      background: linear-gradient(120deg, #43e97b 0%, #38f9d7 100%);
      border-radius: 18px;
      padding: 24px;
      text-align: center;
      margin-bottom: 24px;
      box-shadow: 0 4px 24px 0 rgba(76, 175, 80, 0.10);
    }

    .header-title {
      color: #fff;
      font-size: 1.3em;
      font-weight: bold;
      letter-spacing: 2px;
      margin: 0;
    }

    .form-card {
      background: #fff;
      border-radius: 18px;
      box-shadow: 0 4px 24px 0 rgba(76, 175, 80, 0.10);
      border: 1.5px solid #c8e6c9;
      overflow: hidden;
    }

    .form-content {
      padding: 24px;
    }

    .form-group {
      margin-bottom: 20px;
    }

    .form-group:last-child {
      margin-bottom: 0;
    }

    label {
      display: block;
      margin-bottom: 8px;
      font-weight: bold;
      color: #388e3c;
      letter-spacing: 1px;
      font-size: 0.95em;
    }

    .input-wrapper {
      position: relative;
    }

    .input-icon {
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      width: 20px;
      height: 20px;
      color: #6a9c6a;
    }

    input, .select-input, select {
      width: 100%;
      padding: 12px 12px 12px 12px;
      border: 1.5px solid #c8e6c9;
      border-radius: 10px;
      font-size: 1em;
      transition: all 0.2s ease;
      background: #f9fff9;
      color: #2e7d32;
    }

    input:focus, .select-input:focus, select:focus {
      outline: none;
      border-color: #43a047;
      box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
      background: #fff;
    }

    input:disabled {
      background: #f5f5f5;
      color: #666;
      cursor: not-allowed;
    }

    .select-input {
      cursor: pointer;
      position: relative;
    }

    .select-input::after {
      content: "";
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      color: #6a9c6a;
      font-size: 0.8em;
    }

    /* 优化select下拉框样式 */
    select {
      cursor: pointer;
      appearance: none;
      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a9c6a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
      background-repeat: no-repeat;
      background-position: right 12px center;
      background-size: 16px;
      padding-right: 40px;
    }

    select:hover {
      border-color: #43a047;
      background-color: #fff;
    }

    select option {
      padding: 8px 12px;
      background: #fff;
      color: #2e7d32;
    }

    select option:hover {
      background: #e8f5e9;
    }

    /* 数字输入框样式优化 */
    input[type="number"] {
      -moz-appearance: textfield; /* Firefox */
    }

    input[type="number"]::-webkit-outer-spin-button,
    input[type="number"]::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    input[type="number"]:focus {
      outline: none;
      border-color: #43a047;
      box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
      background: #fff;
    }

    .btn-group {
      display: flex;
      gap: 12px;
      margin-top: 24px;
    }

    .btn {
      flex: 1;
      padding: 14px 20px;
      border: none;
      border-radius: 10px;
      font-size: 1em;
      font-weight: bold;
      cursor: pointer;
      transition: all 0.2s ease;
      letter-spacing: 1px;
    }

    .btn-primary {
      background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
      color: #fff;
      box-shadow: 0 2px 8px rgba(67, 233, 123, 0.3);
    }

    .btn-primary:hover {
      box-shadow: 0 4px 16px rgba(67, 233, 123, 0.4);
      transform: translateY(-1px);
    }

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

    .btn-secondary:hover {
      background: #e8e8e8;
      border-color: #ccc;
    }

    /* 弹窗样式 */
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      padding: 20px;
    }

    .modal-content {
      background: #fff;
      border-radius: 18px;
      width: 100%;
      max-width: 400px;
      max-height: 80vh;
      overflow: hidden;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    }

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

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

    .modal-body {
      padding: 20px;
    }

    .search-input {
      width: 100%;
      padding: 12px;
      border: 1.5px solid #c8e6c9;
      border-radius: 10px;
      font-size: 1em;
      margin-bottom: 16px;
      background: #f9fff9;
    }

    .search-input:focus {
      outline: none;
      border-color: #43a047;
      box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
    }

    .option-list {
      max-height: 300px;
      overflow-y: auto;
      border: 1px solid #e0e0e0;
      border-radius: 8px;
    }

    .option-item {
      padding: 12px 16px;
      border-bottom: 1px solid #f0f0f0;
      cursor: pointer;
      transition: background 0.2s ease;
    }

    .option-item:hover {
      background: #f5f5f5;
    }

    .option-item:last-child {
      border-bottom: none;
    }

    .option-item.selected {
      background: #e8f5e9;
      color: #2e7d32;
      font-weight: bold;
    }

    .loading-message {
      text-align: center;
      padding: 40px 20px;
      color: #666;
      font-size: 0.95em;
    }

    .loading-spinner {
      display: inline-block;
      width: 20px;
      height: 20px;
      border: 2px solid #e0e0e0;
      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); }
    }

    .modal-footer {
      padding: 16px 20px;
      border-top: 1px solid #e0e0e0;
      display: flex;
      gap: 12px;
    }

    .modal-btn {
      flex: 1;
      padding: 10px 16px;
      border: none;
      border-radius: 8px;
      font-size: 0.95em;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .modal-btn-primary {
      background: #43a047;
      color: #fff;
    }

    .modal-btn-primary:hover {
      background: #388e3c;
    }

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

    .modal-btn-secondary:hover {
      background: #e8e8e8;
    }

    @media (max-width: 520px) {
      .container { max-width: 100%; }
      .header { border-radius: 12px; padding: 20px; }
      .form-card { border-radius: 12px; }
      .form-content { padding: 20px; }
      .btn-group { flex-direction: column; }
    }

    h2 {
      text-align: center;
      color: #388e3c;
      margin-bottom: 18px;
      letter-spacing: 2px;
    }

    /* 消息提示样式 */
    .message-toast {
      position: fixed;
      top: 20px;
      right: 20px;
      max-width: 300px;
      padding: 16px 20px;
      border-radius: 10px;
      color: #fff;
      font-weight: 500;
      z-index: 2000;
      transform: translateX(200%);
      transition: all 0.3s ease;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
      text-align: center;
    }

    .message-toast.show {
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-100%);
    }

    .message-toast.success {
      background: linear-gradient(135deg, #4caf50 0%, #66bb6a 100%);
    }

    .message-toast.error {
      background: linear-gradient(135deg, #f44336 0%, #ef5350 100%);
    }

    .message-toast.warning {
      background: linear-gradient(135deg, #ff9800 0%, #ffb74d 100%);
    }

    .message-toast.info {
      background: linear-gradient(135deg, #2196f3 0%, #42a5f5 100%);
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>绿纤开单</h2>

    <div class="form-card">
      <div class="form-content">
        <form id="orderForm">
          <div class="form-group">
            <label for="kdhy">开单会员</label>
            <div class="input-wrapper">
              <input type="text" id="kdhy" class="select-input" placeholder="请选择开单会员" readonly>
            </div>
          </div>

          <div class="form-group">
            <label for="djmd">单据门店</label>
            <div class="input-wrapper">
              <input type="text" id="djmd" class="select-input" placeholder="请选择单据门店" readonly>
            </div>
          </div>

          <div class="form-group">
            <label for="jsj">金三角</label>
            <div class="input-wrapper">
              <input type="text" id="jsj" class="select-input" placeholder="请选择金三角" readonly>
            </div>
          </div>

          <div class="form-group">
            <label for="hgjg">合作机构</label>
            <div class="input-wrapper">
              <input type="text" id="hgjg" class="select-input" placeholder="请选择合作机构" readonly>
            </div>
          </div>

          <div class="form-group">
            <label for="kdrq">开单日期</label>
            <div class="input-wrapper">
              <input type="date" id="kdrq" placeholder="请选择开单日期">
            </div>
          </div>

          <div class="form-group">
            <label for="gjlx">顾客类型</label>
            <div class="input-wrapper">
              <select id="gjlx">
                <option value="">请选择顾客类型</option>
                <option value="会员">会员</option>
                <option value="非会员">非会员</option>
              </select>
            </div>
          </div>

          <div class="form-group">
            <label for="zdyj">整单业绩</label>
            <div class="input-wrapper">
              <input type="number" id="zdyj" placeholder="请输入整单业绩" min="0" step="0.01">
            </div>
          </div>

          <div class="form-group">
            <label for="sfyj">实付业绩</label>
            <div class="input-wrapper">
              <input type="number" id="sfyj" placeholder="请输入实付业绩" min="0" step="0.01">
            </div>
          </div>

          <div class="form-group">
            <label for="qk">欠款</label>
            <div class="input-wrapper">
              <input type="number" id="qk" placeholder="请输入欠款" min="0" step="0.01">
            </div>
          </div>

          <div class="form-group">
            <label for="ckfs">储扣方式</label>
            <div class="input-wrapper">
              <select id="ckfs">
                <option value="">请选择储扣方式</option>
                <option value="储值卡">储值卡</option>
                <option value="扣项">扣项</option>
                <option value="套餐">套餐</option>
              </select>
            </div>
          </div>

          <div class="form-group">
            <label for="ckmx">储扣明细</label>
            <div class="input-wrapper">
              <input type="text" id="ckmx" placeholder="请输入储扣明细">
            </div>
          </div>

          <div class="form-group">
            <label for="fkfs">付款方式</label>
            <div class="input-wrapper">
              <select id="fkfs">
                <option value="">请选择付款方式</option>
                <option value="现金">现金</option>
                <option value="微信">微信</option>
                <option value="支付宝">支付宝</option>
                <option value="银行卡">银行卡</option>
                <option value="医院">医院</option>
              </select>
            </div>
          </div>

          <div class="form-group">
            <label for="fkyy">付款医院</label>
            <div class="input-wrapper">
              <input type="text" id="fkyy" class="select-input" placeholder="请选择付款医院" readonly>
            </div>
          </div>

          <div class="form-group">
            <label for="fkpd">付款判断</label>
            <div class="input-wrapper">
              <input type="text" id="fkpd" placeholder="请输入付款判断">
            </div>
          </div>

          <div class="form-group">
            <label for="khly">客户来源</label>
            <div class="input-wrapper">
              <select id="khly">
                <option value="">请选择客户来源</option>
                <option value="自然到店">自然到店</option>
                <option value="会员推广">会员推广</option>
                <option value="网络推广">网络推广</option>
              </select>
            </div>
          </div>

          <div class="form-group">
            <label for="tjr">推荐人</label>
            <div class="input-wrapper">
              <input type="text" id="tjr" placeholder="请输入推荐人">
            </div>
          </div>

          <div class="form-group">
            <label for="sfskdd">是否首开订单</label>
            <div class="input-wrapper">
              <select id="sfskdd">
                <option value="">请选择是否首开订单</option>
                <option value="是">是</option>
                <option value="否">否</option>
              </select>
            </div>
          </div>

          <div class="btn-group">
            <button type="button" class="btn btn-secondary" onclick="cancelOrder()">取消</button>
            <button type="submit" class="btn btn-primary">开单</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <!-- 消息提示 -->
  <div id="messageToast" class="message-toast"></div>

  <!-- 弹窗选择器 -->
  <div class="modal-overlay" id="selectModal">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title" id="modalTitle">选择</h3>
      </div>
      <div class="modal-body">
        <input type="text" class="search-input" id="searchInput" placeholder="请输入搜索内容">
        <div class="option-list" id="optionList">
          <!-- 选项列表将通过JavaScript动态生成 -->
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="modal-btn modal-btn-secondary" onclick="closeModal()">取消</button>
        <button type="button" class="modal-btn modal-btn-primary" onclick="confirmSelection()">确定</button>
      </div>
    </div>
  </div>

  <script>
    // 全局变量
    let currentSelectField = null;
    let currentOptions = [];
    let selectedOption = null;
    let userInfo = null;

    // 页面加载完成后初始化
    document.addEventListener("DOMContentLoaded", function() {
      initializePage();
      bindEvents();
    });

    // 初始化页面
    async function initializePage() {
      // 获取当前登录用户
      userInfo = JSON.parse(localStorage.getItem("userInfo"));
      if (!userInfo || Object.keys(userInfo).length === 0) {
        // 没有登录，跳转到登录页面
        window.location.href = "login.html";
        return;
      }
      console.log(userInfo);
    }

    // 绑定事件
    function bindEvents() {
      // 绑定选择输入框点击事件（只绑定需要弹窗的字段）
      const selectInputs = document.querySelectorAll(".select-input");
      selectInputs.forEach(input => {
        input.addEventListener("click", function() {
          openSelectModal(this);
        });
      });

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

      // 绑定搜索输入框事件
      document.getElementById("searchInput").addEventListener("input", handleSearch);

      // 绑定数字输入框事件
      bindNumberInputEvents();
    }

    // 绑定数字输入框事件
    function bindNumberInputEvents() {
      const numberInputs = ['zdyj', 'sfyj', 'qk'];

      numberInputs.forEach(inputId => {
        const input = document.getElementById(inputId);

        // 输入时验证
        input.addEventListener('input', function() {
          validateNumberInput(this);
        });

        // 失去焦点时验证
        input.addEventListener('blur', function() {
          validateNumberInput(this);
        });
      });
    }

    // 验证数字输入
    function validateNumberInput(input) {
      const value = parseFloat(input.value);

      // 字段名称映射
      const fieldNames = {
        'zdyj': '整单业绩',
        'sfyj': '实付业绩',
        'qk': '欠款'
      };

      const fieldName = fieldNames[input.id] || '该字段';

      if (input.value && (isNaN(value) || value < 0)) {
        input.style.borderColor = '#f44336';
        input.style.backgroundColor = '#ffebee';
        showMessage(`${fieldName}必须为大于等于0的数字`, "error");
        return false;
      } else {
        input.style.borderColor = '#c8e6c9';
        input.style.backgroundColor = '#f9fff9';
        return true;
      }
    }

    // 打开选择弹窗
    async function openSelectModal(inputField) {
      currentSelectField = inputField;
      const fieldId = inputField.id;

      // 显示加载状态
      showModal("加载中...", []);

      try {
        let options = [];

        // 根据字段类型获取不同的选项数据
        switch(fieldId) {
          case "kdhy":
            options = await getMemberOptions();
            showModal("选择开单会员", options);
            break;
          case "djmd":
            options = await getStoreOptions();
            showModal("选择单据门店", options);
            break;
          case "jsj":
            options = await getJsjOptions();
            showModal("选择金三角", options);
            break;
          case "hgjg":
            options = await getHgjgOptions();
            showModal("选择合作机构", options);
            break;
          case "fkyy":
            options = await getHgjgOptions();
            showModal("选择付款医院", options);
            break;
          case "khly":
            options = await getKhlyOptions();
            showModal("选择客户来源", options);
            break;
        }
      } catch (error) {
        console.error("获取选项数据失败:", error);
        showModal("加载失败", []);
        // 显示错误提示
        setTimeout(() => {
          showMessage("数据加载失败，请检查网络连接或联系管理员", "error");
        }, 500);
      }
    }

    // 显示弹窗
    function showModal(title, options) {
      currentOptions = options;
      document.getElementById("modalTitle").textContent = title;
      document.getElementById("searchInput").value = "";

      // 如果是加载状态，隐藏搜索框
      const searchInput = document.getElementById("searchInput");
      if (title === "加载中..." || title === "加载失败") {
        searchInput.style.display = "none";
      } else {
        searchInput.style.display = "block";
      }

      renderOptions(options);
      document.getElementById("selectModal").style.display = "flex";
    }

    // 关闭弹窗
    function closeModal() {
      document.getElementById("selectModal").style.display = "none";
      currentSelectField = null;
      currentOptions = [];
      selectedOption = null;
    }

    // 渲染选项列表
    function renderOptions(options) {
      const optionList = document.getElementById("optionList");
      optionList.innerHTML = "";

      if (!options || options.length === 0) {
        const emptyMessage = document.createElement("div");
        emptyMessage.className = "loading-message";
        emptyMessage.innerHTML = "<span class=\"loading-spinner\"></span>暂无数据";
        optionList.appendChild(emptyMessage);
        return;
      }

      options.forEach(option => {
        const optionItem = document.createElement("div");
        optionItem.className = "option-item";
        optionItem.textContent = option.label;
        optionItem.dataset.value = option.value;

        // 存储额外的属性到dataset中
        Object.keys(option).forEach(key => {
          if (key !== "value" && key !== "label") {
            optionItem.dataset[key] = option[key];
          }
        });

        optionItem.addEventListener("click", function() {
          // 移除之前的选中状态
          document.querySelectorAll(".option-item").forEach(item => {
            item.classList.remove("selected");
          });

          // 设置当前选中状态
          this.classList.add("selected");
          selectedOption = {
            value: this.dataset.value,
            label: this.textContent
          };
        });

        optionList.appendChild(optionItem);
      });
    }

    // 处理搜索
    function handleSearch() {
      const searchTerm = document.getElementById("searchInput").value;
      if (!searchTerm) {
        // 如果搜索词为空，显示所有选项
        renderOptions(currentOptions);
        return;
      }

      const filteredOptions = currentOptions.filter(option =>
        option.label && option.label.toLowerCase().includes(searchTerm.toLowerCase())
      );
      renderOptions(filteredOptions);
    }

    // 确认选择
    function confirmSelection() {
      if (selectedOption && currentSelectField) {
        currentSelectField.value = selectedOption.label;
        currentSelectField.dataset.selectedValue = selectedOption.value;

        // 设置额外的属性到输入框的dataset中
        Object.keys(selectedOption).forEach(key => {
          if (key !== "value" && key !== "label") {
            currentSelectField.dataset[key] = selectedOption[key];
          }
        });

        closeModal();
      } else {
        showMessage("请先选择一个选项", "warning");
      }
    }

    // 获取会员选项（从API获取）
    async function getMemberOptions() {
      try {
        const apiUrl = `${APP_CONFIG.getApiBaseUrl()}/api/Extend/LqKhxx?page=1&pageSize=1000`;
        const response = await fetch(apiUrl, {
          method: "GET",
          headers: {
            "Authorization": `${getAuthToken()}`,
            "Content-Type": "application/json"
          }
        });

        if (response.ok) {
          const result = await response.json();
          if (result.code == 200 && result.data) {
            return result.data.list.map(item => ({
              value: item.id,
              label: `${item.khmc}`
            }));
          }
        }

        // 如果API调用失败，返回默认数据
        console.warn("获取会员列表失败，使用默认数据");
        return getDefaultMemberOptions();
      } catch (error) {
        console.error("获取会员列表出错:", error);
        return getDefaultMemberOptions();
      }
    }

    // 获取门店选项（从API获取）
    async function getStoreOptions() {
      try {
        const apiUrl = `${APP_CONFIG.getApiBaseUrl()}/api/Extend/LqMdxx?page=1&pageSize=1000`;
        const response = await fetch(apiUrl, {
          method: "GET",
          headers: {
            "Authorization": `${getAuthToken()}`,
            "Content-Type": "application/json"
          }
        });

        if (response.ok) {
          const result = await response.json();
          if (result.code == 200 && result.data) {
            return result.data.list.map(item => ({
              value: item.id,
              label: item.dm
            }));
          }
        }

        // 如果API调用失败，返回默认数据
        console.warn("获取门店列表失败，使用默认数据");
        return getDefaultStoreOptions();
      } catch (error) {
        console.error("获取门店列表出错:", error);
        return getDefaultStoreOptions();
      }
    }

    // 获取金三角选项（从API获取）
    async function getJsjOptions() {
      try {
        const apiUrl = `${APP_CONFIG.getApiBaseUrl()}/api/system/DataInterface/733894897408410885/Actions/Response?n=1757161536`;
        const response = await fetch(apiUrl, {
          method: "GET",
          headers: {
            "Authorization": `${getAuthToken()}`,
            "Content-Type": "application/json"
          }
        });

        if (response.ok) {
          const result = await response.json();
          if (result.code == 200 && result.data) {
            return result.data.map(item => ({
              value: item.id,
              label: item.fullName
            }));
          }
        }

        // 如果API调用失败，返回默认数据
        console.warn("获取金三角列表失败，使用默认数据");
        return getDefaultJsjOptions();
      } catch (error) {
        console.error("获取金三角列表出错:", error);
        return getDefaultJsjOptions();
      }
    }

    // 获取合作机构选项（从API获取）
    async function getHgjgOptions() {
      try {
        const apiUrl = `${APP_CONFIG.getApiBaseUrl()}/api/system/DataInterface/733896629660157189/Actions/Response?n=1757162571`;
        const response = await fetch(apiUrl, {
          method: "GET",
          headers: {
            "Authorization": `${getAuthToken()}`,
            "Content-Type": "application/json"
          }
        });

        if (response.ok) {
          const result = await response.json();
          if (result.code == 200 && result.data) {
            return result.data.map(item => ({
              value: item.id,
              label: item.fullName || item.name || item.label
            }));
          }
        }

        // 如果API调用失败，返回默认数据
        console.warn("获取合作机构列表失败，使用默认数据");
        return getDefaultHgjgOptions();
      } catch (error) {
        console.error("获取合作机构列表出错:", error);
        return getDefaultHgjgOptions();
      }
    }

    // 获取客户来源选项（从API获取）
    async function getKhlyOptions() {
      try {
        const apiUrl = `${APP_CONFIG.getApiBaseUrl()}/api/system/DataInterface/733896629660157189/Actions/Response?n=1757162571`;
        const response = await fetch(apiUrl, {
          method: "GET",
          headers: {
            "Authorization": `${getAuthToken()}`,
            "Content-Type": "application/json"
          }
        });

        if (response.ok) {
          const result = await response.json();
          if (result.code == 200 && result.data) {
            return result.data.map(item => ({
              value: item.id,
              label: item.fullName || item.name || item.label
            }));
          }
        }

        // 如果API调用失败，返回默认数据
        console.warn("获取客户来源列表失败，使用默认数据");
        return getDefaultKhlyOptions();
      } catch (error) {
        console.error("获取客户来源列表出错:", error);
        return getDefaultKhlyOptions();
      }
    }

    // 默认会员选项（API失败时的备用数据）
    function getDefaultMemberOptions() {
      return [
        { value: "GK2020082101170", label: "张三 (GK2020082101170)" },
        { value: "GK2020082101171", label: "李四 (GK2020082101171)" },
        { value: "GK2020082101172", label: "王五 (GK2020082101172)" },
        { value: "GK2020082101173", label: "赵六 (GK2020082101173)" },
        { value: "GK2020082101174", label: "钱七 (GK2020082101174)" }
      ];
    }

    // 默认门店选项（API失败时的备用数据）
    function getDefaultStoreOptions() {
      return [
        { value: "MD.101", label: "绿纤旗舰店" },
        { value: "MD.102", label: "绿纤体验店" },
        { value: "MD.103", label: "绿纤服务中心" },
        { value: "MD.104", label: "绿纤直营店" }
      ];
    }

    // 默认金三角选项（API失败时的备用数据）
    function getDefaultJsjOptions() {
      return [
        { value: "JSJ001", label: "金三角A区" },
        { value: "JSJ002", label: "金三角B区" },
        { value: "JSJ003", label: "金三角C区" },
        { value: "JSJ004", label: "金三角D区" }
      ];
    }

    // 默认合作机构选项（API失败时的备用数据）
    function getDefaultHgjgOptions() {
      return [
        { value: "HGJG001", label: "绿纤合作机构A" },
        { value: "HGJG002", label: "绿纤合作机构B" },
        { value: "HGJG003", label: "绿纤合作机构C" },
        { value: "HGJG004", label: "绿纤合作机构D" }
      ];
    }

    // 默认客户来源选项（API失败时的备用数据）
    function getDefaultKhlyOptions() {
      return [
        { value: "KHLX001", label: "自然到店" },
        { value: "KHLX002", label: "会员推广" },
        { value: "KHLX003", label: "网络推广" }
      ];
    }

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

      if(!document.getElementById("kdhy").dataset.selectedValue){
        showMessage("请选择开单会员", "error");
        return;
      }
      if(!document.getElementById("djmd").dataset.selectedValue){
        showMessage("请选择单据门店", "error");
        return;
      }
      if(!document.getElementById("jsj").dataset.selectedValue){
        showMessage("请选择金三角", "error");
        return;
      }
      if(!document.getElementById("hgjg").dataset.selectedValue){
        showMessage("请选择合作机构", "error");
        return;
      }
      if(!document.getElementById("kdrq").value){
        showMessage("请选择开单日期", "error");
        return;
      }
      if(!document.getElementById("gjlx").value){
        showMessage("请选择顾客类型", "error");
        return;
      }

      // 验证数字输入框
      const zdyj = parseFloat(document.getElementById("zdyj").value);
      const sfyj = parseFloat(document.getElementById("sfyj").value);
      const qk = parseFloat(document.getElementById("qk").value);

      if (isNaN(zdyj) || zdyj < 0) {
        showMessage("请输入有效的整单业绩（大于等于0）", "error");
        return;
      }

      if (isNaN(sfyj) || sfyj < 0) {
        showMessage("请输入有效的实付业绩（大于等于0）", "error");
        return;
      }

      if (isNaN(qk) || qk < 0) {
        showMessage("请输入有效的欠款（大于等于0）", "error");
        return;
      }

      if(!document.getElementById("ckfs").value){
        showMessage("请选择储扣方式", "error");
        return;
      }

      if(!document.getElementById("ckmx").value.trim()){
        showMessage("请输入储扣明细", "error");
        return;
      }

      if(!document.getElementById("fkfs").value){
        showMessage("请选择付款方式", "error");
        return;
      }

      if(!document.getElementById("fkyy").dataset.selectedValue){
        showMessage("请选择付款医院", "error");
        return;
      }

      if(!document.getElementById("fkpd").value.trim()){
        showMessage("请输入付款判断", "error");
        return;
      }

      if(!document.getElementById("khly").value){
        showMessage("请选择客户来源", "error");
        return;
      }

      if(!document.getElementById("tjr").value.trim()){
        showMessage("请输入推荐人", "error");
        return;
      }

      if(!document.getElementById("sfskdd").value){
        showMessage("请选择是否首开订单", "error");
        return;
      }

      // 收集表单数据
      const formData = {
        kdhy: document.getElementById("kdhy").dataset.selectedValue,
        djmd: document.getElementById("djmd").dataset.selectedValue,
        jsj: document.getElementById("jsj").dataset.selectedValue,
        hgjg: document.getElementById("hgjg").dataset.selectedValue,
        kdrq: document.getElementById("kdrq").value,
        gjlx: document.getElementById("gjlx").value,
        zdyj: zdyj,
        sfyj: sfyj,
        qk: qk,
        ckfs: document.getElementById("ckfs").value,
        ckmx: document.getElementById("ckmx").value.trim(),
        fkfs: document.getElementById("fkfs").value,
        fkyy: document.getElementById("fkyy").dataset.selectedValue,
        fkpd: document.getElementById("fkpd").value.trim(),
        khly: document.getElementById("khly").value,
        tjr: document.getElementById("tjr").value.trim(),
        sfskdd: document.getElementById("sfskdd").value
      };

      console.log("开单数据:", formData);

      // 提交数据到API
      submitOrder(formData);
    }

    // 提交开单数据
    function submitOrder(data) {
      const apiUrl = `${APP_CONFIG.getApiBaseUrl()}/api/Extend/LqKdKdjlb`;

      fetch(apiUrl, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "Authorization": `${getAuthToken()}`
        },
        body: JSON.stringify(data)
      })
      .then(response => response.json())
      .then(result => {
        if (result.code == 200) {
          // 显示成功提示
          showMessage("开单成功！", "success");
          clearForm();
        } else {
          // 显示失败提示
          showMessage(`开单失败：${result.message || "未知错误"}`, "error");
        }
      })
      .catch(error => {
        console.error("提交失败:", error);
        showMessage("网络错误，请检查连接后重试", "error");
      });
    }

    // 清空表单
    function clearForm() {
      document.getElementById("kdhy").value = "";
      document.getElementById("kdhy").dataset.selectedValue = "";
      document.getElementById("djmd").value = "";
      document.getElementById("djmd").dataset.selectedValue = "";
      document.getElementById("jsj").value = "";
      document.getElementById("jsj").dataset.selectedValue = "";
      document.getElementById("hgjg").value = "";
      document.getElementById("hgjg").dataset.selectedValue = "";
      document.getElementById("kdrq").value = "";
      document.getElementById("gjlx").value = "";
      document.getElementById("zdyj").value = "";
      document.getElementById("sfyj").value = "";
      document.getElementById("qk").value = "";
      document.getElementById("ckfs").value = "";
      document.getElementById("ckmx").value = "";
      document.getElementById("fkfs").value = "";
      document.getElementById("fkyy").value = "";
      document.getElementById("fkyy").dataset.selectedValue = "";
      document.getElementById("fkpd").value = "";
      document.getElementById("khly").value = "";
      document.getElementById("tjr").value = "";
      document.getElementById("sfskdd").value = "";
    }

    // 取消开单
    function cancelOrder() {
      if (confirm("确定要取消开单吗？")) {
        clearForm();
        showMessage("已取消开单", "info");
      }
    }

    // 显示消息提示
    function showMessage(message, type = "info") {
      const toast = document.getElementById("messageToast");
      toast.textContent = message;
      toast.className = `message-toast ${type}`;
      toast.classList.add("show");

      setTimeout(() => {
        toast.classList.remove("show");
      }, 3000);
    }
  </script>
</body>
</html>