YYGH-9-预约下单

已于 2022-06-29 10:45:54 修改
阅读量338 收藏 1
点赞数 1
分类专栏： 预约挂号项目 文章标签： java 前端 开发语言
于 2022-06-28 11:21:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53227758/article/details/125498935
版权

预约下单

之前我们做到了

image-20220627153129751

分析

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

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

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

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

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

封装Feign

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

先来看一下订单表结构

image-20220627153339997

我们发现现在这个订单交易号肯定是订单模块自己生成,有一些数据是需要从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);
    }

    //把获取的数据设置到scheduleOrderVo
    BeanUtils.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+8

spring.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/**

这是我们的项目目录

image-20220627161254082

controller

@RestController
@RequestMapping("/api/order/orderInfo")
public class OrderApiController {

    @Autowired
    private 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 {

    @Autowired
    private PatientFeignClient patientFeignClient;

    @Autowired
    private HospitalFeignClient hospitalFeignClient;

    @Override
    public 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.data
    window.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的模块方便其他微服务调用,这是结构

image-20220628110847320

配置文件

<!--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 {
    @Autowired
    private 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 {
    @Bean
    public MessageConverter messageConverter(){
        return new Jackson2JsonMessageConverter();
    }
}
service-order

image-20220628111114632

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

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 {

    @Autowired
    private ScheduleService scheduleService;

    @Autowired
    private 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 {

    @Autowired
    private 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.data
    window.location.href = '/order/show?orderId=' + orderId
    }).catch(e => {
    this.submitBnt = '确认挂号'
    })
},
功能展示

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

image-20220628111804813

屏幕截图 2022-06-28 104007

预约下单功能BUG
数据表设计

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

image-20220627230157479

格式错误

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

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

image-20220627233123791

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

image-20220627233215526

改掉

空指针异常

image-20220627235230770

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

image-20220627235300201

发现是ReserviceTimeget不到

找一下orderInfo的来源

image-20220627235355427

发现它是从这里来的

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

reservice就是空的

image-20220627235543381

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

image-20220627235617610

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

image-20220627235716337

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

image-20220627235751660

找到这个方法

image-20220627235811015

可能找到问题了

image-20220627235825708

这里直接通过

BeanUtils.copyProperties(schedule, scheduleOrderVo);

属性名可能不同

image-20220627235932697

image-20220627235946080

果然

添加上这个再次进行测试

Rabbit监听错误

在msm模块

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

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

image-20220628104256179

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

image-20220628104242000

下单列表

image-20220629101901261

要做成这样的效果

思路

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-option
                v-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-option
                v-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"
            stripe
            style="width: 100%">
            <el-table-column
              label="就诊时间"
              width="120">
              <template slot-scope="scope">
                {{ scope.row.reserveDate }} {{ scope.row.reserveTime === 0 ? '上午' : '下午' }}
              </template>
            </el-table-column>
            <el-table-column
              prop="hosname"
              label="医院"
              width="100">
            </el-table-column>
            <el-table-column
              prop="depname"
              label="科室">
            </el-table-column>
            <el-table-column
              prop="title"
              label="医生">
            </el-table-column>
            <el-table-column
              prop="amount"
              label="医事服务费">
            </el-table-column>
            <el-table-column
              prop="patientName"
              label="就诊人">
            </el-table-column>
            <el-table-column
              prop="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-pagination
          class="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.orderId
    this.fetchData()
    this.findPatientList()
    this.getStatusList()
  },
  methods: {
    fetchData(page = 1) {
      this.page = page
      orderInfoApi.getPageList(this.page, this.limit, this.searchObj).then(response => {
        console.log(response.data);
        this.list = response.data.records
        this.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 = size
      this.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="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.orderId
    this.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>
小赵呢
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
yygh-site:医程通前台前端代码
04-02
{{ 姓名 }} {{ 描述 }}构建设置# install dependencies$ npm install # Or yarn install# serve with hot reload at localhost:3000$ npm run dev# build for production and launch server$ npm run build$ npm ...
【Cannot convert from [[B] to】 @RabbitListener 反序列化报错
cristianoxm的博客
08-02 883
报这个信息，一般是反序列化出错 在rabbitMqConfig中添加MessageConvert /** * 解决方法:添加这个类进行序列化解析 * 会自动识别 * @param objectMapper json序列化实现类 * @return mq 消息序列化工具 */ @Bean public MessageConverter jsonMessageConverter(ObjectMapper objectMapper) {
rabbitmq python 发送失败_RabbitMQ消息反序列化失败问题回顾
weixin_42414213的博客
02-21 1105
1、背景Springboot4RabbitMQ为消息的生产者RabbitProducer为消息的消费者消息队列为：order-queue2、问题生产者生产的消息发送到RabbitMQ后，消费者在读取消息消息时反序列化消息失败消息类：public class Order implements Serializable{private static final long serialVersionUI...
Cannot convert from [[B] to [com.***.CoursePub] for GenericMessage [……………………]
Liang_KANA的博客
03-02 2293
Caused by: org.springframework.messaging.converter.MessageConversionException: Cannot convert from [[B] to [com.***.CoursePub] for GenericMessage [……………………]
尚医通-排班规则接口-排班详情接口-前端整合（二十五）
dengfengling999的博客
01-05 689
实现类ScheduleService Impl：注入departmentService。实现类：ScheduleService Impl：首先注入MongoTemplate。创建排班的Controller：ScheduleController。DepartmentService 接口： 添加方法。实现类：DepartmentServiceImpl。ScheduleRepository ：添加方法。ScheduleService ：添加接口。复制前端element-ui代码。
解决Spring Cloud Stream报Cannot convert from [[B] to [com.zx.server.dto.OrderDTO] for GenericMessage异常
松鼠病重度患者
12-07 5953
在学习Spring Cloud Stream，用Stream传输对象时，碰到了Cannot convert from [[B] to [com.zx.server.dto.OrderDTO] for GenericMessage 这个异常，但是在之前传输字符串就正常。而且把消费者的参数类型设置为String也正常，一旦设置为OrderDTO就会报错。 @GetMapping("/send...
yygh-vue-admin-template
02-20
yygh-vue-admin-template
yygh_parent:医院预约挂号项目
03-29
尚医通即为网上预约挂号系统，网上预约挂号是重组实施的一项便民就医服务，逐步纠正看病难，挂号难的就医难题，许多患者为看一次病要跑很多次医院，最终还不一定能保证看得上医生。网上预约挂号全面提供的预约挂号...
yygh_parent:在线预约挂号项目
03-28
yygh_parent:在线预约挂号项目
yygh:预约挂号系统
03-22
yygh_parent 医院挂号系统开发中遇到的问题1.整合swagger时启动类添加的扫包一定要包含用户服务com.atguigu.yygh.hosp和swageer服务com.atguigu.yygh.common所有使用服务启动类@ComponentScan （basePackages = {“ ...
尚医通-预约下单接口开发-整合RabbitMQ（三十六）
dengfengling999的博客
03-18 935
以商品订单场景为例，如果商品服务和订单服务是两个不同的微服务，在下单的过程中订单服务需要调用商品服务进行扣库存操作。按照传统的方式，下单过程要等到调用完毕之后才能返回下单成功，如果网络产生波动等原因使得商品服务扣库存延迟或者失败，会带来较差的用户体验，如果在高并发的场景下，这样的处理显然是不合适的，那怎么进行优化呢？这就需要消息队列登场了。消息队列提供一个异步通信机制，消息的发送者不必一直等待到消息被成功处理才返回，而是立即返回。
尚医通-预约下单中rabbitmq的使用
qq_39007838的博客
12-01 1228
尚医通 rabbitmq 预约下单
22-08-18 西安 尚医通（07）挂号流程、就医提醒，预约统计、rabbitmq的使用、定时任务、Echarts
m0_56799642的博客
08-19 1585
mq在这里充当了异步调用的作用，可以提高下单的响应速度
RabbitMQ延时消息队列
小羊的博客
06-11 5279
RabbitMQ延时消息队列
预约下单
weixin_45524836的博客
03-21 1123
一、预约下单 1、需求分析 1.1 订单表结构 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1X8LnXpv-1616293235472)(预约下单.assets/image-20210321094401695.png)] 1.1 下单分析 参考《尚医通API接口文档.docx》业务接口5.1预约下单 下单参数：就诊人id与排班id 1、下单我们要获取就诊人信息 2、获取排班下单信息与规则信息 3、获取医院签名信息，然后通过接口去医院预约下单 4、下单成功更新排班信息与发送
尚医通 168-9取消预约
qq_44798321的博客
08-29 444
一、步骤 controller //取消预约 @PostMapping("auth/cancel0rder/{orderId}") public Result cancel0rder(@PathVariable Long orderId) { Boolean isOrder = orderService.cancel0rder(orderId); return Result.ok(isOrder); } OrderServiceImpl： //
两种方法实现预约叫号
weixin_41659384的博客
02-02 1001
假设大厅共有四台出号机，这就意味着有四个线程在工作，下面我们用 程序模拟一下叫号的过程，约定当天最多受理50笔业务，也就是说号码最多可以出到50 方法一： 继承Thread public class TicketWindow extends Thread{ private final int Max = 50; private String name; private static...
RabbitMQ (三) 消息订阅模式
一半的博客
09-11 3995
一、广播模式(fanout) 把交换机（Exchange）收到的消息发送给所有绑定了该交换机的队列，忽略路由（RoutingKey）。 这种模式下，消息会被所有消费者消费。也就是说，只要是"绑定"到某个交换机的队列，都会收到生产者发送到该交换机的消息。 二、路由模式(direct) 生产者发送信息时，需要指定一个路由（RoutingKey），交换机（Exchange）会根据路由将消息发送到绑定了此路由的队列中。 三、主题模式(topic) 在实际的运用中，广播模式(fanout)和路
尚医通笔记-前台用户系统
weixin_46666822的博客
04-24 1876
1.首页 展示内容 （1）获取医院等级（根据数据字典编码获取）， （2）获取地区（根据数据字典编码获取） （3）医院分页列表（后台已经做过 SelectHospList） （4）根据医院名称关键字搜索医院列表 医院列表已经做过，直接调用即可。SelectHospList 根据医院名称模糊查询，直接调用mongorepostory的方法查询 另外两个根据数据字典查询，findByDictcode 2.医院详情 （HospitalApiController） 点击医院进到医院详情界面 1.获取医院预约规则
npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! yygh[email protected] dev: `nuxt`
最新发布
09-17
这个错误通常是表示在运行npm命令时出现了问题。具体来说，`npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! yygh[email protected] dev: `nuxt`` 表示在运行项目的开发模式时，使用的是nuxt命令，但是发生了非零的退出状态。这可能是由于项目配置的问题导致的。`npm ERR! code EPERM npm ERR! syscall open npm ERR! path C:\Program Files\nodejs\node_cache\_cacache\tmp\9600794e npm ERR! errno -4048` 表示在进行某些操作时，发生了权限不足的错误。`npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] dev: `webpack-dev-server --inline --progress --config build/webpack.de` 表示在运行项目的开发脚本时发生了非零的退出状态。 为了解决这些问题，可以尝试以下方法： - 检查项目的配置文件，确保所有的依赖项和命令都正确设置。 - 确保你有足够的权限来执行相关操作。可以尝试以管理员身份运行npm命令或者修改相关文件的权限。 - 检查项目的日志文件，查看详细的错误信息，有助于确定问题的具体原因。 - 更新或重新安装相关的依赖项，确保它们与项目兼容。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值