@layout("/common/_container.html"){
|
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
<meta charset="UTF-8">
|
<title>处理异常订单</title>
|
<style>
|
body {
|
background: #888;
|
margin: 0;
|
padding: 0;
|
}
|
|
.container {
|
background: #fff;
|
margin: 20px auto;
|
padding: 20px 30px;
|
border-radius: 10px;
|
max-width: 98vw;
|
min-width: 1200px;
|
}
|
|
.title {
|
font-size: 20px;
|
font-weight: bold;
|
margin-bottom: 20px;
|
}
|
|
.order-table {
|
width: 100%;
|
border-collapse: collapse;
|
margin-bottom: 30px;
|
}
|
|
.order-table th,
|
.order-table td {
|
border: 1px solid #e0e0e0;
|
padding: 8px 6px;
|
text-align: center;
|
font-size: 13px;
|
}
|
|
.order-table th {
|
background: #f8f8f8;
|
font-weight: 600;
|
}
|
|
.section-title {
|
font-size: 16px;
|
font-weight: bold;
|
margin: 30px 0 10px 0;
|
}
|
|
.desc-row {
|
margin-bottom: 10px;
|
}
|
|
.desc-label {
|
font-weight: bold;
|
margin-right: 10px;
|
}
|
|
.img-list {
|
display: flex;
|
gap: 20px;
|
margin: 10px 0 20px 0;
|
}
|
|
.img-list img {
|
width: 120px;
|
height: 80px;
|
object-fit: cover;
|
border-radius: 6px;
|
border: 1px solid #ccc;
|
}
|
|
.order-link {
|
color: #1976d2;
|
text-decoration: underline;
|
cursor: pointer;
|
}
|
|
input[type="radio"] {
|
accent-color: #1976d2;
|
width: 18px;
|
height: 18px;
|
vertical-align: middle;
|
margin-right: 4px;
|
}
|
|
.radio-group label {
|
margin-right: 18px;
|
font-size: 15px;
|
cursor: pointer;
|
}
|
#duty-selector {
|
display: flex;
|
margin-bottom: 18px;
|
border: 1px solid #ccc;
|
border-radius: 4px;
|
overflow: hidden;
|
width: fit-content;
|
}
|
|
|
|
.duty-btn {
|
flex: 1 1 0;
|
padding: 12px 32px;
|
border: none;
|
background: #fff;
|
color: #222;
|
font-size: 16px;
|
cursor: pointer;
|
outline: none;
|
border-right: 1px solid #ccc;
|
transition: background 0.2s, color 0.2s;
|
height: 62px;
|
line-height: 24px;
|
}
|
|
.duty-btn:last-child {
|
border-right: none;
|
}
|
|
.duty-btn.active {
|
background: #1976d2;
|
color: #fff;
|
font-weight: bold;
|
}
|
.action-btn {
|
min-width: 140px;
|
height: 48px;
|
background: #1976d2;
|
color: #fff;
|
border: none;
|
border-radius: 5px;
|
font-size: 16px;
|
font-weight: bold;
|
margin-right: 18px;
|
cursor: pointer;
|
transition: background 0.2s, box-shadow 0.2s;
|
box-shadow: 0 2px 6px rgba(25, 118, 210, 0.08);
|
}
|
.action-btn:last-child {
|
margin-right: 0;
|
}
|
.action-btn:hover {
|
background: #1565c0;
|
}
|
#action-btns {
|
margin-top: 32px;
|
display: flex;
|
align-items: center;
|
}
|
</style>
|
</head>
|
|
<body>
|
<input type="hidden" id="orderNum" name ="orderNum" value="${item.orderNum}"/>
|
<input type="hidden" id="state" name ="state" value="${item.abnormalStatus}"/>
|
<input type="hidden" id="show" name ="show" value="${show}"/>
|
<input type="hidden" id="type" name ="type" value="${type}"/>
|
<input type="hidden" id="orderId" name ="orderId" value="${item.id}"/>
|
<input type="hidden" id="payMoney" name ="payMoney" value="${item.payMoney}"/>
|
<div class="ibox float-e-margins">
|
<div class="title">处理异常订单</div>
|
<div class="section-title">订单信息</div>
|
<table class="order-table">
|
<thead>
|
<tr>
|
<th>下单时间</th>
|
<th>订单编号</th>
|
<th>订单来源</th>
|
<th>乘车时间</th>
|
<th>下单用户昵称</th>
|
<th>下单用户手机</th>
|
<th>乘车用户姓名</th>
|
<th>乘车用户手机</th>
|
<th>起点</th>
|
<th>终点</th>
|
<th>选择车型</th>
|
<th>接单司机</th>
|
<th>接单车辆</th>
|
<th>订单金额</th>
|
<th>状态</th>
|
<th>操作</th>
|
</tr>
|
</thead>
|
<tbody>
|
<tr>
|
<td>${item.insertTimeStr}</td>
|
<td>${item.orderNum}</td>
|
<td>${item.orderSource}</td>
|
<td>${item.travelTimeStr}</td>
|
<td>${item.userName}</td>
|
<td>${item.userPhone}</td>
|
<td>${item.passengers}</td>
|
<td>${item.passengersPhone}</td>
|
<td>${item.boardingAddress}</td>
|
<td>${item.getoffAddress}</td>
|
<td>${item.serverCarModel}</td>
|
<td>${item.driver}</td>
|
<td>${item.car}</td>
|
<td>${item.orderMoney}</td>
|
<!-- 1=待接单，2=待出发，3=待到达预约地点，4=待乘客上车，5=服务中，6=完成服务，7=待支付，8=待评价，9=已完成，10=已取消，11=改派中，12=取消待支付-->
|
<td>
|
@if(item.state==1) {
|
待接单
|
@}else if(item.state==2){
|
待出发
|
@}else if(item.state==3){
|
待到达预约地点
|
@}else if(item.state==4){
|
待乘客上车
|
@}else if(item.state==5){
|
服务中
|
@}else if(item.state==6){
|
完成服务
|
@}else if(item.state==7){
|
待支付
|
@}else if(item.state==8){
|
待评价
|
@}else if(item.state==9){
|
已完成
|
@}else if(item.state==10){
|
已取消
|
@}else if(item.state==11){
|
改派中
|
@}else if(item.state==12){
|
取消待支付
|
@}else{
|
未知
|
@}
|
</td>
|
<td><a class="order-link" onclick="viewOrderInfo()">查看订单详情</a></td>
|
</tr>
|
</tbody>
|
</table>
|
|
<div class="section-title">乘客反馈情况</div>
|
<div class="desc-row">
|
<span class="desc-label"> ${item.abnormalIntro}</span>
|
|
</div>
|
<div class="img-list">
|
<!-- 逗号拼接的图片 -->
|
@for(item in abnormalImg) {
|
<img src="${item}" alt="图片" />
|
@}
|
</div>
|
<!-- 你可以根据实际图片地址替换上面src -->
|
<div class="section-title" id="s1">处理状态：
|
@if(item.abnormalStatus==1){
|
未处理 <button id="saveBtn1" class="action-btn" onclick="saveBtn1()">立即处理</button>
|
@}else{
|
已处理
|
@}
|
</div>
|
<!-- 其他内容可根据实际需求继续补充 -->
|
<div id="s2">
|
<div class="section-title">选择责任方</div>
|
<div id="duty-selector">
|
<button type="button" class="duty-btn active" data-type="platformAll">平台全责</button>
|
<button type="button" class="duty-btn" data-type="driverAll">司机全责</button>
|
<button type="button" class="duty-btn" data-type="passengerAll">乘客全责</button>
|
<button type="button" class="duty-btn" data-type="platformPart">平台部分责任</button>
|
<button type="button" class="duty-btn" data-type="driverPart">司机部分责任</button>
|
</div>
|
|
<div id="duty-content" style="margin-top:20px;">
|
<!-- 内容区域，JS填充 -->
|
</div>
|
|
<!-- 处理备注区域 -->
|
<div class="section-title" style="margin-top:32px;">处理备注</div>
|
<textarea name="handleRemark" rows="4" style="width:90%;max-width:900px;min-width:300px;padding:10px;font-size:15px;border:1px solid #ccc;border-radius:4px;resize:vertical;"></textarea>
|
|
<div id="action-btns">
|
<button id="saveBtn" class="action-btn" onclick="save()" style="display:none;">确认处理</button>
|
<button id="closeBtn" class="action-btn" style="display:none;">关闭</button>
|
</div>
|
</div>
|
</div>
|
</body>
|
|
<script>
|
const dutyContent = document.getElementById('duty-content');
|
const btns = document.querySelectorAll('.duty-btn');
|
const responsibilityType = '${item.responsibilityType}';
|
const orderNum = '${item.orderNum}';
|
const isReadonly = responsibilityType && responsibilityType !== 'null' && responsibilityType !== '';
|
const typeMap = {1:'platformAll',2:'driverAll',3:'passengerAll',4:'platformPart',5:'driverPart'};
|
const reverseTypeMap = {'platformAll':1,'driverAll':2,'passengerAll':3,'platformPart':4,'driverPart':5};
|
|
function renderContent(type, readonly) {
|
let html = '';
|
if (type === 'platformAll') {
|
html = `
|
<div>
|
<div class="radio-group">超时是否启用备用金支付：
|
<label><input type="radio" name="ybj" checked disabled>是</label>
|
<label><input type="radio" name="ybj" disabled>否</label>
|
</div>
|
<div class="radio-group">超时是否生成追偿支付单：
|
<label><input type="radio" name="zcpay" disabled>是</label>
|
<label><input type="radio" name="zcpay" checked disabled>否</label>
|
</div>
|
</div>
|
`;
|
} else if (type === 'driverAll') {
|
html = `
|
<div style="margin-top:10px;">修改订单金额为: 0</div>
|
`;
|
} else if (type === 'passengerAll') {
|
html = `
|
<div>超时是否启用备用金支付：
|
<label><input type="radio" name="ybj" checked disabled>是</label>
|
<label><input type="radio" name="ybj" disabled>否</label>
|
</div>
|
<div>超时是否生成追偿支付单：
|
<label><input type="radio" name="zcpay" checked disabled>是</label>
|
<label><input type="radio" name="zcpay" disabled>否</label>
|
</div>
|
`;
|
} else if (type === 'platformPart' || type === 'driverPart') {
|
html = `
|
<div>超时是否启用备用金支付：
|
<label><input type="radio" name="ybj" checked disabled>是</label>
|
<label><input type="radio" name="ybj" disabled>否</label>
|
</div>
|
<div>超时是否生成追偿支付单：
|
<label><input type="radio" name="zcpay" checked disabled>是</label>
|
<label><input type="radio" name="zcpay" disabled>否</label>
|
</div>
|
<div style="margin-top:10px;">
|
修改订单金额为：<input type="number" id="money" name="money" style="width:100px;" value="${money}"> 元(需小于等于原订单金额)
|
</div>
|
`;
|
}
|
dutyContent.innerHTML = html;
|
}
|
|
function setReadonlyMode() {
|
btns.forEach(btn => {
|
btn.classList.remove('active');
|
btn.disabled = true;
|
if (btn.dataset.type === typeMap[responsibilityType]) {
|
btn.classList.add('active');
|
}else {
|
btn.style.display = 'none';
|
}
|
});
|
renderContent(typeMap[responsibilityType], true);
|
document.querySelector('textarea[name=handleRemark]').disabled = true;
|
document.getElementById('saveBtn').style.display = 'none';
|
document.getElementById('closeBtn').style.display = '';
|
}
|
|
function setEditMode() {
|
btns.forEach(btn => btn.disabled = false);
|
btns.forEach(btn => btn.classList.remove('active'));
|
btns[0].classList.add('active');
|
renderContent('platformAll', false);
|
document.querySelector('textarea[name=handleRemark]').disabled = false;
|
document.getElementById('saveBtn').style.display = '';
|
document.getElementById('closeBtn').style.display = 'none';
|
}
|
|
function saveBtn1() {
|
$("#s1").hide();
|
$("#s2").show();
|
}
|
window.onload = function() {
|
if (isReadonly) {
|
setReadonlyMode();
|
} else {
|
setEditMode();
|
}
|
};
|
|
btns.forEach(btn => {
|
btn.onclick = function () {
|
if (isReadonly) return;
|
btns.forEach(b => b.classList.remove('active'));
|
btn.classList.add('active');
|
renderContent(btn.dataset.type, false);
|
}
|
});
|
|
function save() {
|
|
let selectedBtn = document.querySelector('.duty-btn.active');
|
let responsibilityTypeVal = reverseTypeMap[selectedBtn.dataset.type];
|
let remark = document.querySelector('textarea[name=handleRemark]').value;
|
// 取money
|
let money = $("#money").val();
|
let payMoney = $("#payMoney").val();
|
let type = document.querySelector('input[name=type]').value;
|
let orderNum = document.querySelector('input[name=orderNum]').value;
|
console.log(responsibilityTypeVal,money,payMoney)
|
if(responsibilityTypeVal>3 && money>payMoney){
|
Feng.error("需小于等于原订单金额!");
|
return;
|
}
|
|
//提交信息
|
var ajax = new $ax(Feng.ctxPath + "/abnormal/save", function(data){
|
Feng.success("操作成功!");
|
// 尝试关闭当前窗口或弹窗
|
if(window.parent && window.parent !== window && window.parent.layer) {
|
// layer弹窗
|
var index = window.parent.layer.getFrameIndex(window.name);
|
window.parent.layer.close(index);
|
} else if(window.opener) {
|
window.close();
|
} else if(window.top && window.top.closeDialog) {
|
window.top.closeDialog();
|
} else {
|
window.close();
|
}
|
},function(data){
|
Feng.error("操作失败!");
|
});
|
ajax.set("responsibilityTypeVal",responsibilityTypeVal);
|
ajax.set("remark",remark);
|
ajax.set("money",money);
|
ajax.set("type",type);
|
ajax.set("orderNum",orderNum);
|
ajax.start();
|
|
};
|
|
document.getElementById('closeBtn').onclick = function() {
|
// 尝试关闭当前窗口或弹窗
|
if(window.parent && window.parent !== window && window.parent.layer) {
|
// layer弹窗
|
var index = window.parent.layer.getFrameIndex(window.name);
|
window.parent.layer.close(index);
|
} else if(window.opener) {
|
window.close();
|
} else if(window.top && window.top.closeDialog) {
|
window.top.closeDialog();
|
} else {
|
window.close();
|
}
|
};
|
|
|
// 进来就加载
|
$(function() {
|
var state = $("#state").val();
|
var show = $("#show").val();
|
if(state==1 && show==0){
|
$("#s2").hide();
|
}
|
if(show==1){
|
$("#s2").show();
|
$("#s1").hide();
|
}
|
|
|
})
|
|
|
|
function viewOrderInfo(){
|
var type = $("#type").val();
|
var orderId = $("#orderId").val();
|
if(type==1){
|
var index = layer.open({
|
type: 2,
|
title: '快车订单详情',
|
area: ['100%', '100%'], //宽高
|
fix: false, //不固定
|
maxmin: true,
|
content: Feng.ctxPath + '/tOrderPrivateCar/tOrderPrivateCar_orderDetail/' +orderId
|
});
|
this.layerIndex = index;
|
}
|
if(type==2){
|
var index = layer.open({
|
type: 2,
|
title: '跨城出行订单详情',
|
area: ['100%', '100%'], //宽高
|
fix: false, //不固定
|
maxmin: true,
|
content: Feng.ctxPath + '/tOrderCrossCity/tOrderCrossCity_detail/' + orderId
|
});
|
this.layerIndex = index;
|
}
|
if(type==3){
|
var index = layer.open({
|
type: 2,
|
title: '出租车订单详情',
|
area: ['100%', '100%'], //宽高
|
fix: false, //不固定
|
maxmin: true,
|
content: Feng.ctxPath + '/tOrderTaxi/tOrderTaxi_update/' + orderId
|
});
|
this.layerIndex = index;
|
}
|
|
}
|
|
</script>
|
|
</html>
|
|
@}
|
