appointment copy.html 23.7 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%);
      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 {
      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 {
      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;
    }

    .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);
    }

    .message-toast.show {
      transform: translateX(0);
    }

    .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="appointmentForm">
          <div class="form-group">
            <label for="djmd">门店</label>
            <div class="input-wrapper">
              <!-- <div class="input-icon">🏪</div> -->
              <input type="text" id="djmd" class="select-input" placeholder="请选择门店" readonly>
            </div>
          </div>

          <!-- <div class="form-group">
            <label for="yyr">预约人员</label>
            <div class="input-wrapper">
              <div class="input-icon">👤</div>
              <input type="text" id="yyr" placeholder="当前登录用户" disabled>
            </div>
          </div> -->

          <div class="form-group">
            <label for="yytyxm">预约体验项目</label>
            <div class="input-wrapper">
              <!-- <div class="input-icon">🎯</div> -->
              <input type="text" id="yytyxm" class="select-input" placeholder="请选择体验项目" readonly>
            </div>
          </div>

          <div class="form-group">
            <label for="gkxm">顾客姓名</label>
            <div class="input-wrapper">
              <!-- <div class="input-icon">👥</div> -->
              <input type="text" id="gkxm" class="select-input" placeholder="请选择顾客姓名" readonly>
            </div>
          </div>

          <div class="btn-group">
            <button type="button" class="btn btn-secondary" onclick="cancelAppointment()">取消预约</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 = await getUserInfo();
      console.log(userInfo);

    }

    async function getUserInfo() {
      try {
        const apiUrl = `${APP_CONFIG.getApiBaseUrl()}/api/oauth/CurrentUser`;
        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.userInfo
          }
        }
        return {};

      } catch (error) {
        console.error('获取门店列表出错:', error);
        return {};
      }
    }

    // 绑定事件
    function bindEvents() {
      // 绑定选择输入框点击事件
      const selectInputs = document.querySelectorAll('.select-input');
      selectInputs.forEach(input => {
        input.addEventListener('click', function() {
          openSelectModal(this);
        });
      });

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

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

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

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

      try {
        let options = [];

        // 根据字段类型获取不同的选项数据
        switch(fieldId) {
          case 'djmd':
            options = await getStoreOptions();
            showModal('选择门店', options);
            break;
          case 'yytyxm':
            options = await getProjectOptions();
            showModal('选择体验项目', options);
            break;
          case 'gkxm':
            options = await getCustomerOptions();
            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,
            khlx: this.dataset.khlx
          };
        });

        optionList.appendChild(optionItem);
      });
    }

    // 处理搜索
    function handleSearch() {
      const searchTerm = document.getElementById('searchInput').value.toLowerCase();
      const filteredOptions = currentOptions.filter(option =>
        option.label.toLowerCase().includes(searchTerm)
      );
      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 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 getProjectOptions() {
      try {
        const apiUrl = `${APP_CONFIG.getApiBaseUrl()}/api/Extend/LqXmzl?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.xmmc
            }));
          }
        }

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

    // 获取顾客姓名选项（从API获取）
    async function getCustomerOptions() {
      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,
              khlx:item.khlx
            }));
          }
        }

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


    // 默认门店选项（API失败时的备用数据）
    function getDefaultStoreOptions() {
      return [
        { value: 'store001', label: '绿纤旗舰店' },
        { value: 'store002', label: '绿纤体验店' },
        { value: 'store003', label: '绿纤服务中心' },
        { value: 'store004', label: '绿纤直营店' }
      ];
    }

    // 默认项目选项（API失败时的备用数据）
    function getDefaultProjectOptions() {
      return [
        { value: 'proj001', label: '基础护理' },
        { value: 'proj002', label: '深度清洁' },
        { value: 'proj003', label: '美白护理' },
        { value: 'proj004', label: '抗衰护理' },
        { value: 'proj005', label: '补水保湿' }
      ];
    }

    // 默认顾客选项（API失败时的备用数据）
    function getDefaultCustomerOptions() {
      return [
        { value: 'cust001', label: '张三', khlx: 'VIP' },
        { value: 'cust002', label: '李四', khlx: '普通' },
        { value: 'cust003', label: '王五', khlx: 'VIP' },
        { value: 'cust004', label: '赵六', khlx: '普通' },
        { value: 'cust005', label: '钱七', khlx: 'VIP' }
      ];
    }


    // 处理表单提交
    function handleFormSubmit(event) {
      event.preventDefault();
     if(!document.getElementById('djmd').dataset.selectedValue){
      showMessage('请选择门店', 'error');
      return;
     }
     if(!document.getElementById('yytyxm').dataset.selectedValue){
      showMessage('请选择体验项目', 'error');
      return;
     }
     if(!document.getElementById('gkxm').dataset.selectedValue){
      showMessage('请选择顾客姓名', 'error');
      return;
     }
      // 收集表单数据
      const formData = {
        djmd: document.getElementById('djmd').dataset.selectedValue,
        yyr: userInfo.userId,
        yytyxm: document.getElementById('yytyxm').dataset.selectedValue,
        gkxm: document.getElementById('gkxm').dataset.selectedValue,
        gklx: document.getElementById('gkxm').dataset.khlx
      };
      console.log(formData);
      // 提交数据到API
      submitAppointment(formData);
    }

    // 提交预约数据
    function submitAppointment(data) {
      const apiUrl = `${APP_CONFIG.getApiBaseUrl()}/api/Extend/LqYyjl`;

      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('appointmentForm').reset();

      // 清空选择字段的数据
      const selectInputs = document.querySelectorAll('.select-input');
      selectInputs.forEach(input => {
        input.value = '';
        delete input.dataset.selectedValue;
        delete input.dataset.khlx;
      });
    }

    // 返回上一页
    function goBack() {
      if (window.history.length > 1) {
        window.history.back();
      } else {
        window.location.href = 'index.html';
      }
    }

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

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

      // 显示提示
      setTimeout(() => {
        toast.classList.add('show');
      }, 100);

      // 自动隐藏
      setTimeout(() => {
        toast.classList.remove('show');
      }, 3000);
    }

    // 取消预约
    function cancelAppointment() {
      // 清空表单
      clearForm();
      // // 显示取消提示
      // showMessage('已取消预约', 'info');
      window.location.href = 'index.html';
    }
  </script>
</body>
</html>