appointment1.html 13.2 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>
  <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;
    }
    textarea {
      resize: vertical;
      min-height: 48px;
      max-height: 120px;
    }
    .flex-row { display: flex; gap: 10px; }
    .flex-row > * { flex: 1; }
    @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>
    <form id="appointmentForm">
      <div class="section-title">预约信息</div>
      <div class="form-group">
        <label for="store">店名</label>
        <div class="desc">单据门店</div>
        <select id="store" name="store" required>
          <option value="">请选择门店</option>
          <option value="旗舰店">旗舰店</option>
          <option value="分店A">分店A</option>
          <option value="分店B">分店B</option>
        </select>
      </div>
      <div class="form-group">
        <label for="inviter">邀约人</label>
        <div class="desc">系统可根据ID识别邀约人/店助选择</div>
        <select id="inviter" name="inviter" required>
          <option value="">请选择邀约人</option>
          <option value="张三">张三</option>
          <option value="李四">李四</option>
          <option value="王五">王五</option>
        </select>
      </div>
      <div class="form-group">
        <label for="customerName">顾客姓名</label>
        <select id="customerName" name="customerName" required>
          <option value="">请选择顾客</option>
          <option value="会员-王女士">会员-王女士</option>
          <option value="会员-李女士">会员-李女士</option>
          <option value="线索池-张小姐">线索池-张小姐</option>
        </select>
      </div>
      <div class="form-group">
        <label for="customerType">顾客类型</label>
        <select id="customerType" name="customerType" required>
          <option value="会员">会员</option>
          <option value="线索池19.9">线索池19.9</option>
        </select>
      </div>
      <div class="form-group">
        <label for="experienceProject">预约体验项目</label>
        <select id="experienceProject" name="experienceProject" required>
          <option value="">请选择项目</option>
          <option value="A项目">A项目</option>
          <option value="B项目">B项目</option>
        </select>
      </div>
      <div class="form-group">
        <label for="operator">操作人</label>
        <select id="operator" name="operator" required>
          <option value="">请选择操作人</option>
          <option value="店助A">店助A</option>
          <option value="店助B">店助B</option>
        </select>
      </div>

      <button type="submit">提交预约</button>
    </form>
  </div>

  <script>
    // 页面加载完成后初始化
    document.addEventListener('DOMContentLoaded', function() {
      const form = document.getElementById('appointmentForm');
      const storeSelect = document.getElementById('store');
      const inviterSelect = document.getElementById('inviter');
      const customerNameSelect = document.getElementById('customerName');
      const customerTypeSelect = document.getElementById('customerType');
      const experienceProjectSelect = document.getElementById('experienceProject');
      const operatorSelect = document.getElementById('operator');

      // 门店数据
      const storeData = {
        '旗舰店': {
          inviters: ['张三', '李四', '王五'],
          operators: ['店助A', '店助B', '店助C'],
          projects: ['A项目', 'B项目', 'C项目']
        },
        '分店A': {
          inviters: ['赵六', '钱七'],
          operators: ['店助D', '店助E'],
          projects: ['A项目', 'B项目']
        },
        '分店B': {
          inviters: ['孙八', '周九'],
          operators: ['店助F', '店助G'],
          projects: ['B项目', 'C项目']
        }
      };

      // 顾客数据
      const customerData = {
        '会员-王女士': { type: '会员', phone: '138****8888' },
        '会员-李女士': { type: '会员', phone: '139****9999' },
        '线索池-张小姐': { type: '线索池19.9', phone: '137****7777' }
      };

      // 门店选择变化时，更新相关选项
      storeSelect.addEventListener('change', function() {
        const selectedStore = this.value;

        // 清空并重新填充邀约人
        inviterSelect.innerHTML = '<option value="">请选择邀约人</option>';
        if (selectedStore && storeData[selectedStore]) {
          storeData[selectedStore].inviters.forEach(inviter => {
            const option = document.createElement('option');
            option.value = inviter;
            option.textContent = inviter;
            inviterSelect.appendChild(option);
          });
        }

        // 清空并重新填充操作人
        operatorSelect.innerHTML = '<option value="">请选择操作人</option>';
        if (selectedStore && storeData[selectedStore]) {
          storeData[selectedStore].operators.forEach(operator => {
            const option = document.createElement('option');
            option.value = operator;
            option.textContent = operator;
            operatorSelect.appendChild(option);
          });
        }

        // 清空并重新填充体验项目
        experienceProjectSelect.innerHTML = '<option value="">请选择项目</option>';
        if (selectedStore && storeData[selectedStore]) {
          storeData[selectedStore].projects.forEach(project => {
            const option = document.createElement('option');
            option.value = project;
            option.textContent = project;
            experienceProjectSelect.appendChild(option);
          });
        }

        // 重置其他选择
        inviterSelect.value = '';
        operatorSelect.value = '';
        experienceProjectSelect.value = '';
      });

      // 顾客姓名选择变化时，自动设置顾客类型
      customerNameSelect.addEventListener('change', function() {
        const selectedCustomer = this.value;
        if (selectedCustomer && customerData[selectedCustomer]) {
          customerTypeSelect.value = customerData[selectedCustomer].type;
        }
      });

      // 表单提交处理
      form.addEventListener('submit', function(e) {
        e.preventDefault();

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

        // 收集表单数据
        const formData = {
          store: storeSelect.value,
          inviter: inviterSelect.value,
          customerName: customerNameSelect.value,
          customerType: customerTypeSelect.value,
          experienceProject: experienceProjectSelect.value,
          operator: operatorSelect.value,
          submitTime: new Date().toISOString(),
          customerPhone: customerData[customerNameSelect.value]?.phone || ''
        };

        // 显示提交确认
        showSubmitConfirmation(formData);
      });

      // 表单验证函数
      function validateForm() {
        const requiredFields = [storeSelect, inviterSelect, customerNameSelect, customerTypeSelect, experienceProjectSelect, operatorSelect];

        for (let field of requiredFields) {
          if (!field.value.trim()) {
            showError(`${field.previousElementSibling.textContent}不能为空`);
            field.focus();
            return false;
          }
        }

        return true;
      }

      // 显示错误信息
      function showError(message) {
        // 移除之前的错误提示
        const existingError = document.querySelector('.error-message');
        if (existingError) {
          existingError.remove();
        }

        const errorDiv = document.createElement('div');
        errorDiv.className = 'error-message';
        errorDiv.style.cssText = `
          color: #d32f2f;
          background: #ffebee;
          border: 1px solid #ffcdd2;
          border-radius: 4px;
          padding: 8px 12px;
          margin: 8px 0;
          font-size: 0.9em;
        `;
        errorDiv.textContent = message;

        form.insertBefore(errorDiv, form.querySelector('button'));

        // 3秒后自动移除错误提示
        setTimeout(() => {
          if (errorDiv.parentNode) {
            errorDiv.remove();
          }
        }, 3000);
      }

      // 显示提交确认
      function showSubmitConfirmation(data) {
        const confirmationDiv = document.createElement('div');
        confirmationDiv.className = 'confirmation-message';
        confirmationDiv.style.cssText = `
          color: #2e7d32;
          background: #e8f5e9;
          border: 1px solid #c8e6c9;
          border-radius: 8px;
          padding: 16px;
          margin: 16px 0;
          text-align: center;
        `;

        confirmationDiv.innerHTML = `
          <h3 style="margin: 0 0 12px 0; color: #2e7d32;">预约提交成功！</h3>
          <div style="text-align: left; margin-bottom: 16px;">
            <p><strong>门店：</strong>${data.store}</p>
            <p><strong>邀约人：</strong>${data.inviter}</p>
            <p><strong>顾客：</strong>${data.customerName} (${data.customerPhone})</p>
            <p><strong>顾客类型：</strong>${data.customerType}</p>
            <p><strong>体验项目：</strong>${data.experienceProject}</p>
            <p><strong>操作人：</strong>${data.operator}</p>
            <p><strong>提交时间：</strong>${new Date(data.submitTime).toLocaleString('zh-CN')}</p>
          </div>
          <button type="button" onclick="resetForm()" style="
            background: #43a047;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 8px;
          ">继续预约</button>
          <button type="button" onclick="printConfirmation()" style="
            background: #1976d2;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
          ">打印确认</button>
        `;

        form.innerHTML = '';
        form.appendChild(confirmationDiv);
      }

      // 重置表单
      window.resetForm = function() {
        location.reload();
      };

      // 打印确认信息
      window.printConfirmation = function() {
        window.print();
      };

      // 添加输入框焦点效果
      const inputs = form.querySelectorAll('input, select, textarea');
      inputs.forEach(input => {
        input.addEventListener('focus', function() {
          this.parentElement.style.transform = 'scale(1.02)';
          this.parentElement.style.transition = 'transform 0.2s ease';
        });

        input.addEventListener('blur', function() {
          this.parentElement.style.transform = 'scale(1)';
        });
      });
    });
  </script>
</body>
</html>