商易通-预约挂号详情页面-预约确认（三十五）

（1）前台用户系统-预约挂号详情-接口开发

（2）前台用户系统-预约挂号详情-前端整合

（3）前台用户系统-预约挂号-预约确认功能实现

（1）前台用户系统-预约挂号详情-接口开发

当点击某一个科室进入详情页面，显示可预约的挂号信息

点击某一个日期，回显示详情内容

先完成后端接口：在service-hosp模块中

HospitalApiController：继续添加接口：

 @ApiOperation(value = "获取可预约排班数据")@GetMapping("auth/getBookingScheduleRule/{page}/{limit}/{hoscode}/{depcode}")public Result getBookingSchedule(@ApiParam(name = "page", value = "当前页码", required = true)@PathVariable Integer page,@ApiParam(name = "limit", value = "每页记录数", required = true)@PathVariable Integer limit,@ApiParam(name = "hoscode", value = "医院code", required = true)@PathVariable String hoscode,@ApiParam(name = "depcode", value = "科室code", required = true)@PathVariable String depcode) {return Result.ok(scheduleService.getBookingScheduleRule(page, limit, hoscode, depcode));}

ScheduleService：接口：

//获取可预约的排班数据Map<String,Object> getBookingScheduleRule(int page,int limit,String hoscode,String depcode);

实现类：

 //获取可预约的排班数据@Overridepublic Map<String, Object> getBookingScheduleRule(int page, int limit, String hoscode, String depcode) {Map<String, Object> result = new HashMap<>();//获取预约规则//根据医院编号获取预约规则Hospital hospital = hospitalService.getByHoscode(hoscode);if (hospital == null) {throw new HospitalException(ResultCodeEnum.DATA_ERROR);}BookingRule bookingRule = hospital.getBookingRule();//获取可预约日期的数据（分页）IPage iPage = this.getListDate(page, limit, bookingRule);//当前可预约日期List<Date> dateList = iPage.getRecords();//获取可预约日期里面科室的剩余预约数Criteria criteria = Criteria.where("hoscode").is(hoscode).and("depcode").is(depcode).and("workDate").in(dateList);Aggregation agg = Aggregation.newAggregation(Aggregation.match(criteria),Aggregation.group("workDate").first("workDate").as("workDate").count().as("docCount").sum("availableNumber").as("availableNumber").sum("reservedNumber").as("reservedNumber"));AggregationResults<BookingScheduleRuleVo> aggregateResult =mongoTemplate.aggregate(agg, Schedule.class, BookingScheduleRuleVo.class);List<BookingScheduleRuleVo> scheduleVoList = aggregateResult.getMappedResults();//合并数据  map集合 key日期  value预约规则和剩余数量等Map<Date, BookingScheduleRuleVo> scheduleVoMap = new HashMap<>();if (!CollectionUtils.isEmpty(scheduleVoList)) {scheduleVoMap = scheduleVoList.stream().collect(Collectors.toMap(BookingScheduleRuleVo::getWorkDate,BookingScheduleRuleVo -> BookingScheduleRuleVo));}//获取可预约排班规则List<BookingScheduleRuleVo> bookingScheduleRuleVoList = new ArrayList<>();for(int i=0,len=dateList.size();i<len;i++) {Date date = dateList.get(i);//从map集合根据key日期获取value值BookingScheduleRuleVo bookingScheduleRuleVo = scheduleVoMap.get(date);//如果当天没有排班医生if(bookingScheduleRuleVo == null) {bookingScheduleRuleVo = new BookingScheduleRuleVo();//就诊医生人数bookingScheduleRuleVo.setDocCount(0);//科室剩余预约数  -1表示无号bookingScheduleRuleVo.setAvailableNumber(-1);}bookingScheduleRuleVo.setWorkDate(date);bookingScheduleRuleVo.setWorkDateMd(date);//计算当前预约日期对应星期String dayOfWeek = this.getDayOfWeek(new DateTime(date));bookingScheduleRuleVo.setDayOfWeek(dayOfWeek);//最后一页最后一条记录为即将预约   状态 0：正常 1：即将放号 -1：当天已停止挂号if(i == len-1 && page == iPage.getPages()) {bookingScheduleRuleVo.setStatus(1);} else {bookingScheduleRuleVo.setStatus(0);}//当天预约如果过了停号时间， 不能预约if(i == 0 && page == 1) {DateTime stopTime = this.getDateTime(new Date(), bookingRule.getStopTime());if(stopTime.isBeforeNow()) {//停止预约bookingScheduleRuleVo.setStatus(-1);}}bookingScheduleRuleVoList.add(bookingScheduleRuleVo);}//可预约日期规则数据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;}//获取可预约日志分页数据private IPage getListDate(int page, int limit, BookingRule bookingRule) {//获取当天放号时间  年 月 日 小时 分钟DateTime releaseTime = this.getDateTime(new Date(), bookingRule.getReleaseTime());//获取预约周期Integer cycle = bookingRule.getCycle();//如果当天放号时间已经过去了，预约周期从后一天开始计算，周期+1if(releaseTime.isBeforeNow()) {cycle += 1;}//获取可预约所有日期，最后一天显示即将放号List<Date> dateList = new ArrayList<>();for(int i=0;i<cycle;i++) {DateTime curDateTime = new DateTime().plusDays(i);String dateString = curDateTime.toString("yyyy-MM-dd");dateList.add(new DateTime(dateString).toDate());}//因为预约周期不同的，每页显示日期最多7天数据，超过7天分页List<Date> pageDateList = new ArrayList<>();int start = (page-1)*limit;int end = (page-1)*limit+limit;//如果可以显示数据小于7，直接显示if(end > dateList.size()) {end = dateList.size();}for(int i=start;i<end;i++) {pageDateList.add(dateList.get(i));}//如果可以显示数据大于7，进行分页IPage<Date> iPage = new com.baomidou.mybatisplus.extension.plugins.pagination.Page<>(page,7,dateList.size());iPage.setRecords(pageDateList);return iPage;}/*** 将Date日期（yyyy-MM-dd HH:mm）转换为DateTime*/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;}

