【郑州校区】传智健康项目讲义第七章 三

2.1.5 日历展示
页面中使用DatePicker控件来展示日历。根据需求，最多可以提前一个月进行体检预约，所以日历控件只展示未来一个月的日期

[AppleScript] 纯文本查看 复制代码

<div class="date">
<label>体检日期</label>
<i class="icon‐date" class="picktime"></i>
<input v‐model="orderInfo.orderDate" type="text" class="picktime"
readonly>
</div> 

[AppleScript] 纯文本查看 复制代码

<script>
//日期控件
var calendar = new datePicker();
calendar.init({
'trigger': '.picktime',/*按钮选择器，用于触发弹出插件*/
'type': 'date',/*模式：date日期；datetime日期时间；time时间；ym年月；*/
'minDate': getSpecifiedDate(new Date(),1),/*最小日期*/
'maxDate': getSpecifiedDate(new Date(),30),/*最大日期*/
'onSubmit': function() { /*确认时触发事件*/},
'onClose': function() { /*取消时触发事件*/ }
});
</script> 

其中getSpecifiedDate方法定义在healthmobile.js文件中

[AppleScript] 纯文本查看 复制代码

//获得指定日期后指定天数的日期
function getSpecifiedDate(date,days) {
date.setDate(date.getDate() + days);//获取指定天之后的日期
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
return (year + "‐" + month + "‐" + day);
} 

2.1.6 提交预约请求
为提交预约按钮绑定事件

[AppleScript] 纯文本查看 复制代码

<div class="box‐button">
<button @click="submitOrder()" type="button" class="btn order‐btn">提交
预约</button>
</div> 

[AppleScript] 纯文本查看 复制代码

//提交预约
submitOrder(){
//校验身份证号格式
if(!checkIdCard(this.orderInfo.idCard)){
this.$message.error('身份证号码输入错误，请重新输入');
return ;
}
axios.post("/order/submit.do",this.orderInfo).then((response) => {
if(response.data.flag){
//预约成功，跳转到预约成功页面
window.location.href="orderSuccess.html?orderId=" +
response.data.data;
}else{
//预约失败，提示预约失败信息
this.$message.error(response.data.message);
}
});
} 

其中checkIdCard方法是在healthmobile.js文件中定义的

[AppleScript] 纯文本查看 复制代码

/**
* 身份证号码校验
* 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验
位，可能为数字或字符X
*/
function checkIdCard(idCard){
var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
if(reg.test(idCard)){
return true;
}else{
return false;
}
} 

【郑州校区】传智健康项目讲义第七章 三

2.1.5 日历展示
页面中使用DatePicker控件来展示日历。根据需求，最多可以提前一个月进行体检预约，所以日历控件只展示未来一个月的日期

[AppleScript] 纯文本查看 复制代码

<div class="date">
<label>体检日期</label>
<i class="icon‐date" class="picktime"></i>
<input v‐model="orderInfo.orderDate" type="text" class="picktime"
readonly>
</div> 

[AppleScript] 纯文本查看 复制代码

<script>
//日期控件
var calendar = new datePicker();
calendar.init({
'trigger': '.picktime',/*按钮选择器，用于触发弹出插件*/
'type': 'date',/*模式：date日期；datetime日期时间；time时间；ym年月；*/
'minDate': getSpecifiedDate(new Date(),1),/*最小日期*/
'maxDate': getSpecifiedDate(new Date(),30),/*最大日期*/
'onSubmit': function() { /*确认时触发事件*/},
'onClose': function() { /*取消时触发事件*/ }
});
</script> 

其中getSpecifiedDate方法定义在healthmobile.js文件中

[AppleScript] 纯文本查看 复制代码

//获得指定日期后指定天数的日期
function getSpecifiedDate(date,days) {
date.setDate(date.getDate() + days);//获取指定天之后的日期
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
return (year + "‐" + month + "‐" + day);
} 

2.1.6 提交预约请求
为提交预约按钮绑定事件

[AppleScript] 纯文本查看 复制代码

<div class="box‐button">
<button @click="submitOrder()" type="button" class="btn order‐btn">提交
预约</button>
</div> 

[AppleScript] 纯文本查看 复制代码

//提交预约
submitOrder(){
//校验身份证号格式
if(!checkIdCard(this.orderInfo.idCard)){
this.$message.error('身份证号码输入错误，请重新输入');
return ;
}
axios.post("/order/submit.do",this.orderInfo).then((response) => {
if(response.data.flag){
//预约成功，跳转到预约成功页面
window.location.href="orderSuccess.html?orderId=" +
response.data.data;
}else{
//预约失败，提示预约失败信息
this.$message.error(response.data.message);
}
});
} 

其中checkIdCard方法是在healthmobile.js文件中定义的

[AppleScript] 纯文本查看 复制代码

/**
* 身份证号码校验
* 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验
位，可能为数字或字符X
*/
function checkIdCard(idCard){
var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
if(reg.test(idCard)){
return true;
}else{
return false;
}
}