当前位置：首页 > VUE

vue实现预约页面

2026-01-07 00:11:04VUE

Vue 预约页面实现步骤

准备工作
安装Vue CLI创建项目，确保已配置好开发环境。使用vue create appointment-page初始化项目，选择默认配置或手动配置。

页面结构设计
在src/views目录下创建Appointment.vue文件，设计基础模板：

<template>
  <div class="appointment-container">
    <h1>预约服务</h1>
    <form @submit.prevent="handleSubmit">
      <!-- 表单内容将在此添加 -->
    </form>
  </div>
</template>

表单字段实现
添加常用预约字段，使用v-model进行双向绑定：

<div class="form-group">
  <label for="name">姓名</label>
  <input type="text" id="name" v-model="formData.name" required>
</div>
<div class="form-group">
  <label for="phone">联系电话</label>
  <input type="tel" id="phone" v-model="formData.phone" required>
</div>
<div class="form-group">
  <label for="date">预约日期</label>
  <input type="date" id="date" v-model="formData.date" required>
</div>

时间选择组件
集成第三方日期时间选择器（如vue-datepicker）：

npm install vue-datepicker --save

在组件中引入：

<script>
import Datepicker from 'vue-datepicker';
export default {
  components: { Datepicker },
  data() {
    return {
      timeOptions: ['09:00', '10:00', '11:00', '14:00', '15:00']
    }
  }
}
</script>

表单验证
使用Vuelidate进行验证：

npm install vuelidate --save

配置验证规则：

import { required, minLength, numeric } from 'vuelidate/lib/validators'
export default {
  validations: {
    formData: {
      name: { required },
      phone: { required, numeric, minLength: minLength(11) },
      date: { required }
    }
  }
}

提交逻辑处理
实现表单提交方法：

methods: {
  handleSubmit() {
    this.$v.$touch();
    if (!this.$v.$invalid) {
      axios.post('/api/appointments', this.formData)
        .then(response => {
          alert('预约成功');
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
}

样式优化
添加CSS样式增强用户体验：

.appointment-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}
.form-group {
  margin-bottom: 15px;
}
.error-message {
  color: red;
  font-size: 12px;
}

响应式处理
使用Vue的响应式特性动态显示可选时间：

<div v-if="formData.date">
  <label>选择时间</label>
  <select v-model="formData.time">
    <option v-for="time in availableTimes" :key="time">{{ time }}</option>
  </select>
</div>

最终整合
将所有部分组合成完整组件，确保表单提交后重置字段：

data() {
  return {
    formData: {
      name: '',
      phone: '',
      date: '',
      time: ''
    },
    availableTimes: []
  }
},
methods: {
  resetForm() {
    this.formData = {
      name: '',
      phone: '',
      date: '',
      time: ''
    };
    this.$v.$reset();
  }
}

vue实现预约页面