项目一第8天
项目需求
- 进行体检预约,预约需要展示套餐信息,手机号要进行验证,获取验证码需要实现倒计时绑定
- 预约成功要展示体检套餐,预约时间,预约用户等
1、体检预约
- 套餐详情页面点击预约按钮,进入预约页面,套餐页面显示套餐信息,以及用户需要填写 的信息
- 发送验证码,后端接收信息,通过阿里云短信服务,向手机号发送验证码,并将信息存入redis中,进行失效时间设置
- 提交预约信息,后端接收预约消息,进行判断 验证码与存入redis中的验证码是不是一致的,不一致返回预约失败
- 检查预约日期是否已经提前进行了预约设置,如果没有则预约失败
- 检查用户所选择的预约日期是否已经约满,如果约满则无法预约
- 检查用户是否重复预约(同一用户一天只能预约同一个套餐),如果重复预约则无法预约
- 检查当前用户是否为会员,如果是会员则直接完成预约,不是会员则进行会员注册(直接注册)
- 预约成功后,更新当日的已预约人数
2、预约成功后跳转至预约成功
- 通过传递的预约id,通过页面加载的狗仔函数,异步发送消息至后端,获取信息
- 由于order的封装对象与页面要求的数据不一样,所以封装新的类 vo(用于数据传输)或者直接map对象接收
- 通过内置连接查询获得需要的对象,返回至前端
前端代码
1 <script> 2 var vue = new Vue({ 3 el: '#app', 4 data: { 5 setmeal: {},//套餐信息 6 orderInfo: { 7 setmealId: id, 8 sex: '1' 9 }//预约信息 10 }, 11 methods: { 12 //发送验证码 13 sendValidateCode() { 14 //获取用户手机号 15 let telephone = this.orderInfo.telephone; 16 //手机号校验,成功 17 if (checkTelephone(telephone)) { 18 //获取按钮的dom对象 19 validateCodeButton = $("#validateCodeButton")[0]; 20 clock = window.setInterval(doLoop, 300);//定时器方法,可以实现每隔指定的时间调用指定的方法 21 22 //发送ajax请求,发送验证码 23 axios.get("/validateCode/send4Order.do?telephone=" + telephone).then((res) => { 24 if (!res.data.flag) { 25 this.$message.error(res.data.message) 26 } 27 }) 28 } else {//校验失败 29 this.$message.error("请输入正确的手机号"); 30 return false; 31 } 32 }, 33 //提交预约 34 submitOrder() { 35 //省份证校验。验证码不能为空校验 36 let idCard = this.orderInfo.idCard; 37 if (this.orderInfo.validateCode == null) { 38 this.$message.error("验证码不能为空"); 39 return false; 40 } 41 if (!checkIdCard(idCard)) { 42 this.$message.error("身份证号码输入错误,请重新输入"); 43 return false; 44 } 45 axios.post("/order/submit.do?",this.orderInfo).then((res)=>{ 46 if (res.data.flag){ 47 window.location.href="orderSuccess.html?orderId=" + res.data.data; 48 }else { 49 this.message.error(res.data.message) 50 } 51 }) 52 } 53 }, 54 mounted() { 55 //发送ajax请求,根据套餐ID查询套餐详细信息(包括套餐基本信息、套餐包含的检查组、检查组包含的检查项) 56 axios.post("/setmeal/findById.do?id=" + id).then((res) => { 57 if (res.data.flag) { 58 this.setmeal = res.data.data; 59 } 60 }); 61 } 62 }); 63 </script> 64 <script> 65 //日期控件 66 var calendar = new datePicker(); 67 calendar.init({ 68 'trigger': '.picktime',/*按钮选择器,用于触发弹出插件*/ 69 'type': 'date',/*模式:date日期;datetime日期时间;time时间;ym年月;*/ 70 'minDate': getSpecifiedDate(new Date(), 1),/*最小日期*/ 71 'maxDate': getSpecifiedDate(new Date(), 30),/*最大日期*/ 72 'onSubmit': function () { /*确认时触发事件*/ 73 //var theSelectData = calendar.value; 74 }, 75 'onClose': function () { /*取消时触发事件*/ 76 } 77 }); 78 </script>
后端代码一
1 @RequestMapping("/submit") 2 public Result submit(@RequestBody Map map) { 3 /*1. 从Redis中获取保存的验证码 4 2. 将用户输入的验证码和Redis中保存的验证码进行比对 5 3. 如果比对成功,调用服务完成预约业务处理 6 3.1 预约成功,可以为用户发送短信 7 3.2 如果比对不成功,返回结果给页面 */ 8 9 Jedis resource = jedisPool.getResource(); 10 String telephone = (String) map.get("telephone"); 11 //获取存储在redis中的验证码 12 String validateCodeInRedis = resource.get(telephone + RedisMessageConstant.SENDTYPE_ORDER); 13 //获取存储的验证码 14 String validateCode = (String) map.get("validateCode"); 15 16 //判断验证码是否相等 17 if (validateCodeInRedis != null && validateCodeInRedis.equals(validateCode)) { 18 19 try { 20 //添加预约类型 21 map.put("orderType", Order.ORDERTYPE_WEIXIN); 22 Result result = orderService.order(map); 23 //预约成功发送短信给用户 24 if (result.isFlag()) { 25 SMSUtils.sendShortMessage(SMSUtils.ORDER_NOTICE, telephone, (String) map.get("orderDate")); 26 } 27 return result; 28 } catch (Exception e) { 29 e.printStackTrace(); 30 return new Result(false, MessageConstant.ORDERSETTING_FAIL); 31 } finally { 32 resource.close(); 33 } 34 35 } else { 36 resource.close(); 37 return new Result(false, MessageConstant.VALIDATECODE_ERROR); 38 } 39 40 } 41 42 43 44 //service 45 /** 46 * 进行预约设置 47 * 48 * @param map 存的是预约信息 49 * @return 返回值是Result结果信息 50 * @throws Exception 抛出异常 51 */ 52 public Result order(Map map) throws Exception { 53 /* 1、检查用户所选择的预约日期是否已经提前进行了预约设置,如果没有设置则无法进行预约 54 2、检查用户所选择的预约日期是否已经约满,如果已经约满则无法预约 55 3、检查用户是否重复预约(同一个用户在同一天预约了同一个套餐),如果是重复预约则无法完成再次预约 56 4、检查当前用户是否为会员,如果是会员则直接完成预约,如果不是会员则自动完成注册并进行预约 57 5、预约成功,更新当日的已预约人数*/ 58 //获取预约日期 59 String orderDate = (String) map.get("orderDate"); 60 //获取date类型的预约日期 61 Date date = DateUtils.parseString2Date(orderDate); 62 //查询日期能否进行预约 63 OrderSetting orderSetting = orderSettingDao.findByOrderDate(date); 64 if (orderSetting == null) { 65 return new Result(false, MessageConstant.SELECTED_DATE_CANNOT_ORDER); 66 } 67 68 //获取设置的预约人数 69 int number = orderSetting.getNumber(); 70 //获取已经预约人数 71 int reservations = orderSetting.getReservations(); 72 //如果预约人数等于预约设置的人数,预约失败 73 if (number <= reservations) { 74 return new Result(false, MessageConstant.ORDER_FULL); 75 } 76 77 String telephone = (String) map.get("telephone"); 78 //根据手机号查找会员 79 Member member = memberDao.findByTelephone(telephone); 80 81 if (member == null) {//如果用户没有,则注册用户并进行预约 82 //注册会员 83 member = new Member(); 84 member.setName((String) map.get("name")); 85 member.setPhoneNumber(telephone); 86 member.setIdCard((String) map.get("idCard")); 87 member.setSex((String) map.get("sex")); 88 member.setRegTime(new Date()); 89 90 memberDao.add(member); 91 92 } else {//如果有会员 93 94 Order order = new Order(); 95 order.setMemberId(member.getId()); 96 order.setOrderDate(date); 97 order.setSetmealId(Integer.parseInt((String) map.get("setmealId"))); 98 //查询是否有相同的订单 99 List<Order> list = orderDao.findByCondition(order); 100 if (list != null && list.size() > 0){//重复预约,预约失败 101 return new Result(false,MessageConstant.HAS_ORDERED); 102 } 103 }
//添加预约
Order order = new Order();
order.setMemberId(member.getId());
order.setOrderDate(date);
order.setOrderType((String) map.get("orderType"));
order.setOrderStatus(Order.ORDERSTATUS_NO);//到诊状态
orderDao.add(order);
//进行预约设置的人数+1
orderSetting.setReservations(orderSetting.getReservations() + 1);
orderSettingDao.editReservationsByOrderDate(orderSetting);
return new Result(true,MessageConstant.ORDER_SUCCESS,order.getId());
}
后端代码二
1 /** 2 * 查询预约信息 3 * @param id 预约的id 4 * @return 返回预约信息 5 * @throws Exception 异常就抛,完事 6 */ 7 public Map findById(Integer id) throws Exception { 8 9 Map map = orderDao.findById4Detail(id); 10 if (map!=null){ 11 Date orderDate = (Date) map.get("orderDate"); 12 map.put("orderDate",DateUtils.parseDate2String(orderDate)); 13 } 14 return map; 15 } 16 17 18 <select id="findById4Detail" parameterType="Integer" resultType="java.util.Map"> 19 select m.name member ,s.name setmeal,o.orderDate orderDate,o.orderType orderType 20 from 21 t_order o, 22 t_member m, 23 t_setmeal s 24 where o.member_id=m.id and o.setmeal_id=s.id and o.id=#{id} 25 </select>