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

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

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

 <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>

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

<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> 

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

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

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

 <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>

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

<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>