html/expansion.html

<!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;
    }
    
    h2 {
      text-align: center;
      color: #388e3c;
      margin-bottom: 18px;
      letter-spacing: 2px;
    }
    
    .form-card {
      background: #fff;
      border-radius: 20px;
      box-shadow: 0 8px 32px 0 rgba(76, 175, 80, 0.15);
      border: 1px solid #e8f5e9;
      overflow: hidden;
    }
    
    .form-content {
      padding: 32px;
    }
    
    .form-group {
      margin-bottom: 24px;
    }
    
    .form-group:last-child {
      margin-bottom: 0;
    }
    
    label {
      display: block;
      margin-bottom: 10px;
      font-weight: 600;
      color: #2e7d32;
      letter-spacing: 0.5px;
      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, textarea, select {
      width: 100%;
      padding: 12px;
      border: 1.5px solid #c8e6c9;
      border-radius: 10px;
      font-size: 1em;
      transition: all 0.2s ease;
      background: #f9fff9;
      color: #2e7d32;
      font-family: inherit;
    }
    
    textarea {
      min-height: 100px;
      resize: vertical;
      padding: 16px;
      line-height: 1.5;
    }
    
    select {
      cursor: pointer;
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236a9c6a' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
      background-position: right 12px center;
      background-repeat: no-repeat;
      background-size: 16px;
      padding-right: 40px;
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
    }
    
    select:focus {
      outline: none;
      border-color: #43a047;
      box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
      background-color: #fff;
    }
    
    input:focus, .select-input:focus, textarea: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 {
      width: 100%;
      padding: 16px 20px;
      border: none;
      border-radius: 12px;
      font-size: 1.1em;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      letter-spacing: 1px;
      background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
      color: #fff;
      box-shadow: 0 4px 16px rgba(67, 233, 123, 0.3);
      margin-top: 32px;
    }
    
    .btn:hover {
      box-shadow: 0 6px 24px rgba(67, 233, 123, 0.4);
      transform: translateY(-2px);
    }
    
    .btn:active {
      transform: translateY(0);
    }
    
    .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;
    }
    
    .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.selected {
      background: #e8f5e9;
      color: #2e7d32;
      font-weight: bold;
    }
    
    .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-secondary {
      background: #f5f5f5;
      color: #666;
      border: 1px solid #ddd;
    }
    
    .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);
      text-align: center;
    }
    
    .message-toast.show {
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-100%);
    }
    
    .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%);
    }
    
    @media (max-width: 520px) {
      .container { max-width: 100%; }
      .form-content { padding: 24px; }
      .form-group { margin-bottom: 20px; }
      .btn { margin-top: 24px; }
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>绿纤拓客数据录入</h2>
    
    <div class="form-card">
      <div class="form-content">
        <form id="expansionForm">
          <div class="form-group">
            <label for="hd">拓客活动</label>
            <div class="input-wrapper">
              <select id="hd" name="hd" class="select-input">
                <option value="">请选择拓客活动</option>
              </select>
            </div>
          </div>
          
          <div class="form-group">
            <label for="tksj">拓客时间</label>
            <div class="input-wrapper">
              <input type="datetime-local" id="tksj">
            </div>
          </div>
          
          <div class="form-group">
            <label for="gkxm">顾客姓名</label>
            <div class="input-wrapper">
              <input type="text" id="gkxm" placeholder="请输入顾客姓名">
            </div>
          </div>
          
          <div class="form-group">
            <label for="dhhm">电话号码</label>
            <div class="input-wrapper">
              <input type="text" id="dhhm" placeholder="请输入电话号码">
            </div>
          </div>
          
          <div class="form-group">
            <label for="gmzs">购买张数</label>
            <div class="input-wrapper">
              <!-- <input type="text" id="gmzs" placeholder="请输入购买张数"> -->
              <input type="number" id="gmzs" name="gmzs" min="1" value="1" placeholder="请输入购买张数" required>
            </div>
          </div>
          
          <div class="form-group">
            <label for="zffs">支付方式</label>
            <div class="input-wrapper">
              <select id="zffs" name="zffs" class="select-input">
                <option value="">请选择支付方式</option>
                <option value="微信">微信</option>
                <option value="支付宝">支付宝</option>
                <option value="现金">现金</option>
                <option value="银行转账">银行转账</option>
              </select>
            </div>
          </div>
          
          <div class="form-group">
            <label for="sfjwx">是否加微信</label>
            <div class="input-wrapper">
              <select id="sfjwx" name="sfjwx" class="select-input">
                <option value="">请选择是否加微信</option>
                <option value="是">是</option>
                <option value="否">否</option>
              </select>
            </div>
          </div>
          
          <div class="form-group">
            <label for="bz">备注</label>
            <div class="input-wrapper">
              <textarea id="bz" placeholder="请输入备注信息"></textarea>
            </div>
          </div>
          
          <button type="submit" class="btn">保存</button>
        </form>
      </div>
    </div>
  </div>
  
  <div id="messageToast" class="message-toast"></div>
  
  <script>
    // 全局变量
    let userInfo = null;
    let currentEventId = null;
    
    // 表单字段配置
    const FORM_FIELDS = {
      hd: { required: true, type: 'select', label: '拓客活动' },
      tksj: { required: true, type: 'datetime', label: '拓客时间' },
      gkxm: { required: true, type: 'text', label: '顾客姓名' },
      dhhm: { required: true, type: 'text', label: '电话号码' },
      gmzs: { required: true, type: 'text', label: '购买张数' },
      zffs: { required: true, type: 'select', label: '支付方式' },
      sfjwx: { required: true, type: 'select', label: '是否加微信' },
      bz: { required: false, type: 'textarea', label: '备注' }
    };
    
    // 页面加载完成后初始化
    document.addEventListener('DOMContentLoaded', function() {
      initializePage();
      bindEvents();
    });
    
    // 初始化页面
    async function initializePage() {
      try {
        // 获取当前登录用户
        userInfo = JSON.parse(localStorage.getItem('userInfo'));
        if (!userInfo || Object.keys(userInfo).length === 0) {
          window.location.href = 'login.html';
          return;
        }
        console.log('用户信息:', userInfo);
        
        // 设置默认时间
        setDefaultDateTime();
        
        // 获取当前活动
        await getCurrentEvent();
      } catch (error) {
        console.error('页面初始化失败:', error);
        showMessage('页面初始化失败，请刷新重试', 'error');
      }
    }
    
    // 设置默认时间
    function setDefaultDateTime() {
      const now = new Date();
      const localDateTime = new Date(now.getTime() - now.getTimezoneOffset() * 60000).toISOString().slice(0, 16);
      
      // 设置拓客时间
      document.getElementById('tksj').value = localDateTime;
      
      // 设置默认购买张数
      document.getElementById('gmzs').value = '1';
      
      // 设置默认支付方式
      document.getElementById('zffs').value = '微信';
      
      // 设置默认是否加微信
      document.getElementById('sfjwx').value = '否';
    }
    
    // 获取当前活动
    async function getCurrentEvent() {
      try {
        const apiUrl = `${APP_CONFIG.getApiBaseUrl()}/api/Extend/lqevent/user/${userInfo.userId}/current`;
        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 && result.data.length > 0) {
            // 填充活动下拉选项
            const eventSelect = document.getElementById('hd');
            eventSelect.innerHTML = '<option value="">请选择拓客活动</option>';
            
            result.data.forEach(event => {
              const option = document.createElement('option');
              option.value = event.EventId;
              option.textContent = event.EventName;
              eventSelect.appendChild(option);
            });
            
            // 默认选择第一个活动
            if (result.data.length > 0) {
              currentEventId = result.data[0].EventId;
              eventSelect.value = currentEventId;
              console.log('当前活动ID:', currentEventId);
            }
          } else {
            console.warn('未找到当前活动');
          }
        }
      } catch (error) {
        console.error('获取当前活动失败:', error);
      }
    }
    
    // 获取当前活动ID
    function getCurrentEventId() {
      return currentEventId;
    }
    
    function bindEvents() {
      document.getElementById('expansionForm').addEventListener('submit', handleFormSubmit);
    }
    
    // 表单验证
    async function validateForm() {
      const errors = [];
      
      // 验证必填字段
      if (!document.getElementById('hd').value) {
        errors.push('请选择拓客活动');
      }
      if (!document.getElementById('tksj').value) {
        errors.push('请选择拓客时间');
      }
      if (!document.getElementById('gkxm').value.trim()) {
        errors.push('请输入顾客姓名');
      }
      
      const phoneNumber = document.getElementById('dhhm').value.trim();
      if (!phoneNumber) {
        errors.push('请输入电话号码');
      } else {
        // 验证手机号格式
        const phoneRegex = /^1[3-9]\d{9}$/;
        if (!phoneRegex.test(phoneNumber)) {
          errors.push('请输入正确的手机号码');
        }
      }
      
      const buyCount = document.getElementById('gmzs').value.trim();
      if (!buyCount) {
        errors.push('请输入购买张数');
      } else if (parseInt(buyCount) < 1) {
        errors.push('购买张数必须大于0');
      }
      
      if (!document.getElementById('zffs').value) {
        errors.push('请选择支付方式');
      }
      if (!document.getElementById('sfjwx').value) {
        errors.push('请选择是否加微信');
      }
      
      return errors;
    }
    
    // 收集表单数据
    function collectFormData() {
      return {
        expansionTime: new Date(document.getElementById('tksj').value).getTime(),
        customerName: document.getElementById('gkxm').value.trim(),
        customerPhone: document.getElementById('dhhm').value.trim(),
        buyNumber: parseInt(document.getElementById('gmzs').value) || 1,
        paymentMethod: document.getElementById('zffs').value,
        isAddWeChat: document.getElementById('sfjwx').value,
        remarks: document.getElementById('bz').value.trim(),
        expansionUserId: userInfo.userId,
        eventId: document.getElementById('hd').value, // 从下拉框获取活动ID
      };
    }
    
    // 处理表单提交
    async function handleFormSubmit(event) {
      event.preventDefault();
      
      // 验证表单
      const errors = await validateForm();
      if (errors.length > 0) {
        showMessage(errors[0], 'error');
        return;
      }
      
      
      // 收集表单数据
      const formData = collectFormData();
      console.log('表单数据:', formData);
      
      // 提交数据
      submitExpansion(formData);
    }
    
    // API请求工具函数
    async function apiRequest(url, options = {}) {
      try {
        const response = await fetch(url, {
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `${getAuthToken()}`,
            ...options.headers
          },
          ...options
        });
        
        if (!response.ok) {
          throw new Error(`HTTP ${response.status}: ${response.statusText}`);
        }
        
        const result = await response.json();
        return result;
      } catch (error) {
        console.error('API请求失败:', error);
        throw error;
      }
    }
    
    // 提交扩展邀约数据
    async function submitExpansion(data) {
      try {
        showMessage('正在提交...', 'info');
        
        const apiUrl = `${APP_CONFIG.getApiBaseUrl()}/api/Extend/LqTkjlb`;
        const result = await apiRequest(apiUrl, {
          method: 'POST',
          body: JSON.stringify(data)
        });
        
        if (result.code === 200) {
          showMessage('拓客数据提交成功！', 'success');
          // 格式化时间
          const formatTime = (timestamp) => {
            const date = new Date(timestamp);
            return date.toLocaleString('zh-CN', {
              year: 'numeric',
              month: '2-digit',
              day: '2-digit',
              hour: '2-digit',
              minute: '2-digit'
            });
          };
          let datanew = {
            "webhookUrl": "https://qyapi.weixin.qq.com/cgi-bin/webhook/send?key=6f8686ec-5011-4c1d-bae9-d82a2a2f4d83",
            "content": `🎉 拓客记录
⏩顾客姓名：${data.customerName}
⏩电话号码：${data.customerPhone}
⏩拓客时间：${formatTime(data.expansionTime)}
⏩购买张数：${data.buyNumber}
⏩支付方式：${data.paymentMethod}
⏩是否加微信：${data.isAddWeChat}
⏩备注：${data.remarks}
⏩拓客人员：${userInfo.userName || '未知'}
`
          };
          const resultnew = await apiRequest('http://wx.lvqianmeiye.com/api/Bot/send-text', {
            method: 'POST',
            body: JSON.stringify(datanew)
          });
          clearForm();
        } else {
          showMessage(`添加失败：${result.message || '未知错误'}`, 'error');
        }
      } catch (error) {
        console.error('提交失败:', error);
        showMessage('网络错误，请稍后重试', 'error');
      }
    }
    
    // 清空表单
    function clearForm() {
      try {
        // 重置表单
        document.getElementById('expansionForm').reset();
        
        // 重新设置默认值
        setDefaultDateTime();
        
        // 重新设置活动选择
        if (currentEventId) {
          document.getElementById('hd').value = currentEventId;
        }
        
        console.log('表单已清空');
      } catch (error) {
        console.error('清空表单失败:', error);
      }
    }
    
    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);
    }
  </script>
</body>
</html>