YYGH-9-预约下单

预约下单

之前我们做到了

分析

下单参数：就诊人id与排班id

1、下单我们要获取就诊人信息

2、获取排班下单信息与规则信息

3、获取医院签名信息，然后通过接口去医院预约下单

4、下单成功更新排班信息与发送短信

封装Feign

现在到了点击确认挂号,我们就需要,在订单表生成订单

先来看一下订单表结构

我们发现现在这个订单交易号肯定是订单模块自己生成,有一些数据是需要从hosp模块取得,还有一部分就诊人信息是需要在user模块获得我们先来写这2个模块的Feign

userFeign

操作模块：service-user

controller

//通过feign根据id获取就诊人信息
@GetMapping("/inner/get/{id}")
public Patient innerFindByid(@PathVariable("id") Long id){return patientService.getPatientId(id);
}

service

@Override
public Patient getPatientId(Long id) {Patient patient = baseMapper.selectById(id);this.packPatient(patient);return patient;
}

搭建service-user-client模块

@FeignClient(value = "service-user")
@Repository
public interface PatientFeignClient {//根据就诊人id获取就诊人信息@GetMapping("/api/user/patient/inner/get/{id}")public Patient getPatientOrder(@PathVariable("id") Long id);}

hospFeign

操作模块：service-hosp

controller

@GetMapping("inner/getScheduleOrderVo/{scheduleId}")
public ScheduleOrderVo getScheduleOrderVo(@PathVariable String scheduleId) {return scheduleService.getScheduleOrderVo(scheduleId);
}@GetMapping("inner/getSignInfoVo/{hoscode}")
public SignInfoVo getSignInfoVo(@ApiParam(name = "hoscode", value = "医院code", required = true)@PathVariable("hoscode") String hoscode) {return hospitalSetService.getSignInfoVo(hoscode);
}

service

@Override
public ScheduleOrderVo getScheduleOrderVo(String scheduleId) {ScheduleOrderVo scheduleOrderVo = new ScheduleOrderVo();//获取排班信息Schedule schedule = scheduleRepository.findById(scheduleId).get();if (ObjectUtils.isEmpty(schedule)) {throw new YyghException(ResultCodeEnum.PARAM_ERROR);}//获取预约挂号的规则Hospital hoscode = hospitalService.getByHoscode(schedule.getHoscode());if (ObjectUtils.isEmpty(hoscode)) {throw new YyghException(ResultCodeEnum.PARAM_ERROR);}BookingRule bookingRule = hoscode.getBookingRule();if (ObjectUtils.isEmpty(bookingRule)) {throw new YyghException(ResultCodeEnum.PARAM_ERROR);}//把获取的数据设置到scheduleOrderVoBeanUtils.copyProperties(schedule, scheduleOrderVo);scheduleOrderVo.setHosname(hospitalService.getHospName(schedule.getHoscode()));scheduleOrderVo.setDepname(departmentService.getDepName(schedule.getHoscode(), schedule.getDepcode()));//退号截止天数（如：就诊前一天为-1，当天为0）int quitDay = bookingRule.getQuitDay();DateTime startTime = getDateTime(scheduleOrderVo, schedule, bookingRule, quitDay);scheduleOrderVo.setStartTime(startTime.toDate());return scheduleOrderVo;
}

@Override
public SignInfoVo getSignInfoVo(String hoscode) {QueryWrapper<HospitalSet> queryWrapper = new QueryWrapper();queryWrapper.eq("hoscode", hoscode);HospitalSet hospitalSet = baseMapper.selectOne(queryWrapper);SignInfoVo signInfoVo = new SignInfoVo();signInfoVo.setApiUrl(hospitalSet.getApiUrl());signInfoVo.setSignKey(hospitalSet.getSignKey());return signInfoVo;
}

搭建service-hosp-client模块

@FeignClient(value = "service-hosp")
@Repository
public interface HospitalFeignClient {/*** 根据排班id获取预约下单数据*/@GetMapping("/api/hosp/hospital/inner/getScheduleOrderVo/{scheduleId}")ScheduleOrderVo getScheduleOrderVo(@PathVariable("scheduleId") String scheduleId);/*** 获取医院签名信息*/@GetMapping("/api/hosp/hospital/inner/getSignInfoVo/{hoscode}")SignInfoVo getSignInfoVo(@PathVariable("hoscode") String hoscode);}

构建Order模块

搭建service-order

pom.xml引入依赖

<dependency><groupId>com.example</groupId><artifactId>service_cmn_client</artifactId><version>0.0.1-SNAPSHOT</version>
</dependency>
<dependency><groupId>com.example</groupId><artifactId>service_user_client</artifactId><version>0.0.1-SNAPSHOT</version>
</dependency>
<dependency><groupId>com.example</groupId><artifactId>service_hosp_client</artifactId><version>0.0.1-SNAPSHOT</version>
</dependency>

添加配置文件

# 服务端口
server.port=8206
# 服务名
spring.application.name=service-order
# 环境设置：dev、test、prod
spring.profiles.active=dev# mysql数据库连接
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql:
spring.datasource.username=
spring.datasource.password=#返回json的全局时间格式
spring.jackson.date-format=yyyy-MM-dd HH:mm:ss
spring.jackson.time-zone=GMT+8spring.data.mongodb.uri=mongodb:# nacos服务地址
spring.cloud.nacos.discovery.server-addr=127.0.0.1:8848#rabbitmq地址
spring.rabbitmq.host=192.168.44.165
spring.rabbitmq.port=5672
spring.rabbitmq.username=guest
spring.rabbitmq.password=guest

启动类

@EnableDiscoveryClient//注册服务
@SpringBootApplication
@ComponentScan(basePackages = "com.example") //swagger扫描文件
@EnableFeignClients(basePackages = "com.example")
public class ServiceOrderApplication {public static void main(String[] args) {SpringApplication.run(ServiceOrderApplication.class,args);}
}

配置网关

#设置路由id
spring.cloud.gateway.routes[6].id=service-order
#设置路由的uri
spring.cloud.gateway.routes[6].uri=lb://service-order
#设置路由断言,代理servicerId为auth-service的/auth/路径
spring.cloud.gateway.routes[6].predicates= Path=/*/order/**

这是我们的项目目录

controller

@RestController
@RequestMapping("/api/order/orderInfo")
public class OrderApiController {@Autowiredprivate OrderService orderService;//生成挂号订单@PostMapping("auth/submitOrder/{scheduleId}/{patientId}")public Result saveOrder(@PathVariable String scheduleId,@PathVariable Long patientId) {Long orderId = orderService.saveOrder(scheduleId,patientId);return Result.ok(orderId);}
}

service

@Service
public class OrderInfoImpl extends ServiceImpl<OrderMapper, OrderInfo> implements OrderService {@Autowiredprivate PatientFeignClient patientFeignClient;@Autowiredprivate HospitalFeignClient hospitalFeignClient;@Overridepublic Long saveOrder(String scheduleId, Long patientId) {//获取就诊人信息Patient patient = patientFeignClient.getPatientOrder(patientId);//获取排班相关信息ScheduleOrderVo scheduleOrderVo = hospitalFeignClient.getScheduleOrderVo(scheduleId);//判断时间是否可以预约if (new DateTime(scheduleOrderVo.getStartTime()).isAfterNow() ||new DateTime(scheduleOrderVo.getEndTime()).isBeforeNow()) {throw new YyghException(ResultCodeEnum.TIME_NO);}//获取签名信息SignInfoVo signInfoVo = hospitalFeignClient.getSignInfoVo(scheduleOrderVo.getHoscode());//添加到订单表OrderInfo orderInfo = new OrderInfo();BeanUtils.copyProperties(scheduleOrderVo, orderInfo);String outTradeNo = System.currentTimeMillis() + "" + new Random().nextInt(100);orderInfo.setOutTradeNo(outTradeNo);orderInfo.setScheduleId(scheduleId);orderInfo.setUserId(patient.getUserId());orderInfo.setPatientId(patientId);orderInfo.setPatientName(patient.getName());orderInfo.setPatientPhone(patient.getPhone());orderInfo.setOrderStatus(OrderStatusEnum.UNPAID.getStatus());baseMapper.insert(orderInfo);//调用医院接口,实现预约挂号操作//先设置调用医院接口需要参数,添加放到map集合Map<String, Object> paramMap = hospParameter(patient, signInfoVo, orderInfo);//请求医院系统接口JSONObject result = HttpRequestHelper.sendRequest(paramMap, signInfoVo.getApiUrl() + "/order/submitOrder");//如果成功if (result.getInteger("code") == 200) {updateOrder(orderInfo, result);} else {throw new YyghException(result.getString("message"), ResultCodeEnum.FAIL.getCode());}return orderInfo.getId();}private void updateOrder(OrderInfo orderInfo, JSONObject result) {JSONObject jsonObject = result.getJSONObject("data");//预约记录唯一标识（医院预约记录主键）String hosRecordId = jsonObject.getString("hosRecordId");//预约序号Integer number = jsonObject.getInteger("number");//取号时间String fetchTime = jsonObject.getString("fetchTime");//取号地址String fetchAddress = jsonObject.getString("fetchAddress");//更新订单orderInfo.setHosRecordId(hosRecordId);orderInfo.setNumber(number);orderInfo.setFetchTime(fetchTime);orderInfo.setFetchAddress(fetchAddress);baseMapper.updateById(orderInfo);//排班可预约数Integer reservedNumber = jsonObject.getInteger("reservedNumber");//排班剩余预约数Integer availableNumber = jsonObject.getInteger("availableNumber");//发送mq信息更新号源和短信通知}//设置医院请求参数private Map<String, Object> hospParameter(Patient patient, SignInfoVo signInfoVo, OrderInfo orderInfo) {Map<String, Object> paramMap = new HashMap<>();paramMap.put("hoscode", orderInfo.getHoscode());paramMap.put("depcode", orderInfo.getDepcode());paramMap.put("hosScheduleId", orderInfo.getScheduleId());paramMap.put("reserveDate", new DateTime(orderInfo.getReserveDate()).toString("yyyy-MM-dd"));paramMap.put("reserveTime", orderInfo.getReserveTime());paramMap.put("amount", orderInfo.getAmount());paramMap.put("name", patient.getName());paramMap.put("certificatesType", patient.getCertificatesType());paramMap.put("certificatesNo", patient.getCertificatesNo());paramMap.put("sex", patient.getSex());paramMap.put("birthdate", patient.getBirthdate());paramMap.put("phone", patient.getPhone());paramMap.put("isMarry", patient.getIsMarry());paramMap.put("provinceCode", patient.getProvinceCode());paramMap.put("cityCode", patient.getCityCode());paramMap.put("districtCode", patient.getDistrictCode());paramMap.put("address", patient.getAddress());//联系人paramMap.put("contactsName", patient.getContactsName());paramMap.put("contactsCertificatesType", patient.getContactsCertificatesType());paramMap.put("contactsCertificatesNo", patient.getContactsCertificatesNo());paramMap.put("contactsPhone", patient.getContactsPhone());paramMap.put("timestamp", HttpRequestHelper.getTimestamp());String sign = HttpRequestHelper.getSign(paramMap, signInfoVo.getSignKey());paramMap.put("sign", sign);return paramMap;}
}

前端

封装api请求

添加/api/order/orderInfo.js文件，定义下单接口

import request from '@/utils/request'const api_name = `/api/order/orderInfo`export default {submitOrder(scheduleId, patientId) {return request({url: `${api_name}/auth/submitOrder/${scheduleId}/${patientId}`,method: 'post'})}
}

在/pages/hosp/booking.vue组件完善下单方法

submitOrder() {if(this.patient.id == null) {this.$message.error('请选择就诊人')return}// 防止重复提交if(this.submitBnt == '正在提交...') {this.$message.error('重复提交')return}this.submitBnt = '正在提交...'orderInfoApi.submitOrder(this.scheduleId, this.patient.id).then(response => {let orderId = response.datawindow.location.href = '/order/show?orderId=' + orderId}).catch(e => {this.submitBnt = '确认挂号'})
},

整合RabbitMQ

这里我们的思路是

1.构建一个rabbit-util,方便其他模块调用

2.在order模块中,当订单更新完之后,推送rabbit消息

3.在hosp模块中添加一个rabbit的消费者,当接受到order模块的消息之后更新hosp系统的库存同时给邮件发送模块推送rabbit消息

4.在msm模块中添加一个rabbit的消费者,当接受到hosp模块的消息之后,发送给预约人邮件

构建rabbit-util

由于之后有很多模块会用的mq所以我们建立一个rabbit-uitl的模块方便其他微服务调用,这是结构

配置文件

<!--rabbitmq消息队列-->
<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-actuator</artifactId>
</dependency>
<dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-bus-amqp</artifactId>
</dependency>
<dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId>
</dependency>

service

@Service
public class RabbitService {@Autowiredprivate RabbitTemplate rabbitTemplate;/*** 发送消息** @param exchange   交换机* @param routingKey 路由键* @param message    消息*/public boolean sendMessage(String exchange, String routingKey, Object message) {rabbitTemplate.convertAndSend(exchange, routingKey, message);return true;}
}

