zyuas.com/src/view/ContactUs/Index.vue

<template>
  <div id="ContactUs">
    <!-- Banner -->
    <div class="banner container-fuild text-center">
      <h1>联系我们</h1>
      <p>期待与您合作，共创美好未来</p>
    </div>

    <div class="l-container l-section">
      <div class="contact-grid">
        <!-- 左侧联系信息 -->
        <div class="contact-info">
          <h2>联系方式</h2>
          <p class="info-description">如果您有任何问题或需求，欢迎通过以下方式联系我们</p>

          <div class="info-item">
            <div class="info-icon">
              <i class="glyphicon glyphicon-map-marker"></i>
            </div>
            <div class="info-content">
              <h4>公司地址</h4>
              <p>上海市徐汇区漕溪路 252 号银海大楼 C-406</p>
            </div>
          </div>

          <div class="info-item">
            <div class="info-icon">
              <i class="glyphicon glyphicon-earphone"></i>
            </div>
            <div class="info-content">
              <h4>联系电话</h4>
              <p>15086621233</p>
            </div>
          </div>

          <div class="info-item">
            <div class="info-icon">
              <i class="glyphicon glyphicon-envelope"></i>
            </div>
            <div class="info-content">
              <h4>电子邮箱</h4>
              <p>zhanyuhangkong@163.com</p>
            </div>
          </div>

          <div class="info-item">
            <div class="info-icon">
              <i class="glyphicon glyphicon-time"></i>
            </div>
            <div class="info-content">
              <h4>工作时间</h4>
              <p>周一至周五 9:00-18:00</p>
            </div>
          </div>

          <!-- 社交媒体 -->
          <div class="social-links">
            <h4>关注我们</h4>
            <div class="social-icons">
              <a href="#" class="social-icon wechat">
                <i class="glyphicon glyphicon-wechat"></i>
              </a>
              <a href="#" class="social-icon weibo">
                <i class="glyphicon glyphicon-globe"></i>
              </a>
              <a href="#" class="social-icon qq">
                <i class="glyphicon glyphicon-user"></i>
              </a>
            </div>
          </div>
        </div>

        <!-- 右侧表单 -->
        <div class="contact-form-wrapper">
          <h2>在线留言</h2>
          <p class="form-description">填写以下表单，我们将尽快与您联系</p>

          <form @submit.prevent="submitForm" class="contact-form">
            <div class="form-group">
              <label for="name">
                <i class="glyphicon glyphicon-user"></i>
                联系人 <span class="required">*</span>
              </label>
              <input
                type="text"
                id="name"
                v-model="formData.name"
                placeholder="请输入您的姓名"
                required
              >
            </div>

            <div class="form-row">
              <div class="form-group">
                <label for="phone">
                  <i class="glyphicon glyphicon-earphone"></i>
                  联系电话 <span class="required">*</span>
                </label>
                <input
                  type="tel"
                  id="phone"
                  v-model="formData.phone"
                  placeholder="请输入您的手机号"
                  pattern="[0-9]{11}"
                  required
                >
              </div>

              <div class="form-group">
                <label for="email">
                  <i class="glyphicon glyphicon-envelope"></i>
                  邮箱 <span class="required">*</span>
                </label>
                <input
                  type="email"
                  id="email"
                  v-model="formData.email"
                  placeholder="请输入您的邮箱"
                  required
                >
              </div>
            </div>

            <div class="form-group">
              <label for="company">
                <i class="glyphicon glyphicon-home"></i>
                企业名称
              </label>
              <input 
                type="text" 
                id="company" 
                v-model="formData.company" 
                placeholder="请输入您的企业名称（选填）"
              >
            </div>

            <div class="form-group">
              <label for="message">
                <i class="glyphicon glyphicon-comment"></i>
                留言内容
              </label>
              <textarea 
                id="message" 
                v-model="formData.message" 
                placeholder="请详细描述您的需求...（选填）"
                rows="5"
              ></textarea>
            </div>

            <div class="form-agreement">
              <label>
                <input type="checkbox" v-model="formData.agreement" required>
                <span>我已阅读并同意 <a href="#">隐私政策</a> 和 <a href="#">服务条款</a></span>
              </label>
            </div>

            <button type="submit" class="btn-submit" :disabled="isSubmitting">
              <span v-if="!isSubmitting">
                <i class="glyphicon glyphicon-send"></i>
                提交留言
              </span>
              <span v-else>
                <i class="glyphicon glyphicon-hourglass"></i>
                提交中...
              </span>
            </button>
          </form>
        </div>
      </div>
    </div>

    <!-- 地图区域 -->
    <div class="map-section">
      <div class="container">
        <h2>公司位置</h2>
        <div class="map-container">
          <!-- 百度地图 -->
          <iframe 
            width="100%" 
            height="450" 
            frameborder="0" 
            scrolling="no" 
            marginheight="0" 
            src="https://j.map.baidu.com/68/irhJ"
            style="border:0;"
            allowfullscreen=""
          ></iframe>
          <p class="map-note">银海大楼 C 座（漕溪路辅路与漕东三路交叉口西 97 米）</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {WOW} from 'wowjs';

