| | |
| | | <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.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.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> |
| | |
| | | :size="isMobile ? 'mini' : 'medium'" |
| | | class="responsive-table"> |
| | | <el-table-column prop="id" label="收款流水" min-width="120" /> |
| | | <el-table-column |
| | | prop="paidMoneyTime" |
| | | label="收款时间" |
| | | <el-table-column |
| | | prop="paidMoneyTime" |
| | | label="收款时间" |
| | | min-width="140" |
| | | :formatter="(row, column, cellValue) => formatDateTime(cellValue)" |
| | | /> |
| | |
| | | </el-col> |
| | | </el-row> |
| | | |
| | | |
| | | |
| | | <!-- 订单情况 --> |
| | | <el-row :gutter="20"> |
| | | <!-- 调度信息 --> |
| | |
| | | <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="image" |
| | | :preview-src-list="otherInfo.imageUrls" |
| | | class="preview-image" |
| | | /> |
| | | </div> |
| | | <span v-else>暂无图片</span> |
| | | </el-descriptions-item> |
| | | </el-descriptions> |
| | | </el-card> |
| | | </el-col> |
| | |
| | | } |
| | | }, |
| | | created() { |
| | | // 获取路由参数中的订单ID |
| | | const orderId = this.$route.params.id |
| | | this.getDetail(orderId) |
| | | |
| | | // 获取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) |
| | | }, |
| | |
| | | }, |
| | | methods: { |
| | | /** 获取订单详情 */ |
| | | getDetail(orderId) { |
| | | getOrderDetail(orderId).then(response => { |
| | | getDetail(orderId, params) { |
| | | getOrderDetail(orderId, params).then(response => { |
| | | const { data } = response |
| | | // 根据后端返回的数据结构设置各个对象的值 |
| | | this.orderInfo = data.orderInfo || {} |
| | |
| | | .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> |