<script>
var id = getUrlParam("id");//套餐id
</script>
var vue = new Vue({
el:'#app',
data:{
setmeal:{},//套餐信息
orderInfo:{
setmealId:id,
sex:'1'
}//预约信息
}
});
<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>
mounted(){
axios.post("/setmeal/findById.do?id=" + id).then((response) => {
this.setmeal = response.data.data;
});
}
/**
* 手机号校验
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;
}
}
<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;
}
}
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) | 黑马程序员IT技术论坛 X3.2 |