vue预约实现

Vue 预约功能实现

预约功能通常涉及时间选择、表单提交和状态管理。以下是基于 Vue 的实现方案：

基础结构搭建 安装必要依赖（如 vue-router 和日期选择库）：

npm install vue-router vue-datepicker-next

时间选择组件 使用第三方日期时间选择器（如 vue-datepicker-next）：

<template>
  <date-picker v-model="selectedDate" type="datetime" />
</template>

<script>
import DatePicker from 'vue-datepicker-next'
export default {
  components: { DatePicker },
  data() {
    return { selectedDate: null }
  }
}
</script>

表单验证 实现基础表单验证逻辑：

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="form.name" required placeholder="姓名">
    <span v-if="errors.name">{{ errors.name }}</span>

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

<script>
export default {
  data() {
    return {
      form: { name: '', date: null },
      errors: {}
    }
  },
  methods: {
    validateForm() {
      this.errors = {}
      if (!this.form.name) this.errors.name = '请输入姓名'
      return Object.keys(this.errors).length === 0
    },
    handleSubmit() {
      if (this.validateForm()) {
        // 提交逻辑
      }
    }
  }
}
</script>

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

// store.js
export default new Vuex.Store({
  state: {
    appointments: []
  },
  mutations: {
    ADD_APPOINTMENT(state, payload) {
      state.appointments.push(payload)
    }
  },
  actions: {
    createAppointment({ commit }, appointment) {
      commit('ADD_APPOINTMENT', appointment)
    }
  }
})

API 集成 封装 API 请求：

// api.js
export const createAppointment = (data) => {
  return axios.post('/api/appointments', data)
}

完整页面示例

<template>
  <div>
    <h3>新建预约</h3>
    <date-picker v-model="form.date" />

    <form @submit.prevent="submitAppointment">
      <input v-model="form.clientName" placeholder="客户名">
      <button type="submit">确认预约</button>
    </form>
  </div>
</template>

<script>
import { createAppointment } from '@/api'
import { mapActions } from 'vuex'

export default {
  data() {
    return {
      form: {
        date: new Date(),
        clientName: ''
      }
    }
  },
  methods: {
    ...mapActions(['createAppointment']),
    async submitAppointment() {
      try {
        await this.createAppointment(this.form)
        this.$router.push('/success')
      } catch (error) {
        console.error(error)
      }
    }
  }
}
</script>

关键注意事项

时间处理 使用 dayjs 或 moment 处理日期格式：

import dayjs from 'dayjs'
const formattedDate = dayjs(this.form.date).format('YYYY-MM-DD HH:mm')

防止重复提交 添加提交状态锁：

data() {
  return {
    isSubmitting: false
  }
},
methods: {
  async submitForm() {
    if (this.isSubmitting) return
    this.isSubmitting = true
    // 提交逻辑
    this.isSubmitting = false
  }
}

响应式布局 针对移动端优化样式：

.date-picker {
  width: 100%;
  max-width: 400px;
}

权限控制 添加路由守卫：

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isLoggedIn()) {
    next('/login')
  } else {
    next()
  }
})