vue实现在线预定

Vue实现在线预定功能

在线预定功能通常涉及前端界面交互、数据提交和后端处理。以下是一个基于Vue的实现方案：

创建预定表单组件

使用Vue的单文件组件创建预定表单：

<template>
  <div class="booking-form">
    <h3>在线预定</h3>
    <form @submit.prevent="submitBooking">
      <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="email">邮箱</label>
        <input type="email" id="email" v-model="formData.email" required>
      </div>

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

      <div class="form-group">
        <label for="time">时间</label>
        <select id="time" v-model="formData.time" required>
          <option value="09:00">09:00</option>
          <option value="10:00">10:00</option>
          <option value="11:00">11:00</option>
        </select>
      </div>

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

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        email: '',
        date: '',
        time: ''
      }
    }
  },
  methods: {
    async submitBooking() {
      try {
        const response = await axios.post('/api/bookings', this.formData)
        alert('预定成功！')
        this.resetForm()
      } catch (error) {
        console.error('预定失败:', error)
        alert('预定失败，请重试')
      }
    },
    resetForm() {
      this.formData = {
        name: '',
        email: '',
        date: '',
        time: ''
      }
    }
  }
}
</script>

<style scoped>
.booking-form {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
}
.form-group {
  margin-bottom: 15px;
}
label {
  display: block;
  margin-bottom: 5px;
}
input, select {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}
button {
  background-color: #42b983;
  color: white;
  padding: 10px 15px;
  border: none;
  cursor: pointer;
}
</style>

集成日期时间选择器

对于更专业的日期时间选择，可以集成第三方库如vue-datepicker：

npm install vue-datepicker --save

然后在组件中使用：

<template>
  <date-picker v-model="formData.date" :config="dateConfig"></date-picker>
</template>

<script>
import DatePicker from 'vue-datepicker'

export default {
  components: {
    DatePicker
  },
  data() {
    return {
      dateConfig: {
        format: 'YYYY-MM-DD',
        useCurrent: false
      }
    }
  }
}
</script>

处理API请求

使用axios处理与后端的通信：

import axios from 'axios'

// 全局配置
axios.defaults.baseURL = 'https://your-api-domain.com'
axios.interceptors.request.use(config => {
  config.headers['Authorization'] = 'Bearer ' + localStorage.getItem('token')
  return config
})

添加表单验证

使用vuelidate进行表单验证：

npm install vuelidate --save

在main.js中注册：

import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)

在组件中使用：

<script>
import { required, email } from 'vuelidate/lib/validators'

export default {
  validations: {
    formData: {
      name: { required },
      email: { required, email },
      date: { required },
      time: { required }
    }
  },
  methods: {
    submitBooking() {
      this.$v.$touch()
      if (this.$v.$invalid) return
      // 提交逻辑
    }
  }
}
</script>

显示预定状态

添加预定状态显示和加载指示器：

<template>
  <div v-if="loading" class="loading">处理中...</div>
  <div v-if="success" class="success">预定成功！</div>
  <div v-if="error" class="error">预定失败: {{ error }}</div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      success: false,
      error: null
    }
  },
  methods: {
    async submitBooking() {
      this.loading = true
      this.success = false
      this.error = null

      try {
        await axios.post('/api/bookings', this.formData)
        this.success = true
        this.resetForm()
      } catch (err) {
        this.error = err.response?.data?.message || '未知错误'
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

响应式设计优化

使用CSS媒体查询确保在不同设备上正常显示：

@media (max-width: 768px) {
  .booking-form {
    padding: 10px;
  }
  input, select {
    padding: 10px;
  }
}

以上实现涵盖了在线预定系统的主要功能点，包括表单创建、数据验证、API交互和状态显示。根据具体需求，可以进一步扩展功能如多步骤预定流程、实时可用性检查等。