黑马程序员技术交流社区

标题: 【郑州校区】传智健康项目讲义第七章 三 [打印本页]

---

作者: 我是楠楠    时间: 2019-11-7 10:55
标题: 【郑州校区】传智健康项目讲义第七章 三

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

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;

}

} 

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2