export default {
  name: 'ContactUs',
  data() {
    return {
      formData: {
        name: '',
        phone: '',
        email: '',
        company: '',
        message: '',
        agreement: false
      },
      isSubmitting: false,
      // Formspree 配置
      // 1. 访问 https://formspree.io/ 免费注册
      // 2. 创建新表单，获取表单 ID
      // 3. 将 YOUR_FORMSPREE_ID 替换为您的实际表单 ID
      formspreeUrl: 'https://formspree.io/f/xqedwjbk'
    };
  },
  mounted() {
    var wow = new WOW();
    wow.init();
  },
  methods: {
    async submitForm() {
      console.log('开始提交表单...');

      // 验证表单
      if (!this.validateForm()) {
        console.log('表单验证失败');
        return;
      }

      console.log('表单验证通过，准备提交...');
      this.isSubmitting = true;

      try {
        // 准备表单数据
        const submitData = {
          name: this.formData.name,
          phone: this.formData.phone,
          email: this.formData.email,
          company: this.formData.company,
          message: this.formData.message,
          replyto: this.formData.email  // Formspree 专用，用于回复
        };

        console.log('提交数据:', submitData);

        // 提交到 Formspree
        const response = await fetch(this.formspreeUrl, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json'
          },
          body: JSON.stringify(submitData)
        });

        console.log('Formspree 响应:', response.status);

        if (response.ok) {
          const result = await response.json();
          console.log('提交成功!', result);

          // 显示成功提示
          this.showNotification('success', '提交成功！我们会尽快与您联系。');

          // 重置表单
          this.resetForm();
        } else {
          const error = await response.json();
          console.error('提交失败:', error);
          this.showNotification('error', error.errors ?
            error.errors.map(e => e.message).join(', ') :
            '提交失败，请稍后重试或直接拨打电话联系我们');
        }

      } catch (error) {
        console.error('网络错误:', error);
        this.showNotification('error', '网络错误，请检查网络连接后重试');
      } finally {
        this.isSubmitting = false;
      }
    },

    validateForm() {
      console.log('开始验证表单...');
      console.log('表单数据:', {
        name: this.formData.name,
        phone: this.formData.phone,
        email: this.formData.email,
        company: this.formData.company,
        message: this.formData.message,
        agreement: this.formData.agreement
      });

      // 姓名验证
      if (!this.formData.name || this.formData.name.trim().length < 2) {
        console.log('姓名验证失败');
        this.showNotification('error', '请输入有效的姓名（至少 2 个字符）');
        return false;
      }

      // 手机号验证
      const phoneRegex = /^1[3-9]\d{9}$/;
      if (!phoneRegex.test(this.formData.phone)) {
        console.log('手机号验证失败:', this.formData.phone);
        this.showNotification('error', '请输入有效的 11 位手机号码');
        return false;
      }

      // 邮箱验证
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!emailRegex.test(this.formData.email)) {
        console.log('邮箱验证失败:', this.formData.email);
        this.showNotification('error', '请输入有效的邮箱地址');
        return false;
      }

      // 企业验证（选填，如果填写则至少 2 个字符）
      if (this.formData.company && this.formData.company.trim().length < 2) {
        console.log('企业验证失败');
        this.showNotification('error', '企业名称至少 2 个字符（或留空）');
        return false;
      }

      // 留言内容验证（选填，如果填写则至少 5 个字符）
      if (this.formData.message && this.formData.message.trim().length < 5) {
        console.log('留言内容验证失败:', this.formData.message);
        this.showNotification('error', '留言内容至少 5 个字符（或留空）');
        return false;
      }

      // 协议验证
      if (!this.formData.agreement) {
        console.log('协议验证失败');
        this.showNotification('error', '请同意隐私政策和服务条款');
        return false;
      }

      console.log('表单验证通过');
      return true;
    },

    showNotification(type, message) {
      // 创建提示元素
      const notification = document.createElement('div');
      notification.className = `notification notification-${type}`;
      notification.innerHTML = `
        <i class="glyphicon glyphicon-${type === 'success' ? 'ok' : 'remove'}"></i>
        <span>${message}</span>
      `;

      // 添加到页面
      document.body.appendChild(notification);

      // 动画显示
      setTimeout(() => {
        notification.classList.add('show');
      }, 10);

      // 3 秒后移除
      setTimeout(() => {
        notification.classList.remove('show');
        setTimeout(() => {
          document.body.removeChild(notification);
        }, 300);
      }, 3000);
    },

    resetForm() {
      this.formData = {
        name: '',
        phone: '',
        email: '',
        company: '',
        subject: '',
        message: '',
        agreement: false
      };
    }
  }
};
</script>

