vue实现家政预约

Vue实现家政预约系统

家政预约系统需要包含用户注册登录、服务选择、时间选择、支付等功能。以下是基于Vue的实现方案：

项目结构设计

src/
├── components/
│   ├── ServiceList.vue  // 服务列表
│   ├── Calendar.vue     // 日历组件
│   ├── BookingForm.vue  // 预约表单
│   └── Payment.vue      // 支付组件
├── views/
│   ├── Home.vue         // 首页
│   ├── Services.vue      // 服务页
│   └── Profile.vue      // 用户中心
├── store/               // Vuex状态管理
└── router/              // 路由配置

核心功能实现

服务列表组件

<template>
  <div class="service-list">
    <div v-for="service in services" :key="service.id" class="service-card">
      <h3>{{ service.name }}</h3>
      <p>{{ service.description }}</p>
      <p>价格: {{ service.price }}元/小时</p>
      <button @click="selectService(service)">预约</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      services: [
        { id: 1, name: '日常保洁', description: '基础清洁服务', price: 50 },
        { id: 2, name: '深度清洁', description: '全方位清洁', price: 80 }
      ]
    }
  },
  methods: {
    selectService(service) {
      this.$emit('service-selected', service)
    }
  }
}
</script>

日历组件

<template>
  <div class="calendar">
    <div class="month-header">
      <button @click="prevMonth">上个月</button>
      <h3>{{ currentMonth }}</h3>
      <button @click="nextMonth">下个月</button>
    </div>
    <div class="days-grid">
      <div v-for="day in days" :key="day.date" 
           :class="{ 'available': day.available, 'selected': day.selected }"
           @click="selectDay(day)">
        {{ day.date.getDate() }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentDate: new Date(),
      days: []
    }
  },
  computed: {
    currentMonth() {
      return this.currentDate.toLocaleString('default', { month: 'long', year: 'numeric' })
    }
  },
  methods: {
    generateCalendar() {
      // 生成日历逻辑
    },
    selectDay(day) {
      this.$emit('day-selected', day.date)
    }
  },
  mounted() {
    this.generateCalendar()
  }
}
</script>

状态管理

使用Vuex管理预约状态：

// store/index.js
export default new Vuex.Store({
  state: {
    selectedService: null,
    selectedDate: null,
    userInfo: null
  },
  mutations: {
    setService(state, service) {
      state.selectedService = service
    },
    setDate(state, date) {
      state.selectedDate = date
    }
  }
})

路由配置

// router/index.js
const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/services',
    component: Services
  },
  {
    path: '/book',
    component: BookingForm
  },
  {
    path: '/payment',
    component: Payment
  }
]

预约表单整合

<template>
  <div class="booking-container">
    <ServiceList @service-selected="setService" />
    <Calendar @day-selected="setDate" />
    <div v-if="selectedService && selectedDate">
      <h3>确认预约信息</h3>
      <p>服务: {{ selectedService.name }}</p>
      <p>日期: {{ selectedDate.toLocaleDateString() }}</p>
      <button @click="submitBooking">提交预约</button>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    selectedService() {
      return this.$store.state.selectedService
    },
    selectedDate() {
      return this.$store.state.selectedDate
    }
  },
  methods: {
    setService(service) {
      this.$store.commit('setService', service)
    },
    setDate(date) {
      this.$store.commit('setDate', date)
    },
    submitBooking() {
      // 提交预约逻辑
    }
  }
}
</script>

后端API集成

使用axios与后端交互：

// api.js
import axios from 'axios'

export default {
  getServices() {
    return axios.get('/api/services')
  },
  createBooking(bookingData) {
    return axios.post('/api/bookings', bookingData)
  }
}

支付集成

集成第三方支付SDK：

<template>
  <div class="payment">
    <div id="payment-form"></div>
    <button @click="processPayment">确认支付</button>
  </div>
</template>

<script>
export default {
  mounted() {
    // 初始化支付SDK
    const paymentForm = new PaymentSDK({
      element: '#payment-form',
      publicKey: 'your_public_key'
    })
  },
  methods: {
    processPayment() {
      // 处理支付逻辑
    }
  }
}
</script>

响应式设计

添加媒体查询确保移动端适配：

@media (max-width: 768px) {
  .service-list {
    grid-template-columns: 1fr;
  }

  .calendar .days-grid {
    grid-template-columns: repeat(7, 1fr);
    font-size: 12px;
  }
}

以上实现方案涵盖了家政预约系统的主要功能模块，可根据实际需求进行调整和扩展。