Teng's blog
  • Project-尚医通
Shetengteng
2021-12-11

20.前台系统-首页

# 页面效果

页面分为头部组件，中间页面组件，底部组件三个部分

# 添加静态资源

将静态资源

下面的css、images文件夹添加到assets目录

# 定义布局

# 提取头部组件

创建layouts/my-header.vue文件

<template>
  <div class="header-container">
    <div class="wrapper">
      <!-- logo -->
      <div class="left-wrapper v-link selected">
        <img style="width: 50px" width="50" height="50" src="~assets/images/logo.png">
        <span class="text">尚医通 预约挂号统一平台</span>
      </div>
      <!-- 搜索框 -->
      <div class="search-wrapper">
        <div class="hospital-search animation-show">
          <el-autocomplete class="search-input small" prefix-icon="el-icon-search"
                           v-model="state" :fetch-suggestions="querySearchAsync"
                           placeholder="点击输入医院名称" @select="handleSelect">
            <span slot="suffix" class="search-btn v-link highlight clickable selected">搜索</span>
          </el-autocomplete>
        </div>
      </div>
      <!-- 右侧 -->
      <div class="right-wrapper">
        <span class="v-link clickable">帮助中心</span>
        <!--        <el-dropdown >-->
        <!--              <span class="el-dropdown-link">-->
        <!--                晴天<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
        <!--              </span>-->
        <!--            <el-dropdown-menu class="user-name-wrapper" slot="dropdown">-->
        <!--                <el-dropdown-item>挂号订单</el-dropdown-item>-->
        <!--                <el-dropdown-item>就诊人管理</el-dropdown-item>-->
        <!--                <el-dropdown-item divided>退出登录</el-dropdown-item>-->
        <!--            </el-dropdown-menu>-->
        <!--        </el-dropdown>-->
        <span class="v-link clickable" @click="dialogUserFormVisible = true">登录/注册</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      state: ''
    }
  },
  methods: {
    querySearchAsync() {
    },
    handleSelect() {
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

# 提取尾部组件

创建layouts/my-footer.vue文件

<template>
  <div class="footer-container">
    <div class="wrapper">
      <div><span class="record">京ICP备xxxxxx号</span><span
        class="phone">电话挂号010-xxxx</span></div>
      <div class="right"><span
        class="v-link clickable"> 联系我们 </span><span
        class="v-link clickable"> 合作伙伴 </span><span
        class="v-link clickable"> 用户协议 </span><span
        class="v-link clickable"> 隐私协议 </span></div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {}
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 修改默认布局引入头尾组件

修改layouts/default.vue文件，引入头部和尾部组件，<nuxt/> 是pages文件夹中的页面组件进行渲染所用

<template>
  <div class="app-container">
    <div id="main">
      <!-- 公共头 -->
      <my-header/>
      <div class="main-container">
        <el-scrollbar class='page-component__scroll'>
          <!-- 内容区域 -->
          <nuxt/>
        </el-scrollbar>
      </div>
      <!-- 公共底 -->
      <my-footer/>
    </div>
  </div>
</template>
<script>
// 引入样式
import '~/assets/css/app.css'
import '~/assets/css/chunk.css'
import '~/assets/css/iconfont.css'
import '~/assets/css/main.css'

// 引入组件
import myheader from './my-header'
import myfooter from './my-footer'

export default {
  components: {
    'my-header': myheader,
    'my-footer': myfooter
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

# 测试

启动项目：npm run dev

访问项目：http://localhost:3000/

# 首页引入

修改pages/index.vue文件，当前该页面是静态数据，后期需要调用接口填充

<template>
  <div class="home page-component">
    <el-carousel indicator-position="outside">
      <el-carousel-item v-for="item in 2" :key="item">
        <img src="~assets/images/web-banner1.png" alt="">
      </el-carousel-item>
    </el-carousel>
    <!-- 搜索 -->
    <div class="search-container">
      <div class="search-wrapper">
        <div class="hospital-search">
          <el-autocomplete class="search-input" prefix-icon="el-icon-search" v-model="state"
                           :fetch-suggestions="querySearchAsync" placeholder="点击输入医院名称"
                           @select="handleSelect">
            <span slot="suffix" class="search-btn v-link highlight clickable selected">搜索</span>
          </el-autocomplete>
        </div>
      </div>
    </div>
    <!-- bottom -->
    <div class="bottom">
      <div class="left">
        <div class="home-filter-wrapper">
          <div class="title">医院</div>
          <div>
            <div class="filter-wrapper">
              <span class="label">等级：</span>
              <div class="condition-wrapper">
                <span class="item v-link highlight clickable selected">全部 </span>
                <span class="item v-link clickable">三级医院 </span>
                <span class="item v-link clickable">二级医院 </span>
                <span class="item v-link clickable">一级医院 </span></div>
            </div>
            <div class="filter-wrapper">
              <span class="label">地区：</span>
              <div class="condition-wrapper">
                <span class="item v-link highlight clickable selected">全部 </span>
                <span class="item v-link clickable">东城区 </span>
                <span class="item v-link clickable">西城区 </span>
                <span class="item v-link clickable">朝阳区 </span>
                <span class="item v-link clickable">丰台区 </span>
                <span class="item v-link clickable">石景山区 </span>
                <span class="item v-link clickable">海淀区 </span>
                <span class="item v-link clickable">门头沟区 </span>
                <span class="item v-link clickable">房山区 </span>
                <span class="item v-link clickable">通州区 </span>
                <span class="item v-link clickable">顺义区 </span>
                <span class="item v-link clickable">昌平区 </span>
                <span class="item v-link clickable">大兴区 </span>
                <span class="item v-link clickable">怀柔区 </span>
                <span class="item v-link clickable">平谷区 </span>
                <span class="item v-link clickable">密云区 </span>
                <span class="item v-link clickable">延庆区 </span>
              </div>
            </div>
          </div>
        </div>
        <div class="v-scroll-list hospital-list">
          <div class="v-card clickable list-item">
            <div class="">
              <div
                class="hospital-list-item hos-item" index="0">
                <div class="wrapper">
                  <div class="hospital-title"> 北京协和医院
                  </div>
                  <div class="bottom-container">
                    <div class="icon-wrapper"><span class="iconfont"></span>三级甲等</div>
                    <div class="icon-wrapper"><span class="iconfont"></span>每天8:30放号</div>
                  </div>
                </div>
                <img src="images/23176337663806575.png" alt="北京协和医院" class="hospital-img">
              </div>
            </div>
          </div>
          <div class="v-card clickable list-item space">
            <div class="">
              <div class="hospital-list-item hos-item" index="0">
                <div class="wrapper">
                  <div class="hospital-title">北京协和医院</div>
                  <div class="bottom-container">
                    <div class="icon-wrapper"><span class="iconfont"></span>三级甲等</div>
                    <div class="icon-wrapper"><span class="iconfont"></span>每天8:30放号</div>
                  </div>
                </div>
                <img src="images/23176337663806575.png" alt="北京协和医院" class="hospital-img">
              </div>
            </div>
          </div>
          <div class="v-card clickable list-item">
            <div class="">
              <div class="hospital-list-item hos-item" index="0">
                <div class="wrapper">
                  <div class="hospital-title">北京协和医院</div>
                  <div class="bottom-container">
                    <div class="icon-wrapper"><span class="iconfont"></span>三级甲等</div>
                    <div class="icon-wrapper"><span class="iconfont"></span>每天8:30放号</div>
                  </div>
                </div>
                <img src="images/23176337663806575.png" alt="北京协和医院" class="hospital-img">
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="common-dept">
          <div class="header-wrapper">
            <div class="title">常见科室</div>
            <div class="all-wrapper"><span>全部</span><span class="iconfont icon"></span></div>
          </div>
          <div class="content-wrapper">
            <span class="item v-link clickable dark">神经内科 </span>
            <span class="item v-link clickable dark">消化内科 </span>
            <span class="item v-link clickable dark">呼吸内科 </span>
            <span class="item v-link clickable dark">内科 </span>
            <span class="item v-link clickable dark">神经外科 </span>
            <span class="item v-link clickable dark">妇科 </span>
            <span class="item v-link clickable dark"> 产科 </span>
            <span class="item v-link clickable dark">儿科 </span>
          </div>
        </div>
        <div class="space">
          <div class="header-wrapper">
            <div class="title-wrapper">
              <div class="icon-wrapper"><span class="iconfont title-icon"></span></div>
              <span class="title">平台公告</span>
            </div>
            <div class="all-wrapper"><span>全部</span><span class="iconfont icon"></span></div>
          </div>
          <div class="content-wrapper">
            <div class="notice-wrapper">
              <div class="point"></div>
              <span class="notice v-link clickable dark">关于延长北京大学国际医院放假的通知 </span>
            </div>
            <div class="notice-wrapper">
              <div class="point"></div>
              <span class="notice v-link clickable dark">北京中医药大学东方医院部分科室医生门诊医 </span>
            </div>
            <div class="notice-wrapper">
              <div class="point"></div>
              <span class="notice v-link clickable dark"> 武警总医院号源暂停更新通知 </span>
            </div>
          </div>
        </div>
        <div class="suspend-notice-list space">
          <div class="header-wrapper">
            <div class="title-wrapper">
              <div class="icon-wrapper">
                <span class="iconfont title-icon"></span>
              </div>
              <span class="title">停诊公告</span>
            </div>
            <div class="all-wrapper">
              <span>全部</span>
              <span class="iconfont icon"></span>
            </div>
          </div>
          <div class="content-wrapper">
            <div class="notice-wrapper">
              <div class="point"></div>
              <span class="notice v-link clickable dark">中国人民解放军总医院第六医学中心(原海军总医院)呼吸内科门诊停诊公告 </span>
            </div>
            <div class="notice-wrapper">
              <div class="point"></div>
              <span class="notice v-link clickable dark">首都医科大学附属北京潞河医院老年医学科门诊停诊公告 </span>
            </div>
            <div class="notice-wrapper">
              <div class="point"></div>
              <span class="notice v-link clickable dark">中日友好医院中西医结合心内科门诊停诊公告 </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179

# 首页数据分析

  • 获取医院等级（根据数据字典编码获取）

  • 获取地区（根据数据字典编码获取）

  • 医院分页列表

  • 根据医院名称关键字搜索医院列表

# 首页数据api接口实现

# service-hosp医院分页列表

# 添加controller

在service-hosp中添加如下controller

package com.stt.yygh.hosp.controller;

import com.stt.yygh.common.result.Result;
import com.stt.yygh.hosp.service.HospitalService;
import com.stt.yygh.model.hosp.Hospital;
import com.stt.yygh.vo.hosp.HospitalQueryVo;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@Api(tags = "医院管理接口")
@RestController
@RequestMapping("/api/hosp/hospital")
public class HospitalApiController {

    @Autowired
    private HospitalService service;

    @ApiOperation(value = "获取分页列表")
    @GetMapping("{page}/{limit}")
    public Result index(@PathVariable Integer page,
                        @PathVariable Integer limit,
                        HospitalQueryVo hospitalQueryVo) {
        //显示上线的医院
        hospitalQueryVo.setStatus(1);
        Page<Hospital> pageModel = service.selectPage(page, limit, hospitalQueryVo);
        return Result.ok(pageModel);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

# service-hosp医院名称关键字搜索

# 修改controller

修改service-hosp的HospitalApiController 类

package com.stt.yygh.hosp.controller;

import com.stt.yygh.common.result.Result;
import com.stt.yygh.hosp.service.HospitalService;
import com.stt.yygh.model.hosp.Hospital;
import com.stt.yygh.vo.hosp.HospitalQueryVo;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import io.swagger.annotations.ApiParam;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@Api(tags = "医院管理接口")
@RestController
@RequestMapping("/api/hosp/hospital")
public class HospitalApiController {

    @Autowired
    private HospitalService service;
...
    @ApiOperation(value = "根据医院名称获取医院列表")
    @GetMapping("findByHosname/{hosname}")
    public Result findByHosname(@ApiParam(name = "hosname", value = "医院名称", required = true)
                                @PathVariable String hosname) {
        List<Hospital> re = service.findByHosname(hosname);
        return Result.ok(re);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

# 添加service方法与实现

package com.stt.yygh.hosp.service;
...
public interface HospitalService {
    ...
    List<Hospital> findByHosname(String hosname);
}
1
2
3
4
5
6

添加实现

package com.stt.yygh.hosp.service.impl;
...
@Slf4j
@Service
public class HospitalServiceImpl implements HospitalService {

    @Autowired
    private HospitalRepository repository;
...
    @Override
    public List<Hospital> findByHosname(String hosname) {
        return repository.findHospitalByHosnameLike(hosname);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 添加repository接口

修改service-hosp的HospitalRepository 类 添加方法

package com.stt.yygh.hosp.repository;
...
@Repository
public interface HospitalRepository extends MongoRepository<Hospital, String> { 
...
    List<Hospital> findHospitalByHosnameLike(String hosname);
}
1
2
3
4
5
6
7

# 首页前端实现

# 添加api请求

访问医院，创建api文件夹，创建/api/hosp/hosp.js

import request from '@/utils/request'

const api_name = `/api/hosp/hospital`

export function getPageList(page, limit, searchObj) {
  return request({
    url: `${api_name}/${page}/${limit}`,
    method: 'get',
    params: searchObj
  })
}

export function getByHosname(hosname) {
  return request({
    url: `${api_name}/findByHosname/${hosname}`,
    method: 'get'
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

访问字典，创建/api/cmn/dict.js

import request from '@/utils/request'

const api_name = '/admin/cmn/dict'

export function findByDictCode(dictCode) {
  return request({
    url: `${api_name}/findByDictCode/${dictCode}`,
    method: 'get'
  })
}

export function findByParentId(parentId) {
  return request({
    url: `${api_name}/findChildData/${parentId}`,
    method: 'get'
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 修改index.vue组件

修改pages/index.vue组件 注意：asyncData在Nuxt中的用法

<template>
  <div class="home page-component">
...
    <!-- 搜索 -->
    <div class="search-container">
      <div class="search-wrapper">
        <div class="hospital-search">
          <el-autocomplete class="search-input" prefix-icon="el-icon-search" v-model="state"
                           :fetch-suggestions="querySearchAsync" placeholder="点击输入医院名称"
                           @select="handleSelect">
            <span slot="suffix" class="search-btn v-link highlight clickable selected">搜索</span>
          </el-autocomplete>
        </div>
      </div>
    </div>
    <!-- bottom -->
    <div class="bottom">
      <div class="left">
        <div class="home-filter-wrapper">
          <div class="title">医院</div>
          <div>
            <div class="filter-wrapper">
              <span class="label">等级：</span>
              <div class="condition-wrapper">
                <span class="item v-link clickable" 
                      :class="hostypeActiveIndex === index ? 'highlight selected':''"
                      v-for="(item,index) in hostypeList" @click="hostypeSelect(item.value,index)"
                      :key="index">
                  {{ item.name }}
                </span>
              </div>
            </div>
            <div class="filter-wrapper">
              <span class="label">地区：</span>
              <div class="condition-wrapper">
                 <span class="item v-link clickable" 
                       :class="provinceActiveIndex === index ? 'highlight selected':''"
                       v-for="(item,index) in districtList" @click="districtSelect(item.value,index)"
                       :key="index">
                  {{ item.name }}
                </span>
              </div>
            </div>
          </div>
        </div>
        <div class="v-scroll-list hospital-list">
          <div class="v-card clickable list-item space"
               v-for="(item,index) in list" @click="show(item.hoscode)" :key="index">
            <div class="">
              <div class="hospital-list-item hos-item" :index="index">
                <div class="wrapper">
                  <div class="hospital-title">{{ item.hosname }}</div>
                  <div class="bottom-container">
                    <div class="icon-wrapper">
                        <span class="iconfont"></span>{{ item.param.hostypeString }}</div>
                    <div class="icon-wrapper">
                        <span class="iconfont"></span>每天{{ item.bookingRule.releaseTime }}放号
                    </div>
                  </div>
                </div>
                <img :src="imageBase64(item)" :alt="item.hosname" class="hospital-img">
              </div>
            </div>
          </div>

        </div>
      </div>
      <div class="right">
 ...
  </div>
</template>
<script>

import { findByDictCode } from '~/api/cmn/dict'
import { getByHosname, getPageList } from '~/api/hosp/hosp'

export default {
  // nuxt 对vue的增强，在渲染页面之前调用
  asyncData({ params, error }) {
    return getPageList(1, 10, null).then(res => {
      return {
        list: res.data.content, // 等价于 data 中有list
        pages: res.data.totalPages // 等价于 data 中有 pages
      }
    })
  },
  data() {
    return {
      state: '',
      searchObj: {},
      page: 1,
      limit: 10,

      hosname: '', //医院名称
      hostypeList: [], //医院等级集合
      districtList: [], //地区集合

      hostypeActiveIndex: 0,
      provinceActiveIndex: 0
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      //查询医院等级列表
      findByDictCode('Hostype').then(res => {
          //向hostypeList添加 【全部】
          //把接口返回数据，添加到hostypeList
          this.hostypeList = [{ 'name': '全部', 'value': '' }, ...res.data]
        })
      //查询地区数据
      findByDictCode('Beijing').then(res => {
          this.districtList = [{ 'name': '全部', 'value': '' }, ...res.data]
        })
    },
    //查询医院列表
    getList() {
      getPageList(this.page, this.limit, this.searchObj)
.then(res => {
          this.list = [...res.data.content]
          this.page = res.data.totalPages
        })
    },
    //根据医院等级查询
    hostypeSelect(hostype, index) {
      //准备数据
      this.list = []
      this.page = 1
      this.hostypeActiveIndex = index
      this.searchObj.hostype = hostype
      //调用查询医院列表方法
      this.getList()
    },
    //根据地区查询医院
    districtSelect(districtCode, index) {
      this.list = []
      this.page = 1
      this.provinceActiveIndex = index
      this.searchObj.districtCode = districtCode
      this.getList()
    },
    //在输入框输入值，弹出下拉框，显示相关内容
    querySearchAsync(queryString, cb) {
      this.searchObj = []
      if (queryString === '') return
      getByHosname(queryString).then(res => {
        for (let i = 0, len = res.data.length; i < len; i++) {
          res.data[i].value = res.data[i].hosname
        }
        cb(res.data)
      })
    },
    imageBase64(item) {
      return 'data:image/jpeg;base64,' + item.logoData
    },
    //在下拉框选择某一个内容，执行下面方法，跳转到详情页面中
    handleSelect(item) {
      window.location.href = '/hospital/' + item.hoscode
    },
    //点击某个医院名称，跳转到详情页面中
    show(hoscode) {
      window.location.href = '/hospital/' + hoscode
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
Last Updated: 2022/01/16, 11:29:51
19.前台系统-搭建前端环境
21.前台系统-医院详情页

← 21.前台系统-医院详情页→

Theme by Vdoing | Copyright © 2021-2022 Shetengteng | MIT License