尚医通-医院详情功能（二十七）

（1）前台用户系统-医院详请-情接口开发

（2）前台用户系统-技术点-nuxt路由

（3）前台用户系统-医院详情-前端整合

（1）前台用户系统-医院详-情接口开发

现在做在页面点击某一个医院或者搜索某一个医院，进入到医院详情页面中去：

说明：需要获取医院信息（医院基本信息、预约信息）和科室信息

在HospApiController中添加接口访问：

 @ApiOperation(value = "根据医院编号获取科室列表")@GetMapping("department/{hoscode}")public Result index(@ApiParam(name = "hoscode", value = "医院code", required = true)@PathVariable String hoscode) {List<DepartmentVo> deptTree = departmentService.findDeptTree(hoscode);return Result.ok(deptTree);}@ApiOperation(value = "根据医院编号获取医院预约挂号详情")@GetMapping("{hoscode}")public Result item(@ApiParam(name = "hoscode", value = "医院code", required = true)@PathVariable String hoscode) {Map<String,Object> map= hospitalService.item(hoscode);return Result.ok(map);}

HospitalService 接口：

package com.atguigu.yygh.hosp.service;import com.atguigu.yygh.model.hosp.Hospital;
import com.atguigu.yygh.vo.hosp.HospitalQueryVo;
import org.springframework.data.domain.Page;import java.util.List;
import java.util.Map;public interface HospitalService {//上传医院接口的方法void save(Map<String, Object> paramMap);//根据医院编号进行查询Hospital getByHoscode(String hoscode);//医院列表(条件查询分页)Page<Hospital> selectHospPage(Integer page, Integer limit, HospitalQueryVo hospitalQueryVo);//更新医院的上线状态void updateStatus(String id, Integer status);//医院的详情信息Map<String, Object> getHospById(String id);//获取医院名称String getHospName(String hoscode);//根据医院名称模糊查询List<Hospital> findByHosName(String hosname);//根据医院编号获取医院预约挂号详情Map<String, Object> item(String hoscode);
}

实现类：

 //根据医院编号进行查询@Overridepublic Hospital getByHoscode(String hoscode) {Hospital hospital = hospitalRepository.getHospitalByHoscode(hoscode);return hospital;}//封装医院等级方法private Hospital setHospitalHosType(Hospital hospital){//获取到医院等级的名称String hostypeString= dictFeignClient.getName("Hostype", hospital.getHostype());//给hospital里面的Map属性赋值hospital.getParam().put("hostypeString", hostypeString);//查询省市区String provinceString = dictFeignClient.getName(hospital.getProvinceCode());String cityString = dictFeignClient.getName(hospital.getCityCode());String districtString = dictFeignClient.getName(hospital.getDistrictCode());hospital.getParam().put("fullAddress", provinceString + cityString + districtString);return hospital;}//根据医院编号获取医院预约挂号详情@Overridepublic 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;}

（2）前台用户系统-技术点-nuxt路由

我们现在使用的nuxt框架，nuxt框架是基于vue做到的，实现的是服务端渲染，nuxt中有一种操作叫做nuxt路由跳转，nuxt有它特有的方式，nuxt实现路由跳转有2中路由

固定路由：

<template><div class="home page-component">test固定路由</div>
</template>

点击北京协和医院：

动态路由：

<template><div class="home page-component">test动态路由</div></template>

在次点击那个医院：路径发生了变化加；额1000_0

（3）前台用户系统-医院详情-前端整合

在hosp.js中继续定义接口访问：

 //根据医院编号查询医院预约挂号详情show(hoscode) {return request({url: `${api_name}/findHospDetail/${hoscode}`,method: 'get'})},//根据医院编号查询医院科室信息findDepartment(hoscode) {return request({url: `${api_name}/department/${hoscode}`,method: 'get'})},

<template><!-- header --><div class="nav-container page-component"><!--左侧导航 #start --><div class="nav left-nav"><div class="nav-item selected"><spanclass="v-link selected dark":onclick="'javascript:window.location=\'/hosp/' + hospital.hoscode + '\''">预约挂号</span></div><div class="nav-item"><spanclass="v-link clickable dark":onclick="'javascript:window.location=\'/hosp/detail/' +hospital.hoscode +'\''">医院详情</span></div><div class="nav-item"><spanclass="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><!-- 左侧导航 #end --><!-- 右侧内容 #start --><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"><imgclass="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%"><divclass="dept-list el-scrollbar__wrap"style="margin-bottom: -17px; margin-right: -17px"><div class="el-scrollbar__view"><divclass="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"><divclass="el-scrollbar__thumb"style="transform: translateX(0%)"></div></div><div class="el-scrollbar__bar is-vertical"><divclass="el-scrollbar__thumb"style="transform: translateY(0%); height: 91.4761%"></div></div></div></div></div><div class="sub-dept-container"><divv-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"><divv-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><!-- 右侧内容 #end --></div><!-- footer -->
</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();},},
};
</script>

点击这个医院：

（3）前台用户系统-医院详情-前端整合

创建目录包：

<template><!-- header --><div class="nav-container page-component"><!--左侧导航 #start --><div class="nav left-nav"><div class="nav-item"><spanclass="v-link clickable dark":onclick="'javascript:window.location=\'/hosp/' + hospital.hoscode + '\''">预约挂号</span></div><div class="nav-item selected"><spanclass="v-link selected dark":onclick="'javascript:window.location=\'/hosp/detail/' +hospital.hoscode +'\''">医院详情</span></div><div class="nav-item"><spanclass="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><!-- 左侧导航 #end --><!-- 右侧内容 #start --><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><!-- 右侧内容 #end --></div><!-- footer -->
</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>

<template><!-- header --><div class="nav-container page-component"><!--左侧导航 #start --><div class="nav left-nav"><div class="nav-item"><spanclass="v-link clickable dark":onclick="'javascript:window.location=\'/hosp/' + hospital.hoscode + '\''">预约挂号</span></div><div class="nav-item"><spanclass="v-link clickable dark":onclick="'javascript:window.location=\'/hosp/detail/' +hospital.hoscode +'\''">医院详情</span></div><div class="nav-item selected"><spanclass="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><!-- 左侧导航 #end --><!-- 右侧内容 #start --><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><!-- 右侧内容 #end --></div><!-- footer -->
</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>