当前位置：首页 > VUE

vue实现预约功能

2026-03-10 03:40:42VUE

预约功能的基本实现

在Vue中实现预约功能通常需要结合表单处理、数据验证和API交互。以下是一个基本的实现方法：

创建预约表单组件 使用Vue的v-model实现表单数据双向绑定，包含姓名、联系方式、预约时间等字段。

<template>
  <form @submit.prevent="submitAppointment">
    <input v-model="form.name" placeholder="姓名" required>
    <input v-model="form.phone" placeholder="电话" required>
    <input v-model="form.date" type="datetime-local" required>
    <textarea v-model="form.notes" placeholder="备注"></textarea>
    <button type="submit">提交预约</button>
  </form>
</template>

设置数据模型和提交逻辑 在script部分定义数据模型和处理函数。

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        phone: '',
        date: '',
        notes: ''
      }
    }
  },
  methods: {
    async submitAppointment() {
      try {
        const response = await axios.post('/api/appointments', this.form)
        alert('预约成功')
      } catch (error) {
        console.error('预约失败:', error)
      }
    }
  }
}
</script>

预约时间选择优化

使用日期选择器组件 集成第三方日期选择器如vue-datepicker提升用户体验。

vue实现预约功能

import DatePicker from 'vue2-datepicker'
import 'vue2-datepicker/index.css'

export default {
  components: { DatePicker },
  data() {
    return {
      date: null,
      timeOptions: {
        disabledDate(date) {
          return date < new Date()
        }
      }
    }
  }
}

模板中使用日期选择器

<date-picker 
  v-model="form.date" 
  :disabled-date="timeOptions.disabledDate"
  type="datetime">
</date-picker>

预约数据验证

前端验证 使用Vuelidate等验证库确保输入数据有效性。

import { required, minLength, numeric } from 'vuelidate/lib/validators'

export default {
  validations: {
    form: {
      name: { required },
      phone: { required, numeric, minLength: minLength(8) },
      date: { required }
    }
  }
}

模板中显示错误信息

vue实现预约功能

<div v-if="$v.form.name.$error">
  <span v-if="!$v.form.name.required">姓名必填</span>
</div>

预约状态管理

使用Vuex管理预约数据 在store中定义预约相关状态和操作。

const store = new Vuex.Store({
  state: {
    appointments: []
  },
  mutations: {
    ADD_APPOINTMENT(state, appointment) {
      state.appointments.push(appointment)
    }
  },
  actions: {
    async addAppointment({ commit }, formData) {
      const response = await axios.post('/api/appointments', formData)
      commit('ADD_APPOINTMENT', response.data)
    }
  }
})

组件中调用action

methods: {
  submitAppointment() {
    this.$store.dispatch('addAppointment', this.form)
  }
}

预约列表展示

创建预约列表组件 展示已提交的预约信息。

<template>
  <div v-for="appointment in appointments" :key="appointment.id">
    <p>{{ appointment.name }} - {{ formatDate(appointment.date) }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    appointments() {
      return this.$store.state.appointments
    }
  },
  methods: {
    formatDate(date) {
      return new Date(date).toLocaleString()
    }
  }
}
</script>