展示预约的套餐的信息
1.1从请求路径中获取当前套餐的id
1.2定义模型数据setmeal,用于套餐数据显示
页面展示
<div class="contentBox">
<div class="card">
<div class="">
<img :src="'http://pqjroc654.bkt.clouddn.com/'+setmeal.img" width="100%" height="100%" />
</div>
<div class="project-text">
<h4 class="tit">{{setmeal.name}}</h4>
<p class="subtit">{{setmeal.remark}}</p>
<p class="keywords"><span>女</span><span>20-70</span></p>
</div>
<div class="project-know">
<a href="orderNotice.html" class="link-page">
<i class="icon-ask-circle"><span class="path1"></span><span class="path2"></span></i>
<span class="word">预约须知</span>
<span class="arrow"><i class="icon-rit-arrow"></i></span>
</a>
</div>
</div>
<div class="form-info">
<div class="info-title">
<span class="name">体检人信息</span>
</div>
<form class="info-form">
<div class="input-row">
<label>体检人</label>
<input v-model="orderInfo.name" type="text" class="input-clear" placeholder="请输入姓名">
</div>
<div class="input-row single-radio">
<label class="radio-title">性别</label>
<div class="radio-list">
<div class="radio">
<input v-model="orderInfo.sex" id="item1" type="radio" name="sex" value="1" checked>
<label for="item1"></label>
<span>男</span>
</div>
<div class="radio">
<input v-model="orderInfo.sex" id="item2" type="radio" name="sex" value="2">
<label for="item2"></label>
<span>女</span>
</div>
</div>
</div>
<div class="input-row">
<label>手机号</label>
<input v-model="orderInfo.telephone" type="text" class="input-clear" placeholder="请输入手机号">
<input style="font-size: x-small;" id="validateCodeButton" @click="sendValidateCode()" type="button" value="发送验证码">
</div>
<div class="input-row">
<label>验证码</label>
<input v-model="orderInfo.validateCode" type="text" class="input-clear" placeholder="请输入验证码">
</div>
<div class="input-row">
<label>身份证号</label>
<input v-model="orderInfo.idCard" type="text" class="input-clear" placeholder="请输入身份证号">
</div>
<div class="date">
<label>体检日期</label>
<i class="icon-date" class="picktime"></i>
<input v-model="orderInfo.orderDate" type="text" class="picktime" readonly>
</div>
</form>
<div class="box-button">
<button @click="submitOrder()" type="button" class="btn order-btn">提交预约</button>
</div>
</div>
</div>
1.1在VUE的钩子函数中发送ajax请求,根据id查询套餐信息
1.2手机号校验
第一步:在页面导入的healthmobile.js文件中已经定义了校验手机号的方法
第二步:为发送的验证码按钮绑定事件sendValidateCode
绑定事件
1.330秒倒计时效果
前面sendValidateCode方法进行了手机号的效验,如果效验通过,需要显示30秒倒计时效果
其中,validateCodeButton和clock是在healthmobile.js文件中定义的属性,doLoop是在healthmobile.js文件中定义的方法
1.4发送ajax请求
后台代码
1.1创建ValiCodeController,提供方法发送短信验证码,并将验证码保存到redis
package com.itheima.controller;
import com.aliyuncs.exceptions.ClientException;
import com.itheima.constant.MessageConstant;
import com.itheima.constant.RedisMessageConstant;
import com.itheima.entity.Result;
import com.itheima.utils.SMSUtils;
import com.itheima.utils.ValidateCodeUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import redis.clients.jedis.JedisPool;
@RestController
@RequestMapping("/validateCode")
public class ValidateCodeController {
@Autowired
private JedisPool jedisPool;
//体验预约时发送手机验证码
@RequestMapping("/send4Order")
public Result send4Order(String telephone) {
//生成4位数字验证码
Integer code = ValidateCodeUtils.generateValidateCode(4);
//发送短信
try {
SMSUtils.sendShortMessage(SMSUtils.VALIDATE_CODE,telephone,code.toString());
} catch (ClientException e) {
e.printStackTrace();
//验证码发送失败
return new Result(false, MessageConstant.SEND_VALIDATECODE_FAIL);
}
System.out.println("发送的验证码为:"+code);
//将生成的验证码缓存到redis中
jedisPool.getResource().setex(
telephone+ RedisMessageConstant.SENDTYPE_ORDER,5*60,code.toString()
);
//验证码发送成功
return new Result(true,MessageConstant.SEND_VALIDATECODE_SUCCESS);
}
}
效果展示