vue实现联系我们

Vue 实现联系我们页面

在 Vue 中实现“联系我们”页面通常包括表单提交、地图嵌入和联系方式展示。以下是具体实现方法：

表单组件设计

创建表单组件 ContactForm.vue，包含姓名、邮箱、电话和留言字段：

<template>
  <form @submit.prevent="handleSubmit">
    <div class="form-group">
      <label for="name">姓名</label>
      <input v-model="form.name" type="text" id="name" required>
    </div>
    <div class="form-group">
      <label for="email">邮箱</label>
      <input v-model="form.email" type="email" id="email" required>
    </div>
    <div class="form-group">
      <label for="phone">电话</label>
      <input v-model="form.phone" type="tel" id="phone">
    </div>
    <div class="form-group">
      <label for="message">留言</label>
      <textarea v-model="form.message" id="message" rows="5" required></textarea>
    </div>
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        email: '',
        phone: '',
        message: ''
      }
    }
  },
  methods: {
    async handleSubmit() {
      try {
        const response = await axios.post('/api/contact', this.form)
        alert('提交成功')
        this.form = { name: '', email: '', phone: '', message: '' }
      } catch (error) {
        alert('提交失败')
      }
    }
  }
}
</script>

地图集成

使用第三方地图 API（如 Google Maps 或高德地图）展示公司位置：

<template>
  <div class="map-container">
    <div id="map" style="height: 400px;"></div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      const map = new window.AMap.Map('map', {
        zoom: 15,
        center: [116.397428, 39.90923]
      })
      new window.AMap.Marker({
        position: [116.397428, 39.90923],
        map: map
      })
    }
  }
}
</script>

联系方式展示

创建静态信息展示组件 ContactInfo.vue：

<template>
  <div class="contact-info">
    <h3>联系方式</h3>
    <ul>
      <li><i class="icon-phone"></i> 电话: 123-456-7890</li>
      <li><i class="icon-email"></i> 邮箱: contact@example.com</li>
      <li><i class="icon-address"></i> 地址: 北京市朝阳区某某大厦</li>
    </ul>
  </div>
</template>

页面整合

将上述组件整合到主页面 ContactPage.vue：

<template>
  <div class="contact-page">
    <h1>联系我们</h1>
    <div class="contact-container">
      <ContactForm />
      <ContactMap />
      <ContactInfo />
    </div>
  </div>
</template>

<script>
import ContactForm from './ContactForm.vue'
import ContactMap from './ContactMap.vue'
import ContactInfo from './ContactInfo.vue'

export default {
  components: {
    ContactForm,
    ContactMap,
    ContactInfo
  }
}
</script>

<style scoped>
.contact-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
</style>

表单验证增强

添加表单验证逻辑，使用 Vuelidate 或自定义验证：

import { required, email } from 'vuelidate/lib/validators'

export default {
  validations: {
    form: {
      name: { required },
      email: { required, email },
      message: { required }
    }
  },
  methods: {
    handleSubmit() {
      this.$v.$touch()
      if (!this.$v.$invalid) {
        // 提交逻辑
      }
    }
  }
}

响应式设计

确保页面在不同设备上正常显示：

@media (max-width: 768px) {
  .contact-container {
    grid-template-columns: 1fr;
  }
}

这些方法组合起来可以创建一个完整的“联系我们”页面，包含表单提交、地图展示和联系信息。根据实际需求，可以进一步扩展功能，如添加文件上传、多语言支持或集成客服系统。