DepartmentService接口：

//根据科室编号和医院编号查询科室Department getDepartment(String hoscode, String depcode);

实现类：

 //根据科室编号和医院编号查询科室@Overridepublic Department getDepartment(String hoscode, String depcode) {return departmentRepository.getDepartmentByHoscodeAndDepcode(hoscode, depcode);}

另外一个访问接口： HospitalApiController：继续添加接口：

@ApiOperation(value = "获取排班数据")@GetMapping("auth/findScheduleList/{hoscode}/{depcode}/{workDate}")public Result findScheduleList(@ApiParam(name = "hoscode", value = "医院code", required = true)@PathVariable String hoscode,@ApiParam(name = "depcode", value = "科室code", required = true)@PathVariable String depcode,@ApiParam(name = "workDate", value = "排班日期", required = true)@PathVariable String workDate) {return Result.ok(scheduleService.getDetailSchedule(hoscode, depcode, workDate));}

ScheduleService：接口：添加

 //根据医院编号 、科室编号和工作日期，查询排班详细信息List<Schedule> getDetailSchedule(String hoscode, String depcode, String workDate);

实现类：

 //根据医院编号 、科室编号和工作日期，查询排班详细信息@Overridepublic List<Schedule> getDetailSchedule(String hoscode, String depcode, String workDate) {//根据参数查询mongodbList<Schedule> scheduleList =scheduleRepository.findScheduleByHoscodeAndDepcodeAndWorkDate(hoscode,depcode,new DateTime(workDate).toDate());//把得到list集合遍历，向设置其他值：医院名称、科室名称、日期对应星期scheduleList.stream().forEach(item->{this.packageSchedule(item);});return scheduleList;}//封装排班详情其他值 医院名称、科室名称、日期对应星期private void packageSchedule(Schedule schedule) {//设置医院名称  调用方法获取医院名称schedule.getParam().put("hosname",hospitalService.getHospName(schedule.getHoscode()));//设置科室名称  根据科室编号和医院编号查询科室名称schedule.getParam().put("depname",departmentService.getDepName(schedule.getHoscode(),schedule.getDepcode()));//设置日期对应星期schedule.getParam().put("dayOfWeek",this.getDayOfWeek(new DateTime(schedule.getWorkDate())));}

（2）前台用户系统-预约挂号详情-前端整合

在这个页面，点击某一个科室，进行跳转到详情页面

创建schedule.vue页面

<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/' + hoscode + '\''">预约挂号</span></div><div class="nav-item"><spanclass="v-link clickable dark":onclick="'javascript:window.location=\'/hosp/detail/' + hoscode + '\''">医院详情</span></div><div class="nav-item"><spanclass="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-paginationclass="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><divv-for="item in scheduleList":key="item.id":v-if="item.workTime == 0"><div class="list-item"><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"><divclass="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><divv-for="item in scheduleList":key="item.id":v-if="item.workTime == 1"><div class="list-item"><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"><divclass="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><script>
import "~/assets/css/hospital_personal.css";
import "~/assets/css/hospital.css";import hospitalApi from "@/api/hosp";
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.getBookingScheduleRule();},methods: {getPage(page = 1) {this.page = page;this.workDate = null;this.activeIndex = 0;this.getBookingScheduleRule();},getBookingScheduleRule() {hospitalApi.getBookingScheduleRule(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;});},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.getBookingScheduleRule();}},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) {debugger;if (availableNumber == 0 || this.pageFirstStatus == -1) {this.$message.error("不能预约");} else {window.location.href = "/hosp/booking?scheduleId=" + scheduleId;}},},
};
</script>

