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

「爱情、让人受尽委屈。」 2021-12-23 13:21 334阅读 0赞

## 分析： ##

> 前面我们已经完成了体检套餐列表页面动态展示，点击其中任意一个套餐则跳转到对应的套餐详情页面（/pages/setmeal\_detail.html），并且会携带此套餐的id作为参数提交。
> 
> 请求路径格式：[http://localhost/pages/setmeal\_detail.html?id=10][http_localhost_pages_setmeal_detail.html_id_10]
> 
> 在套餐详情页面需要展示当前套餐的信息（包括图片、套餐名称、套餐介绍、适用性别、适用年龄）、此套餐包含的检查组信息、检查组包含的检查项信息等。

## 前端页面（完善页面） ##

### 1.1获取请求参数中套餐id ###

> 封装getUrlParam方法

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70][]

### 1.2获取套餐详细信息 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 1][]

### 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方法

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 2][]

### 1.2Mapper映射文件 ###

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 4][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 5][]

[http_localhost_pages_setmeal_detail.html_id_10]: http://localhost/pages/setmeal_detail.html?id=10
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70]: /images/20211223/9ab12db69ccd4104bb42db7b5699b4ff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 1]: /images/20211223/c29c2b9c1bb34a5f8f52dc805bfb7e70.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 2]: /images/20211223/4ece28eae03945f6b9af931d344bc274.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 3]: /images/20211223/08f25e81a8c549bba7e4422f1e4036a0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 4]: /images/20211223/715ce9ea84834150859370e19c33c496.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 5]: /images/20211223/02dde7e3cd664bad98d0f6bffaf808ed.png