lx.html 22.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;
    }
    .form-group {
      margin-bottom: 18px;
    }
    label {
      display: block;
      margin-bottom: 6px;
      font-weight: bold;
      color: #388e3c;
      letter-spacing: 1px;
    }
    .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, #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;
    }
    /* 签名弹窗样式 */
    .modal-sign {
      display: none;
      position: fixed;
      z-index: 9999;
      left: 0; top: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,0.35);
      justify-content: center;
      align-items: center;
    }
    .modal-sign.active {
      display: flex;
    }
    .modal-sign-content {
      background: #fff;
      border-radius: 14px;
      padding: 18px 12px 12px 12px;
      box-shadow: 0 4px 24px 0 rgba(76, 175, 80, 0.18);
      max-width: 95vw;
      width: 340px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .modal-sign-title {
      color: #388e3c;
      font-weight: bold;
      margin-bottom: 10px;
      font-size: 1.1em;
    }
    .modal-sign-canvas {
      border: 1.5px solid #c8e6c9;
      border-radius: 8px;
      background: #f9fff9;
      touch-action: none;
      margin-bottom: 10px;
    }
    .modal-sign-btns {
      display: flex;
      gap: 12px;
      width: 100%;
      margin-top: 4px;
    }
    .modal-sign-btns button {
      flex: 1;
      padding: 8px 0;
      font-size: 1em;
      border-radius: 6px;
      box-shadow: none;
      letter-spacing: 1px;
    }
    .sign-preview {
      margin-top: 8px;
      text-align: center;
    }
    .sign-preview img {
      max-width: 100%;
      max-height: 80px;
      border: 1px solid #c8e6c9;
      border-radius: 6px;
      background: #f9fff9;
      margin-top: 4px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>绿纤播报开单</h2>
    <form id="orderForm">
      <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="jinshanjiao">金山角</label>
        <select id="jinshanjiao" name="jinshanjiao" required>
          <option value="">请选择金山角</option>
          <option value="A区">A</option>
          <option value="B区">B</option>
          <option value="C区">C</option>
        </select>
      </div>
      <div class="form-group flex-row">
        <div>
          <label for="date">开单日期</label>
          <div class="desc">每日设置</div>
          <input type="date" id="date" name="date" required>
        </div>
        <div>
          <label for="memberType">顾客类型</label>
          <div class="desc">会员/非会员</div>
          <select id="memberType" name="memberType" required>
            <option value="">请选择</option>
            <option value="会员">会员</option>
            <option value="非会员">非会员</option>
          </select>
        </div>
      </div>
      <!-- 新增会员资料弹窗 -->
      <div class="modal-sign" id="modalAddMember">
        <div class="modal-sign-content" style="width:320px;max-width:95vw;">
          <div class="modal-sign-title">新增会员资料</div>
          <div style="width:100%;margin-bottom:10px;">
            <label for="newMemberName" style="color:#388e3c;font-weight:bold;">会员姓名</label>
            <input type="text" id="newMemberName" placeholder="请输入会员姓名" style="margin-bottom:10px;">
            <label for="newMemberPhone" style="color:#388e3c;font-weight:bold;">手机号</label>
            <input type="tel" id="newMemberPhone" placeholder="请输入手机号" maxlength="11">
          </div>
          <div class="modal-sign-btns">
            <button type="button" id="saveMemberBtn" style="background:#43a047;">保存</button>
            <button type="button" id="cancelMemberBtn" style="background:#eee;color:#388e3c;">取消</button>
          </div>
        </div>
      </div>

      <div class="section-title">业绩分配</div>
      <div class="form-group" id="consultantListGroup" style="font-size:1em;">
        <label style="font-size:1em;">健康师及业绩分配</label>
        <div class="desc" style="font-size:0.95em;">可添加多位健康师，并为每位填写本次分配的业绩金额</div>
        <div id="consultantList"></div>
        <button type="button" id="addConsultantBtn" style="margin-top:8px;background:#b2dfdb;color:#388e3c;">添加健康师</button>
      </div>
      <div class="section-title">品项信息</div>
      <div class="form-group" id="productListGroup" style="font-size:1em;">
        <label style="font-size:1em;">品项及价格</label>
        <div class="desc" style="font-size:0.95em;">可添加多个品项，并为每个品项填写价格</div>
        <div id="productListDynamic"></div>
        <button type="button" id="addProductBtn" style="margin-top:8px;background:#b2dfdb;color:#388e3c;">添加品项</button>
      </div>
      <div class="section-title">合作与科技</div>
      <div class="form-group">
        <label for="cooperation">合作机构</label>
        <div class="desc">选择合作机构</div>
        <select id="cooperation" name="cooperation">
          <option value="">请选择合作机构</option>
          <option value="医院A">医院A</option>
          <option value="医院B">医院B</option>
          <option value="科技部">科技部</option>
        </select>
      </div>
      <div class="form-group">
        <label for="techTeacher">科技部老师</label>
        <div class="desc">选择科技部老师</div>
        <select id="techTeacher" name="techTeacher">
          <option value="">请选择老师</option>
          <option value="王老师">王老师</option>
          <option value="赵老师">赵老师</option>
        </select>
      </div>
      <div class="form-group">
        <label for="techAmount">科技部购实金额</label>
        <div class="desc">自动核算</div>
        <input type="number" id="techAmount" name="techAmount" class="readonly" readonly>
      </div>
      <div class="section-title">营销与支付</div>
      <div class="form-group flex-row">
        <div>
          <label for="totalPerformance">整单业绩</label>
          <div class="desc">手动填写</div>
          <input type="number" id="totalPerformance" name="totalPerformance" min="0" placeholder="请输入整单业绩">
        </div>
        <div>
          <label for="actualPerformance">实付业绩</label>
          <div class="desc">手动填写</div>
          <input type="number" id="actualPerformance" name="actualPerformance" min="0" placeholder="请输入实付业绩">
        </div>
        <div>
          <label for="arrears">欠款</label>
          <div class="desc">手动填写</div>
          <input type="number" id="arrears" name="arrears" min="0" placeholder="请输入欠款金额">
        </div>
      </div>
      <div class="form-group">
        <label for="depositType">储扣方式</label>
        <div class="desc">储值卡/扣项/套餐</div>
        <select id="depositType" name="depositType">
          <option value="">请选择</option>
          <option value="储值卡">储值卡</option>
          <option value="扣项">扣项</option>
          <option value="套餐">套餐</option>
        </select>
      </div>
      <div class="form-group">
        <label for="depositDetail">储扣明细</label>
        <div class="desc">自动生成</div>
        <input type="text" id="depositDetail" name="depositDetail" class="readonly" readonly>
      </div>
      <div class="form-group">
        <label for="payMethod">付款方式</label>
        <div class="desc">选择付款方式</div>
        <select id="payMethod" name="payMethod">
          <option value="">请选择</option>
          <option value="现金">现金</option>
          <option value="微信">微信</option>
          <option value="支付宝">支付宝</option>
          <option value="银行卡">银行卡</option>
          <option value="医院">医院</option>
        </select>
      </div>
      <div class="form-group">
        <label for="payHospital">付款医院</label>
        <div class="desc">选择对应医院</div>
        <select id="payHospital" name="payHospital">
          <option value="">请选择医院</option>
          <option value="医院A">医院A</option>
          <option value="医院B">医院B</option>
        </select>
      </div>
      <div class="form-group">
        <label for="payJudge">付款判断</label>
        <div class="desc">判断收款医院和合作机构是否对应</div>
        <input type="text" id="payJudge" name="payJudge" class="readonly" readonly>
      </div>
      <div class="section-title">客户与推荐</div>
      <div class="form-group">
        <label for="customerSource">客户来源</label>
        <div class="desc">选择客户来源</div>
        <select id="customerSource" name="customerSource">
          <option value="">请选择客户来源</option>
          <option value="自然到店">自然到店</option>
          <option value="会员推荐">会员推荐</option>
          <option value="网络推广">网络推广</option>
        </select>
      </div>
      <div class="form-group">
        <label for="referrer">推荐人</label>
        <div class="desc">如客户来源是会员推荐，推荐人必须选择</div>
        <input type="text" id="referrer" name="referrer" placeholder="请输入推荐人">
      </div>
      <div class="form-group">
        <label for="isFirstOrder">是否首开订单</label>
        <div class="desc">首次开单判断</div>
        <select id="isFirstOrder" name="isFirstOrder">
          <option value="">请选择</option>
          <option value="是">是</option>
          <option value="否">否</option>
        </select>
      </div>
      <div class="form-group">
        <label for="summary">简介</label>
        <div class="desc">收集知识点，做关键字提取</div>
        <textarea id="summary" name="summary" rows="2" placeholder="请输入简介"></textarea>
      </div>
      <div class="form-group">
        <label for="attachment">上传文件</label>
        <div class="desc">上传图片、拍照</div>
        <input type="file" id="attachment" name="attachment" accept="image/*" capture="environment">
      </div>
      <div class="form-group">
        <label for="sign">会员签字</label>
        <div class="desc">模拟电子签，会员协议（模版）</div>
        <input type="text" id="sign" name="sign" placeholder="请签名" readonly style="background:#f9fff9;cursor:pointer;">
        <div class="sign-preview" id="signPreview"></div>
      </div>
      <div class="form-group">
        <label for="remark">备注</label>
        <div class="desc">可填写备注</div>
        <textarea id="remark" name="remark" rows="2" placeholder="可填写备注"></textarea>
      </div>
      <button type="submit">提交开单</button>
    </form>
  </div>
  <!-- 签名弹窗 -->
  <div class="modal-sign" id="modalSign">
    <div class="modal-sign-content">
      <div class="modal-sign-title">请在下方签名</div>
      <canvas id="signCanvas" class="modal-sign-canvas" width="300" height="100"></canvas>
      <div class="modal-sign-btns">
        <button type="button" id="clearSignBtn" style="background:#b2dfdb;color:#388e3c;">清除</button>
        <button type="button" id="okSignBtn" style="background:#43a047;">确认签名</button>
        <button type="button" id="cancelSignBtn" style="background:#eee;color:#388e3c;">取消</button>
      </div>
    </div>
  </div>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // 自动核算逻辑示例
      function calcProductAmount() {
        const price = parseFloat(document.getElementById('productPrice')?.value) || 0;
        if(document.getElementById('productAmount')) document.getElementById('productAmount').value = price;
        if(document.getElementById('consultantAmount')) document.getElementById('consultantAmount').value = price;
      }
      if(document.getElementById('productPrice')) document.getElementById('productPrice').addEventListener('input', calcProductAmount);
      if(document.getElementById('actualAmount')) document.getElementById('actualAmount').addEventListener('input', function() {
        const productAmount = parseFloat(document.getElementById('productAmount')?.value) || 0;
        const actual = parseFloat(this.value) || 0;
        if(document.getElementById('arrears')) document.getElementById('arrears').value = Math.max(productAmount - actual, 0);
      });
      if(document.getElementById('customerSource')) document.getElementById('customerSource').addEventListener('change', function() {
        const referrer = document.getElementById('referrer');
        if (this.value === '会员推荐') {
          referrer.required = true;
          referrer.placeholder = '请填写推荐人（必填）';
        } else {
          referrer.required = false;
          referrer.placeholder = '请输入推荐人';
        }
      });

      // 签名弹窗逻辑
      const signInput = document.getElementById('sign');
      const modalSign = document.getElementById('modalSign');
      const signCanvas = document.getElementById('signCanvas');
      if(signInput && modalSign && signCanvas) {
        const ctx = signCanvas.getContext('2d');
        let drawing = false, lastX = 0, lastY = 0;
        function drawLine(x, y, isDown) {
          if (isDown) {
            ctx.lineWidth = 2;
            ctx.strokeStyle = '#388e3c';
            ctx.lineCap = 'round';
            ctx.lineJoin = 'round';
            ctx.beginPath();
            ctx.moveTo(lastX, lastY);
            ctx.lineTo(x, y);
            ctx.stroke();
          }
          lastX = x; lastY = y;
        }
        signCanvas.addEventListener('mousedown', function(e) {
          drawing = true;
          const rect = signCanvas.getBoundingClientRect();
          lastX = e.clientX - rect.left;
          lastY = e.clientY - rect.top;
        });
        signCanvas.addEventListener('mousemove', function(e) {
          if (!drawing) return;
          const rect = signCanvas.getBoundingClientRect();
          drawLine(e.clientX - rect.left, e.clientY - rect.top, true);
        });
        signCanvas.addEventListener('mouseup', function() { drawing = false; });
        signCanvas.addEventListener('mouseleave', function() { drawing = false; });
        signCanvas.addEventListener('touchstart', function(e) {
          e.preventDefault();
          drawing = true;
          const rect = signCanvas.getBoundingClientRect();
          const t = e.touches[0];
          lastX = t.clientX - rect.left;
          lastY = t.clientY - rect.top;
        });
        signCanvas.addEventListener('touchmove', function(e) {
          e.preventDefault();
          if (!drawing) return;
          const rect = signCanvas.getBoundingClientRect();
          const t = e.touches[0];
          drawLine(t.clientX - rect.left, t.clientY - rect.top, true);
        });
        signCanvas.addEventListener('touchend', function() { drawing = false; });
        signCanvas.addEventListener('touchcancel', function() { drawing = false; });
        signInput.addEventListener('click', function() {
          modalSign.classList.add('active');
        });
        document.getElementById('cancelSignBtn').onclick = function() {
          modalSign.classList.remove('active');
        };
        document.getElementById('clearSignBtn').onclick = function() {
          ctx.clearRect(0, 0, signCanvas.width, signCanvas.height);
        };
        document.getElementById('okSignBtn').onclick = function() {
          const dataURL = signCanvas.toDataURL('image/png');
          document.getElementById('signPreview').innerHTML = '<img src="' + dataURL + '" alt="签名">';
          signInput.value = '已签名';
          modalSign.classList.remove('active');
        };
      }

      // 新增会员资料弹窗逻辑
      const memberTypeSelect = document.getElementById('memberType');
      const modalAddMember = document.getElementById('modalAddMember');
      const saveMemberBtn = document.getElementById('saveMemberBtn');
      const cancelMemberBtn = document.getElementById('cancelMemberBtn');
      const newMemberName = document.getElementById('newMemberName');
      const newMemberPhone = document.getElementById('newMemberPhone');
      let lastMemberType = '';
      if(memberTypeSelect) {
        memberTypeSelect.addEventListener('change', function() {
          if (this.value === '非会员') {
            modalAddMember.classList.add('active');
            lastMemberType = '非会员';
          }
        });
      }
      if(cancelMemberBtn) cancelMemberBtn.onclick = function() {
        modalAddMember.classList.remove('active');
        memberTypeSelect.value = lastMemberType === '非会员' ? '' : lastMemberType;
      };
      if(saveMemberBtn) saveMemberBtn.onclick = function() {
        const name = newMemberName.value.trim();
        const phone = newMemberPhone.value.trim();
        if (!name) {
          alert('请输入会员姓名');
          newMemberName.focus();
          return;
        }
        if (!/^1\d{10}$/.test(phone)) {
          alert('请输入有效的手机号');
          newMemberPhone.focus();
          return;
        }
        modalAddMember.classList.remove('active');
        memberTypeSelect.value = '会员';
        lastMemberType = '会员';
        alert('会员资料已保存，可继续开单。');
      };

      // 健康师及业绩分配动态添加
      const consultantList = document.getElementById('consultantList');
      const addConsultantBtn = document.getElementById('addConsultantBtn');
      let consultantIdx = 0;
      const consultantOptions = [
        { value: '', label: '选择健康师' },
        { value: '张三', label: '张三' },
        { value: '李四', label: '李四' },
        { value: '王五', label: '王五' },
        { value: '赵六', label: '赵六' }
      ];
      function createConsultantRow(idx) {
        const row = document.createElement('div');
        row.className = 'flex-row';
        row.style.marginBottom = '8px';
        row.innerHTML = `
          <select name="consultant_${idx}" required style="min-width:90px;">
            ${consultantOptions.map(opt => `<option value="${opt.value}">${opt.label}</option>`).join('')}
          </select>
          <input type="number" name="consultantAmount_${idx}" placeholder="业绩金额" min="0" required style="min-width:80px;">
          <button type="button" class="removeConsultantBtn" style="background:#eee;color:#388e3c;min-width:48px;">删除</button>
        `;
        row.querySelector('.removeConsultantBtn').onclick = function() {
          row.remove();
        };
        return row;
      }
      function addConsultantRow() {
        consultantList.appendChild(createConsultantRow(consultantIdx++));
      }
      if(addConsultantBtn) addConsultantBtn.onclick = addConsultantRow;
      if(consultantList) addConsultantRow();

      // 品项信息动态添加
      const productListDynamic = document.getElementById('productListDynamic');
      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 = 'flex-row';
        row.style.marginBottom = '8px';
        row.innerHTML = `
          <select name="product_${idx}" required style="min-width:120px;">
            ${productOptions.map(opt => `<option value="${opt.value}">${opt.label}</option>`).join('')}
          </select>
          <input type="number" name="productPrice_${idx}" placeholder="请输入价格" min="0" required style="min-width:80px;">
          <button type="button" class="removeProductBtn" style="background:#eee;color:#388e3c;min-width:48px;">删除</button>
        `;
        row.querySelector('.removeProductBtn').onclick = function() {
          row.remove();
        };
        return row;
      }
      function addProductRow() {
        productListDynamic.appendChild(createProductRow(productIdx++));
      }
      if(addProductBtn) addProductBtn.onclick = addProductRow;
      if(productListDynamic) addProductRow();
    });
  </script>
</body>
</html>