<template>
|
<div class="app-container">
|
<el-card class="box-card">
|
<div slot="header" class="clearfix">
|
<span>订单编号：{{ orderInfo.OrderID }}</span>
|
</div>
|
<el-row :gutter="20">
|
<!-- 订单基本信息 -->
|
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
|
<el-card class="inner-card">
|
<div slot="header"><b>订单基本信息</b></div>
|
<el-descriptions :column="isMobile ? 1 : 2" border>
|
<el-descriptions-item label="外部编号">{{ orderInfo.externalNo }}</el-descriptions-item>
|
<el-descriptions-item label="下单时间">{{ orderInfo.orderTime }}</el-descriptions-item>
|
<el-descriptions-item label="订单状态">{{ orderInfo.orderStatus }}</el-descriptions-item>
|
<el-descriptions-item label="订单来源">{{ orderInfo.orderSource }}</el-descriptions-item>
|
<el-descriptions-item label="单据状态">{{ orderInfo.documentStatus }}</el-descriptions-item>
|
<el-descriptions-item label="成交价格">{{ orderInfo.price }}元</el-descriptions-item>
|
<el-descriptions-item label="客户预约时间">{{ orderInfo.appointmentTime }}</el-descriptions-item>
|
<el-descriptions-item label="派单时间">{{ orderInfo.dispatchTime }}</el-descriptions-item>
|
</el-descriptions>
|
</el-card>
|
</el-col>
|
|
<!-- 客户信息 -->
|
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
|
<el-card class="inner-card">
|
<div slot="header"><b>客户信息</b></div>
|
<el-descriptions :column="isMobile ? 1 : 2" border>
|
<el-descriptions-item label="联系人">{{ patientInfo.contactName }}</el-descriptions-item>
|
<el-descriptions-item label="联系电话">{{ patientInfo.contactPhone }}</el-descriptions-item>
|
<el-descriptions-item label="患者姓名">{{ patientInfo.patientName }}</el-descriptions-item>
|
<el-descriptions-item label="患者年龄">{{ patientInfo.patientAge }}</el-descriptions-item>
|
<el-descriptions-item label="患者性别">{{ patientInfo.patientGender }}</el-descriptions-item>
|
<el-descriptions-item label="患者体重">{{ patientInfo.patientWeight }}</el-descriptions-item>
|
</el-descriptions>
|
</el-card>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<!-- 服务要求 -->
|
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
|
<el-card class="inner-card">
|
<div slot="header"><b>服务要求</b></div>
|
<el-descriptions :column="1" border>
|
<el-descriptions-item label="出发地">{{ serviceInfo.startAddress }}</el-descriptions-item>
|
<!-- <el-descriptions-item label="出发地位置">{{ serviceInfo.startLocation }}</el-descriptions-item> -->
|
<el-descriptions-item label="目的地">{{ serviceInfo.endAddress }}</el-descriptions-item>
|
<!-- <el-descriptions-item label="目的地位置">{{ serviceInfo.endLocation }}</el-descriptions-item> -->
|
<el-descriptions-item label="转运里程">{{ serviceInfo.distance }} 公里</el-descriptions-item>
|
<el-descriptions-item label="搬抬服务">{{ serviceInfo.liftService }}</el-descriptions-item>
|
<el-descriptions-item label="搬抬楼层">{{ serviceInfo.liftFloor }}</el-descriptions-item>
|
<el-descriptions-item label="医护要求">{{ serviceInfo.medicalStaff }}</el-descriptions-item>
|
</el-descriptions>
|
</el-card>
|
</el-col>
|
|
<!-- 病历 -->
|
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
|
<el-card class="inner-card">
|
<div slot="header"><b>病历</b></div>
|
<el-descriptions :column="1" border>
|
<el-descriptions-item label="是否有意识">{{ medicalInfo.hasConsciousness }}</el-descriptions-item>
|
<el-descriptions-item label="病人情况">{{ medicalInfo.patientCondition }}</el-descriptions-item>
|
<el-descriptions-item label="使用呼吸机">{{ medicalInfo.useVentilator }}</el-descriptions-item>
|
<el-descriptions-item label="诊断病情">{{ medicalInfo.complaint }}</el-descriptions-item>
|
</el-descriptions>
|
</el-card>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<!-- 调度信息 -->
|
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
|
<el-card class="inner-card">
|
<div slot="header"><b>调度信息</b></div>
|
<el-descriptions :column="isMobile ? 1 : 2" border>
|
<el-descriptions-item label="调度时间">{{ dispatchInfo.dispatchTime }}</el-descriptions-item>
|
<el-descriptions-item label="调度状态">{{ dispatchInfo.dispatchStatus }}</el-descriptions-item>
|
<el-descriptions-item label="司机">{{ dispatchInfo.driver }}</el-descriptions-item>
|
<el-descriptions-item label="车牌">{{ dispatchInfo.carLicense }}</el-descriptions-item>
|
<el-descriptions-item label="医生">{{ dispatchInfo.doctor }}</el-descriptions-item>
|
<!-- <el-descriptions-item label="职位">{{ dispatchInfo.doctorPosition }}</el-descriptions-item> -->
|
<el-descriptions-item label="护士">{{ dispatchInfo.nurse }}</el-descriptions-item>
|
</el-descriptions>
|
</el-card>
|
</el-col>
|
|
<!-- 收款信息 -->
|
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
|
<el-card class="inner-card">
|
<div slot="header"><b>收款信息</b></div>
|
<el-table
|
:data="paymentInfo"
|
border
|
style="width: 100%"
|
:size="isMobile ? 'mini' : 'medium'"
|
class="responsive-table">
|
<el-table-column prop="id" label="收款流水" min-width="120" />
|
<el-table-column
|
prop="paidMoneyTime"
|
label="收款时间"
|
min-width="140"
|
:formatter="(row, column, cellValue) => formatDateTime(cellValue)"
|
/>
|
<el-table-column prop="paidMoney" label="金额(元)" min-width="100" />
|
<el-table-column prop="vtext" label="方式" min-width="100" />
|
<el-table-column prop="paidMoneyMono" label="备注" min-width="120" />
|
</el-table>
|
</el-card>
|
</el-col>
|
</el-row>
|
|
|
<!-- 订单情况 -->
|
<el-row :gutter="20">
|
<!-- 调度信息 -->
|
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
|
<el-card class="inner-card">
|
<div slot="header"><b>详情</b></div>
|
<el-descriptions :column="isMobile ? 1 : 2" border>
|
<el-descriptions-item label="服务评价">{{ otherInfo.serviceOrdVisit }}</el-descriptions-item>
|
<el-descriptions-item label="发票状态">{{ otherInfo.invoiceStatus }}</el-descriptions-item>
|
<el-descriptions-item label="知情同意书">
|
<div v-if="otherInfo.imageUrls && otherInfo.imageUrls.length > 0" class="image-container">
|
<el-image
|
v-for="image in otherInfo.imageUrls"
|
:key="image"
|
:src="`https://sys.966120.com.cn${image}`"
|
:preview-src-list="otherInfo.imageUrls"
|
class="preview-image"
|
/>
|
</div>
|
<span v-else>暂无图片</span>
|
</el-descriptions-item>
|
</el-descriptions>
|
</el-card>
|
</el-col>
|
</el-row>
|
|
</el-card>
|
</div>
|
</template>
|
|
<script>
|
import { getOrderDetail } from '@/api/system/order'
|
import { parseTime } from '@/utils/ruoyi'
|
|
export default {
|
name: 'OrderDetail',
|
data() {
|
return {
|
// 初始化为空对象
|
orderInfo: {},
|
patientInfo: {},
|
serviceInfo: {},
|
medicalInfo: {},
|
dispatchInfo: {},
|
paymentInfo: [],
|
otherInfo: [],
|
screenWidth: document.documentElement.clientWidth // 屏幕宽度
|
}
|
},
|
computed: {
|
isMobile() {
|
return this.screenWidth <= 768
|
}
|
},
|
created() {
|
// 获取路由参数中的订单ID
|
const orderId = this.$route.params.id
|
|
// 获取URL查询参数
|
const urlParams = new URLSearchParams(window.location.search)
|
const params = {
|
appId: urlParams.get('appId'),
|
timestamp: urlParams.get('timestamp'),
|
sign: urlParams.get('sign')
|
}
|
|
// 调用获取详情方法，传入所有参数
|
this.getDetail(orderId, params)
|
// 监听窗口大小变化
|
window.addEventListener('resize', this.handleResize)
|
},
|
beforeDestroy() {
|
// 组件销毁前移除监听器
|
window.removeEventListener('resize', this.handleResize)
|
},
|
methods: {
|
/** 获取订单详情 */
|
getDetail(orderId, params) {
|
getOrderDetail(orderId, params).then(response => {
|
const { data } = response
|
// 根据后端返回的数据结构设置各个对象的值
|
this.orderInfo = data.orderInfo || {}
|
this.patientInfo = data.patientInfo || {}
|
this.serviceInfo = data.serviceInfo || {}
|
this.medicalInfo = data.medicalInfo || {}
|
this.dispatchInfo = data.dispatchInfo || {}
|
this.paymentInfo = data.paymentInfo || []
|
this.otherInfo = data.otherInfo || []
|
|
console.log(this.orderInfo)
|
|
})
|
},
|
// 处理窗口大小变化
|
handleResize() {
|
this.screenWidth = document.documentElement.clientWidth
|
},
|
formatDateTime(time) {
|
if (!time) {
|
return '';
|
}
|
return parseTime(time, '{y}-{m}-{d} {h}:{i}:{s}');
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.inner-card {
|
margin-bottom: 20px;
|
}
|
.el-card ::v-deep .el-card__header {
|
padding: 10px 20px;
|
background-color: #f5f7fa;
|
}
|
.el-descriptions {
|
margin: 10px 0;
|
}
|
.el-descriptions-item {
|
margin-bottom: 0;
|
}
|
/* 响应式表格样式 */
|
.responsive-table {
|
width: 100%;
|
overflow-x: auto;
|
}
|
@media screen and (max-width: 768px) {
|
.el-card { margin: 10px 0; }
|
.el-row { margin-left: 0 !important; margin-right: 0 !important; }
|
.el-col { padding-left: 0 !important; padding-right: 0 !important; }
|
.box-card { border-radius: 0; }
|
.inner-card { margin-bottom: 10px; }
|
.el-descriptions-item { padding: 8px !important; }
|
.el-descriptions-item__label { width: 100px !important; }
|
}
|
.image-container {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 10px;
|
}
|
.preview-image {
|
width: 100px;
|
height: 100px;
|
object-fit: cover;
|
cursor: pointer;
|
}
|
</style>
|
