用户可以通过如下操作流程进行体检预约:
- 在移动端首页点击体检预约,页面跳转到套餐列表页面
- 在套餐列表页面点击要预约的套餐,页面跳转到套餐详情页面
- 在套餐详情页面点击立即预约,页面跳转到预约页面
- 在预约页面录入体检人信息,包括手机号,点击发送验证码
- 在预约页面录入收到的手机短信验证码,点击提交预约,完成体检预约
在预约页面(/pages/orderInfo.html)进行调整
2.1.1 展示预约的套餐信息
第一步:从请求路径中获取当前套餐的id
第二步:定义模型数据setmeal,用于套餐数据展示
第三步:在VUE的钩子函数中发送ajax请求,根据id查询套餐信息
2.1.2 手机号校验
第一步:在页面导入的healthmobile.js文件中已经定义了校验手机号的方法
第二步:为发送验证码按钮绑定事件sendValidateCode
2.1.3 30秒倒计时效果
前面在sendValidateCode方法中进行了手机号校验,如果校验通过,需要显示30秒倒计时效果
其中,validateCodeButton和clock是在healthmobile.js文件中定义的变量,doLoop是在healthmobile.js文件中定义的方法
2.1.4 发送ajax请求
在按钮上显示30秒倒计时效果的同时,需要发送ajax请求,在后台给用户发送手机验证码
创建ValidateCodeController,提供方法发送短信验证码,并将验证码保存到redis
2.1.5 日历展示
页面中使用DatePicker控件来展示日历。根据需求,最多可以提前一个月进行体检预约,所以日历控件只展示未来一个月的日期
其中方法定义在文件中
2.1.6 提交预约请求
为提交预约按钮绑定事件
其中checkIdCard方法是在healthmobile.js文件中定义的
2.2.1 Controller
在health_mobile工程中创建OrderController并提供submitOrder方法
- SMSUtils
2.2.2 服务接口
在health_interface工程中创建体检预约服务接口OrderService并提供预约方法
2.2.3 服务实现类
在health_service_provider工程中创建体检预约服务实现类OrderServiceImpl并实现体检预约方法。
体检预约方法处理逻辑比较复杂,需要进行如下业务处理:
- 检查用户所选择的预约日期是否已经提前进行了预约设置,如果没有设置则无法进行预约
- 检查用户所选择的预约日期是否已经约满,如果已经约满则无法预约
- 检查用户是否重复预约(同一个用户在同一天预约了同一个套餐),如果是重复预约则无法完成再次预约
- 检查当前用户是否为会员,如果是会员则直接完成预约,如果不是会员则自动完成注册并进行预约
- 预约成功,更新当日的已预约人数
实现代码如下:
2.2.4 Dao接口
2.2.5 Mapper映射文件
OrderSettingDao.xml
MemberDao.xml
OrderDao.xml
前面已经完成了体检预约,预约成功后页面会跳转到成功提示页面
()并展示预约的相关信息(体检人、体检套餐、体检时间等)。
提供orderSuccess.html页面,展示预约成功后相关信息
3.2.1 Controller
在OrderController中提供findById方法,根据预约id查询预约相关信息
3.2.2 服务接口
在OrderService服务接口中扩展findById方法
3.2.3 服务实现类
在OrderServiceImpl服务实现类中实现findById方法
3.2.4 Dao接口
在OrderDao接口中扩展findById4Detail方法