vue3写一个家政服务系统的预约服务页面

好的，下面是一个简单的家政服务系统预约服务页面的示例：

<template>
  <div class="booking-page">
    <h2>预约服务</h2>
    <div class="booking-form">
      <form @submit.prevent="submitForm">
        <div class="form-group">
          <label for="service-type">服务类型:</label>
          <select id="service-type" v-model="selectedService">
            <option value="cleaning">清洁服务</option>
            <option value="cooking">烹饪服务</option>
            <option value="babysitting">育儿服务</option>
            <option value="laundry">洗衣服务</option>
          </select>
        </div>
        <div class="form-group">
          <label for="date">服务日期:</label>
          <input type="date" id="date" v-model="selectedDate" required>
        </div>
        <div class="form-group">
          <label for="time">服务时间:</label>
          <input type="time" id="time" v-model="selectedTime" required>
        </div>
        <div class="form-group">
          <label for="address">服务地址:</label>
          <input type="text" id="address" v-model="selectedAddress" required>
        </div>
        <div class="form-group">
          <label for="phone">联系电话:</label>
          <input type="tel" id="phone" v-model="selectedPhone" required>
        </div>
        <div class="form-group">
          <button type="submit">提交预约</button>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedService: '',
      selectedDate: '',
      selectedTime: '',
      selectedAddress: '',
      selectedPhone: '',
    }
  },
  methods: {
    submitForm() {
      // 在这里可以将表单数据提交到服务器，完成预约服务的操作
      console.log('服务类型:', this.selectedService)
      console.log('服务日期:', this.selectedDate)
      console.log('服务时间:', this.selectedTime)
      console.log('服务地址:', this.selectedAddress)
      console.log('联系电话:', this.selectedPhone)
    },
  },
}
</script>

<style>
.booking-page {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.booking-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 50%;
  margin-top: 30px;
}

.form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

label {
  font-weight: bold;
  margin-bottom: 5px;
}
</style>

这个页面包含一个表单，用户可以选择服务类型、服务日期、服务时间、服务地址和联系电话，并提交预约请求。在 `submitForm` 方法中，可以将表单数据提交到服务器，完成预约服务的操作。