member-consume.html 12.9 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;
      font-size: 1.08em;
    }
    .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.1em;
      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;
    }
    .flex-row { display: flex; gap: 10px; }
    .flex-row > * { flex: 1; }
    .multi-list { margin-bottom: 8px; }
    .multi-row { display: flex; gap: 8px; margin-bottom: 6px; align-items: center; }
    .multi-row select, .multi-row input {
      flex: 2;
      min-width: 0;
    }
    .multi-row .remove-btn {
      flex: 0 0 44px;
      min-width: 44px;
      max-width: 44px;
      background: #eee;
      color: #e53935;
      border: none;
      border-radius: 4px;
      padding: 4px 0;
      font-size: 0.95em;
      cursor: pointer;
      margin-left: 4px;
    }
    .multi-row .remove-btn:hover { background: #ffcdd2; }
    .add-btn {
      background: #b2dfdb;
      color: #388e3c;
      border: none;
      border-radius: 4px;
      padding: 6px 0;
      font-size: 1em;
      margin-bottom: 8px;
      cursor: pointer;
      width: 100%;
    }
    .add-btn:hover { background: #43a047; color: #fff; }
    .autocomplete-list {
      position: absolute;
      z-index: 10;
      background: #fff;
      border: 1px solid #c8e6c9;
      border-radius: 6px;
      box-shadow: 0 2px 8px #e0f2f1;
      width: 100%;
      max-height: 180px;
      overflow-y: auto;
      margin-top: 2px;
      padding: 0;
      list-style: none;
    }
    .autocomplete-item {
      padding: 8px 12px;
      cursor: pointer;
      color: #333;
    }
    .autocomplete-item:hover, .autocomplete-item.active {
      background: #e8f5e9;
      color: #388e3c;
    }
    @media (max-width: 520px) {
      .container {
        max-width: 100vw;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 18px 4px 12px 4px;
      }
      h2 { font-size: 1em; }
      .section-title { font-size: 1em; }
      label { font-size: 0.97em; }
      .desc { font-size: 0.92em; }
      input, select, textarea { font-size: 0.97em; }
      button, .add-btn { font-size: 1em; padding: 12px; }
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>绿纤会员耗卡</h2>
    <form id="consumeForm">
      <div class="section-title">基本信息</div>
      <div class="form-group">
        <label for="store">店名</label>
        <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 flex-row" style="position:relative;">
        <div>
          <label for="customerType">顾客类型</label>
          <select id="customerType" name="customerType" required>
            <option value="">请选择类型</option>
            <option value="会员">会员</option>
            <option value="线索池19.9客户">线索池19.9客户</option>
          </select>
        </div>
        <div style="position:relative;flex:1;">
          <label for="customer">顾客姓名</label>
          <input type="text" id="customer" name="customer" placeholder="请输入顾客姓名" autocomplete="off" required>
          <ul id="customerAutoList" class="autocomplete-list" style="display:none;"></ul>
        </div>
      </div>
      <div class="section-title">健康师业绩分配</div>
      <div class="form-group">
        <div class="desc">可添加多位健康师，并为每位填写业绩金额</div>
        <div class="multi-list" id="consultantList"></div>
        <button type="button" class="add-btn" id="addConsultantBtn">添加健康师</button>
      </div>
      <div class="form-group flex-row">
        <div>
          <label for="consumeAmount">消费金额</label>
          <input type="number" id="consumeAmount" name="consumeAmount" min="0" placeholder="自动判断/手动填写">
        </div>
        <div>
          <label for="manualFee">手工费用</label>
          <input type="number" id="manualFee" name="manualFee" min="0" placeholder="请输入手工费用">
        </div>
      </div>
      <div class="form-group">
        <label for="hasTechTeacher">是否有科技部老师</label>
        <select id="hasTechTeacher" name="hasTechTeacher" required>
          <option value="">请选择</option>
          <option value="是">是</option>
          <option value="否">否</option>
        </select>
      </div>
      <div class="form-group" id="techTeacherGroup" style="display:none;">
        <div class="desc">可添加多位科技部老师，并为每位填写业绩金额</div>
        <div class="multi-list" id="techTeacherList"></div>
        <button type="button" class="add-btn" id="addTechTeacherBtn">添加科技部老师</button>
      </div>
      <div class="section-title">品项信息</div>
      <div class="form-group">
        <div class="desc">可添加多个品项，并为每个品项填写价格和是否赠送</div>
        <div class="multi-list" id="productList"></div>
        <button type="button" class="add-btn" id="addProductBtn">添加品项</button>
      </div>
      <button type="submit">提交耗卡</button>
    </form>
  </div>
  <script>
    // 健康师动态添加
    const consultantList = document.getElementById('consultantList');
    const addConsultantBtn = document.getElementById('addConsultantBtn');
    let consultantIdx = 0;
    const consultantOptions = [
      { value: '', label: '选择健康师' },
      { value: '张三', label: '张三' },
      { value: '李四', label: '李四' },
      { value: '王五', label: '王五' }
    ];
    function createConsultantRow(idx) {
      const row = document.createElement('div');
      row.className = 'multi-row';
      row.innerHTML = `
        <select name="consultant_${idx}" required>
          ${consultantOptions.map(opt => `<option value="${opt.value}">${opt.label}</option>`).join('')}
        </select>
        <input type="number" name="consultantAmount_${idx}" placeholder="业绩金额" min="0" required>
        <button type="button" class="remove-btn">删除</button>
      `;
      row.querySelector('.remove-btn').onclick = function() { row.remove(); };
      return row;
    }
    function addConsultantRow() { consultantList.appendChild(createConsultantRow(consultantIdx++)); }
    addConsultantBtn.onclick = addConsultantRow;
    addConsultantRow();

    // 品项动态添加
    const productList = document.getElementById('productList');
    const addProductBtn = document.getElementById('addProductBtn');
    let productIdx = 0;
    const productOptions = [
      { value: '', label: '选择品项' },
      { value: '面部护理', label: '面部护理' },
      { value: '身体护理', label: '身体护理' },
      { value: '产品销售', label: '产品销售' }
    ];
    function createProductRow(idx) {
      const row = document.createElement('div');
      row.className = 'multi-row';
      row.innerHTML = `
        <select name="product_${idx}" required>
          ${productOptions.map(opt => `<option value="${opt.value}">${opt.label}</option>`).join('')}
        </select>
        <input type="number" name="productPrice_${idx}" placeholder="价格" min="0" required>
        <select name="productGift_${idx}" required>
          <option value="否">非赠送</option>
          <option value="是">赠送</option>
        </select>
        <button type="button" class="remove-btn">删除</button>
      `;
      row.querySelector('.remove-btn').onclick = function() { row.remove(); };
      return row;
    }
    function addProductRow() { productList.appendChild(createProductRow(productIdx++)); }
    addProductBtn.onclick = addProductRow;
    addProductRow();

    // 科技部老师动态添加
    const hasTechTeacher = document.getElementById('hasTechTeacher');
    const techTeacherGroup = document.getElementById('techTeacherGroup');
    const techTeacherList = document.getElementById('techTeacherList');
    const addTechTeacherBtn = document.getElementById('addTechTeacherBtn');
    let techTeacherIdx = 0;
    const techTeacherOptions = [
      { value: '', label: '选择老师' },
      { value: '王老师', label: '王老师' },
      { value: '赵老师', label: '赵老师' }
    ];
    function createTechTeacherRow(idx) {
      const row = document.createElement('div');
      row.className = 'multi-row';
      row.innerHTML = `
        <select name="techTeacher_${idx}" required>
          ${techTeacherOptions.map(opt => `<option value="${opt.value}">${opt.label}</option>`).join('')}
        </select>
        <input type="number" name="techTeacherAmount_${idx}" placeholder="业绩金额" min="0" required>
        <button type="button" class="remove-btn">删除</button>
      `;
      row.querySelector('.remove-btn').onclick = function() { row.remove(); };
      return row;
    }
    function addTechTeacherRow() { techTeacherList.appendChild(createTechTeacherRow(techTeacherIdx++)); }
    if(addTechTeacherBtn) addTechTeacherBtn.onclick = addTechTeacherRow;
    if(hasTechTeacher) {
      hasTechTeacher.addEventListener('change', function() {
        if(this.value === '是') {
          techTeacherGroup.style.display = '';
          if(techTeacherList.childElementCount === 0) addTechTeacherRow();
        } else {
          techTeacherGroup.style.display = 'none';
          techTeacherList.innerHTML = '';
        }
      });
    }

    // 顾客姓名模糊检索
    const customerInput = document.getElementById('customer');
    const customerAutoList = document.getElementById('customerAutoList');
    // 示例数据，实际可替换为接口数据
    const customerNames = [
      '会员A', '会员B', '会员C', '张三', '李四', '王五', '赵六', '线索池客户1', '线索池客户2', '王女士', '李女士', '张小姐'
    ];
    customerInput.addEventListener('input', function() {
      const val = this.value.trim();
      if (!val) {
        customerAutoList.style.display = 'none';
        return;
      }
      const results = customerNames.filter(name => name.includes(val));
      if (results.length === 0) {
        customerAutoList.style.display = 'none';
        return;
      }
      customerAutoList.innerHTML = results.map(name => `<li class='autocomplete-item'>${name}</li>`).join('');
      customerAutoList.style.display = '';
    });
    customerAutoList.addEventListener('mousedown', function(e) {
      if (e.target.classList.contains('autocomplete-item')) {
        customerInput.value = e.target.textContent;
        customerAutoList.style.display = 'none';
      }
    });
    document.addEventListener('click', function(e) {
      if (!customerInput.contains(e.target) && !customerAutoList.contains(e.target)) {
        customerAutoList.style.display = 'none';
      }
    });
  </script>
</body>
</html>