在hosp.js中继续添加访问的接口：

测试：点击第一个科室：

下面完成点击剩余按钮，可以做预约挂号

（3）前台用户系统-预约挂号-预约确认功能实现

预约确认

根据排班id获取排班信息，在页面展示
选择就诊人
预约下单

首先开发接口：

在HospiApiController中继续添加：

@ApiOperation(value = "获取排班id获取排班数据")@GetMapping("getSchedule/{scheduleId}")public Result getSchedule(@PathVariable String scheduleId) {Schedule schedule = scheduleService.getScheduleId(scheduleId);return Result.ok(schedule);}

ScheduleService接口继续添加：

//获取排班id获取排班数据Schedule getScheduleId(String scheduleId);

实习类：

 //获取排班id获取排班数据@Overridepublic Schedule getScheduleId(String scheduleId) {Schedule schedule = scheduleRepository.findById(scheduleId).get();return this.packageSchedule(schedule);}

详情页面：跳转路径

创建booking.vue页面：

<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=\'/hospital/' + schedule.hoscode + '\''">预约挂号</span></div><div class="nav-item"><spanclass="v-link clickable dark":onclick="'javascript:window.location=\'/hospital/detail/' +schedule.hoscode +'\''">医院详情</span></div><div class="nav-item"><spanclass="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"><divclass="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><imgsrc="//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"><circlecx="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-cardclass="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><script>
import "~/assets/css/hospital_personal.css";
import "~/assets/css/hospital.css";import hospitalApi from "@/api/hosp";
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();},//根据排班id获取排班信息getSchedule() {hospitalApi.getSchedule(this.scheduleId).then((response) => {this.schedule = response.data;});},//获取就诊人信息findPatientList() {patientApi.findList().then((response) => {this.patientList = response.data;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>

在hosp.js中继续添加访问

测试:

点击第一个剩余22按钮：

下面完成确认挂号功能实现

商易通-预约挂号详情页面-预约确认（三十五）相关推荐

预约挂号项目之预约挂号模块
目录一.预约挂号详情 1.需求分析 2.api接口 2.1 .controller代码: 2.2 .Service类接口: 2.3 .添加service接口实现: 学习指南: https://www ...
预约挂号项目的预约流程
一.预约挂号详情 1.需求分析 1.接口分析 (1)根据预约周期,展示可预约日期数据,按分页展示 (2)选择日期展示当天可预约列表(该接口后台已经实现过) 2.页面展示分析 (1)分页展示可预约日期, ...
医院预约挂号系统,java医院预约挂号系统,医院预约挂号管理系统毕业设计作品
项目背景和意义目的:本课题主要目标是设计并能够实现一个基于web网页的医院预约挂号系统,整个网站项目使用了B/S架构,基于java的springboot框架下开发:通过后台设置医院信息.录入医院科室 ...
尚医通 (三十五) --------- 预约下单
目录一.预约下单前端 1. 封装 api 请求 2. 页面修改二.后端逻辑 1. 需求分析 2. 搭建 service-order 模块 3. 添加订单基础类 4. 封装 Feign 调用获取就诊 ...
【原创】基于SSM的医院预约挂号系统(医院预约挂号系统毕设源代码)
项目类型:SSM源码用户类型:3个角色(管理员+普通用户+医生) 主要技术:SSM+MySQL+Bootstrap 开发工具:Eclipse/Idea均可使用,有两个不同的版本数据库:MySQL ...
医院预约挂号mysql_医院预约挂号系统代码 mysql+myeclipse
[实例简介] 设计的目标是开发一个医院预约挂号系统,内含mysql+myeclipse.数据库代码,说明文档, [实例截图] [核心代码] 医院预约挂号系统代码,有说明文档 └── 医院预约挂号系统代 ...
ReactNative进阶（三十五）：应用脚手架 Yo 构建 RN 页面
文章目录一.前言二.Bloc 数据流讲解三.利用代码自动生成功能创建新页面四.Bloc数据流使用说明五.拓展阅读一.前言前期将脚手架yo安装成功,本篇博文主要讲解如何利用yo提供的代码自 ...
js datagrid新增一行_Django接口新增页面编写_2（十五）
做一个好看的页面真的是一件困难的事情,所以还是遵循复制后修改的原则,首先是借鉴httpbin页面的方式进行块状展开. 块状从模版中找到类似的html代码: 块状我们可以看到一下它的动态效果,可以自 ...
三十五、影院页面（获取卖座官网的影院信息并显示）
Better-Scroll插件实现页面中拖动滚动.拉动属性功能(平滑滚动),以提高用户体验. 当div内容的高度超过div的高度时,使用该插件实现平滑滚动. Better-Scroll的安装: (1) ...

商易通-预约挂号详情页面-预约确认（三十五）

商易通-预约挂号详情页面-预约确认（三十五）相关推荐

最新文章

热门文章