ssm项目笔记（九）移动端 套餐详情页面动态展示

分析：

前面我们已经完成了体检套餐列表页面动态展示，点击其中任意一个套餐则跳转到对应的套餐详情页面（/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查询套餐时，同时将此套餐包含的检查组都查询出来，并且将检查组包含的检查项都查询出来。