fix(contact): 修复联系页面静态资源路径和表单提交功能

- 更新静态资源路径从相对路径改为绝对路径以解决加载问题 - 将客服热线电话号码替换为动态配置标签 - 修复咨询描述输入框的name属性从message改为content - 添加完整的表单验证和提交逻辑处理 - 实现防重复提交机制和用户体验优化 - 添加表单数据收集和API提交功能 - 集成响应处理和错误提示机制
2 weeks ago · 1b7f1143f8
1 changed files with 77 additions and 6 deletions
--- a/public/themes/website/1/zh/demo/contact.html
+++ b/public/themes/website/1/zh/demo/contact.html
@ -43,10 +43,10 @@
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.min.css">
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
  <script type="module" crossorigin src="./static/js/contact.js"></script>
  <link rel="modulepreload" crossorigin href="./static/js/common.js">
  <link rel="stylesheet" crossorigin href="./static/css/common.css">
  <link rel="stylesheet" crossorigin href="./static/css/contact.css">
  <script type="module" crossorigin src="/themes/dist_static/static/js/contact.js"></script>
  <link rel="modulepreload" crossorigin href="/themes/dist_static/static/js/common.js">
  <link rel="stylesheet" crossorigin href="/themes/dist_static/static/css/common.css">
  <link rel="stylesheet" crossorigin href="/themes/dist_static/static/css/contact.css">
 </head>
 <body>
@ -65,7 +65,7 @@
          <img src="data:image/svg+xml,%3csvg%20viewBox='0%200%2032%2032'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='32.000000'%20height='32.000000'%20fill='none'%3e%3crect%20id='Linear%20/%20Call%20/%20Incoming%20Call%20Rounded'%20width='32.000000'%20height='32.000000'%20x='0.000000'%20y='0.000000'%20/%3e%3cpath%20id='Vector'%20d='M0%204.26667L4.26667%200M1.06667%200L4.26667%200L4.26667%203.2'%20stroke='rgb(239,67,53)'%20stroke-linecap='round'%20stroke-width='1.500000'%20transform='matrix(-1,0,0,-1,23.4668,12.7998)'%20/%3e%3cpath%20id='Vector'%20d='M13.9069%208.87071C12.9635%207.18033%2010.5929%206.9807%209.10712%208.46651C8.21432%209.35931%207.51962%2010.453%207.47379%2011.6621C7.39663%2013.6974%207.91173%2017.154%2011.379%2020.6212C14.8463%2024.0885%2018.3028%2024.6036%2020.3382%2024.5265C21.5472%2024.4806%2022.6409%2023.7859%2023.5338%2022.8931C25.0196%2021.4073%2024.8199%2019.0367%2023.1295%2018.0934L21.8891%2017.4011C20.7696%2016.7763%2019.3011%2017.0271%2018.3171%2018.0111C18.3171%2018.0111%2017.1236%2019.2046%2014.9596%2017.0406C12.7956%2014.8767%2013.9892%2013.6831%2013.9892%2013.6831C14.9731%2012.6991%2015.2239%2011.2306%2014.5992%2010.1112L13.9069%208.87071Z'%20fill-rule='evenodd'%20stroke='rgb(239,67,53)'%20stroke-width='1.500000'%20/%3e%3c/svg%3e" alt="" width="19" height="19" />
          <span>客服热线</span>
        </div>
        <a class="c-intro__phone" href="tel:400-0898-188">400-0898-188</a>
        <a class="c-intro__phone" href="tel:400-0898-188">{hcTaglib:setting name="company_phone" type="1" /}</a>
        <p class="c-intro__hours">工作时间：周一至周五 9:00~12:00，13:00~18:00</p>
      </div>
    </section>
@ -152,7 +152,7 @@
          </label>
          <label class="c-field c-field--full">
            <span class="c-field__label">咨询描述</span>
            <input class="c-field__input" type="text" name="message" placeholder="请输入咨询描述" />
            <input class="c-field__input" type="text" name="content" placeholder="请输入咨询描述" />
          </label>
        </div>
@ -731,6 +731,77 @@
 <script src="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.min.js"></script>
 <script src="https://unpkg.com/counterup2@2.0.2/dist/index.js"></script>
 <script>
 $(function () {
  var $form = $('.section-contact-form');
  var $submitBtn = $form.find('.c-form__submit');
  var submitting = false; // 防重复提交标志
  $form.on('submit', function (e) {
    e.preventDefault();
    e.stopPropagation();
    if (submitting) return false;
    // 表单验证
    var name = $form.find('[name="name"]').val().trim();
    var phone = $form.find('[name="phone"]').val().trim();
    var company = $form.find('[name="company"]').val().trim();
    var email = $form.find('[name="email"]').val().trim();
    var industry = $form.find('[name="industry"]').val();
    var bizType = $form.find('[name="bizType"]').val();
    var agree = $form.find('[name="agree"]').prop('checked');
    if (!name) { alert('请输入姓名'); return; }
    if (!phone) { alert('请输入手机号'); return; }
    if (!company) { alert('请输入公司名称'); return; }
    if (!email) { alert('请输入邮箱'); return; }
    if (!industry) { alert('请选择所属行业'); return; }
    if (!bizType) { alert('请选择业务类型'); return; }
    if (!agree) { alert('请阅读并同意《隐私条款》'); return; }
    // 收集表单数据（字段映射到数据库 hc_inquiry 表）
    var content = $form.find('[name="content"]').val().trim();
    var data = {
      contacts_name: name,        // 联系人姓名
      phone: phone,               // 联系人手机号
      company_name: company,      // 客户名称
      email: email,               // 邮箱
      telphone: bizType,          // 固定电话字段存放业务类型
      explain: industry,     // 询盘类型（所属行业）
      content: content,           // 询盘内容（咨询描述）
      referer: 'website'          // 询盘来源
    };
    // 禁用提交按钮，防止重复提交
    submitting = true;
    $submitBtn.prop('disabled', true).text('提交中...');
    // 发送请求
    $.ajax({
      url: '/inquiry/save',
      type: 'POST',
      contentType: 'application/json',
      data: JSON.stringify(data),
      success: function (res) {
        if (res.code === 0 || res.code === 200) {
          $form[0].reset();
        } else {
          alert(res.msg || '提交失败，请稍后重试');
        }
      },
      error: function () {
        alert('网络错误，请稍后重试');
      },
      complete: function () {
        submitting = false;
        $submitBtn.prop('disabled', false).text('提交');
      }
    });
    return false;
  });
 });
 </script>
 </body>
 </html>