项目一第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>