8.3 注册学员账号
教练预约系统
教练预约系统 该代码是一个基于Vue.js的教练预约系统的模板。它包含HTML标记、Vue.js指令和样式。
该模板用于展示教练列表及其相关信息,包括评分和教学风格。
用户可以选择日期,并查看可预约时间段的教练排班信息。
代码中包含处理预约弹窗显示、日期选择、预约处理等事件处理程序。 功能:
-
显示教练列表:根据后端接口获取教练列表,并展示每个教练的头像、昵称、评分、简介和教学风格。
-
预约弹窗:点击预约按钮后,弹出预约弹窗,显示可选择的日期和时间段。
-
选择日期:在预约弹窗中,用户可以选择日期,系统会根据选择的日期过滤出该日期的预约列表
-
展示可约时间段:根据选定日期的预约列表,展示可约的时间段,包括上午和下午的时间段。
-
预约处理:用户可以在预约弹窗中选择时间段,点击预约按钮进行预约处理。
-
代码中使用了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>
后续开启约车服务,以及跟教练对话功能,完善登录滑块开发,部署上线