<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="utf-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<title>订单详情</title>
|
@{layout('/common/_container.html',{css:['/static/css/plugins/steps/jquery.steps.css']}){}}
|
<style type="text/css">
|
.order-detail-container {
|
display: flex;
|
height: 100vh;
|
overflow: hidden;
|
}
|
.timeline-sidebar {
|
width: 30%;
|
background-color: #f8f9fa;
|
border-right: 1px solid #e7eaec;
|
padding: 20px;
|
overflow-y: auto;
|
}
|
.order-content {
|
width: 70%;
|
padding: 20px;
|
overflow-y: auto;
|
}
|
.order-info-card {
|
background: white;
|
border-radius: 8px;
|
padding: 20px;
|
margin-bottom: 20px;
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
}
|
.timeline-step {
|
position: relative;
|
padding: 15px 0;
|
border-left: 2px solid #e7eaec;
|
margin-left: 10px;
|
}
|
.timeline-step:last-child {
|
border-left: 2px solid transparent;
|
}
|
.timeline-step.active {
|
border-color: #1ab394;
|
}
|
.timeline-step.completed {
|
border-color: #1ab394;
|
}
|
.timeline-step.disabled {
|
border-color: #e7eaec;
|
opacity: 0.6;
|
}
|
.timeline-node {
|
position: absolute;
|
left: -6px;
|
top: 20px;
|
width: 12px;
|
height: 12px;
|
border-radius: 50%;
|
background: #e7eaec;
|
border: 2px solid #fff;
|
}
|
.timeline-step.active .timeline-node,
|
.timeline-step.completed .timeline-node {
|
background: #1ab394;
|
}
|
.timeline-content {
|
margin-left: 20px;
|
}
|
.timeline-title {
|
font-weight: bold;
|
color: #333;
|
margin-bottom: 5px;
|
}
|
.timeline-step.disabled .timeline-title {
|
color: #999;
|
}
|
.timeline-detail {
|
font-size: 12px;
|
color: #666;
|
margin-bottom: 3px;
|
}
|
.action-buttons {
|
position: fixed;
|
bottom: 20px;
|
right: 20px;
|
z-index: 1000;
|
}
|
.info-row {
|
display: flex;
|
margin-bottom: 15px;
|
}
|
.info-label {
|
width: 120px;
|
font-weight: bold;
|
color: #333;
|
}
|
.info-value {
|
flex: 1;
|
color: #666;
|
}
|
/* 移动端适配样式已移除，避免Beetl模板解析错误 */
|
</style>
|
</head>
|
<body>
|
<div class="order-detail-container">
|
<!-- 左侧时间线 -->
|
<div class="timeline-sidebar">
|
<h4 style="margin-bottom: 20px; color: #333;">订单状态</h4>
|
<div id="orderTimeline">
|
<!-- 时间线内容将通过JavaScript动态生成 -->
|
</div>
|
</div>
|
|
<!-- 右侧订单信息 -->
|
<div class="order-content">
|
<!-- 订单基本信息 -->
|
<div class="order-info-card">
|
<h4 style="margin-bottom: 20px; color: #333; border-bottom: 1px solid #e7eaec; padding-bottom: 10px;">订单信息</h4>
|
<div class="info-row">
|
<div class="info-label">下单时间：</div>
|
<div class="info-value">${orderInfo.createTimeFormat!''}</div>
|
</div>
|
<div class="info-row">
|
<div class="info-label">订单编号：</div>
|
<div class="info-value">${orderInfo.code!''}</div>
|
</div>
|
<div class="info-row">
|
<div class="info-label">订单来源：</div>
|
<div class="info-value">
|
@if(orderInfo.source! == 1){
|
小程序
|
@}else if(orderInfo.source! == 2){
|
管理后台
|
@}else{
|
未知
|
@}
|
</div>
|
</div>
|
<div class="info-row">
|
<div class="info-label">预约时间：</div>
|
<div class="info-value">${orderInfo.reservationTimeFormat!''}</div>
|
</div>
|
<div class="info-row">
|
<div class="info-label">用户昵称：</div>
|
<div class="info-value">${orderInfo.userName!''}</div>
|
</div>
|
<div class="info-row">
|
<div class="info-label">手机号：</div>
|
<div class="info-value">${orderInfo.userPhone!''}</div>
|
</div>
|
<div class="info-row">
|
<div class="info-label">取车地：</div>
|
<div class="info-value">${orderInfo.startAddress!''}</div>
|
</div>
|
<div class="info-row">
|
<div class="info-label">还车地：</div>
|
<div class="info-value">${orderInfo.endAddress!''}</div>
|
</div>
|
</div>
|
|
<!-- 司机信息（如果已派单） -->
|
@if(isNotEmpty(orderInfo.driverName)){
|
<div class="order-info-card">
|
<h4 style="margin-bottom: 20px; color: #333; border-bottom: 1px solid #e7eaec; padding-bottom: 10px;">司机信息</h4>
|
<div class="info-row">
|
<div class="info-label">司机姓名：</div>
|
<div class="info-value">${orderInfo.driverName!''}</div>
|
</div>
|
<div class="info-row">
|
<div class="info-label">司机电话：</div>
|
<div class="info-value">${orderInfo.driverPhone!''}</div>
|
</div>
|
@if(isNotEmpty(orderInfo.dispatchTimeFormat)){
|
<div class="info-row">
|
<div class="info-label">派单时间：</div>
|
<div class="info-value">${orderInfo.dispatchTimeFormat!''}</div>
|
</div>
|
@}
|
</div>
|
@}
|
|
<!-- 费用信息 -->
|
@if(isNotEmpty(orderInfo.checkMoney) || isNotEmpty(orderInfo.payMoney)){
|
<div class="order-info-card">
|
<h4 style="margin-bottom: 20px; color: #333; border-bottom: 1px solid #e7eaec; padding-bottom: 10px;">费用信息</h4>
|
@if(isNotEmpty(orderInfo.checkMoney)){
|
<div class="info-row">
|
<div class="info-label">车检费：</div>
|
<div class="info-value">￥${orderInfo.checkMoney!''}</div>
|
</div>
|
@}
|
@if(isNotEmpty(orderInfo.payMoney)){
|
<div class="info-row">
|
<div class="info-label">服务费：</div>
|
<div class="info-value">￥${orderInfo.payMoney!''}</div>
|
</div>
|
@}
|
@if(isNotEmpty(orderInfo.discountedPrice)){
|
<div class="info-row">
|
<div class="info-label">优惠券：</div>
|
<div class="info-value">￥${orderInfo.discountedPrice!''}</div>
|
</div>
|
@}
|
@if(isNotEmpty(orderInfo.payMoney) && isNotEmpty(orderInfo.discountedPrice)){
|
<div class="info-row">
|
<div class="info-label">实付金额：</div>
|
<div class="info-value">￥${orderInfo.payMoney - orderInfo.discountedPrice}</div>
|
</div>
|
@}
|
</div>
|
@}
|
|
<!-- 车检结果（如果有） -->
|
@if(isNotEmpty(orderInfo.checkStatus) || isNotEmpty(orderInfo.checkIntro)){
|
<div class="order-info-card">
|
<h4 style="margin-bottom: 20px; color: #333; border-bottom: 1px solid #e7eaec; padding-bottom: 10px;">车检结果</h4>
|
@if(isNotEmpty(orderInfo.checkStatus)){
|
<div class="info-row">
|
<div class="info-label">检测结果：</div>
|
<div class="info-value">${orderInfo.checkStatus!''}</div>
|
</div>
|
@}
|
@if(isNotEmpty(orderInfo.checkIntro)){
|
<div class="info-row">
|
<div class="info-label">详细说明：</div>
|
<div class="info-value">${orderInfo.checkIntro!''}</div>
|
</div>
|
@}
|
@if(isNotEmpty(orderInfo.checkImgList)){
|
<div class="info-row">
|
<div class="info-label">凭证图片：</div>
|
<div class="info-value">
|
@if(isNotEmpty(orderInfo.checkImgList)){
|
<div>
|
@for(img in orderInfo.checkImgList){
|
<img src="${img}" style="max-width: 200px; max-height: 150px; margin: 5px; border: 1px solid #ddd; cursor: pointer;" onclick="OrderDetail.viewImage(this.src)">
|
@}
|
</div>
|
@}else{
|
<span>无</span>
|
@}
|
</div>
|
</div>
|
@}
|
</div>
|
@}
|
|
<!-- 评价信息（如果有） -->
|
@if(isNotEmpty(orderInfo.commentRate) || isNotEmpty(orderInfo.commentStr)){
|
<div class="order-info-card">
|
<h4 style="margin-bottom: 20px; color: #333; border-bottom: 1px solid #e7eaec; padding-bottom: 10px;">用户评价</h4>
|
@if(isNotEmpty(orderInfo.commentRate)){
|
<div class="info-row">
|
<div class="info-label">评价星级：</div>
|
<div class="info-value">
|
@if(orderInfo.commentRate == 5){
|
⭐⭐⭐⭐⭐
|
@}else if(orderInfo.commentRate == 4){
|
⭐⭐⭐⭐☆
|
@}else if(orderInfo.commentRate == 3){
|
⭐⭐⭐☆☆
|
@}else if(orderInfo.commentRate == 2){
|
⭐⭐☆☆☆
|
@}else if(orderInfo.commentRate == 1){
|
⭐☆☆☆☆
|
@}else{
|
☆☆☆☆☆
|
@}
|
(${orderInfo.commentRate!0}/5星)
|
</div>
|
</div>
|
@}
|
@if(isNotEmpty(orderInfo.commentStr)){
|
<div class="info-row">
|
<div class="info-label">评价内容：</div>
|
<div class="info-value">${orderInfo.commentStr!''}</div>
|
</div>
|
@}
|
</div>
|
@}
|
</div>
|
</div>
|
|
<!-- 操作按钮 -->
|
<div class="action-buttons">
|
@if(orderInfo.state == 100){
|
<button type="button" class="btn btn-primary" onclick="OrderDetail.openDispatch('${orderInfo.id}', 1)">
|
<i class="fa fa-send"></i> 派单
|
</button>
|
@}else if(orderInfo.state == 101 || orderInfo.state == 102 || orderInfo.state == 104 || orderInfo.state == 105 || orderInfo.state == 107 || orderInfo.state == 108 || orderInfo.state == 109){
|
<button type="button" class="btn btn-warning" onclick="OrderDetail.openDispatch('${orderInfo.id}', 2)">
|
<i class="fa fa-exchange"></i> 改派
|
</button>
|
@}
|
|
<button type="button" class="btn btn-default" onclick="OrderDetail.closeDetail()" style="margin-left: 10px;">
|
<i class="fa fa-close"></i> 关闭
|
</button>
|
</div>
|
<script src="${ctxPath}/static/modular/system/tOrderCheck/tOrderCheck_info.js"></script>
|
<script>
|
// 将订单数据传递给JavaScript
|
window.orderData = '${orderInfoStr}';
|
</script>
|
</body>
|
</html>
|
