若依框架springboot分离版开发笔记03

8.3 注册学员账号

教练预约系统

教练预约系统 该代码是一个基于Vue.js的教练预约系统的模板。它包含HTML标记、Vue.js指令和样式。

该模板用于展示教练列表及其相关信息，包括评分和教学风格。

用户可以选择日期，并查看可预约时间段的教练排班信息。

代码中包含处理预约弹窗显示、日期选择、预约处理等事件处理程序。 功能：

1. 显示教练列表：根据后端接口获取教练列表，并展示每个教练的头像、昵称、评分、简介和教学风格。

2. 预约弹窗：点击预约按钮后，弹出预约弹窗，显示可选择的日期和时间段。

3. 选择日期：在预约弹窗中，用户可以选择日期，系统会根据选择的日期过滤出该日期的预约列表

4. 展示可约时间段：根据选定日期的预约列表，展示可约的时间段，包括上午和下午的时间段。

5. 预约处理：用户可以在预约弹窗中选择时间段，点击预约按钮进行预约处理。

6. 代码中使用了Element UI组件库的el-card、el-rate、el-button和el-dialog组件，以及第三方组件vuejs-datepicker。

   
   
   

功能实现

首先引入

import Datepicker from "vuejs-datepicker";

components: {
    "vuejs-datepicker": Datepicker,
  },

 data() {
    return {
      dialogVisible: false, // 预约弹窗
      coaches: [], // 教练列表
      coachBockings: [], // 预约列表
      bockingByDate: [], // 选中日期的预约列表
      disabledDates: {
        to: new Date(2023, 7, 7), // 开始日期
        from: new Date(2023, 7, 13), // 结束日期
      },
      selectedDate: null, // 默认选中日期
    };
  },

 created() {
    this.listCoaches();
    this.selectedDate = new Date(2023, 7, 7); // 设置默认选中日期
  },

    <el-dialog
      class="dialog"
      :visible.sync="dialogVisible"
      title="预约时间段信息"
    >
      <!-- 预约时间段 -->
      <div>
        <h2>请选择日期</h2>
        <vuejs-datepicker
          v-model="selectedDate"
          :disabled-dates="disabledDates"
          @input="handleDateChange"
        >
        </vuejs-datepicker>
      </div>
      <h2>请选择时间段</h2>
      <!-- 如果bockingByDate为null页面显示暂无数据 -->
      <div v-if="bockingByDate.length === 0">教练暂无排班</div>
      <div v-for="(item,index) in bockingByDate" :key="index">
        <div class="time-block">
          <div class="time-range">{{ item.remainingSlotsAm }}</div>
          <div class="remaining">
            剩余：<span class="remaining-count">{{ item.amPersonalSum }}</span>
          </div>
          <div class="available">可约</div>
        </div>
        <div class="time-block">
          <div class="time-range">{{ item.remainingSlotsPm }}</div>
          <div class="remaining">
            剩余：<span class="remaining-count">{{ item.amPersonalSum }}</span>
          </div>
          <div class="available">可约</div>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="handleAppointment" type="primary">预约</el-button>
      </span>
    </el-dialog>

后续开启约车服务，以及跟教练对话功能，完善登录滑块开发，部署上线