商医通-预约下单、订单详情、订单列表功能实现（三十七）

目录：

（1）前台用户系统-预约挂号-预约下单功能-前端整合和测试

（2）前台用户系统-预约挂号-订单详情功能实现

（3）前台用户系统-预约挂号-订单列表功能实现

---

（1）前台用户系统-预约挂号-预约下单功能-前端整合和测试

开发预约下单的前端：

用户点击调用这个方法：

 先创建js访问接口：

创建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`
        })
    }
}

在booking.vue里面引入这个js：

书写调用方法：

 //生成订单的方法
    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 = "确认挂号";
        });
    },

 选择某一个科室：

选择挂号：

进入选择就诊人页面：

 

 有个小问题，我们在注册短信的时候，我们这里只能发送验证码，不能发送其他的  ，可以用公司的账号发送其他消息的短信服务，但是消息队列已经发生调用      

 MQ：有队列进行了发送

 

 （2）前台用户系统-预约挂号-订单详情功能实现

当点击确认挂号，生成订单后会跳转到订单详情页面根基订单id进行显示订单的详情信息

首先开发一个接口根据id获取订单详情的接口：

在OrderApiController;中添加方法

 //根据订单id查询订单详情
    @GetMapping("auth/getOrders/{orderId}")
    public Result getOrders(@PathVariable String orderId) {
        OrderInfo orderInfo = orderService.getOrder(orderId);
        return Result.ok(orderInfo);
    }

OrderService 接口： 

package com.atguigu.yygh.order.service;

import com.atguigu.yygh.model.order.OrderInfo;
import com.baomidou.mybatisplus.extension.service.IService;

public interface OrderService extends IService<OrderInfo> {
    //保存订单
    Long saveOrder(String scheduleId, Long patientId);

    //根据订单id查询订单详情
    OrderInfo getOrder(String orderId);
}

实现类：

 //根据订单id查询订单详情
    @Override
    public OrderInfo getOrder(String orderId) {
        OrderInfo orderInfo = baseMapper.selectById(orderId);
        return this.packOrderInfo(orderInfo);
    }

    //把状态码变成具体描述的值
    private OrderInfo packOrderInfo(OrderInfo orderInfo) {
        orderInfo.getParam().put("orderStatusString", OrderStatusEnum.getStatusNameByStatus(orderInfo.getOrderStatus()));
        return orderInfo;
    }

整合前端：

创建访问接口js：继续在orderInfo.js中继续添加：

创建文件夹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>关注“北京114预约挂号”
              </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>
  

点击确认挂号：

 

 

（3）前台用户系统-预约挂号-订单列表功能实现

开发订单列表：点击左侧，挂号订单，跳转到一个页面显示这个用户所有的订单列表

 首先开发后端接口：

在OrderApiController中继续添加代码：

//订单列表（条件查询带分页）
    @GetMapping("auth/{page}/{limit}")
    public Result list(@PathVariable Long page,
                       @PathVariable Long limit,
                       OrderQueryVo orderQueryVo, HttpServletRequest request) {
        //设置当前用户id
        orderQueryVo.setUserId(AuthContextHolder.getUserId(request));
        Page<OrderInfo> pageParam = new Page<>(page,limit);
        IPage<OrderInfo> pageModel =
                orderService.selectPage(pageParam,orderQueryVo);
        return Result.ok(pageModel);
    }

    @ApiOperation(value = "获取订单状态")
    @GetMapping("auth/getStatusList")
    public Result getStatusList() {
        return Result.ok(OrderStatusEnum.getStatusList());
    }

OrderService接口继续添加：

 实现类：

 //把状态码变成具体描述的值
    private OrderInfo packOrderInfo(OrderInfo orderInfo) {
        orderInfo.getParam().put("orderStatusString", OrderStatusEnum.getStatusNameByStatus(orderInfo.getOrderStatus()));
        return orderInfo;
    }

    //订单列表（条件查询带分页）
    @Override
    public IPage<OrderInfo> selectPage(Page<OrderInfo> pageParam, 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(pageParam, wrapper);
        //编号变成对应值封装
        pages.getRecords().stream().forEach(item -> {
            this.packOrderInfo(item);//把状态码变成具体描述的值
        });
        return pages;
    }

 在前端orderInfo.js中继续添加访问接口：

 

 这个路径在nuxt中叫做固定路由，这个固定路由回到pages下面找order文件夹默认的index.vue：

 创建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>

点击挂号订单：