欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

传智健康项目讲义第七章 六

程序员文章站 2022-05-31 09:16:44
...

3. 预约成功页面展示 
前面已经完成了体检预约,预约成功后页面会跳转到成功提示页面 
orderSuccess.html)并展示预约的相关信息(体检人、体检套餐、体检时间等)。 
3.1 页面调整 
提供orderSuccess.html页面,展示预约成功后相关信息

<div class="info‐title">
<span class="name">体检预约成功</span>
</div>
<div class="notice‐item">
<div class="item‐title">预约信息</div>
<div class="item‐content">
<p>体检人:{{orderInfo.member}}</p>
<p>体检套餐:{{orderInfo.setmeal}}</p>
<p>体检日期:{{orderInfo.orderDate}}</p>
<p>预约类型:{{orderInfo.orderType}}</p>
</div>
</div>
<script>
//从请求URL根据参数名获取对应值,orderId为预约id
var id = getUrlParam("orderId");
</script>
<script>
var vue = new Vue({
el:'#app',
data:{
orderInfo:{}
},
mounted(){
axios.post("/order/findById.do?id=" + id).then((response) => {
this.orderInfo = response.data.data;
});
}
});
</script>