refund.html 9.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.15em;
    }
    .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.92em;
      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, #e53935 60%, #ff5252 100%);
      color: #fff;
      border: none;
      border-radius: 8px;
      font-size: 1.15em;
      font-weight: bold;
      letter-spacing: 2px;
      box-shadow: 0 2px 8px #ffcdd2;
      cursor: pointer;
      transition: background 0.2s, box-shadow 0.2s;
    }
    button:hover, button:active {
      background: linear-gradient(90deg, #b71c1c 60%, #e53935 100%);
      box-shadow: 0 4px 16px #ffcdd2;
    }
    textarea {
      resize: vertical;
      min-height: 48px;
      max-height: 120px;
    }
    @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 { font-size: 1em; padding: 12px; }
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>绿纤退卡</h2>
    <form id="refundForm">
      <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" style="position:relative;">
        <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 class="form-group">
        <label for="consultant">健康师</label>
        <select id="consultant" name="consultant" required>
          <option value="">请选择健康师</option>
          <option value="张三">张三</option>
          <option value="李四">李四</option>
          <option value="王五">王五</option>
        </select>
      </div>
      <div class="section-title">退卡品项</div>
      <div class="form-group">
        <div class="desc">可添加多个退卡品项，每项填写退款金额和次数，自动显示单次耗卡金额</div>
        <div class="multi-list" id="refundItemList"></div>
        <button type="button" class="add-btn" id="addRefundItemBtn">添加退卡品项</button>
      </div>
      <div class="form-group">
        <label for="remark">备注</label>
        <textarea id="remark" name="remark" rows="2" placeholder="请输入备注"></textarea>
      </div>
      <button type="submit">提交退卡</button>
      <style>
      .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;
      }
      .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/override styles for the add-btn */
      .add-btn {
        width: auto;
        display: inline-block;
        padding: 6px 18px;
        background: linear-gradient(90deg, #43a047 60%, #66bb6a 100%);
        color: #fff;
        border: none;
        border-radius: 18px;
        font-size: 0.98em;
        font-weight: bold;
        letter-spacing: 1px;
        box-shadow: 0 2px 8px #c8e6c9;
        cursor: pointer;
        margin-top: 8px;
        margin-bottom: 4px;
        transition: background 0.2s, box-shadow 0.2s;
      }
      .add-btn:hover, .add-btn:active {
        background: linear-gradient(90deg, #388e3c 60%, #43a047 100%);
        box-shadow: 0 4px 16px #a5d6a7;
      }
      </style>
    </form>
  </div>
  <script>
    // 退卡客户模糊检索
    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';
      }
    });

    // 退卡品项动态添加
    const refundItemList = document.getElementById('refundItemList');
    const addRefundItemBtn = document.getElementById('addRefundItemBtn');
    let refundItemIdx = 0;
    const productOptions = [
      { value: '', label: '选择品项' },
      { value: '面部护理', label: '面部护理' },
      { value: '身体护理', label: '身体护理' },
      { value: '产品销售', label: '产品销售' }
    ];
    function createRefundItemRow(idx) {
      const row = document.createElement('div');
      row.className = 'multi-row';
      row.innerHTML = `
        <select name="refundProduct_${idx}" required>
          ${productOptions.map(opt => `<option value="${opt.value}">${opt.label}</option>`).join('')}
        </select>
        <input type="number" name="refundAmount_${idx}" placeholder="退款金额" min="0" required>
        <input type="number" name="refundCount_${idx}" placeholder="次数" min="1" required>
        <input type="text" name="refundSingle_${idx}" placeholder="单次耗卡金额" class="readonly" readonly>
        <button type="button" class="remove-btn">删除</button>
      `;
      const amountInput = row.querySelector(`input[name="refundAmount_${idx}"]`);
      const countInput = row.querySelector(`input[name="refundCount_${idx}"]`);
      const singleInput = row.querySelector(`input[name="refundSingle_${idx}"]`);
      function updateSingle() {
        const amount = parseFloat(amountInput.value) || 0;
        const count = parseInt(countInput.value) || 0;
        singleInput.value = count > 0 ? (amount / count).toFixed(2) : '';
      }
      amountInput.addEventListener('input', updateSingle);
      countInput.addEventListener('input', updateSingle);
      row.querySelector('.remove-btn').onclick = function() { row.remove(); };
      return row;
    }
    function addRefundItemRow() { refundItemList.appendChild(createRefundItemRow(refundItemIdx++)); }
    addRefundItemBtn.onclick = addRefundItemRow;
    addRefundItemRow();
  </script>
</body>
</html>