尚医通 (三十) --------- 前端 (非逆向) 搭建与首页

悠悠 2024-03-31 10:28 24阅读 0赞

#### 目录 ####

*  一、尚医通平台前端搭建
 *   *  1. 服务端渲染
     *  2. NUXT 环境初始化
     *  3. 封装 axios
 *  二、首页搭建
 *   *  1. 公共处理
     *  2. 首页引入
     *  3. 首页数据 api 接口
     *  4. 首页前端实现
     *  2. 添加组件
 *  三、医院详情
 *   *  1. 预约挂号
     *   *  api 接口
         *  预约挂号前端
     *  2. 医院详情
     *  3. 预约须知

--------------------

## 一、尚医通平台前端搭建 ##

### 1. 服务端渲染 ###

**A、什么是服务端渲染**

服务端渲染又称 SSR (Server Side Render) 是在服务端完成页面的内容，而不是在客户端通过 AJAX 获取数据。

服务器端渲染的优势主要在于：更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。

如果你的应用程序初始展示 loading 菊花图，然后通过 Ajax 获取内容，抓取工具并不会等待异步完成后再进行页面内容的抓取。也就是说，如果 SEO 对你的站点至关重要，而你的页面又是异步获取内容，则你可能需要服务器端渲染(SSR)解决此问题。

另外，使用服务器端渲染，我们可以获得更快的内容到达时间 (time-to-content)，无需等待所有的 JavaScript 都完成下载并执行，产生更好的用户体验，对于那些内容到达时间 (time-to-content) 与转化率直接相关的应用程序而言，服务器端渲染 (SSR) 至关重要。

**B、什么是 NUXT**

Nuxt.js 是一个基于 Vue.js 的轻量级应用框架,可用来创建服务端渲染 (SSR) 应用,也可充当静态站点引擎生成静态站点应用,具有优雅的代码结构分层和热加载等特性。

