[资源下载] 【郑州校区】传智健康项目讲义第七章一

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

1. 体检预约流程
用户可以通过如下操作流程进行体检预约：
1、在移动端首页点击体检预约，页面跳转到套餐列表页面
2、在套餐列表页面点击要预约的套餐，页面跳转到套餐详情页面
3、在套餐详情页面点击立即预约，页面跳转到预约页面
4、在预约页面录入体检人信息，包括手机号，点击发送验证码
5、在预约页面录入收到的手机短信验证码，点击提交预约，完成体检预约
2. 体检预约
2.1 页面调整
在预约页面（/pages/orderInfo.html）进行调整
2.1.1 展示预约的套餐信息
第一步：从请求路径中获取当前套餐的id

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

<script>
var id = getUrlParam("id");//套餐id
</script>

第二步：定义模型数据setmeal，用于套餐数据展示

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

var vue = new Vue({
el:'#app',
data:{
setmeal:{},//套餐信息
orderInfo:{
setmealId:id,
sex:'1'
}//预约信息
}
});

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

<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>{{setmeal.sex == '0' ? '性别不限' : setmeal.sex == '1' ?
'男':'女'}}</span>
<span>{{setmeal.age}}</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>

第三步：在VUE的钩子函数中发送ajax请求，根据id查询套餐信息

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

mounted(){
axios.post("/setmeal/findById.do?id=" + id).then((response) => {
this.setmeal = response.data.data;
});
}

2.1.2 手机号校验
第一步：在页面导入的healthmobile.js文件中已经定义了校验手机号的方法

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

 /**
* 手机号校验
1‐‐以1为开头；
2‐‐第二位可为3,4,5,7,8,中的任意一位；
3‐‐最后以0‐9的9个整数结尾。
*/
function checkTelephone(telephone) {
var reg=/^[1][3,4,5,7,8][0‐9]{9}$/;
if (!reg.test(telephone)) {
return false;
} else {
return true;
}
}

第二步：为发送验证码按钮绑定事件sendValidateCode

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

 <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>//发送验证码
sendValidateCode(){
//获取用户输入的手机号
var telephone = this.orderInfo.telephone;
//校验手机号输入是否正确
if (!checkTelephone(telephone)) {
this.$message.error('请输入正确的手机号');
return false;
}
}

帐号		自动登录	找回密码
密码			加入黑马

[资源下载] 【郑州校区】传智健康项目讲义第七章 一

0 个回复

[资源下载] 【郑州校区】传智健康项目讲义第七章一