<style scoped>
/* Banner */
.banner {
  color: #fff;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: url("../../assets/img/banner_4.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
  background-position: center center;
}

.banner h1 {
  font-size: 36px;
  font-weight: var(--font-weight-bold);
  margin: 0 0 10px;
  letter-spacing: 2px;
}

.banner p {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  letter-spacing: 1px;
}

/* 联系网格 */
.contact-grid {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 60px;
  margin-top: 40px;
}

/* 左侧联系信息 */
.contact-info {
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  padding: 40px;
  border-radius: 12px;
  color: #fff;
}

.contact-info h2 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 15px;
}

.info-description {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 30px;
  line-height: 1.6;
}

.info-item {
  display: flex;
  gap: 15px;
  margin-bottom: 25px;
}

.info-icon {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.info-icon i {
  font-size: 18px;
  color: #fff;
}

.info-content h4 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 5px;
}

.info-content p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  line-height: 1.4;
}

/* 社交媒体 */
.social-links {
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.social-links h4 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 15px;
}

.social-icons {
  display: flex;
  gap: 10px;
}

.social-icon {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  transition: all 0.3s ease;
}

.social-icon:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.social-icon.wechat { background: #07C160; }
.social-icon.weibo { background: #E6162D; }
.social-icon.qq { background: #12B7F5; }

/* 右侧表单 */
.contact-form-wrapper {
  background: #fff;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.contact-form-wrapper h2 {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
}

.form-description {
  font-size: 14px;
  color: #666;
  margin-bottom: 30px;
}

.contact-form {
  max-width: 100%;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin-bottom: 8px;
}

.form-group label i {
  color: #1e73be;
  font-size: 14px;
}

.form-group .required {
  color: #f44336;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  font-size: 14px;
  color: #333;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: #1e73be;
  outline: none;
  box-shadow: 0 0 0 3px rgba(30, 115, 190, 0.1);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #999;
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-agreement {
  margin: 20px 0;
}

.form-agreement label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: #666;
  cursor: pointer;
}

.form-agreement input[type="checkbox"] {
  width: auto;
  margin-top: 2px;
}

.form-agreement a {
  color: #1e73be;
  text-decoration: none;
}

.form-agreement a:hover {
  text-decoration: underline;
}

.btn-submit {
  width: 100%;
  padding: 15px;
  background: linear-gradient(135deg, #1e73be 0%, #3b82f6 100%);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.btn-submit:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(30, 115, 190, 0.3);
}

.btn-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 地图区域 */
.map-section {
  background: #f8f9fa;
  padding: 60px 0;
  margin-top: 60px;
}

.map-section h2 {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  text-align: center;
  margin-bottom: 30px;
}

.map-container {
  max-width: 1200px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.map-note {
  text-align: center;
  padding: 15px;
  background: #f8f9fa;
  font-size: 14px;
  color: #666;
  margin: 0;
}

/* 通知提示 */
.notification {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 15px 25px;
  border-radius: 6px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  z-index: 999999;
  display: flex;
  align-items: center;
  gap: 10px;
  transform: translateX(400px);
  transition: transform 0.3s ease;
}

.notification.show {
  transform: translateX(0);
}

.notification-success {
  background: #4CAF50;
}

.notification-error {
  background: #f44336;
}

/* 响应式 */
@media screen and (max-width: 991px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .contact-info {
    padding: 30px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 767px) {
  .banner {
    height: 150px;
  }

  .banner h1 {
    font-size: 28px;
  }

  .contact-info,
  .contact-form-wrapper {
    padding: 25px;
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
    font-size: 13px;
    padding: 10px 12px;
  }

  .btn-submit {
    font-size: 15px;
    padding: 12px;
  }
}
</style>