套餐详情页面动态展示

前面我们已经完成了体检套餐列表页面动态展示，点击其中任意一个套餐则跳转到对应的套餐详情页面（/pages/setmeal_detail.html），并且会携带此套餐的id作为参数提交。

请求路径格式：http://localhost/pages/setmeal_detail.html?id=10

在套餐详情页面需要展示当前套餐的信息（包括图片、套餐名称、套餐介绍、适用性别、适用年龄）、此套餐包含的检查组信息、检查组包含的检查项信息等。

完善页面

获取请求参数中套餐id

在页面中已经引入了healthmobile.js文件，此文件中已经封装了getUrlParam方法可以根据URL请求路径中的参数名获取对应的值

function getUrlParam(paraName) {
    var url = document.location.toString();
    //alert(url);
    var arrObj = url.split("?");
    if (arrObj.length > 1) {
        var arrPara = arrObj[1].split("&");
        var arr;
        for (var i = 0; i < arrPara.length; i++) {
            arr = arrPara[i].split("=");
            if (arr != null && arr[0] == paraName) {
                return arr[1];
            }
        }
        return "";
    }
    else {
        return "";
    }
}

在setmeal_detail.html中调用上面定义的方法获取套餐id的值

<script>
  var id = getUrlParam("id");
</script>

获取套餐详细信息

<script>
    var vue = new Vue({
        el:'#app',
        data:{
            imgUrl:null,//套餐对应的图片链接
            setmeal:{}
        },
        mounted(){
            axios.post("/setmeal/findById.do?id=" + id).then((response) => {
                if(response.data.flag){
                    this.setmeal = response.data.data;
                    this.imgUrl = 'http://pqjroc654.bkt.clouddn.com/' + this.setmeal.img;
                }
            });
        }
    });
</script>

展示套餐信息

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

后台代码

Controller

在SetmealController中提供findById方法

//根据id查询套餐信息
@RequestMapping("/findById")
public Result findById(int id){
  try{
    Setmeal setmeal = setmealService.findById(id);
    return new Result(true,MessageConstant.QUERY_SETMEAL_SUCCESS,setmeal);
  }catch (Exception e){
    e.printStackTrace();
    return new Result(false,MessageConstant.QUERY_SETMEAL_FAIL);
  }
}

服务接口

在SetmealService服务接口中提供findById方法

public Setmeal findById(int id);

服务实现类

在SetmealServiceImpl服务实现类中实现findById方法

public Setmeal findById(int id) {
  return setmealDao.findById(id);
}

Dao接口

在SetmealDao接口中提供findById方法

public Setmeal findById(int id);

Mapper映射文件

此处会使用mybatis提供的关联查询，在根据id查询套餐时，同时将此套餐包含的检查组都查询出来，并且将检查组包含的检查项都查询出来。

SetmealDao.xml文件：

<resultMap type="com.itheima.pojo.Setmeal" id="baseResultMap">
  <id column="id" property="id"/>
  <result column="name" property="name"/>
  <result column="code" property="code"/>
  <result column="helpCode" property="helpCode"/>
  <result column="sex" property="sex"/>
  <result column="age" property="age"/>
  <result column="price" property="price"/>
  <result column="remark" property="remark"/>
  <result column="attention" property="attention"/>
  <result column="img" property="img"/>
</resultMap>
<resultMap type="com.itheima.pojo.Setmeal" 
           id="findByIdResultMap" 
           extends="baseResultMap">
  <collection property="checkGroups" 
              javaType="ArrayList"
              ofType="com.itheima.pojo.CheckGroup" 
              column="id"
              select="com.itheima.dao.CheckGroupDao.findCheckGroupById">
  </collection>
</resultMap>
<select id="findById" resultMap="findByIdResultMap">
  select * from t_setmeal  where id=#{id}
</select>

CheckGroupDao.xml文件：

<resultMap type="com.itheima.pojo.CheckGroup" id="baseResultMap">
  <id column="id" property="id"/>
  <result column="name" property="name"/>
  <result column="code" property="code"/>
  <result column="helpCode" property="helpCode"/>
  <result column="sex" property="sex"/>
  <result column="remark" property="remark"/>
  <result column="attention" property="attention"/>
</resultMap>
<resultMap type="com.itheima.pojo.CheckGroup" 
           id="findByIdResultMap" 
           extends="baseResultMap">
  <collection property="checkItems" 
              javaType="ArrayList"
              ofType="com.itheima.pojo.CheckItem" 
              column="id"
              select="com.itheima.dao.CheckItemDao.findCheckItemById">
  </collection>
</resultMap>
<!--根据套餐id查询检查项信息-->
<select id="findCheckGroupById" resultMap="findByIdResultMap">
  select * from t_checkgroup  
    where id
    in (select checkgroup_id from t_setmeal_checkgroup where setmeal_id=#{id})
</select>

CheckItemDao.xml文件：

<!--根据检查组id查询检查项信息-->
<select id="findCheckItemById" resultType="com.itheima.pojo.CheckItem">
  select * from t_checkitem  
    where id
    in (select checkitem_id from t_checkgroup_checkitem where checkgroup_id=#{id})
</select>