const

public class MqConst {/*** 预约下单*/public static final String EXCHANGE_DIRECT_ORDER = "exchange.direct.order";public static final String ROUTING_ORDER = "order";//队列public static final String QUEUE_ORDER = "queue.order";/*** 短信*/public static final String EXCHANGE_DIRECT_MSM = "exchange.direct.msm";public static final String ROUTING_MSM_ITEM = "msm.item";//队列public static final String QUEUE_MSM_ITEM = "queue.msm.item";}

config

@Configuration
public class MQConfig {@Beanpublic MessageConverter messageConverter(){return new Jackson2JsonMessageConverter();}
}

service-order

之前我们的模块做到这个地方了,补全我们的方法

OrderMqVo orderMqVo = new OrderMqVo();
orderMqVo.setScheduleId(scheduleId);
orderMqVo.setReservedNumber(reservedNumber);
orderMqVo.setAvailableNumber(availableNumber);//邮件提示
MsmVo msmVo = new MsmVo();
msmVo.setPhone(orderInfo.getPatientPhone());
String reserveDate =new DateTime(orderInfo.getReserveDate()).toString("yyyy-MM-dd")+ (orderInfo.getReserveTime() == 0 ? "上午" : "下午");
Map<String, Object> param = new HashMap<String, Object>() {{put("title", orderInfo.getHosname() + "|" + orderInfo.getDepname() + "|" + orderInfo.getTitle());put("amount", orderInfo.getAmount());put("reserveDate", reserveDate);put("name", orderInfo.getPatientName());put("quitTime", new DateTime(orderInfo.getQuitTime()).toString("yyyy-MM-dd HH:mm"));
}};
msmVo.setParam(param);
orderMqVo.setMsmVo(msmVo);
rabbitService.sendMessage(MqConst.EXCHANGE_DIRECT_ORDER, MqConst.ROUTING_ORDER, orderMqVo);

service-hosp

hosp的监听器

@Component
@Slf4j
public class HospitalReceiver {@Autowiredprivate ScheduleService scheduleService;@Autowiredprivate RabbitService rabbitService;@RabbitListener(bindings = @QueueBinding(value = @Queue(value = MqConst.QUEUE_ORDER, durable = "true"),exchange = @Exchange(value = MqConst.EXCHANGE_DIRECT_ORDER),key = {MqConst.ROUTING_ORDER}))public void receive(OrderMqVo orderMqVo, Message message, Channel channel) {log.info("接受到rabbitmq的消息开始更新下单数" + orderMqVo.toString());//下单成功更新预约数Schedule schedule = scheduleService.getSchedule(orderMqVo.getScheduleId());schedule.setAvailableNumber(orderMqVo.getAvailableNumber());schedule.setReservedNumber(orderMqVo.getReservedNumber());scheduleService.update(schedule);//发送邮件MsmVo msmVo = orderMqVo.getMsmVo();if (!ObjectUtils.isEmpty(msmVo)) {rabbitService.sendMessage(MqConst.EXCHANGE_DIRECT_MSM, MqConst.ROUTING_MSM_ITEM, msmVo);}}
}

service-msm

@Component
public class MsmReceiver {@Autowiredprivate MsmService msmService;@RabbitListener(bindings = @QueueBinding(value = @Queue(value = MqConst.QUEUE_MSM_ITEM, durable = "true"),exchange = @Exchange(value = MqConst.EXCHANGE_DIRECT_MSM),key = {MqConst.ROUTING_MSM_ITEM}))public void send(MsmVo msmVo) {msmService.send(msmVo);}}

send方法

//关于mq发送短信的封装
@Override
@Async
public void send(MsmVo msmVo) {log.info(msmVo.getPhone());//判断邮箱是否为空if (StringUtils.isEmpty(msmVo.getPhone())) {return;}//1.创建一个简单的的消息邮件SimpleMailMessage simpleMailMessage = new SimpleMailMessage();simpleMailMessage.setSubject(msmVo.getParam().get("title") + "预约成功");simpleMailMessage.setText(msmVo.getParam().get("name") + "的预约成功请于" + msmVo.getParam().get("reserveDate") + "到医院就诊" );simpleMailMessage.setTo(msmVo.getPhone());simpleMailMessage.setFrom("2590416618@qq.com");javaMailSenderImpl.send(simpleMailMessage);
}

前端

添加/api/order/orderInfo.js文件，定义下单接口

import request from '@/utils/request'const api_name = `/api/order/orderInfo`export default {submitOrder(scheduleId, patientId) {return request({url: `${api_name}/auth/submitOrder/${scheduleId}/${patientId}`,method: 'post'})}
}

在/pages/hosp/booking.vue组件完善下单方法

submitOrder() {if(this.patient.id == null) {this.$message.error('请选择就诊人')return}// 防止重复提交if(this.submitBnt == '正在提交...') {this.$message.error('重复提交')return}this.submitBnt = '正在提交...'orderInfoApi.submitOrder(this.scheduleId, this.patient.id).then(response => {let orderId = response.datawindow.location.href = '/order/show?orderId=' + orderId}).catch(e => {this.submitBnt = '确认挂号'})
},

功能展示

点击确认后,可预约数减1,同时发送邮件

预约下单功能BUG

数据表设计

之前改用邮箱的坑因为手机字段位数问题

格式错误

在测试的过程中遇到这样一个问题

不要慌先看问题格式错误,然后这个是一个排班的id,检查排班id是否有异常的格式转换

发现把一个Stirng转换成Long肯定是有问题的

改掉

空指针异常

这里有一个空指针问题,我们点进去这个方法

发现是ReserviceTimeget不到

找一下orderInfo的来源

发现它是从这里来的

这时我们注意到在向医院模块发送请求的时候

reservice就是空的

说明在这之前就已经是空了

可以看到orderInfo的属性来自于scheduleOrderVo

而这个Vo又是通过Feign调用得来的

找到这个方法

可能找到问题了

这里直接通过

BeanUtils.copyProperties(schedule, scheduleOrderVo);

属性名可能不同

果然

添加上这个再次进行测试

Rabbit监听错误

在msm模块

Cannot convert from [com.example.yygh.vo.msm.MsmVo] to [javax.mail.Message] for GenericMessage

报错这个,可以看出是类型转换有问题

这时我把方法后面的参数删除就解决了

下单列表

要做成这样的效果

思路

1.需要一个带分页的条件查询接口,

2.前端建一个页面展示,同时发送请求

后端

controller

//根据订单id查询订单详情
@GetMapping("auth/getOrders/{orderId}")
public Result getOrders(@PathVariable Long orderId) {OrderInfo orderInfo = orderService.getOrders(orderId);return Result.ok(orderInfo);
}//订单列表(条件查询带分页)
@GetMapping("auth/{page}/{limit}")
public Result list(@PathVariable Long page,@PathVariable Long limit,OrderQueryVo orderQueryVo,HttpServletRequest httpServletRequest) {orderQueryVo.setUserId(AuthContextHolder.getUserId(httpServletRequest));Page<OrderInfo> pageParams = new Page<>(page, limit);IPage<OrderInfo> pageModel = orderService.selectPage(pageParams, orderQueryVo);return Result.ok(pageModel);
}@ApiOperation(value = "获取订单状态")
@GetMapping("auth/getStatusList")
public Result getStatusList() {return Result.ok(OrderStatusEnum.getStatusList());
}

service

@Override
public OrderInfo getOrders(Long orderId) {OrderInfo orderInfo = baseMapper.selectById(orderId);return packOrderInfo(orderInfo);
}@Override
public IPage<OrderInfo> selectPage(Page<OrderInfo> pageParams, OrderQueryVo orderQueryVo) {//orderQueryVo获取条件值String name = orderQueryVo.getKeyword(); //医院名称Long patientId = orderQueryVo.getPatientId(); //就诊人名称String orderStatus = orderQueryVo.getOrderStatus(); //订单状态String reserveDate = orderQueryVo.getReserveDate();//安排时间String createTimeBegin = orderQueryVo.getCreateTimeBegin();String createTimeEnd = orderQueryVo.getCreateTimeEnd();//对条件值进行非空判断QueryWrapper<OrderInfo> wrapper = new QueryWrapper<>();if(!StringUtils.isEmpty(name)) {wrapper.like("hosname",name);}if(!StringUtils.isEmpty(patientId)) {wrapper.eq("patient_id",patientId);}if(!StringUtils.isEmpty(orderStatus)) {wrapper.eq("order_status",orderStatus);}if(!StringUtils.isEmpty(reserveDate)) {wrapper.ge("reserve_date",reserveDate);}if(!StringUtils.isEmpty(createTimeBegin)) {wrapper.ge("create_time",createTimeBegin);}if(!StringUtils.isEmpty(createTimeEnd)) {wrapper.le("create_time",createTimeEnd);}//调用mapper的方法IPage<OrderInfo> pages = baseMapper.selectPage(pageParams, wrapper);//编号变成对应值封装pages.getRecords().stream().forEach(item -> {this.packOrderInfo(item);});return pages;
}private OrderInfo packOrderInfo(OrderInfo orderInfo) {orderInfo.getParam().put("orderStatusString", OrderStatusEnum.getStatusNameByStatus(orderInfo.getOrderStatus()));return orderInfo;
}

前端

api/orderInfo.js

//订单详情
getOrders(orderId) {return request({url: `${api_name}/auth/getOrders/${orderId}`,method: 'get'})
},
//订单列表
getPageList(page, limit, searchObj) {return request({url: `${api_name}/auth/${page}/${limit}`,method: `get`,params: searchObj})
},
//订单状态
getStatusList() {return request({url: `${api_name}/auth/getStatusList`,method: 'get'})
},

建立pages/order/index.vue

<template><!-- header --><div class="nav-container page-component"><!--左侧导航 #start --><div class="nav left-nav"><div class="nav-item "><span class="v-link clickable dark" onclick="javascript:window.location='/user'">实名认证 </span></div><div class="nav-item selected"><span class="v-link selected dark" onclick="javascript:window.location='/order'"> 挂号订单 </span></div><div class="nav-item "><span class="v-link clickable dark" onclick="javascript:window.location='/patient'"> 就诊人管理 </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="personal-order"><div class="title"> 挂号订单</div><el-form :inline="true"><el-form-item label="就诊人："><el-select v-model="searchObj.patientId" placeholder="请选择就诊人" class="v-select patient-select"><el-optionv-for="item in patientList":key="item.id":label="item.name + '【' + item.certificatesNo + '】'":value="item.id"></el-option></el-select></el-form-item><el-form-item label="订单状态：" style="margin-left: 80px"><el-select v-model="searchObj.orderStatus" placeholder="全部" class="v-select patient-select" style="width: 200px;"><el-optionv-for="item in statusList":key="item.status":label="item.comment":value="item.status"></el-option></el-select></el-form-item><el-form-item><el-button type="text" class="search-button v-link highlight clickable selected" @click="fetchData()">查询</el-button></el-form-item></el-form><div class="table-wrapper table"><el-table:data="list"stripestyle="width: 100%"><el-table-columnlabel="就诊时间"width="120"><template slot-scope="scope">{{ scope.row.reserveDate }} {{ scope.row.reserveTime === 0 ? '上午' : '下午' }}</template></el-table-column><el-table-columnprop="hosname"label="医院"width="100"></el-table-column><el-table-columnprop="depname"label="科室"></el-table-column><el-table-columnprop="title"label="医生"></el-table-column><el-table-columnprop="amount"label="医事服务费"></el-table-column><el-table-columnprop="patientName"label="就诊人"></el-table-column><el-table-columnprop="param.orderStatusString"label="订单状态"></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-button type="text" class="v-link highlight clickable selected" @click="show(scope.row.id)">详情</el-button></template></el-table-column></el-table></div><!-- 分页 --><el-paginationclass="pagination"layout="prev, pager, next":current-page="page":total="total":page-size="limit"@current-change="fetchData"></el-pagination></div></div><!-- 右侧内容 #end --></div><!-- footer -->
</template>
<script>
import '~/assets/css/hospital_personal.css'
import '~/assets/css/hospital.css'
import orderInfoApi from '@/api/orderInfo'
import patientApi from '@/api/patient'
export default {data() {return {list: [], // banner列表total: 0, // 数据库中的总记录数page: 1, // 默认页码limit: 10, // 每页记录数searchObj: {}, // 查询表单对象patientList: [],statusList: []}},created() {this.orderId = this.$route.query.orderIdthis.fetchData()this.findPatientList()this.getStatusList()},methods: {fetchData(page = 1) {this.page = pageorderInfoApi.getPageList(this.page, this.limit, this.searchObj).then(response => {console.log(response.data);this.list = response.data.recordsthis.total = response.data.total})},findPatientList() {patientApi.findList().then(response => {this.patientList = response.data})},getStatusList() {orderInfoApi.getStatusList().then(response => {this.statusList = response.data})},changeSize(size) {console.log(size)this.limit = sizethis.fetchData(1)},show(id) {window.location.href = '/order/show?orderId=' + id}}
}
</script>

建立pages/order/show.vue

<template><!-- header --><div class="nav-container page-component"><!--左侧导航 #start --><div class="nav left-nav"><div class="nav-item "><span class="v-link clickable dark" onclick="javascript:window.location='/user'">实名认证 </span></div><div class="nav-item selected"><span class="v-link selected dark" onclick="javascript:window.location='/order'"> 挂号订单 </span></div><div class="nav-item "><span class="v-link clickable dark" onclick="javascript:window.location='/patient'"> 就诊人管理 </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="order-detail"><div class="title"> 挂号详情</div><div class="status-bar"><div class="left-wrapper"><div class="status-wrapper BOOKING_SUCCESS"><span class="iconfont"></span> {{ orderInfo.param.orderStatusString }}</div></div><div class="right-wrapper"><img src="//img.114yygh.com/static/web/code_order_detail.png" class="code-img"><div class="content-wrapper"><div> 微信<span class="iconfont"></span>关注“预约挂号”</div><div class="watch-wrapper"> 快速挂号，轻松就医</div></div></div></div><div class="info-wrapper"><div class="title-wrapper"><div class="block"></div><div>挂号信息</div></div><div class="info-form"><el-form ref="form" :model="form"><el-form-item label="就诊人信息："><div class="content"><span>{{ orderInfo.patientName }}</span></div></el-form-item><el-form-item label="就诊日期："><div class="content"><span>{{ orderInfo.reserveDate }} {{ orderInfo.reserveTime == 0 ? '上午' : '下午' }}</span></div></el-form-item><el-form-item label="就诊医院："><div class="content"><span>{{ orderInfo.hosname }} </span></div></el-form-item><el-form-item label="就诊科室："><div class="content"><span>{{ orderInfo.depname }} </span></div></el-form-item><el-form-item label="医生职称："><div class="content"><span>{{ orderInfo.title }} </span></div></el-form-item><el-form-item label="医事服务费："><div class="content"><div class="fee">{{ orderInfo.amount }}元</div></div></el-form-item><el-form-item label="挂号单号："><div class="content"><span>{{ orderInfo.outTradeNo }} </span></div></el-form-item><el-form-item label="挂号时间："><div class="content"><span>{{ orderInfo.createTime }}</span></div></el-form-item></el-form></div></div><div class="rule-wrapper mt40"><div class="rule-title"> 注意事项</div><div>1、请确认就诊人信息是否准确，若填写错误将无法取号就诊，损失由本人承担；<br><span style="color:red">2、【取号】就诊当天需在{{ orderInfo.fetchTime }}在医院取号，未取号视为爽约，该号不退不换；</span><br>3、【退号】在{{ orderInfo.quitTime }}前可在线退号 ，逾期将不可办理退号退费；<br>4、北京114预约挂号支持自费患者使用身份证预约，同时支持北京市医保患者使用北京社保卡在平台预约挂号。请于就诊当日，携带预约挂号所使用的有效身份证件到院取号；<br>5、请注意北京市医保患者在住院期间不能使用社保卡在门诊取号。</div></div><div class="bottom-wrapper mt60" v-if="orderInfo.orderStatus == 0 || orderInfo.orderStatus == 1"><div class="button-wrapper"><div class="v-button white" @click="cancelOrder()">取消预约</div></div><div class="button-wrapper ml20" v-if="orderInfo.orderStatus == 0"><div class="v-button" @click="pay()">支付</div></div></div></div></div><!-- 右侧内容 #end --><!-- 微信支付弹出框 --><el-dialog :visible.sync="dialogPayVisible" style="text-align: left" :append-to-body="true" width="500px" @close="closeDialog"><div class="container"><div class="operate-view" style="height: 350px;"><div class="wrapper wechat"><div><img src="data:images/weixin.jpg" alt=""><div style="text-align: center;line-height: 25px;margin-bottom: 40px;">请使用微信扫一扫<br/>扫描二维码支付</div></div></div></div></div></el-dialog></div><!-- footer -->
</template>
<script>
import '~/assets/css/hospital_personal.css'
import '~/assets/css/hospital.css'
import orderInfoApi from '@/api/orderInfo'
export default {data() {return {orderId: null,orderInfo: {param: {}},dialogPayVisible: false,payObj: {},timer: null  // 定时器名称}},created() {this.orderId = this.$route.query.orderIdthis.init()},methods: {init() {orderInfoApi.getOrders(this.orderId).then(response => {console.log(response.data);this.orderInfo = response.data})}}
}
</script>
<style>
.info-wrapper {padding-left: 0;padding-top: 0;
}
.content-wrapper {color: #333;font-size: 14px;padding-bottom: 0;
}
.bottom-wrapper {width: 100%;
}
.button-wrapper {margin: 0;
}
.el-form-item {margin-bottom: 5px;
}
.bottom-wrapper .button-wrapper {margin-top: 0;
}
</style>