invite.html 22.7 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>
  <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);
    }

    .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="inviteForm">

          <div class="form-group">
            <label for="lxsj">联系时间</label>
            <div class="input-wrapper">
              <!-- <div class="input-icon">🕐</div> -->
              <input type="datetime-local" id="lxsj">
            </div>
          </div>
          <div class="form-group">
            <label for="lxsj">邀约时间</label>
            <div class="input-wrapper">
              <!-- <div class="input-icon">🕐</div> -->
              <input type="datetime-local" id="yysj">
            </div>
          </div>

          <div class="form-group">
            <label for="yykh">预约客户</label>
            <div class="input-wrapper">
              <!-- <div class="input-icon">👥</div> -->
              <input type="text" id="yykh" placeholder="客户信息" readonly>
            </div>
          </div>
          <div class="form-group">
            <label for="dh">联系电话</label>
            <div class="input-wrapper">
              <!-- <div class="input-icon">📞</div> -->
              <input type="text" id="dh" placeholder="电话号码" readonly>
            </div>
          </div>
          <div class="form-group">
            <label for="dhsfyx">电话是否有效</label>
            <div class="input-wrapper">
              <select id="dhsfyx" name="dhsfyx" class="select-input">
                <option value="">请选择是否有效</option>
                <option value="是">是</option>
                <option value="否">否</option>
              </select>
            </div>

          </div>

          <div class="form-group">
            <label for="lxjl">联系记录</label>
            <div class="input-wrapper">
              <!-- <div class="input-icon">📝</div> -->
              <textarea id="lxjl" placeholder="请输入联系记录"></textarea>
            </div>
          </div>
          <button type="submit" class="btn">保存</button>
        </form>
      </div>
    </div>
  </div>

  <div id="messageToast" class="message-toast"></div>

  <div class="modal-overlay" id="selectModal">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title" id="modalTitle">选择</h3>
      </div>
      <div class="modal-body">
        <input type="text" class="search-input" id="searchInput" placeholder="请输入搜索内容">
        <div class="option-list" id="optionList"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="modal-btn modal-btn-secondary" onclick="closeModal()">取消</button>
        <button type="button" class="modal-btn modal-btn-primary" onclick="confirmSelection()">确定</button>
      </div>
    </div>
  </div>

  <script>
    // 全局变量
    let currentSelectField = null;
    let currentOptions = [];
    let selectedOption = null;
    let userInfo = null;

    // 表单字段配置
    const FORM_FIELDS = {
      dhsfyx: { required: true, type: 'select', label: '电话是否有效' },
      lxjl: { required: true, type: 'textarea', label: '联系记录' },
      lxsj: { required: true, type: 'datetime', label: '联系时间' },
      yysj: { required: true, type: 'datetime', label: '邀约时间' },
      yykh: { required: true, type: 'readonly', label: '预约客户' },
      dh: { required: false, type: 'readonly', 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();

        // 填充URL参数中的客户信息
        fillCustomerInfoFromUrl();
      } 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('lxsj').value = localDateTime;
      document.getElementById('yysj').value = localDateTime;
    }

    // 获取URL参数
    function getUrlParameter(name) {
      const urlParams = new URLSearchParams(window.location.search);
      return urlParams.get(name);
    }

    // 填充URL参数中的客户信息
    function fillCustomerInfoFromUrl() {
      const name = getUrlParameter('name');
      const phone = getUrlParameter('phone');
      const id = getUrlParameter('id');

      // 如果有客户信息，填充到客户字段
      if (name && id) {
        document.getElementById('yykh').value = name;
        document.getElementById('yykh').dataset.selectedValue = id;
        document.getElementById('yykh').dataset.yykhxm = name;
      }

      // 如果有电话信息，填充到电话字段
      if (phone) {
        document.getElementById('dh').value = phone;
      }
    }

    async function getUserInfo() {
      try {
        const apiUrl = `${APP_CONFIG.getApiBaseUrl()}/api/oauth/CurrentUser`;
        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) {
            return result.data.userInfo
          }
        }
        return {};

      } catch (error) {
        console.error('获取用户信息出错:', error);
        return {};
      }
    }

    function bindEvents() {
      // 移除客户字段的点击事件，因为它是只读的
      document.getElementById('inviteForm').addEventListener('submit', handleFormSubmit);
      document.getElementById('searchInput').addEventListener('input', handleSearch);
    }

    async function openSelectModal(inputField) {
      currentSelectField = inputField;
      const fieldId = inputField.id;

      showModal('加载中...', []);

      try {
        let options = [];

        switch(fieldId) {
          case 'dhsfyx':
            options = getYesNoOptions();
            showModal('选择是否', options);
            break;
          case 'yykh':
            options = await getCustomerOptions();
            showModal('选择客户', options);
            break;
        }
      } catch (error) {
        console.error('获取选项数据失败:', error);
        showModal('加载失败', []);
        setTimeout(() => {
          showMessage('数据加载失败，请检查网络连接或联系管理员', 'error');
        }, 500);
      }
    }

    function showModal(title, options) {
      currentOptions = options;
      document.getElementById('modalTitle').textContent = title;
      document.getElementById('searchInput').value = '';

      const searchInput = document.getElementById('searchInput');
      if (title === '加载中...' || title === '加载失败') {
        searchInput.style.display = 'none';
      } else {
        searchInput.style.display = 'block';
      }

      renderOptions(options);
      document.getElementById('selectModal').style.display = 'flex';
    }

    function closeModal() {
      document.getElementById('selectModal').style.display = 'none';
      currentSelectField = null;
      currentOptions = [];
      selectedOption = null;
    }

    function renderOptions(options) {
      const optionList = document.getElementById('optionList');
      optionList.innerHTML = '';

      if (!options || options.length === 0) {
        const emptyMessage = document.createElement('div');
        emptyMessage.style.textAlign = 'center';
        emptyMessage.style.padding = '40px 20px';
        emptyMessage.style.color = '#666';
        emptyMessage.textContent = '暂无数据';
        optionList.appendChild(emptyMessage);
        return;
      }

      options.forEach(option => {
        const optionItem = document.createElement('div');
        optionItem.className = 'option-item';
        optionItem.textContent = option.label;
        optionItem.dataset.value = option.value;

        Object.keys(option).forEach(key => {
          if (key !== 'value' && key !== 'label') {
            optionItem.dataset[key] = option[key];
          }
        });

        optionItem.addEventListener('click', function() {
          document.querySelectorAll('.option-item').forEach(item => {
            item.classList.remove('selected');
          });

          this.classList.add('selected');
          selectedOption = {
            value: this.dataset.value,
            label: this.textContent,
            yykhxm: this.dataset.yykhxm || this.textContent
          };
        });

        optionList.appendChild(optionItem);
      });
    }

    function handleSearch() {
      const searchTerm = document.getElementById('searchInput').value.toLowerCase();
      const filteredOptions = currentOptions.filter(option =>
        option.label.toLowerCase().includes(searchTerm)
      );
      renderOptions(filteredOptions);
    }

    function confirmSelection() {
      if (selectedOption && currentSelectField) {
        currentSelectField.value = selectedOption.label;
        currentSelectField.dataset.selectedValue = selectedOption.value;

        Object.keys(selectedOption).forEach(key => {
          if (key !== 'value' && key !== 'label') {
            currentSelectField.dataset[key] = selectedOption[key];
          }
        });

        closeModal();
      } else {
        showMessage('请先选择一个选项', 'warning');
      }
    }

    function getYesNoOptions() {
      return [
        { value: '1', label: '是' },
        { value: '0', label: '否' }
      ];
    }

    async function getCustomerOptions() {
      try {
        const apiUrl = `${APP_CONFIG.getApiBaseUrl()}/api/Extend/LqKhxx?page=1&pageSize=1000`;
        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) {
          return result.data.list.map(item => ({
            value: item.yykh || item.id,
            label: item.khmc,
            yykhxm: item.khmc
          }));
        }
        }

        console.warn('获取客户列表失败，使用默认数据');
        return getDefaultCustomerOptions();
      } catch (error) {
        console.error('获取客户列表出错:', error);
        return getDefaultCustomerOptions();
      }
    }

    function getDefaultCustomerOptions() {
      return [
        { value: 'GK2020082101170', label: '张三' },
        { value: 'GK2020082101171', label: '李四' },
        { value: 'GK2020082101172', label: '王五' },
        { value: 'GK2020082101173', label: '赵六' },
        { value: 'GK2020082101174', label: '钱七' }
      ];
    }

    // 表单验证
    function validateForm() {
      const errors = [];

      // 验证必填字段
      if (!document.getElementById('dhsfyx').value) {
        errors.push('请选择电话是否有效');
      }
      if (!document.getElementById('lxjl').value.trim()) {
        errors.push('请输入联系记录');
      }
      if (!document.getElementById('lxsj').value) {
        errors.push('请选择联系时间');
      }
      if (!document.getElementById('yysj').value) {
        errors.push('请选择邀约时间');
      }
      if (!document.getElementById('yykh').dataset.selectedValue) {
        errors.push('请选择预约客户');
      }

      return errors;
    }

    // 收集表单数据
    function collectFormData() {
      return {
        yyr: userInfo.userId,
        dhsfyx: document.getElementById('dhsfyx').value,
        lxjl: document.getElementById('lxjl').value.trim(),
        lxsj: new Date(document.getElementById('lxsj').value).getTime(),
        yykh: document.getElementById('yykh').dataset.selectedValue,
        yysj: new Date(document.getElementById('yysj').value).getTime(),
        yykhxm: document.getElementById('yykh').dataset.yykhxm
      };
    }

    // 处理表单提交
    function handleFormSubmit(event) {
      event.preventDefault();

      // 验证表单
      const errors = validateForm();
      if (errors.length > 0) {
        showMessage(errors[0], 'error');
        return;
      }

      // 收集表单数据
      const formData = collectFormData();
      console.log('表单数据:', formData);

      // 提交数据
      submitInvite(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 submitInvite(data) {
      try {
        showMessage('正在提交...', 'info');

        const apiUrl = `${APP_CONFIG.getApiBaseUrl()}/api/Extend/LqYaoyjl`;
        const result = await apiRequest(apiUrl, {
          method: 'POST',
          body: JSON.stringify(data)
        });

        if (result.code === 200) {
          showMessage('邀请添加成功！', 'success');
          clearForm();
        } else {
          showMessage(`添加失败：${result.message || '未知错误'}`, 'error');
        }
      } catch (error) {
        console.error('提交失败:', error);
        showMessage('网络错误，请稍后重试', 'error');
      }
    }

    // 清空表单
    function clearForm() {
      try {
        // 重置表单
        document.getElementById('inviteForm').reset();

        // 清空客户字段的数据
        document.getElementById('yykh').value = '';
        delete document.getElementById('yykh').dataset.selectedValue;
        delete document.getElementById('yykh').dataset.yykhxm;

        // 清空电话字段
        document.getElementById('dh').value = '';

        // 重置select字段
        document.getElementById('dhsfyx').value = '';

        // 重新设置默认时间
        setDefaultDateTime();

        console.log('表单已清空');
      } catch (error) {
        console.error('清空表单失败:', error);
      }
    }

    document.getElementById('selectModal').addEventListener('click', function(e) {
      if (e.target === this) {
        closeModal();
      }
    });

    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>