官网网站：[https://zh.nuxtjs.org/][https_zh.nuxtjs.org]

### 2. NUXT 环境初始化 ###

**A、下载压缩包**

[https://github.com/nuxt-community/starter-template/archive/master.zip][https_github.com_nuxt-community_starter-template_archive_master.zip]

**B、解压**

![在这里插入图片描述][cbcd3161850c47808846fa58418d3bd5.png]

在 yygh-parent 目录中新建 yygh-site 目录，将 template 中的内容复制到此目录中

**C、修改 package.json**

name、description、author (必须修改这里，否则项目无法安装)
    {
        
    	"name": "yygh-site",
    	"version": "1.0.0",
    	"description": "尚医通",
    	"author": "fancy",
    	"private": true,
    	"scripts": {
        
    		"dev": "nuxt",
    		"build": "nuxt build",
    		"start": "nuxt start",
    		"generate": "nuxt generate",
    		"lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    		"precommit": "npm run lint"
    	},
    	...
    }

![在这里插入图片描述][c1db3567e5c84d0198231e03de3faf78.png]

**D、修改 nuxt.config.js**

修改

title: '{
        { name }}', content: '{
        {escape description }}'

这里的设置最后会显示在页面标题栏和meta数据中

module.exports = {
        
      /*
      ** Headers of the page
      */
      head: {
        
        title: 'yygh-site',
        meta: [
          {
         charset: 'utf-8' },
          {
         name: 'viewport', content: 'width=device-width, initial-scale=1' },
          {
         hid: 'description', name: 'description', content: '尚医通' }
        ],
    …

![在这里插入图片描述][2e2c40be86b3451eb3cfba9cc055b73b.png]

**E、终端中进入项目目录安装依赖**

npm install

![在这里插入图片描述][42714cbcfebe467dba1dfbc2b450c311.png]

**F、引入 element-ui**

下载 element-ui

npm  install  element-ui

![在这里插入图片描述][656bccf0139647b4b984e9287b33091e.png]

在 plugins 文件夹下创建 myPlugin.js 文件

![在这里插入图片描述][3bceb4a12af140519deda009974e1441.png]

在 myPlugin.js 文件引入 element-ui

import Vue from 'vue'
    import ElementUI from 'element-ui' //element-ui的全部组件
    import 'element-ui/lib/theme-chalk/index.css'//element-ui的css
    Vue.use(ElementUI) //使用elementUI

![在这里插入图片描述][71a81e4bb4734477b9752e963c5af7b3.png]

在 nuxt.config.js 文件中使用 myPlugin.js

在 build 下面添加内容：

plugins: [
       {
         src: '~/plugins/myPlugin.js', ssr: false }
    ]

**G、测试运行**

npm run dev

访问项目：[http://localhost:3000/][http_localhost_3000]

**H、NUXT目录结构**

*  资源目录 assets  
    用于组织未编译的静态资源如 LESS、SASS 或 JavaScript。
 *  组件目录 components  
    用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展增强该目录下 Vue.js 组件，即这些组件不会像页面组件那样有 asyncData 方法的特性。
 *  布局目录 layouts  
    用于组织应用的布局组件。
 *  页面目录 pages  
    用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置。
 *  插件目录 plugins  
    用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。
 *  nuxt.config.js 文件  
    nuxt.config.js 文件用于组织 Nuxt.js 应用的个性化配置，以便覆盖默认配置。

### 3. 封装 axios ###

**A、安装 axios**

执行安装命令

npm install axios

**B、封装 axios**

创建 utils 文件夹，utils 下创建 request.js

import axios from 'axios'
    import {
         MessageBox, Message } from 'element-ui'
    // 创建axios实例
    const service = axios.create({
        
        baseURL: 'http://localhost',
        timeout: 15000 // 请求超时时间
    })
    // http request 拦截器
    service.interceptors.request.use(
        config => {
        
        // token 先不处理，后续使用时在完善
        return config
    },
      err => {
        
        return Promise.reject(err)
    })
    // http response 拦截器
    service.interceptors.response.use(
        response => {
        
            if (response.data.code !== 200) {
        
                Message({
        
                    message: response.data.message,
                    type: 'error',
                    duration: 5 * 1000
                })
                return Promise.reject(response.data)
            } else {
        
                return response.data
            }
        },
        error => {
        
            return Promise.reject(error.response)
    })
    export default service

## 二、首页搭建 ##

### 1. 公共处理 ###

**① 添加静态资源**

将静态资源下面的 css、images 文件夹添加到 assets 目录，如图：

![在这里插入图片描述][2769436182004d64af7bc79a020f56f7.png]

**② 定义布局**

**A、修改默认布局**

参考静态资源文件首页，我们可以把页头和页尾提取出来，形成布局页。

在 layouts 目录下修改默认布局文件default.vue，将主内容区域的内容替换成 `<nuxt />`

修改 layouts/default.vue 文件

<template>
      <div class="app-container">
        <div id="main">
          
          <myheader/>
          <div class="main-container">
            <el-scrollbar class='page-component__scroll'>
            
            <nuxt/>
            </el-scrollbar>
          </div>
            
          <myfooter/>
        </div>
      </div>
    </template>
    <script>
    import '~/assets/css/app.css'
    import '~/assets/css/chunk.css'
    import '~/assets/css/iconfont.css'
    import '~/assets/css/main.css'
    export default {
          
    }
    </script>

**B、提取头文件**

创建 layouts/myheader.vue 文件

<template>
        <div class="header-container">
            <div class="wrapper">
            
                <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>
            
            
            
            
            
            
            
            
            
            
            <span class="v-link clickable" @click="dialogUserFormVisible = true">登录/注册</span>
            </div>
            </div>
        </div>
    </template>
    <script>
    export default {
          
    }
    </script>

**C、提取尾文件**

创建 layouts/myfooter.vue 文件

<template>
        <div class="footer-container">
            <div class="wrapper">
                <div><span class="record">京ICP备13018369号</span><span
                class="phone">电话挂号010-56253825</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 {
          
    }
    </script>

**D、默认布局引入头尾文件**

修改 layouts/default.vue 文件

启动项目：`npm run dev`  
访问项目：`http://localhost:3000/`

### 2. 首页引入 ###

**① 引入首页静态页面**  
修改 pages/inde.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>
        
        <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、根据医院名称关键字搜索医院列表

### 3. 首页数据 api 接口 ###

**① 医院分页列表**

**A、service 接口与实现**

在管理平台医院分页列表时已经提供，目前我们可以直接使用

**B、添加 controller 接口**

@Api(tags = "医院管理接口")
    @RestController
    @RequestMapping("/api/hosp/hospital")
    public class HospitalApiController {
        
    
        @Autowired
        private HospitalService hospitalService;
    
        @ApiOperation(value = "获取分页列表")
        @GetMapping("{page}/{limit}")
        public Result index(
                @PathVariable Integer page,
                @PathVariable Integer limit,
                HospitalQueryVo hospitalQueryVo) {
        
            //显示上线的医院
            //hospitalQueryVo.setStatus(1);
            Page<Hospital> pageModel = hospitalService.selectHospPage(page, limit, hospitalQueryVo);
            return Result.ok(pageModel);
        }
    }

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

**A、service接口与实现**

在 HospitalService 类添加接口

/**
     * 根据医院名称获取医院列表
    */
    List<Hospital> findByHosname(String hosname);

在 HospitalService 类添加接口实现

@Override
    public List<Hospital> findByHosname(String hosname) {
        
        return hospitalRepository.findHospitalByHosnameLike(hosname);
    }

**B、repository 添加接口**

在 HospitalRepository 类添加接口

List<Hospital> findHospitalByHosnameLike(String hosname);

**C、添加 controller 接口**

在 HospitalApiController 类添加方法

@ApiOperation(value = "根据医院名称获取医院列表")
    @GetMapping("findByHosname/{hosname}")
    public Result findByHosname(
            @ApiParam(name = "hosname", value = "医院名称", required = true)
            @PathVariable String hosname) {
        
        return Result.ok(hospitalService.findByHosname(hosname));
    }

### 4. 首页前端实现 ###

**① 封装 api 请求**

创建 api 文件夹，创建 /api/hosp/hospital.js

import request from '@/utils/request'
    
    const api_name = `/api/hosp/hospital`
    
    export default {
        
     getPageList(page, limit, searchObj) {
        
        return request({
        
            url: `${
          api_name}/${
          page}/${
          limit}`,
            method: 'get',
            params: searchObj
        })
      },
    
     getByHosname(hosname) {
        
        return request({
        
            url: `${
          api_name}/findByHosname/${
          hosname}`,
            method: 'get'
        })
      }
    }

创建 /api/cmn/dict.js

import request from '@/utils/request'
    
    const api_name = '/admin/cmn/dict'
    
    export default {
        
    	findByDictCode(dictCode) {
        
    	return request({
        
    		url: `${
          api_name}/findByDictCode/${
          dictCode}`,
    		method: 'get'
    	})
    },
    
    findByParentId(parentId) {
        
        return request({
        
            url: `${
          api_name}/findChildData/${
          parentId}`,
            method: 'get'
        })
      }
    }

### 2. 添加组件 ###

修改 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>
        
        <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 ? 'selected' : ''"
                 v-for="(item,index) in hostypeList" :key="item.id" 
                 @click="hostypeSelect(item.value, 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 ? 'selected' : ''"
              v-for="(item,index) in districtList" :key="item.id"
              @click="districtSelect(item.value, index)">{
       { item.name }}</span>
          </div>
          </div>
        </div>
        </div>
        <div class="v-scroll-list hospital-list">
          <div class="v-card clickable list-item" v-for="item in list" :key="item.id">
            <div class="">
              <div class="hospital-list-item hos-item" index="0" @click="show(item.hoscode)">
                <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="'data:image/jpeg;base64,'+item.logoData"
               :alt="item.hosname"
               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>

**③ 调用接口**

## 三、医院详情 ##

### 1. 预约挂号 ###

![在这里插入图片描述][8b4ecd71443d47fab1c7789e79ba6dcd.png]  
说明：需要获取医院信息（医院基本信息、预约信息）和科室信息

#### api 接口 ####

**① 添加service接口与实现**

在 HospitalService 类添加接口

/**
     * 医院预约挂号详情
    */
    Map<String, Object> item(String hoscode);

在 HospitalServiceImpl 类实现接口

@Autowired
    private DepartmentService departmentService;
    @Override
    public Map<String, Object> item(String hoscode) {
        
        Map<String, Object> result = new HashMap<>();
        //医院详情
        Hospital hospital = this.setHospitalHosType(this.getByHoscode(hoscode));
        result.put("hospital", hospital);
        //预约规则
        result.put("bookingRule", hospital.getBookingRule());
        //不需要重复返回
        hospital.setBookingRule(null);
        return result;
    }

**② 添加 controller 接口**

在 HospitalApiController 类添加方法

@ApiOperation(value = "获取科室列表")
    @GetMapping("department/{hoscode}")
    public Result index(
            @ApiParam(name = "hoscode", value = "医院code", required = true)
            @PathVariable String hoscode) {
        
        return Result.ok(departmentService.findTree(hoscode));
    }
    
    @ApiOperation(value = "医院预约挂号详情")
    @GetMapping("{hoscode}")
    public Result item(
            @ApiParam(name = "hoscode", value = "医院code", required = true)
            @PathVariable String hoscode) {
        
        return Result.ok(hospitalService.item(hoscode));
    }

#### 预约挂号前端 ####

**① 封装 api 请求**

在 /api/hosp.js 文件添加方法

show(hoscode) {
        
        return request({
        
            url: `${
          api_name}/${
          hoscode}`,
            method: 'get'
        })
    },
    findDepartment(hoscode) {
        
        return request({
        
            url: `${
          api_name}/department/${
          hoscode}`,
            method: 'get'
        })
    }

**② 页面布局**

创建 /pages/hospital/\_hoscode.vue组件

<template>
    	
    	<div class="nav-container page-component">
    		
    		<div class="nav left-nav">
    		<div class="nav-item selected">
    			<span class="v-link selected dark" 
    	 			:onclick="'javascript:window.location=\'/hospital/'+hospital.hoscode+'\''">预约挂号 </span>
    		</div>
    		<div class="nav-item ">
    			<span class="v-link clickable dark" :onclick="'javascript:window.location=\'/hospital/detail/'+hospital.hoscode+'\''"> 医院详情 </span>
    		</div>
    		<div class="nav-item">
    			<span class="v-link clickable dark" :onclick="'javascript:window.location=\'/hospital/notice/'+hospital.hoscode+'\''"> 预约须知 </span>
    		</div>
    		<div class="nav-item ">
    			<span class="v-link clickable dark"> 停诊信息 </span>
    		</div>
    		<div class="nav-item ">
    			<span class="v-link clickable dark"> 查询/取消 </span>
    		</div>
    	</div>
    	
    	
    	<div class="page-container">
    		<div class="hospital-home">
    		<div class="common-header">
    		<div class="title-wrapper"><span
    			class="hospital-title">{
       { hospital.hosname }}</span>
    			<div class="icon-wrapper">
    				<span class="iconfont"></span>{
       { hospital.param.hostypeString }}
    			</div>
    		</div>
    	</div>
    	<div class="info-wrapper">
    	<img class="hospital-img" :src="'data:image/jpeg;base64,'+hospital.logoData" :alt="hospital.hosname">
    	<div class="content-wrapper">
    	<div> 挂号规则</div>
    	<div class="line">
    		<div><span class="label">预约周期：</span><span>{
       { bookingRule.cycle }}天</span></div>
    		<div class="space"><span class="label">放号时间：</span><span>{
       { bookingRule.releaseTime }}</span></div>
    		<div class="space"><span class="label">停挂时间：</span><span>{
       { bookingRule.stopTime }}</span></div>
    		</div>
    		<div class="line"><span class="label">退号时间：</span>
    		<span v-if="bookingRule.quitDay == -1">就诊前一工作日{
       { bookingRule.quitTime }}前取消</span>
    		<span v-if="bookingRule.quitDay == 0">就诊前当天{
       { bookingRule.quitTime }}前取消</span>
    	</div>
    	<div style="margin-top:20px"> 医院预约规则</div>
    	<div class="rule-wrapper">
    		<ol>
    			<li v-for="item in bookingRule.rule" :key="item">{
       { item }}</li>
    		</ol>
    	</div>
    	</div>
    	</div>
    	<div class="title select-title"> 选择科室</div>
    		<div class="select-dept-wrapper">
    			<div class="department-wrapper">
    				<div class="hospital-department">
    				<div class="dept-list-wrapper el-scrollbar" style="height: 100%;">
    				<div class="dept-list el-scrollbar__wrap" style="margin-bottom: -17px; margin-right: -17px;">
    				<div class="el-scrollbar__view">
    				<div class="sub-item" v-for="(item,index) in departmentVoList" :key="item.id" :class="index == activeIndex ? 'selected' : ''" @click="move(index,item.depcode)"> {
       { item.depname }}			</div>
    			</div>
    		</div>
    		<div class="el-scrollbar__bar is-horizontal">
    		<div class="el-scrollbar__thumb" style="transform: translateX(0%);"></div>
    	</div>
    	<div class="el-scrollbar__bar is-vertical">
    	<div class="el-scrollbar__thumb" style="transform: translateY(0%); height: 91.4761%;"></div>
    	</div>
    	</div>
    	</div>
    	</div>
    	<div class="sub-dept-container">
    	<div v-for="(item,index) in departmentVoList" :key="item.id" :class="index == 0 ? 'selected' : ''" class="sub-dept-wrapper" :id="item.depcode">
    	<div class="sub-title">
    	<div class="block selected"></div>{
       { item.depname }}
    	</div>
    	<div class="sub-item-wrapper">
    	<div v-for="it in item.children" :key="it.id" class="sub-item" @click="schedule(it.depcode)"><span class="v-link clickable">{
       { it.depname }} </span></div>
    	</div>
    	</div>
    	</div>
    	</div>
    	</div>
    	</div>
    	
    	</div>
    	
    </template>
    
    <script>
    import '~/assets/css/hospital_personal.css'
    import '~/assets/css/hospital.css'
    
    import hospitalApi from '@/api/hosp'
    
    export default {
          
      data() {
          
        return {
          
          hoscode: null,
          activeIndex: 0,
    
          hospital: {
          
            param: {
          }
          },
          bookingRule : {
          },
          departmentVoList : []
        }
      },
      created() {
          
        this.hoscode = this.$route.params.hoscode
        this.init()
      },
    
      methods: {
          
        init() {
          
          hospitalApi.show(this.hoscode).then(response => {
          
            this.hospital = response.data.hospital
            this.bookingRule = response.data.bookingRule
          })
    
          hospitalApi.findDepartment(this.hoscode).then(response => {
          
            this.departmentVoList = response.data
          })
        },
    
        move(index, depcode) {
          
          this.activeIndex = index
          document.getElementById(depcode).scrollIntoView();
        },
    
        schedule(depcode) {
          
          window.location.href = '/hospital/schedule?hoscode=' + this.hoscode + "&depcode="+ depcode
        }
      }
    }
    </script>

### 2. 医院详情 ###

页面布局：

创建 /pages/hospital/detail/\_hoscode.vue 组件

<template>
      
      <div class="nav-container page-component">
        
        <div class="nav left-nav">
          <div class="nav-item ">
            <span class="v-link clickable dark" :onclick="'javascript:window.location=\'/hosp/'+hospital.hoscode+'\''">预约挂号 </span>
          </div>
          <div class="nav-item selected">
            <span class="v-link selected dark" :onclick="'javascript:window.location=\'/hosp/detail/'+hospital.hoscode+'\''"> 医院详情 </span>
          </div>
          <div class="nav-item">
            <span class="v-link clickable dark" :onclick="'javascript:window.location=\'/hosp/notice/'+hospital.hoscode+'\''"> 预约须知 </span>
          </div>
          <div class="nav-item "><span
            class="v-link clickable dark"> 停诊信息 </span>
          </div>
          <div class="nav-item "><span
            class="v-link clickable dark"> 查询/取消 </span>
          </div>
        </div>
        
    
        
        <div class="page-container">
          <div class="hospital-detail">
            <div class="common-header">
              <div class="title-wrapper"><span class="hospital-title">{
       { hospital.hosname }}</span>
                <div class="icon-wrapper"><span class="iconfont"></span> {
       { hospital.param.hostypeString }}</div>
              </div>
            </div>
            <div class="info-wrapper"><img :src="'data:image/jpeg;base64,'+hospital.logoData" :alt="hospital.hosname" style="width: 80px; height: 80px;">
              <div class="content-wrapper">
                <div></div>
                <div></div>
                <div></div>
                <div>
                  <div class="icon-text-wrapper"><span class="iconfont prefix-icon"></span>
                    <span class="text"><p>{
       { hospital.route }}</p>
                  </span><span class="iconfont right-icon"></span></div>
                </div>
              </div>
            </div>
            <div class="title mt40"> 医院介绍</div>
            <div class="detail-content mt40"><p>{
       { hospital.intro }}</p></div>
          </div>
        </div>
        
      </div>
      
    </template>
    
    <script>
    import '~/assets/css/hospital_personal.css'
    import '~/assets/css/hospital.css'
    
    import hospitalApi from '@/api/hosp'
    export default {
          
      data() {
          
        return {
          
          hoscode: null,
          hospital: {
          
            param: {
          }
          }
        }
      },
    
      created() {
          
        this.hoscode = this.$route.params.hoscode
    
        this.init()
      },
    
      methods: {
          
        init() {
          
          hospitalApi.show(this.hoscode).then(response => {
          
            this.hospital = response.data.hospital
          })
    
        }
      }
    }
    </script>
    <style>
      .hospital-detail .info-wrapper {
          
        width: 100%;
        padding-left: 0;
        padding-top: 0;
        margin-top: 0;
        flex-direction: inherit;
      }
    
      .hospital-detail .info-wrapper .text {
          
        font-size: 14px;
    
      }
    
      .hospital-detail .content-wrapper p {
          
        text-indent: 0;
      }
    </style>

### 3. 预约须知 ###

页面布局：

创建/pages/hospital/notice/\_hoscode.vue组件

<template>
      
      <div class="nav-container page-component">
        
        <div class="nav left-nav">
          <div class="nav-item ">
            <span class="v-link clickable dark" :onclick="'javascript:window.location=\'/hosp/'+hospital.hoscode+'\''">预约挂号 </span>
          </div>
          <div class="nav-item ">
            <span class="v-link clickable dark" :onclick="'javascript:window.location=\'/hosp/detail/'+hospital.hoscode+'\''"> 医院详情 </span>
          </div>
          <div class="nav-item selected">
            <span class="v-link selected dark" :onclick="'javascript:window.location=\'/hosp/notice/'+hospital.hoscode+'\''"> 预约须知 </span>
          </div>
          <div class="nav-item "><span
            class="v-link clickable dark"> 停诊信息 </span>
          </div>
          <div class="nav-item "><span
            class="v-link clickable dark"> 查询/取消 </span>
          </div>
        </div>
        
    
        
        <div class="page-container">
          <div class="hospital-notice">
            <div class="content"><h2>{
       { hospital.hosname }}预约挂号须知</h2>
              <p>为方便您早日就医康复，请您认真阅读预约挂号须知：</p>
              <h4 id="一、预约实名制：">一、预约实名制：</h4>
              <p>统一平台电话预约和网上预约挂号均采取实名制注册预约，请您如实提供就诊人员的真实姓名、有效证件号（身份证、护照）、性别、手机号码、社保卡号等基本信息。</p>
              <h4 id="二、预约挂号：">二、预约挂号：</h4>
              <p>按照北京市卫健委统一平台要求，预约挂号规则如下：</p>
              <ul>
                <li>在同一自然日，同一医院，同一科室，同一就诊单元，同一就诊人，可以预约最多1个号源；</li>
                <li>在同一自然周，同一就诊人，可以预约最多8个号源；</li>
                <li>在同一自然月，同一就诊人，可以预约最多12个号源；</li>
                <li>在同一自然季度，同一就诊人，可以预约最多24个号源。</li>
              </ul>
              <h4 id="三、取消预约：">三、取消预约：</h4>
              <p>已完成预约的号源，如需办理退号，至少在就诊前一工作日14:00前通过网站、微信公众号、114电话等平台预约渠道进行取消预约。</p>
              <h4 id="四、爽约处理：">四、爽约处理：</h4>
              <p>如预约成功后患者未能按时就诊且不办理取消预约号视为爽约，同一患者在自然年内爽约规则如下：</p>
              <ul>
                <li>累计爽约3次，自3次爽约日起，90天内不允许通过114平台进行预约挂号；</li>
                <li>累计爽约6次，自6次爽约日起，180天内不允许通过114平台进行预约挂号。</li>
              </ul>
            </div>
    
          </div>
        </div>
        
      </div>
      
    </template>
    
    <script>
    import '~/assets/css/hospital_personal.css'
    import '~/assets/css/hospital.css'
    
    import hospitalApi from '@/api/hosp'
    export default {
          
      data() {
          
        return {
          
          hoscode: null,
          hospital: {
          
            param: {
          }
          }
        }
      },
    
      created() {
          
        this.hoscode = this.$route.params.hoscode
    
        this.init()
      },
    
      methods: {
          
        init() {
          
          hospitalApi.show(this.hoscode).then(response => {
          
            this.hospital = response.data.hospital
          })
        }
      }
    }
    </script>
    <style>
      .hospital-detail .info-wrapper {
          
        width: 100%;
        padding-left: 0;
        padding-top: 0;
        margin-top: 0;
        flex-direction: inherit;
      }
    
      .hospital-detail .info-wrapper .text {
          
        font-size: 14px;
    
      }
    
      .hospital-detail .content-wrapper p {
          
        text-indent: 0;
      }
    </style>

[https_zh.nuxtjs.org]: https://zh.nuxtjs.org/
[https_github.com_nuxt-community_starter-template_archive_master.zip]: https://github.com/nuxt-community/starter-template/archive/master.zip
[cbcd3161850c47808846fa58418d3bd5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/0e9745a14b3c4bb5972c8f0d834cc944.png
[c1db3567e5c84d0198231e03de3faf78.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/50b4b6a4674c4f87b8013e6d32338ed1.png
[2e2c40be86b3451eb3cfba9cc055b73b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/fa2f9ddc88da42d18ffc6ce26be15cd9.png
[42714cbcfebe467dba1dfbc2b450c311.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/c9bfa1e53f2f4204b027cf1221c57bde.png
[656bccf0139647b4b984e9287b33091e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/81c88038b1c64adaa99119231ad0c540.png
[3bceb4a12af140519deda009974e1441.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/f7fa54cc831f481ba372d7f353b50c0f.png
[71a81e4bb4734477b9752e963c5af7b3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/1af0bfe2c39c42588063e807d57fa1ef.png
[http_localhost_3000]: http://localhost:3000/
[2769436182004d64af7bc79a020f56f7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/3fe5bd700bfd40e6978efcd7dd0723aa.png
[8b4ecd71443d47fab1c7789e79ba6dcd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/b3ff7bbd81574315804983f5215b9294.png