目录
一、预约挂号详情 ※
1、需求分析
(1) 根据page、limit、hoscode、depcode，带分页带条件查询信息
(2) 根据hoscode、depcode、workDate 查询排班明细数据
(3) 根据医院预约周期展现号源信息(失效)
(4) 如果当天已过开始挂号时间，预约周期+1
(5) 如果没有医生出诊的日期(放假)，也需要展示出来
(6) 根据开始、停止挂号时间，判断状态
2、接口分析
1. 带分页带条件统计号源信息
*参数：page、limit、hoscode、depcode
*返回值：map
2. 查询排班明细数据
*参数：hoscode、depcode、workDate
*返回值：list
1、接口实现
1. controller
HospitalApiController下新增方法
@ApiOperation(value = "获取可预约排班数据")
@GetMapping("auth/getBookingScheduleRule/{page}/{limit}/{hoscode}/{depcode}")
public R getBookingSchedule(
@PathVariable Integer page,
@PathVariable Integer limit,
@PathVariable String hoscode,
@PathVariable String depcode) {
Map<String, Object> map = scheduleService.getBookingSchedule(page, limit, hoscode, depcode);
return R.ok().data(map);
}
@ApiOperation(value = "获取排班数据")
@GetMapping("auth/findScheduleList/{hoscode}/{depcode}/{workDate}")
public R findScheduleList(
@PathVariable String hoscode,
@PathVariable String depcode,
@PathVariable String workDate) {
//方法复用
List<Schedule> scheduleList = scheduleService.getScheduleDetail(hoscode,depcode,workDate);
return R.ok().data("scheduleList",scheduleList);
}2. Service
IPage：多传入一个总记录数，就可以算出总页数
//获取可预约排班数据
@Override
public Map<String, Object> getBookingSchedule(
Integer page, Integer limit, String hoscode, String depcode) {
//1.根据hoscode 查询医院信息，获取预约规则
//2.根据预约规则，分页信息，查询可预约日期的集合分页对象 (不受数据库影响，Ipage<Date>苞米豆)
//3.参考后台接口实现聚合查询 (List<BookingScheduleRuleVo>)
//4.合并 步骤2和步骤3的数据
//5.封装数据并返回
return null;
} //获取可预约排班数据
@Override
public Map<String, Object> getBookingSchedule(
Integer page, Integer limit, String hoscode, String depcode) {
Map<String, Object> result = new HashMap<>();
//1、根据hoscode 查询医院信息，获取预约规则
Hospital hospital = hospitalService.getHospital(hoscode);
if(hospital==null){
throw new YyghException(20001,"医院信息有误");
}
BookingRule bookingRule = hospital.getBookingRule();
//2、根据预约规则，分页信息，查询可预约日期的集合分页对象 (不受数据库影响，Ipage<Date>苞米豆)
IPage<Date> iPage = this.getDateListPage(page,limit,bookingRule);
List<Date> datePageList = iPage.getRecords();
//3、参考后台接口实现聚合查询 (List<BookingScheduleRuleVo>)，获取可预约日期科室剩余预约数
//3.1准备筛选条件
Criteria criteria = Criteria
.where("hoscode").is(hoscode)
.and("depcode").is(depcode)
.and("workDate").in(datePageList);
//3.2创建聚合查询对象
Aggregation agg = Aggregation.newAggregation(
//3.2.1设置查询条件
Aggregation.match(criteria),
//3.2.2设置聚合参数 + 聚合查询字段 (分组)
Aggregation.group("workDate")
.first("workDate").as("workDate")
.count().as("docCount")
.sum("reservedNumber").as("reservedNumber")
.sum("availableNumber").as("availableNumber")
);
//3.3执行聚合查询List<BookingScheduleRuleVo>
AggregationResults<BookingScheduleRuleVo> aggregate =
mongoTemplate.aggregate(agg, Schedule.class, BookingScheduleRuleVo.class);
List<BookingScheduleRuleVo> scheduleVoList =
aggregate.getMappedResults();
//3.4转化查询结果的类型，List=>Map k:workDate v:BookingScheduleRuleVo
Map<Date,BookingScheduleRuleVo> scheduleVoMap = new HashMap<>();
if(!CollectionUtils.isEmpty(scheduleVoList)){
scheduleVoMap = scheduleVoList.stream().collect(Collectors.toMap(
BookingScheduleRuleVo::getWorkDate,
BookingScheduleRuleVo->BookingScheduleRuleVo
));
}
//4、合并 步骤2(datePageList)和步骤3(scheduleVoMap)的数据
List<BookingScheduleRuleVo> bookingScheduleRuleVoList = new ArrayList<>();
for (int i = 0, let = datePageList.size(); i < let; i++) {
//4.1 遍历 datePageList，取出每一天日期
Date date = datePageList.get(i);
//4.2 根据日期，查询scheduleVoMap，获取排班聚合的记录信息
BookingScheduleRuleVo bookingScheduleRuleVo = scheduleVoMap.get(date);
//4.3 排班聚合的记录是空的，需要初始化
if(bookingScheduleRuleVo==null){
bookingScheduleRuleVo = new BookingScheduleRuleVo();
bookingScheduleRuleVo.setDocCount(0);//当前预约数
bookingScheduleRuleVo.setAvailableNumber(-1);//
}
//4.4 设置排班日期
bookingScheduleRuleVo.setWorkDate(date);
bookingScheduleRuleVo.setWorkDateMd(date);
//4.5 根据日期换算周几
String dayOfWeek = this.getDayOfWeek(new DateTime(date));
bookingScheduleRuleVo.setDayOfWeek(dayOfWeek);
//4.6 根据时间进行状态判断 (状态 0：正常 1：即将放号 -1：当天已停止挂号)
//最后一页，最后一条记录，状态为即将放号
if(i==let-1 && page==iPage.getPages()){
bookingScheduleRuleVo.setStatus(1);
}else{
bookingScheduleRuleVo.setStatus(0);
}
//第一页，第一条记录，如果已过停止挂号时间，状态为-1,当天停止挂号
if(i==0&&page==1){
DateTime stopDateTime = this.getDateTime(new Date(), bookingRule.getStopTime());
if(stopDateTime.isBeforeNow()){
bookingScheduleRuleVo.setStatus(-1);
}
}
bookingScheduleRuleVoList.add(bookingScheduleRuleVo);
}
//5、封装数据并返回
//可预约日期规则数据
result.put("bookingScheduleList", bookingScheduleRuleVoList);
result.put("total", iPage.getTotal());
//其他基础数据
Map<String, String> baseMap = new HashMap<>();
//医院名称
baseMap.put("hosname", hospitalService.getHospName(hoscode));
//科室
Department department =departmentService.getDepartment(hoscode, depcode);
//大科室名称
baseMap.put("bigname", department.getBigname());
//科室名称
baseMap.put("depname", department.getDepname());
//月
baseMap.put("workDateString", new DateTime().toString("yyyy年MM月"));
//放号时间
baseMap.put("releaseTime", bookingRule.getReleaseTime());
//停号时间
baseMap.put("stopTime", bookingRule.getStopTime());
result.put("baseMap", baseMap);
return result;
} //分支2 :根据预约规则，分页信息，查询可预约日期的集合分页对象
private IPage<Date> getDateListPage(
Integer page, Integer limit, BookingRule bookingRule) {
//1.从预约规则中获取开始挂号的时间(当前系统日期+开始时间)
DateTime releaseDateTime =
this.getDateTime(new Date(),bookingRule.getReleaseTime());
// 2.从预约规则中获取周期，判断周期是否需要+1 如果当天放号时间已过，则预约周期后一天为即将放号时间，周期加1
Integer cycle = bookingRule.getCycle();
if(releaseDateTime.isBeforeNow()) cycle +=1;
//3.根据周期推算出可以挂号的日期，存入集合(list)
List<Date> dateList = new ArrayList<>();
for (int i = 0; i < cycle; i++) {
//当前日期向后i天
DateTime plusDays = new DateTime().plusDays(i);
String plusDaysString = plusDays.toString("yyyy-MM-dd");
dateList.add(new DateTime(plusDaysString).toDate());
}
//4.准备分页参数 日期分页，由于预约周期不一样，页面一排最多显示7天数据，多了就要分页显示
int start = (page-1)*limit;
int end = (page-1)*limit+limit;
if(end>dateList.size()) end = dateList.size();
//5.根据分页参数，获取分页后日期集合
List<Date> datePageList = new ArrayList<>();
for (int i = start; i < end; i++) {
datePageList.add(dateList.get(i));
}
//6.封装数据到IPage对象，返回
IPage<Date> iPage = new com.baomidou.mybatisplus.extension.plugins.pagination.Page<>(page,limit,dateList.size());
iPage.setRecords(datePageList);
return iPage;
}
//日期+开始时间
private DateTime getDateTime(Date date, String timeString) {
String dateTimeString = new DateTime(date)
.toString("yyyy-MM-dd") + " "+ timeString;
DateTime dateTime = DateTimeFormat.forPattern("yyyy-MM-dd HH:mm").parseDateTime(dateTimeString);
return dateTime;
}
3. 更新排班数据，测试：
2、前端实现
1. 页面分析创建页面入口
2. 添加API
//获取可预约排班数据
getBookingScheduleList(page, limit, hoscode, depcode) {
return request({
url: `${api_name}/auth/getBookingScheduleRule/${page}/${limit}/${hoscode}/${depcode}`,
method: 'get'
})
},
//获取排班数据
findScheduleList(hoscode, depcode, workDate) {
return request({
url: `${api_name}/auth/findScheduleList/${hoscode}/${depcode}/${workDate}`,
method: 'get'
})
},3. 添加页面元素
<template>
<!-- header -->
<div class="nav-container page-component">
<!--左侧导航 #start -->
<div class="nav left-nav">
<div class="nav-item selected">
<span class="v-link selected dark" :onclick="'javascript:window.location=\'/hosp/'+hoscode+'\''">预约挂号
</span>
</div>
<div class="nav-item ">
<span class="v-link clickable dark"
:onclick="'javascript:window.location=\'/hosp/detail/'+hoscode+'\''"> 医院详情 </span>
</div>
<div class="nav-item">
<span class="v-link clickable dark"
:onclick="'javascript:window.location=\'/hosp/notice/'+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-source-list">
<div class="header-wrapper" style="justify-content:normal">
<span class="v-link clickable" @click="show()">{{ baseMap.hosname}}</span>
<div class="split"></div>
<div>{{ baseMap.bigname }}</div>
</div>
<div class="title mt20"> {{ baseMap.depname }}</div>
<!-- 号源列表 #start -->
<div class="mt60">
<div class="title-wrapper">{{ baseMap.workDateString }}</div>
<div class="calendar-list-wrapper">
<!-- item.depNumber == -1 ? 'gray space' : item.depNumber == 0 ? 'gray' : 'small small-space'-->
<!-- selected , index == activeIndex ? 'selected' : ''-->
<div :class="'calendar-item '+item.curClass" style="width: 124px;"
v-for="(item, index) in bookingScheduleList" :key="item.id"
@click="selectDate(item, index)">
<div class="date-wrapper"><span>{{ item.workDate }}</span><span class="week">{{
item.dayOfWeek }}</span></div>
<div class="status-wrapper" v-if="item.status == 0">{{ item.availableNumber == -1 ? '无号' :
item.availableNumber == 0 ? '约满' : '有号' }}</div>
<div class="status-wrapper" v-if="item.status == 1">即将放号</div>
<div class="status-wrapper" v-if="item.status == -1">停止挂号</div>
</div>
</div>
<!-- 分页 -->
<el-pagination class="pagination" layout="prev, pager, next" :current-page="page" :total="total"
:page-size="limit" @current-change="getPage">
</el-pagination>
</div>
<!-- 即将放号 #start-->
<div class="countdown-wrapper mt60" v-if="!tabShow">
<div class="countdonw-title"> {{ time }}<span class="v-link selected">{{ baseMap.releaseTime }}
</span>放号</div>
<div class="countdown-text"> 倒 计 时
<div>
<span class="number">{{ timeString }}</span>
</div>
</div>
</div>
<!-- 即将放号 #end-->
<!-- 号源列表 #end -->
<!-- 上午号源 #start -->
<div class="mt60" v-if="tabShow">
<div class="">
<div class="list-title">
<div class="block"></div>
上午号源
</div>
<div v-for="item in scheduleList" :key="item.id">
<div class="list-item" v-if="item.workTime == 0">
<div class="item-wrapper">
<div class="title-wrapper">
<div class="title">{{ item.title }}</div>
<div class="split"></div>
<div class="name"> {{ item.docname }}</div>
</div>
<div class="special-wrapper">{{ item.skill }}</div>
</div>
<div class="right-wrapper">
<div class="fee"> ￥{{ item.amount }}
</div>
<div class="button-wrapper">
<div class="v-button" @click="booking(item.id, item.availableNumber)"
:style="item.availableNumber == 0 || pageFirstStatus == -1 ? 'background-color: #7f828b;' : ''">
<span>剩余<span class="number">{{ item.availableNumber }}</span></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 上午号源 #end -->
<!-- 下午号源 #start -->
<div class="mt60" v-if="tabShow">
<div class="">
<div class="list-title">
<div class="block"></div>
下午号源
</div>
<div v-for="item in scheduleList" :key="item.id">
<div class="list-item" v-if="item.workTime == 1">
<div class="item-wrapper">
<div class="title-wrapper">
<div class="title">{{ item.title }}</div>
<div class="split"></div>
<div class="name"> {{ item.docname }}</div>
</div>
<div class="special-wrapper">{{ item.skill }}</div>
</div>
<div class="right-wrapper">
<div class="fee"> ￥{{ item.amount }}
</div>
<div class="button-wrapper">
<div class="v-button" @click="booking(item.id, item.availableNumber)"
:style="item.availableNumber == 0 || pageFirstStatus == -1 ? 'background-color: #7f828b;' : ''">
<span>剩余<span class="number">{{ item.availableNumber }}</span></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 下午号源 #end -->
</div>
</div>
<!-- 右侧内容 #end -->
</div>
<!-- footer -->
</template>4. 添加JS方法
<script>
import '~/assets/css/hospital_personal.css'
import '~/assets/css/hospital.css'
import hospitalApi from '@/api/hospital'
export default {
data() {
return {
hoscode: null,//医院编码
depcode: null,//科室编码
workDate: null,//排班日期
bookingScheduleList: [],//可预约号源统计信息
scheduleList: [],//排班明细集合
baseMap: {},//基础数据
nextWorkDate: null, // 下一页第一个日期
preWorkDate: null, // 上一页第一个日期
tabShow: true, //挂号列表与即将挂号切换
activeIndex: 0,
page: 1, // 当前页
limit: 7, // 每页个数
total: 1, // 总页码
timeString: null,
time: '今天',
timer: null,
pageFirstStatus: 0 // 第一页第一条数据状态
}
},
created() {
this.hoscode = this.$route.query.hoscode
this.depcode = this.$route.query.depcode
this.workDate = this.getCurDate()
this.getBookingScheduleList()
},
methods: {
//分页
getPage(page = 1) {
this.page = page
this.workDate = null
this.activeIndex = 0
this.getBookingScheduleList()
},
//查询可预约号源统计信息
getBookingScheduleList() {
hospitalApi.getBookingScheduleList(this.page, this.limit, this.hoscode, this.depcode).then(response => {
this.bookingScheduleList = response.data.bookingScheduleList
this.total = response.data.total
this.baseMap = response.data.baseMap
//样式
this.dealClass()
// 分页后workDate=null，默认选中第一个
if (this.workDate == null) {
this.workDate = this.bookingScheduleList[0].workDate
}
//判断当天是否停止预约 status == -1 停止预约
if (this.workDate == this.getCurDate()) {
this.pageFirstStatus = this.bookingScheduleList[0].status
} else {
this.pageFirstStatus = 0
}
this.findScheduleList()
})
},
//排班明细集合展示
findScheduleList() {
hospitalApi.findScheduleList(this.hoscode, this.depcode, this.workDate).then(response => {
this.scheduleList = response.data.scheduleList
})
},
//点击某一天，查看当天排班
selectDate(item, index) {
this.workDate = item.workDate
this.activeIndex = index
//清理定时
if (this.timer != null) clearInterval(this.timer)
// 是否即将放号
if (item.status == 1) {
this.tabShow = false
// 放号时间
let releaseTime = new Date(this.getCurDate() + ' ' + this.baseMap.releaseTime).getTime()
let nowTime = new Date().getTime();
this.countDown(releaseTime, nowTime)
this.dealClass();
} else {
this.tabShow = true
this.getBookingScheduleList()
}
},
dealClass() {
//处理样式
for (let i = 0; i < this.bookingScheduleList.length; i++) {
// depNumber -1:无号 0：约满 >0：有号
let curClass = this.bookingScheduleList[i].availableNumber == -1 ? 'gray space' : this.bookingScheduleList[i].availableNumber == 0 ? 'gray' : 'small small-space'
curClass += i == this.activeIndex ? ' selected' : ''
this.bookingScheduleList[i].curClass = curClass
}
},
//当前时间
getCurDate() {
let datetime = new Date()
let year = datetime.getFullYear()
let month = datetime.getMonth() + 1 < 10 ? '0' + (datetime.getMonth() + 1) : datetime.getMonth() + 1
let date = datetime.getDate() < 10 ? '0' + datetime.getDate() : datetime.getDate()
return year + '-' + month + '-' + date
},
countDown(releaseTime, nowTime) {
//计算倒计时时长
let secondes = 0;
if (releaseTime > nowTime) {
this.time = '今天'
//当前时间到放号时间的时长
secondes = Math.floor((releaseTime - nowTime) / 1000);
} else {
this.time = '明天'
//计算明天放号时间
let releaseDate = new Date(releaseTime)
releaseTime = new Date(releaseDate.setDate(releaseDate.getDate() + 1)).getTime()
//当前时间到明天放号时间的时长
secondes = Math.floor((releaseTime - nowTime) / 1000);
}
//定时任务，需要赋值对象，用于清除
this.timer = setInterval(() => {
secondes = secondes - 1
if (secondes <= 0) {
clearInterval(timer);
this.init()
}
this.timeString = this.convertTimeString(secondes)
}, 1000);
// 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
this.$once('hook:beforeDestroy', () => {
clearInterval(timer);
})
},
convertTimeString(allseconds) {
if (allseconds <= 0) return '00:00:00'
// 计算天数
let days = Math.floor(allseconds / (60 * 60 * 24));
// 小时
let hours = Math.floor((allseconds - (days * 60 * 60 * 24)) / (60 * 60));
// 分钟
let minutes = Math.floor((allseconds - (days * 60 * 60 * 24) - (hours * 60 * 60)) / 60);
// 秒
let seconds = allseconds - (days * 60 * 60 * 24) - (hours * 60 * 60) - (minutes * 60);
//拼接时间
let timString = "";
if (days > 0) {
timString = days + "天:";
}
return timString += hours + " 时 " + minutes + " 分 " + seconds + " 秒 ";
},
//医院跳转
show() {
window.location.href = '/hospital/' + this.hoscode
},
//预约
booking(scheduleId, availableNumber) {
if (availableNumber == 0 || this.pageFirstStatus == -1) {
this.$message.error('不能预约')
} else {
window.location.href = '/hospital/booking?scheduleId=' + scheduleId
}
}
}
}
</script>5. 测试：
二、预约确认
需求分析：
（1）根据预约周期，展示可预约日期数据，按分页展示
（2）选择日期展示当天可预约列表（该接口后台已经实现过）
1、接口实现
(1). 查询排班详情接口
*参数：scheduleId
*返回值：schedule
(2). 登录用户，查询就诊人集合信息
2. controller
HospitalApiController
@ApiOperation(value = "根据排班id获取排班数据")
@GetMapping("getSchedule/{id}")
public R getSchedule(@PathVariable String id) {
Schedule schedule = scheduleService.findScheduleById(id);
return R.ok().data("schedule",schedule);
}3. service
//根据排班id获取排班数据
@Override
public Schedule findScheduleById(String id) {
Schedule schedule = scheduleRepository.findById(id).get();
return this.packageSchedule(schedule);//翻译字段返回
}2、前端实现
1. 确认入口，创建页面
2. hospital 添加API
//根据排班id获取排班数据
getSchedule(id) {
return request({
url: `${api_name}/getSchedule/${id}`,
method: 'get'
})
}3. 添加页面
<template>
<!-- header -->
<div class="nav-container page-component">
<!--左侧导航 #start -->
<div class="nav left-nav">
<div class="nav-item selected">
<span class="v-link selected dark"
:onclick="'javascript:window.location=\'/hospital/'+schedule.hoscode+'\''">预约挂号 </span>
</div>
<div class="nav-item ">
<span class="v-link clickable dark"
:onclick="'javascript:window.location=\'/hospital/detail/'+schedule.hoscode+'\''"> 医院详情 </span>
</div>
<div class="nav-item">
<span class="v-link clickable dark"
:onclick="'javascript:window.location=\'/hospital/notice/'+schedule.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-order">
<div class="header-wrapper">
<div class="title mt20"> 确认挂号信息</div>
<div>
<div class="sub-title">
<div class="block"></div>
选择就诊人：
</div>
<div class="patient-wrapper">
<div>
<div class="v-card clickable item ">
<div class="inline" v-for="(item,index) in patientList" :key="item.id"
@click="selectPatient(index)" style="margin-right: 10px;">
<!-- 选中 selected 未选中去掉selected-->
<div :class="activeIndex == index ? 'item-wrapper selected' : 'item-wrapper'">
<div>
<div class="item-title">{{ item.name }}</div>
<div>{{ item.param.certificatesTypeString }}</div>
<div>{{ item.certificatesNo }}</div>
</div>
<img src="//img.114yygh.com/static/web/checked.png" class="checked">
</div>
</div>
</div>
</div>
<div class="item space add-patient v-card clickable">
<div class="">
<div class="item-add-wrapper" @click="addPatient()"> +
添加就诊人
</div>
</div>
</div>
<div class="el-loading-mask" style="display: none;">
<div class="el-loading-spinner">
<svg viewBox="25 25 50 50" class="circular">
<circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
</svg>
</div>
</div>
</div>
<!-- 就诊人，选中显示 -->
<div class="sub-title" v-if="patientList.length > 0">
<div class="block"></div>
选择就诊卡： <span class="card-tips"><span class="iconfont"></span>
如您持社保卡就诊，请务必选择医保预约挂号，以保证正常医保报销</span>
</div>
<el-card class="patient-card" shadow="always" v-if="patientList.length > 0">
<div slot="header" class="clearfix">
<div><span class="name"> {{ patient.name }} {{ patient.certificatesNo }} 居民身份证</span>
</div>
</div>
<div class="card SELF_PAY_CARD">
<div class="info"><span class="type">{{ patient.isInsure == 0 ? '自费' :
'医保'}}</span><span class="card-no">{{ patient.certificatesNo }}</span><span
class="card-view">居民身份证</span></div>
<span class="operate"></span>
</div>
<div class="card">
<div class="text bind-card"></div>
</div>
</el-card>
<div class="sub-title">
<div class="block"></div>
挂号信息
</div>
<div class="content-wrapper">
<el-form ref="form">
<el-form-item label="就诊日期：">
<div class="content"><span>{{ schedule.workDate }} {{ schedule.param.dayOfWeek }} {{
schedule.workTime == 0 ? '上午' : '下午' }}</span></div>
</el-form-item>
<el-form-item label="就诊医院：">
<div class="content"><span>{{ schedule.param.hosname }} </span></div>
</el-form-item>
<el-form-item label="就诊科室：">
<div class="content"><span>{{ schedule.param.depname }} </span></div>
</el-form-item>
<el-form-item label="医生姓名：">
<div class="content"><span>{{ schedule.docname }} </span></div>
</el-form-item>
<el-form-item label="医生职称：">
<div class="content"><span>{{ schedule.title }} </span></div>
</el-form-item>
<el-form-item label="医生专长：">
<div class="content"><span>{{ schedule.skill }}</span></div>
</el-form-item>
<el-form-item label="医事服务费：">
<div class="content">
<div class="fee">{{ schedule.amount }}元</div>
</div>
</el-form-item>
</el-form>
</div>
<!-- 用户信息 #start-->
<div>
<div class="sub-title">
<div class="block"></div>
用户信息
</div>
<div class="content-wrapper">
<el-form ref="form" :model="form">
<el-form-item class="form-item" label="就诊人手机号：">
{{ patient.phone }}
</el-form-item>
</el-form>
</div>
</div>
<!-- 用户信息 #end -->
<div class="bottom-wrapper">
<div class="button-wrapper">
<div class="v-button" @click="submitOrder()">{{ submitBnt }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 右侧内容 #end -->
</div>
<!-- footer -->
</template>4. JS实现，CSS样式
<script>
import '~/assets/css/hospital_personal.css'
import '~/assets/css/hospital.css'
import hospitalApi from '@/api/hospital'
import patientApi from '@/api/patient'
export default {
data() {
return {
scheduleId: null,
schedule: {
param: {}
},
patientList: [],
patient: {},
activeIndex: 0,
submitBnt: '确认挂号'
}
},
created() {
this.scheduleId = this.$route.query.scheduleId
this.init()
},
methods: {
init() {
this.getSchedule()
this.findPatientList()
},
//预约规则
getSchedule() {
hospitalApi.getSchedule(this.scheduleId).then(response => {
this.schedule = response.data.schedule
})
},
//就诊人列表
findPatientList() {
patientApi.findList().then(response => {
this.patientList = response.data.list
if (this.patientList.length > 0) {
this.patient = this.patientList[0]
}
})
},
//选择就诊人
selectPatient(index) {
this.activeIndex = index;
this.patient = this.patientList[index]
},
//确认挂号
submitOrder() {
},
//跳转添加就诊人
addPatient() {
window.location.href = '/patient/add'
}
}
}
</script>
<style>
.hospital-order .header-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: block !important;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.hospital-order .sub-title {
letter-spacing: 1px;
color: #999;
margin-top: 60px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.hospital-order .content-wrapper .content {
color: #333;
}
.el-form-item {
margin-bottom: 5px;
}
.hospital-order .content-wrapper {
margin-left: 140px;
margin-top: 20px;
}
</style>5. 测试
3176
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
