当前位置：首页 > VUE

vue怎么实现预约就诊

2026-02-24 22:07:45VUE

Vue 实现预约就诊功能

预约就诊功能通常需要结合前端 Vue 和后端 API 实现，以下是关键步骤和代码示例：

创建预约表单组件

<template>
  <div class="appointment-form">
    <h3>预约就诊</h3>
    <form @submit.prevent="submitAppointment">
      <div class="form-group">
        <label>选择科室</label>
        <select v-model="form.department" required>
          <option v-for="dept in departments" :key="dept.id" :value="dept.id">
            {{ dept.name }}
          </option>
        </select>
      </div>

      <div class="form-group">
        <label>选择医生</label>
        <select v-model="form.doctor" required>
          <option v-for="doc in doctors" :key="doc.id" :value="doc.id">
            {{ doc.name }} - {{ doc.specialty }}
          </option>
        </select>
      </div>

      <div class="form-group">
        <label>预约日期</label>
        <input type="date" v-model="form.date" required>
      </div>

      <div class="form-group">
        <label>预约时间</label>
        <select v-model="form.time" required>
          <option v-for="slot in timeSlots" :key="slot" :value="slot">
            {{ slot }}
          </option>
        </select>
      </div>

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

<script>
export default {
  data() {
    return {
      departments: [],
      doctors: [],
      timeSlots: ['09:00', '10:00', '11:00', '14:00', '15:00', '16:00'],
      form: {
        department: '',
        doctor: '',
        date: '',
        time: ''
      }
    }
  },
  methods: {
    async fetchDepartments() {
      const response = await axios.get('/api/departments')
      this.departments = response.data
    },
    async fetchDoctors(departmentId) {
      const response = await axios.get(`/api/doctors?department=${departmentId}`)
      this.doctors = response.data
    },
    async submitAppointment() {
      try {
        await axios.post('/api/appointments', this.form)
        alert('预约成功！')
        this.$router.push('/appointments')
      } catch (error) {
        console.error('预约失败:', error)
      }
    }
  },
  watch: {
    'form.department'(newVal) {
      if (newVal) this.fetchDoctors(newVal)
    }
  },
  created() {
    this.fetchDepartments()
  }
}
</script>

实现预约管理页面

<template>
  <div class="appointment-list">
    <h3>我的预约</h3>
    <table>
      <thead>
        <tr>
          <th>科室</th>
          <th>医生</th>
          <th>日期</th>
          <th>时间</th>
          <th>状态</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="appointment in appointments" :key="appointment.id">
          <td>{{ appointment.departmentName }}</td>
          <td>{{ appointment.doctorName }}</td>
          <td>{{ formatDate(appointment.date) }}</td>
          <td>{{ appointment.time }}</td>
          <td>{{ appointment.status }}</td>
          <td>
            <button @click="cancelAppointment(appointment.id)" 
                    v-if="appointment.status === '待就诊'">
              取消
            </button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      appointments: []
    }
  },
  methods: {
    async fetchAppointments() {
      const response = await axios.get('/api/appointments')
      this.appointments = response.data
    },
    async cancelAppointment(id) {
      if (confirm('确定要取消预约吗？')) {
        await axios.delete(`/api/appointments/${id}`)
        this.fetchAppointments()
      }
    },
    formatDate(dateString) {
      return new Date(dateString).toLocaleDateString()
    }
  },
  created() {
    this.fetchAppointments()
  }
}
</script>

添加路由配置

// router.js
import Vue from 'vue'
import Router from 'vue-router'
import AppointmentForm from './components/AppointmentForm.vue'
import AppointmentList from './components/AppointmentList.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/appointments',
      component: AppointmentList
    },
    {
      path: '/book-appointment',
      component: AppointmentForm
    }
  ]
})

实现状态管理（可选）

对于复杂应用，可以使用 Vuex 管理预约状态：

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    appointments: [],
    departments: [],
    doctors: []
  },
  mutations: {
    SET_APPOINTMENTS(state, appointments) {
      state.appointments = appointments
    },
    SET_DEPARTMENTS(state, departments) {
      state.departments = departments
    },
    SET_DOCTORS(state, doctors) {
      state.doctors = doctors
    }
  },
  actions: {
    async fetchAppointments({ commit }) {
      const response = await axios.get('/api/appointments')
      commit('SET_APPOINTMENTS', response.data)
    },
    async fetchDepartments({ commit }) {
      const response = await axios.get('/api/departments')
      commit('SET_DEPARTMENTS', response.data)
    },
    async fetchDoctors({ commit }, departmentId) {
      const response = await axios.get(`/api/doctors?department=${departmentId}`)
      commit('SET_DOCTORS', response.data)
    }
  }
})

后端 API 建议

科室管理接口
- GET /api/departments - 获取所有科室
医生管理接口
- GET /api/doctors - 根据科室筛选医生
预约管理接口
- POST /api/appointments - 创建预约
- GET /api/appointments - 获取用户预约列表
- DELETE /api/appointments/:id - 取消预约