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交互和状态显示。根据具体需求，可以进一步扩展功能如多步骤预定流程、实时可用性检查等。
