当前位置：首页 > VUE

vue实现预约功能

2026-02-18 14:24:42VUE

预约功能实现思路

在Vue中实现预约功能通常需要结合表单验证、时间选择、数据提交和状态管理。以下是核心实现步骤：

基础表单结构

创建预约表单组件，包含必要字段如姓名、联系方式、预约日期和时间：

<template>
  <form @submit.prevent="handleSubmit">
    <div>
      <label>姓名</label>
      <input v-model="form.name" type="text" required>
    </div>

    <div>
      <label>电话</label>
      <input v-model="form.phone" type="tel" required>
    </div>

    <div>
      <label>预约日期</label>
      <input v-model="form.date" type="date" :min="minDate">
    </div>

    <div>
      <label>预约时间</label>
      <select v-model="form.time">
        <option v-for="time in availableTimes" :value="time">{{ time }}</option>
      </select>
    </div>

    <button type="submit">提交预约</button>
  </form>
</template>

数据与验证处理

设置组件数据和方法处理表单提交：

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        phone: '',
        date: '',
        time: ''
      },
      minDate: new Date().toISOString().split('T')[0],
      availableTimes: ['09:00', '10:00', '11:00', '14:00', '15:00']
    }
  },
  methods: {
    validatePhone(phone) {
      const reg = /^1[3-9]\d{9}$/
      return reg.test(phone)
    },
    handleSubmit() {
      if (!this.validatePhone(this.form.phone)) {
        alert('请输入正确的手机号')
        return
      }

      // 提交数据到API
      this.submitReservation()
    },
    async submitReservation() {
      try {
        const response = await axios.post('/api/reservations', this.form)
        alert('预约成功')
      } catch (error) {
        alert('预约失败')
      }
    }
  }
}
</script>

时间选择优化

使用第三方日期时间选择器如vue-datepicker提升体验：

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

export default {
  components: { DatePicker },
  data() {
    return {
      timeOptions: {
        start: '09:00',
        step: '01:00',
        end: '18:00'
      }
    }
  }
}

<date-picker 
  v-model="form.date" 
  type="date" 
  :disabled-date="disablePastDates"
></date-picker>

预约状态管理

使用Vuex管理全局预约状态：

// store/modules/reservation.js
export default {
  state: {
    reservations: []
  },
  mutations: {
    ADD_RESERVATION(state, payload) {
      state.reservations.push(payload)
    }
  },
  actions: {
    async createReservation({ commit }, formData) {
      const res = await api.createReservation(formData)
      commit('ADD_RESERVATION', res.data)
      return res
    }
  }
}

预约列表展示

创建独立组件展示预约信息：

<template>
  <div v-for="item in reservations" :key="item.id">
    <p>{{ item.name }} - {{ item.date }} {{ item.time }}</p>
    <p>状态: {{ item.status }}</p>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['reservations'])
  }
}
</script>

后端接口对接

配置axios实例处理API请求：

// api/reservation.js
import axios from 'axios'

const instance = axios.create({
  baseURL: 'https://your-api-endpoint.com'
})

export default {
  createReservation(data) {
    return instance.post('/reservations', data)
  },
  getReservations() {
    return instance.get('/reservations')
  }
}

实时更新处理

使用WebSocket或定时刷新保持数据同步：

mounted() {
  this.fetchReservations()
  this.timer = setInterval(this.fetchReservations, 60000)
},
methods: {
  async fetchReservations() {
    const res = await api.getReservations()
    this.$store.commit('SET_RESERVATIONS', res.data)
  }
},
beforeDestroy() {
  clearInterval(this.timer)
}

以上实现方案可根据具体业务需求进行调整，包括添加更多字段验证、预约规则限制、可视化日历展示等功能模块。

vue实现预约功能