815 lines
30 KiB
Vue
815 lines
30 KiB
Vue
<script setup lang="ts">
|
||
import { computed, onMounted, ref } from "vue";
|
||
import { ElMessage, ElMessageBox } from "element-plus";
|
||
import { adminApi, type AdminOrderDetail, type AdminOrderListItem, type AdminOrderWarehouseOption } from "../../api/admin";
|
||
import OrderStatusTag from "../../components/OrderStatusTag.vue";
|
||
|
||
const loading = ref(false);
|
||
const detailLoading = ref(false);
|
||
const drawerVisible = ref(false);
|
||
const receiveSubmitting = ref(false);
|
||
const returnReceiveSubmitting = ref(false);
|
||
const warehouseSubmitting = ref(false);
|
||
const warehouseDialogVisible = ref(false);
|
||
const warehouseOptionsLoading = ref(false);
|
||
const warehouseOptions = ref<AdminOrderWarehouseOption[]>([]);
|
||
const selectedWarehouseId = ref(0);
|
||
const returnDialogVisible = ref(false);
|
||
const returnSubmitting = ref(false);
|
||
const returnExpressCompany = ref("");
|
||
const returnTrackingNo = ref("");
|
||
|
||
const keyword = ref("");
|
||
const serviceProvider = ref("");
|
||
const status = ref("");
|
||
const sourceChannel = ref("");
|
||
|
||
const orders = ref<AdminOrderListItem[]>([]);
|
||
const detail = ref<AdminOrderDetail | null>(null);
|
||
|
||
const providerOptions = [
|
||
{ label: "全部服务", value: "" },
|
||
{ label: "实物鉴定", value: "anxinyan" },
|
||
{ label: "中检鉴定", value: "zhongjian" },
|
||
];
|
||
|
||
const statusOptions = [
|
||
{ label: "全部状态", value: "" },
|
||
{ label: "待补资料", value: "pending_supplement" },
|
||
{ label: "待寄送", value: "pending_shipping" },
|
||
{ label: "鉴定中", value: "in_first_review" },
|
||
{ label: "待寄回", value: "report_published" },
|
||
{ label: "回寄途中", value: "returning" },
|
||
{ label: "已完成签收", value: "completed_signed" },
|
||
];
|
||
|
||
const sourceChannelOptions = [
|
||
{ label: "全部渠道", value: "" },
|
||
{ label: "小程序", value: "mini_program" },
|
||
{ label: "H5", value: "h5" },
|
||
{ label: "大客户推送订单", value: "enterprise_push" },
|
||
];
|
||
|
||
const usageStatusMap: Record<string, string> = {
|
||
new: "全新未使用",
|
||
light_use: "轻微使用痕迹",
|
||
used: "长期使用",
|
||
};
|
||
|
||
const usageStatusText = computed(() => {
|
||
const value = detail.value?.extra_info.usage_status || "";
|
||
return value ? usageStatusMap[value] || value : "-";
|
||
});
|
||
|
||
const productTitle = computed(() => {
|
||
if (!detail.value) {
|
||
return "待完善物品信息";
|
||
}
|
||
return detail.value.product_info.product_name || "待完善物品信息";
|
||
});
|
||
|
||
const productMetaText = computed(() => {
|
||
if (!detail.value) {
|
||
return "物品信息待完善";
|
||
}
|
||
const parts = [
|
||
detail.value.product_info.category_name,
|
||
detail.value.product_info.brand_name,
|
||
].filter(Boolean);
|
||
|
||
return parts.length ? parts.join(" / ") : "物品信息待完善";
|
||
});
|
||
|
||
const canMarkReceived = computed(() => {
|
||
if (!detail.value) {
|
||
return false;
|
||
}
|
||
|
||
if (detail.value.order_info.can_mark_received) {
|
||
return true;
|
||
}
|
||
|
||
return (
|
||
detail.value.order_info.order_status === "pending_shipping" &&
|
||
Boolean(detail.value.logistics_info?.tracking_no) &&
|
||
detail.value.logistics_info?.tracking_status !== "received"
|
||
);
|
||
});
|
||
|
||
const logisticsActionText = computed(() => {
|
||
if (!detail.value?.logistics_info) {
|
||
return "";
|
||
}
|
||
|
||
return canMarkReceived.value ? "用户已提交/寄出，待鉴定中心签收" : detail.value.logistics_info.tracking_status_text;
|
||
});
|
||
|
||
const canSubmitReturnLogistics = computed(() => Boolean(detail.value?.order_info.can_submit_return_logistics));
|
||
const returnLogisticsBlockReason = computed(() => detail.value?.order_info.return_logistics_block_reason || "");
|
||
const canMarkReturnReceived = computed(() => Boolean(detail.value?.order_info.can_mark_return_received));
|
||
|
||
async function fetchOrders() {
|
||
loading.value = true;
|
||
try {
|
||
const response = await adminApi.getOrders({
|
||
keyword: keyword.value,
|
||
service_provider: serviceProvider.value,
|
||
status: status.value,
|
||
source_channel: sourceChannel.value,
|
||
});
|
||
orders.value = response.data.list;
|
||
} catch (error) {
|
||
console.error(error);
|
||
ElMessage.error("订单列表加载失败");
|
||
} finally {
|
||
loading.value = false;
|
||
}
|
||
}
|
||
|
||
async function openDetail(row: AdminOrderListItem) {
|
||
detailLoading.value = true;
|
||
drawerVisible.value = true;
|
||
try {
|
||
const response = await adminApi.getOrderDetail(row.id);
|
||
detail.value = response.data;
|
||
} catch (error) {
|
||
console.error(error);
|
||
ElMessage.error("订单详情加载失败");
|
||
} finally {
|
||
detailLoading.value = false;
|
||
}
|
||
}
|
||
|
||
async function reloadDetail() {
|
||
if (!detail.value) return;
|
||
detailLoading.value = true;
|
||
try {
|
||
const response = await adminApi.getOrderDetail(detail.value.order_info.id);
|
||
detail.value = response.data;
|
||
} catch (error) {
|
||
console.error(error);
|
||
ElMessage.error("订单详情刷新失败");
|
||
} finally {
|
||
detailLoading.value = false;
|
||
}
|
||
}
|
||
|
||
async function markReceived() {
|
||
if (!detail.value) return;
|
||
receiveSubmitting.value = true;
|
||
try {
|
||
const response = await adminApi.receiveOrderLogistics(detail.value.order_info.id);
|
||
ElMessage.success(response.message || "已标记签收");
|
||
await reloadDetail();
|
||
await fetchOrders();
|
||
} catch (error) {
|
||
console.error(error);
|
||
ElMessage.error("标记签收失败");
|
||
} finally {
|
||
receiveSubmitting.value = false;
|
||
}
|
||
}
|
||
|
||
async function openWarehouseDialog() {
|
||
if (!detail.value) return;
|
||
warehouseOptionsLoading.value = true;
|
||
warehouseDialogVisible.value = true;
|
||
selectedWarehouseId.value = detail.value.shipping_target?.warehouse_id || 0;
|
||
try {
|
||
const response = await adminApi.getOrderWarehouseOptions(detail.value.order_info.id);
|
||
warehouseOptions.value = response.data.list;
|
||
} catch (error) {
|
||
console.error(error);
|
||
ElMessage.error("仓库列表加载失败");
|
||
} finally {
|
||
warehouseOptionsLoading.value = false;
|
||
}
|
||
}
|
||
|
||
async function submitWarehouseReassign() {
|
||
if (!detail.value || !selectedWarehouseId.value) {
|
||
ElMessage.warning("请先选择一个目标仓库");
|
||
return;
|
||
}
|
||
|
||
try {
|
||
await ElMessageBox.confirm("改派后，用户寄送页将展示新的收货仓库地址。确定继续吗？", "改派仓库", {
|
||
type: "warning",
|
||
confirmButtonText: "确认改派",
|
||
cancelButtonText: "取消",
|
||
});
|
||
} catch {
|
||
return;
|
||
}
|
||
|
||
warehouseSubmitting.value = true;
|
||
try {
|
||
const response = await adminApi.reassignOrderWarehouse(detail.value.order_info.id, selectedWarehouseId.value);
|
||
ElMessage.success(response.message || "仓库已改派");
|
||
warehouseDialogVisible.value = false;
|
||
await reloadDetail();
|
||
} catch (error) {
|
||
console.error(error);
|
||
ElMessage.error("仓库改派失败");
|
||
} finally {
|
||
warehouseSubmitting.value = false;
|
||
}
|
||
}
|
||
|
||
function openReturnDialog() {
|
||
if (!detail.value) return;
|
||
if (!canSubmitReturnLogistics.value) {
|
||
ElMessage.warning(returnLogisticsBlockReason.value || "当前订单暂不支持登记回寄运单");
|
||
return;
|
||
}
|
||
returnExpressCompany.value = detail.value.return_logistics?.express_company || "";
|
||
returnTrackingNo.value = detail.value.return_logistics?.tracking_no || "";
|
||
returnDialogVisible.value = true;
|
||
}
|
||
|
||
async function submitReturnLogistics() {
|
||
if (!canSubmitReturnLogistics.value) {
|
||
ElMessage.warning(returnLogisticsBlockReason.value || "当前订单暂不支持登记回寄运单");
|
||
return;
|
||
}
|
||
if (!detail.value || !returnExpressCompany.value.trim() || !returnTrackingNo.value.trim()) {
|
||
ElMessage.warning("请完整填写回寄快递公司和运单号");
|
||
return;
|
||
}
|
||
|
||
returnSubmitting.value = true;
|
||
try {
|
||
const response = await adminApi.saveOrderReturnLogistics({
|
||
id: detail.value.order_info.id,
|
||
express_company: returnExpressCompany.value.trim(),
|
||
tracking_no: returnTrackingNo.value.trim(),
|
||
});
|
||
ElMessage.success(response.message || "回寄运单已登记");
|
||
returnDialogVisible.value = false;
|
||
await reloadDetail();
|
||
await fetchOrders();
|
||
} catch (error) {
|
||
console.error(error);
|
||
ElMessage.error(error instanceof Error ? error.message : "回寄运单登记失败");
|
||
} finally {
|
||
returnSubmitting.value = false;
|
||
}
|
||
}
|
||
|
||
async function markReturnReceived() {
|
||
if (!detail.value) return;
|
||
returnReceiveSubmitting.value = true;
|
||
try {
|
||
const response = await adminApi.receiveOrderReturnLogistics(detail.value.order_info.id);
|
||
ElMessage.success(response.message || "已标记用户签收");
|
||
await reloadDetail();
|
||
await fetchOrders();
|
||
} catch (error) {
|
||
console.error(error);
|
||
ElMessage.error("标记用户签收失败");
|
||
} finally {
|
||
returnReceiveSubmitting.value = false;
|
||
}
|
||
}
|
||
|
||
onMounted(fetchOrders);
|
||
</script>
|
||
|
||
<template>
|
||
<el-card class="panel-card" shadow="never">
|
||
<div class="filters-row">
|
||
<el-input v-model="keyword" placeholder="搜索订单号 / 鉴定单号 / 商品名称" clearable style="width: 320px" />
|
||
<el-select v-model="serviceProvider" placeholder="服务类型" style="width: 160px">
|
||
<el-option v-for="item in providerOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||
</el-select>
|
||
<el-select v-model="status" placeholder="订单状态" style="width: 160px">
|
||
<el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||
</el-select>
|
||
<el-select v-model="sourceChannel" placeholder="下单渠道" style="width: 170px">
|
||
<el-option v-for="item in sourceChannelOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||
</el-select>
|
||
<el-button type="primary" @click="fetchOrders">查询</el-button>
|
||
</div>
|
||
</el-card>
|
||
|
||
<el-card class="panel-card orders-table" shadow="never">
|
||
<el-table v-loading="loading" :data="orders" stripe>
|
||
<el-table-column prop="order_no" label="订单号" min-width="170" />
|
||
<el-table-column prop="appraisal_no" label="鉴定单号" min-width="180" />
|
||
<el-table-column prop="product_name" label="商品名称" min-width="220" />
|
||
<el-table-column prop="service_provider_text" label="服务类型" min-width="120" />
|
||
<el-table-column label="下单渠道" min-width="150">
|
||
<template #default="{ row }">
|
||
<span>{{ row.source_channel_text }}</span>
|
||
<div v-if="row.source_customer_id" class="table-subtext">客户ID：{{ row.source_customer_id }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="订单状态" min-width="150">
|
||
<template #default="{ row }">
|
||
<OrderStatusTag :status="row.display_status" />
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="estimated_finish_time" label="预计完成时间" min-width="170" />
|
||
<el-table-column prop="pay_amount" label="金额" min-width="100">
|
||
<template #default="{ row }">¥{{ row.pay_amount }}</template>
|
||
</el-table-column>
|
||
<el-table-column prop="created_at" label="创建时间" min-width="170" />
|
||
<el-table-column label="操作" fixed="right" width="110">
|
||
<template #default="{ row }">
|
||
<el-button link type="primary" @click="openDetail(row)">查看详情</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-card>
|
||
|
||
<el-drawer v-model="drawerVisible" size="68%" title="订单详情">
|
||
<div v-loading="detailLoading" v-if="detail" class="order-detail-shell">
|
||
<div class="detail-card order-detail-hero">
|
||
<div class="order-detail-hero__main">
|
||
<div class="order-detail-hero__eyebrow">订单履约工作区</div>
|
||
<div class="order-detail-hero__title">{{ productTitle }}</div>
|
||
<div class="order-detail-hero__meta">{{ productMetaText }}</div>
|
||
</div>
|
||
<div class="order-detail-hero__side">
|
||
<div class="order-detail-hero__tags">
|
||
<OrderStatusTag :status="detail.order_info.display_status" />
|
||
<span class="order-detail-chip">{{ detail.order_info.service_provider_text }}</span>
|
||
</div>
|
||
<div class="order-detail-hero__actions">
|
||
<el-button
|
||
v-if="canMarkReceived"
|
||
type="primary"
|
||
:loading="receiveSubmitting"
|
||
@click="markReceived"
|
||
>
|
||
标记鉴定中心签收
|
||
</el-button>
|
||
<el-button
|
||
v-if="detail.order_info.can_reassign_warehouse"
|
||
type="primary"
|
||
plain
|
||
:loading="warehouseOptionsLoading"
|
||
@click="openWarehouseDialog"
|
||
>
|
||
手动改派仓库
|
||
</el-button>
|
||
<el-button
|
||
v-if="canSubmitReturnLogistics || returnLogisticsBlockReason"
|
||
type="primary"
|
||
plain
|
||
:disabled="!canSubmitReturnLogistics"
|
||
@click="openReturnDialog"
|
||
>
|
||
{{ detail.return_logistics?.tracking_no ? '更新回寄运单' : '登记回寄运单' }}
|
||
</el-button>
|
||
<el-button
|
||
v-if="canMarkReturnReceived"
|
||
type="primary"
|
||
:loading="returnReceiveSubmitting"
|
||
@click="markReturnReceived"
|
||
>
|
||
标记用户签收
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="detail-grid">
|
||
<div class="detail-card">
|
||
<div class="detail-card__title">订单概览</div>
|
||
<div class="order-detail-grid">
|
||
<div class="order-detail-item">
|
||
<div class="order-detail-item__label">订单号</div>
|
||
<div class="order-detail-item__value">{{ detail.order_info.order_no }}</div>
|
||
</div>
|
||
<div class="order-detail-item">
|
||
<div class="order-detail-item__label">鉴定单号</div>
|
||
<div class="order-detail-item__value">{{ detail.order_info.appraisal_no }}</div>
|
||
</div>
|
||
<div class="order-detail-item">
|
||
<div class="order-detail-item__label">服务类型</div>
|
||
<div class="order-detail-item__value">{{ detail.order_info.service_provider_text }}</div>
|
||
</div>
|
||
<div class="order-detail-item">
|
||
<div class="order-detail-item__label">下单渠道</div>
|
||
<div class="order-detail-item__value">{{ detail.order_info.source_channel_text || "-" }}</div>
|
||
</div>
|
||
<div class="order-detail-item" v-if="detail.order_info.source_customer_id">
|
||
<div class="order-detail-item__label">大客户客户 ID</div>
|
||
<div class="order-detail-item__value">{{ detail.order_info.source_customer_id }}</div>
|
||
</div>
|
||
<div class="order-detail-item">
|
||
<div class="order-detail-item__label">当前状态</div>
|
||
<div class="order-detail-item__value"><OrderStatusTag :status="detail.order_info.display_status" /></div>
|
||
</div>
|
||
<div class="order-detail-item">
|
||
<div class="order-detail-item__label">订单金额</div>
|
||
<div class="order-detail-item__value">¥{{ detail.order_info.pay_amount }}</div>
|
||
</div>
|
||
<div class="order-detail-item">
|
||
<div class="order-detail-item__label">预计完成</div>
|
||
<div class="order-detail-item__value">{{ detail.order_info.estimated_finish_time || "-" }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="detail-card">
|
||
<div class="detail-card__title">商品信息</div>
|
||
<div class="order-detail-grid">
|
||
<div class="order-detail-item">
|
||
<div class="order-detail-item__label">商品名称</div>
|
||
<div class="order-detail-item__value">{{ detail.product_info.product_name || "-" }}</div>
|
||
</div>
|
||
<div class="order-detail-item">
|
||
<div class="order-detail-item__label">品类 / 品牌</div>
|
||
<div class="order-detail-item__value">{{ detail.product_info.category_name || "-" }} / {{ detail.product_info.brand_name || "-" }}</div>
|
||
</div>
|
||
<div class="order-detail-item">
|
||
<div class="order-detail-item__label">颜色 / 规格</div>
|
||
<div class="order-detail-item__value">{{ detail.product_info.color || "-" }} / {{ detail.product_info.size_spec || "-" }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="detail-card">
|
||
<div class="detail-card__title">补充信息</div>
|
||
<div class="order-detail-grid">
|
||
<div class="order-detail-item">
|
||
<div class="order-detail-item__label">购买渠道</div>
|
||
<div class="order-detail-item__value">{{ detail.extra_info.purchase_channel || "-" }}</div>
|
||
</div>
|
||
<div class="order-detail-item">
|
||
<div class="order-detail-item__label">购买价格</div>
|
||
<div class="order-detail-item__value">¥{{ detail.extra_info.purchase_price }}</div>
|
||
</div>
|
||
<div class="order-detail-item order-detail-item--full">
|
||
<div class="order-detail-item__label">使用情况</div>
|
||
<div class="order-detail-item__value">{{ usageStatusText }}</div>
|
||
</div>
|
||
<div class="order-detail-item order-detail-item--full">
|
||
<div class="order-detail-item__label">补充说明</div>
|
||
<div class="order-detail-item__value">{{ detail.extra_info.condition_desc || detail.extra_info.remark || "-" }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="detail-card" v-if="detail.shipping_target">
|
||
<div class="detail-card__title">收货仓库</div>
|
||
<div class="order-detail-grid">
|
||
<div class="order-detail-item">
|
||
<div class="order-detail-item__label">仓库名称 / 编码</div>
|
||
<div class="order-detail-item__value">{{ detail.shipping_target.warehouse_name }} / {{ detail.shipping_target.warehouse_code }}</div>
|
||
</div>
|
||
<div class="order-detail-item">
|
||
<div class="order-detail-item__label">收件人 / 联系电话</div>
|
||
<div class="order-detail-item__value">{{ detail.shipping_target.receiver_name }} / {{ detail.shipping_target.receiver_mobile }}</div>
|
||
</div>
|
||
<div class="order-detail-item order-detail-item--full">
|
||
<div class="order-detail-item__label">收件地址</div>
|
||
<div class="order-detail-item__value">{{ detail.shipping_target.full_address }}</div>
|
||
</div>
|
||
<div class="order-detail-item order-detail-item--full">
|
||
<div class="order-detail-item__label">服务时间</div>
|
||
<div class="order-detail-item__value">{{ detail.shipping_target.service_time }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="detail-card">
|
||
<div class="detail-card__title">寄回地址</div>
|
||
<div v-if="detail.return_address" class="order-detail-grid">
|
||
<div class="order-detail-item">
|
||
<div class="order-detail-item__label">收件人 / 联系电话</div>
|
||
<div class="order-detail-item__value">{{ detail.return_address.consignee }} / {{ detail.return_address.mobile }}</div>
|
||
</div>
|
||
<div class="order-detail-item order-detail-item--full">
|
||
<div class="order-detail-item__label">寄回地址</div>
|
||
<div class="order-detail-item__value">{{ detail.return_address.full_address }}</div>
|
||
</div>
|
||
</div>
|
||
<el-empty v-else description="用户暂未确认寄回地址" :image-size="64" />
|
||
</div>
|
||
|
||
<div class="detail-card" v-if="detail.logistics_info">
|
||
<div class="detail-card__title">物流信息</div>
|
||
<div class="order-detail-grid">
|
||
<div class="order-detail-item">
|
||
<div class="order-detail-item__label">快递公司 / 运单号</div>
|
||
<div class="order-detail-item__value">{{ detail.logistics_info.express_company || "-" }} / {{ detail.logistics_info.tracking_no || "-" }}</div>
|
||
</div>
|
||
<div class="order-detail-item">
|
||
<div class="order-detail-item__label">物流状态</div>
|
||
<div class="order-detail-item__value">{{ logisticsActionText }}</div>
|
||
</div>
|
||
<div class="order-detail-item order-detail-item--full">
|
||
<div class="order-detail-item__label">最新节点</div>
|
||
<div class="order-detail-item__value">{{ detail.logistics_info.latest_desc || "-" }}</div>
|
||
</div>
|
||
<div class="order-detail-item order-detail-item--full" v-if="detail.logistics_info.latest_time">
|
||
<div class="order-detail-item__label">最新更新时间</div>
|
||
<div class="order-detail-item__value">{{ detail.logistics_info.latest_time }}</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="canMarkReceived" class="detail-card__desc" style="margin-top: 16px;">
|
||
<el-alert title="待签收操作" description="物流信息已提交，确认鉴定中心实际收货后再执行签收。" type="warning" :closable="false" show-icon />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="detail-card" v-if="detail.return_logistics">
|
||
<div class="detail-card__title">回寄物流</div>
|
||
<div class="order-detail-grid">
|
||
<div class="order-detail-item">
|
||
<div class="order-detail-item__label">快递公司 / 运单号</div>
|
||
<div class="order-detail-item__value">{{ detail.return_logistics.express_company || "-" }} / {{ detail.return_logistics.tracking_no || "-" }}</div>
|
||
</div>
|
||
<div class="order-detail-item">
|
||
<div class="order-detail-item__label">物流状态</div>
|
||
<div class="order-detail-item__value">{{ detail.return_logistics.tracking_status_text }}</div>
|
||
</div>
|
||
<div class="order-detail-item order-detail-item--full">
|
||
<div class="order-detail-item__label">最新节点</div>
|
||
<div class="order-detail-item__value">{{ detail.return_logistics.latest_desc || "-" }}</div>
|
||
</div>
|
||
<div class="order-detail-item order-detail-item--full" v-if="detail.return_logistics.latest_time">
|
||
<div class="order-detail-item__label">最新更新时间</div>
|
||
<div class="order-detail-item__value">{{ detail.return_logistics.latest_time }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="detail-card" v-if="detail.report_summary">
|
||
<div class="detail-card__title">报告信息</div>
|
||
<el-alert
|
||
v-if="returnLogisticsBlockReason"
|
||
type="warning"
|
||
:closable="false"
|
||
show-icon
|
||
:title="returnLogisticsBlockReason"
|
||
description="请先在报告中心发布订单报告，发布后再登记回寄运单。"
|
||
style="margin-top: 12px;"
|
||
/>
|
||
<div class="detail-card__desc">
|
||
<div class="detail-label">报告编号</div>
|
||
<div class="detail-value">{{ detail.report_summary.report_no }}</div>
|
||
</div>
|
||
<div class="detail-card__desc">
|
||
<div class="detail-label">报告标题</div>
|
||
<div class="detail-value">{{ detail.report_summary.report_title }}</div>
|
||
</div>
|
||
<div class="detail-card__desc">
|
||
<div class="detail-label">发布时间</div>
|
||
<div class="detail-value">{{ detail.report_summary.publish_time }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="detail-card" style="grid-column: 1 / -1">
|
||
<div class="detail-card__title">时间轴</div>
|
||
<div class="timeline-list" style="margin-top: 14px">
|
||
<div v-for="item in detail.timeline" :key="`${item.node_text}-${item.occurred_at}`" class="timeline-node">
|
||
<div class="timeline-node__title">{{ item.node_text }}</div>
|
||
<div class="timeline-node__time">{{ item.occurred_at }}</div>
|
||
<div class="timeline-node__desc">{{ item.node_desc }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="detail-card" v-if="detail.logistics_info" style="grid-column: 1 / -1">
|
||
<div class="detail-card__title">物流轨迹</div>
|
||
<div class="timeline-list" style="margin-top: 14px">
|
||
<div v-for="item in detail.logistics_info.nodes" :key="`${item.node_time}-${item.node_desc}`" class="timeline-node">
|
||
<div class="timeline-node__title">{{ item.node_desc }}</div>
|
||
<div class="timeline-node__time">{{ item.node_time }}</div>
|
||
<div class="timeline-node__desc">{{ item.node_location || "-" }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="detail-card" v-if="detail.supplement_task" style="grid-column: 1 / -1">
|
||
<div class="detail-card__title">补图任务</div>
|
||
<div class="detail-card__desc">
|
||
<div class="detail-label">补图原因</div>
|
||
<div class="detail-value">{{ detail.supplement_task.reason }}</div>
|
||
</div>
|
||
<div class="detail-card__desc">
|
||
<div class="detail-label">截止时间</div>
|
||
<div class="detail-value">{{ detail.supplement_task.deadline }}</div>
|
||
</div>
|
||
<div class="timeline-list" style="margin-top: 14px">
|
||
<div v-for="item in detail.supplement_task.items" :key="item.item_name" class="timeline-node">
|
||
<div class="timeline-node__title">{{ item.item_name }}</div>
|
||
<div class="timeline-node__desc">{{ item.guide_text }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-drawer>
|
||
|
||
<el-dialog v-model="warehouseDialogVisible" title="改派收货仓库" width="720px">
|
||
<div v-loading="warehouseOptionsLoading" style="display: grid; gap: 14px;">
|
||
<div
|
||
v-for="item in warehouseOptions"
|
||
:key="item.id"
|
||
:style="{
|
||
border: selectedWarehouseId === item.id ? '1px solid #c8a45d' : '1px solid var(--admin-border)',
|
||
borderRadius: '14px',
|
||
padding: '16px 18px',
|
||
cursor: 'pointer',
|
||
background: selectedWarehouseId === item.id ? 'rgba(200, 164, 93, 0.08)' : '#fff',
|
||
}"
|
||
@click="selectedWarehouseId = item.id"
|
||
>
|
||
<div style="display:flex; justify-content:space-between; gap: 16px; align-items:center;">
|
||
<div style="font-weight:700;">{{ item.warehouse_name }}</div>
|
||
<div style="color: var(--admin-text-subtle);">{{ item.is_default ? '默认仓库' : '可选仓库' }}</div>
|
||
</div>
|
||
<div style="margin-top: 8px; color: var(--admin-text-subtle);">{{ item.service_provider_text }} / {{ item.warehouse_code }}</div>
|
||
<div style="margin-top: 8px;">{{ item.receiver_name }} / {{ item.receiver_mobile }}</div>
|
||
<div style="margin-top: 8px;">{{ item.full_address }}</div>
|
||
<div style="margin-top: 8px; color: var(--admin-text-subtle);">{{ item.service_time }}</div>
|
||
</div>
|
||
</div>
|
||
<template #footer>
|
||
<el-button @click="warehouseDialogVisible = false">取消</el-button>
|
||
<el-button type="primary" :loading="warehouseSubmitting" @click="submitWarehouseReassign">确认改派</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
|
||
<el-dialog v-model="returnDialogVisible" title="登记回寄运单" width="520px">
|
||
<el-form label-position="top">
|
||
<el-form-item label="回寄快递公司">
|
||
<el-input v-model="returnExpressCompany" placeholder="例如：顺丰速运" />
|
||
</el-form-item>
|
||
<el-form-item label="回寄运单号">
|
||
<el-input v-model="returnTrackingNo" placeholder="请输入回寄运单号" />
|
||
</el-form-item>
|
||
<el-alert
|
||
v-if="detail?.return_address"
|
||
type="info"
|
||
:closable="false"
|
||
show-icon
|
||
title="当前寄回地址"
|
||
:description="`${detail.return_address.consignee} / ${detail.return_address.mobile} / ${detail.return_address.full_address}`"
|
||
/>
|
||
<el-alert
|
||
v-else
|
||
type="warning"
|
||
:closable="false"
|
||
show-icon
|
||
title="用户尚未确认寄回地址"
|
||
description="请先提醒用户在订单详情中确认寄回地址，再登记回寄运单。"
|
||
/>
|
||
</el-form>
|
||
<template #footer>
|
||
<el-button @click="returnDialogVisible = false">取消</el-button>
|
||
<el-button type="primary" :loading="returnSubmitting" :disabled="!canSubmitReturnLogistics" @click="submitReturnLogistics">确认登记</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.order-detail-shell {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 18px;
|
||
}
|
||
|
||
.order-detail-hero {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
gap: 20px;
|
||
padding: 24px;
|
||
background:
|
||
radial-gradient(circle at top right, rgba(200, 164, 93, 0.12), transparent 30%),
|
||
linear-gradient(135deg, #fffdfa 0%, #fbf8f1 100%);
|
||
}
|
||
|
||
.order-detail-hero__main {
|
||
min-width: 0;
|
||
}
|
||
|
||
.order-detail-hero__eyebrow {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
min-height: 28px;
|
||
padding: 0 12px;
|
||
border-radius: 999px;
|
||
background: rgba(200, 164, 93, 0.12);
|
||
color: #7a5a21;
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.order-detail-hero__title {
|
||
margin-top: 14px;
|
||
color: var(--admin-text-main);
|
||
font-size: 28px;
|
||
font-weight: 800;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.order-detail-hero__meta {
|
||
margin-top: 10px;
|
||
color: var(--admin-text-subtle);
|
||
font-size: 14px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.order-detail-hero__side {
|
||
min-width: 260px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-end;
|
||
gap: 14px;
|
||
}
|
||
|
||
.order-detail-hero__tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: flex-end;
|
||
gap: 10px;
|
||
}
|
||
|
||
.order-detail-hero__actions {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: flex-end;
|
||
gap: 12px;
|
||
}
|
||
|
||
.order-detail-chip {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
min-height: 30px;
|
||
padding: 0 12px;
|
||
border-radius: 999px;
|
||
background: rgba(72, 104, 133, 0.1);
|
||
color: var(--admin-progress);
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.table-subtext {
|
||
margin-top: 4px;
|
||
color: var(--admin-text-subtle);
|
||
font-size: 12px;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.order-detail-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 14px;
|
||
margin-top: 16px;
|
||
}
|
||
|
||
.order-detail-item {
|
||
padding: 14px 16px;
|
||
border: 1px solid #efe8d9;
|
||
border-radius: 16px;
|
||
background: #fcfaf5;
|
||
}
|
||
|
||
.order-detail-item--full {
|
||
grid-column: 1 / -1;
|
||
}
|
||
|
||
.order-detail-item__label {
|
||
color: var(--admin-text-subtle);
|
||
font-size: 12px;
|
||
}
|
||
|
||
.order-detail-item__value {
|
||
margin-top: 8px;
|
||
color: var(--admin-text-main);
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
line-height: 1.5;
|
||
word-break: break-word;
|
||
}
|
||
|
||
@media (max-width: 1280px) {
|
||
.order-detail-hero {
|
||
grid-template-columns: 1fr;
|
||
display: grid;
|
||
}
|
||
|
||
.order-detail-hero__side {
|
||
min-width: 0;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.order-detail-hero__tags,
|
||
.order-detail-hero__actions {
|
||
justify-content: flex-start;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 960px) {
|
||
.order-detail-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
</style>
|