分析:
前面我们已经完成了体检套餐列表页面动态展示,点击其中任意一个套餐则跳转到对应的套餐详情页面(/pages/setmeal_detail.html),并且会携带此套餐的id作为参数提交。
请求路径格式:http://localhost/pages/setmeal_detail.html?id=10
在套餐详情页面需要展示当前套餐的信息(包括图片、套餐名称、套餐介绍、适用性别、适用年龄)、此套餐包含的检查组信息、检查组包含的检查项信息等。
前端页面(完善页面)
1.1获取请求参数中套餐id
封装getUrlParam方法
1.2获取套餐详细信息
1.3展示套餐信息
<div class="contentBox">
<div class="card">
<div class="project-img">
<img :src="imgUrl" 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>
<div class="table-listbox">
<div class="box-title">
<i class="icon-zhen"><span class="path1"></span><span class="path2"></span></i>
<span>套餐详情</span>
</div>
<div class="box-table">
<div class="table-title">
<div class="tit-item flex2">项目名称</div>
<div class="tit-item flex3">项目内容</div>
<div class="tit-item flex3">项目解读</div>
</div>
<div class="table-content">
<ul class="table-list">
<li class="table-item" v-for="checkgroup in setmeal.checkGroups">
<div class="item flex2">{{checkgroup.name}}</div>
<div class="item flex3">
<label v-for="checkitem in checkgroup.checkItems">
{{checkitem.name}}
</label>
</div>
<div class="item flex3">{{checkgroup.remark}}</div>
</li>
</ul>
</div>
<div class="box-button">
<a @click="toOrderInfo()" class="order-btn">立即预约</a>
</div>
</div>
</div>
</div>
后台代码
1.1Controller控制器
在SetmealController中提供findById方法
1.2Mapper映射文件
此处会使用mybatis提供的关联查询,在根据id查询套餐时,同时将此套餐包含的检查组都查询出来,并且将检查组包含的检查项都查询出来。