544 lines
16 KiB
Vue
544 lines
16 KiB
Vue
<script setup lang="ts">
|
||
import { computed, ref } from "vue";
|
||
import { onLoad, onShow } from "@dcloudio/uni-app";
|
||
import { adminApi, type AdminFileAsset, type AdminOrderDetail } from "../../api/admin";
|
||
import { showErrorToast, showInfoToast } from "../../utils/feedback";
|
||
|
||
const loading = ref(false);
|
||
const pageReady = ref(false);
|
||
const loadError = ref("");
|
||
const detail = ref<AdminOrderDetail | null>(null);
|
||
const orderId = ref(0);
|
||
const activeInboundVideo = ref<AdminFileAsset | null>(null);
|
||
|
||
const pageTitle = computed(() => detail.value?.order_info.order_no || "订单详情");
|
||
|
||
const timeline = computed(() => detail.value?.timeline || []);
|
||
const inboundAttachments = computed(() => detail.value?.inbound_attachments || []);
|
||
const internalTagNo = computed(() => detail.value?.transfer_flow?.internal_tag_no || detail.value?.order_info.internal_tag_no || "");
|
||
|
||
async function fetchDetail() {
|
||
if (!orderId.value) return;
|
||
loading.value = true;
|
||
if (!pageReady.value) loadError.value = "";
|
||
try {
|
||
detail.value = await adminApi.getOrderDetail(orderId.value);
|
||
pageReady.value = true;
|
||
} catch (error) {
|
||
if (!pageReady.value) {
|
||
loadError.value = "订单详情加载失败，请稍后重试。";
|
||
}
|
||
showErrorToast(error, "订单详情加载失败");
|
||
} finally {
|
||
loading.value = false;
|
||
}
|
||
}
|
||
|
||
function openReportDetail() {
|
||
const reportId = Number(detail.value?.report_summary?.id || 0);
|
||
if (!reportId) return;
|
||
uni.navigateTo({ url: `/pages/report/detail?id=${reportId}` });
|
||
}
|
||
|
||
function copyOrderNo() {
|
||
const orderNo = detail.value?.order_info.order_no || "";
|
||
if (!orderNo) return;
|
||
uni.setClipboardData({
|
||
data: orderNo,
|
||
success: () => showInfoToast("订单号已复制"),
|
||
fail: () => showInfoToast("复制失败，请重试"),
|
||
});
|
||
}
|
||
|
||
function formatMoney(value?: number) {
|
||
const amount = Number(value || 0);
|
||
return `¥${amount.toFixed(2)}`;
|
||
}
|
||
|
||
function displayAddress(address?: { consignee?: string; mobile?: string; full_address?: string } | null) {
|
||
if (!address) return "-";
|
||
return [address.consignee, address.mobile, address.full_address].filter(Boolean).join(" / ");
|
||
}
|
||
|
||
function isImageAsset(item: AdminFileAsset) {
|
||
return item.file_type === "image" || item.mime_type?.startsWith("image/");
|
||
}
|
||
|
||
function isVideoAsset(item: AdminFileAsset) {
|
||
return item.file_type === "video" || item.mime_type?.startsWith("video/");
|
||
}
|
||
|
||
function attachmentTypeLabel(item: AdminFileAsset) {
|
||
if (isImageAsset(item)) return "图片";
|
||
if (isVideoAsset(item)) return "视频";
|
||
return "附件";
|
||
}
|
||
|
||
function previewInboundAttachment(item: AdminFileAsset) {
|
||
if (isImageAsset(item)) {
|
||
const urls = inboundAttachments.value.filter(isImageAsset).map((asset) => asset.file_url);
|
||
uni.previewImage({ urls, current: item.file_url });
|
||
return;
|
||
}
|
||
|
||
if (isVideoAsset(item)) {
|
||
activeInboundVideo.value = item;
|
||
return;
|
||
}
|
||
|
||
uni.showToast({ title: "当前附件暂不支持预览", icon: "none" });
|
||
}
|
||
|
||
function closeInboundVideo() {
|
||
activeInboundVideo.value = null;
|
||
}
|
||
|
||
onLoad((options) => {
|
||
orderId.value = Number(options?.id || 0);
|
||
if (!orderId.value) {
|
||
loadError.value = "缺少订单编号，无法查看详情。";
|
||
}
|
||
});
|
||
|
||
onShow(() => {
|
||
if (orderId.value) {
|
||
void fetchDetail();
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<view class="page">
|
||
<view v-if="!pageReady && loading" class="empty">正在加载订单详情</view>
|
||
<view v-else-if="!pageReady && loadError" class="empty">{{ loadError }}</view>
|
||
|
||
<template v-else-if="detail">
|
||
<view class="hero">
|
||
<view class="eyebrow">订单详情</view>
|
||
<view class="order-title-row">
|
||
<view class="title order-title">{{ pageTitle }}</view>
|
||
<button class="copy-order-button" aria-label="复制订单号" hover-class="copy-order-button--active" @click.stop="copyOrderNo">
|
||
<view class="copy-order-button__icon">
|
||
<view class="copy-order-button__sheet copy-order-button__sheet--back"></view>
|
||
<view class="copy-order-button__sheet copy-order-button__sheet--front"></view>
|
||
</view>
|
||
</button>
|
||
</view>
|
||
<view class="subtitle">{{ detail.order_info.appraisal_no }}</view>
|
||
</view>
|
||
|
||
<view class="card">
|
||
<view class="row">
|
||
<view>
|
||
<view class="card-title">{{ detail.product_info.product_name || "待完善物品信息" }}</view>
|
||
<view class="card-desc">{{ detail.product_info.category_name || "-" }} / {{ detail.product_info.brand_name || "-" }}</view>
|
||
</view>
|
||
<text class="tag">{{ detail.order_info.display_status }}</text>
|
||
</view>
|
||
<view class="meta-grid">
|
||
<view class="meta-item">
|
||
<view class="meta-label">服务类型</view>
|
||
<view class="meta-value">{{ detail.order_info.service_provider_text }}</view>
|
||
</view>
|
||
<view class="meta-item">
|
||
<view class="meta-label">订单金额</view>
|
||
<view class="meta-value">{{ formatMoney(detail.order_info.pay_amount) }}</view>
|
||
</view>
|
||
<view class="meta-item">
|
||
<view class="meta-label">创建时间</view>
|
||
<view class="meta-value">{{ detail.order_info.created_at || "-" }}</view>
|
||
</view>
|
||
<view class="meta-item">
|
||
<view class="meta-label">预计完成</view>
|
||
<view class="meta-value">{{ detail.order_info.estimated_finish_time || "-" }}</view>
|
||
</view>
|
||
<view v-if="internalTagNo" class="meta-item meta-item--wide">
|
||
<view class="meta-label">流转码编号</view>
|
||
<view class="meta-value transfer-code-value">{{ internalTagNo }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="card">
|
||
<view class="card-title">物品信息</view>
|
||
<view class="meta-grid">
|
||
<view class="meta-item">
|
||
<view class="meta-label">商品名称</view>
|
||
<view class="meta-value">{{ detail.product_info.product_name || "-" }}</view>
|
||
</view>
|
||
<view class="meta-item">
|
||
<view class="meta-label">品类 / 品牌</view>
|
||
<view class="meta-value">{{ detail.product_info.category_name || "-" }} / {{ detail.product_info.brand_name || "-" }}</view>
|
||
</view>
|
||
<view class="meta-item">
|
||
<view class="meta-label">颜色 / 规格</view>
|
||
<view class="meta-value">{{ detail.product_info.color || "-" }} / {{ detail.product_info.size_spec || "-" }}</view>
|
||
</view>
|
||
<view class="meta-item">
|
||
<view class="meta-label">序列号</view>
|
||
<view class="meta-value">{{ detail.product_info.serial_no || "-" }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="card">
|
||
<view class="card-title">物流与寄回</view>
|
||
<view class="stack" style="margin-top: 18rpx">
|
||
<view class="meta-item">
|
||
<view class="meta-label">寄送到中心</view>
|
||
<view class="meta-value">{{ detail.logistics_info ? `${detail.logistics_info.express_company || "-"} / ${detail.logistics_info.tracking_no || "-"}` : "-" }}</view>
|
||
</view>
|
||
<view class="meta-item">
|
||
<view class="meta-label">寄回地址</view>
|
||
<view class="meta-value">{{ displayAddress(detail.return_address) }}</view>
|
||
</view>
|
||
<view class="meta-item">
|
||
<view class="meta-label">回寄运单</view>
|
||
<view class="meta-value">{{ detail.return_logistics ? `${detail.return_logistics.express_company || "-"} / ${detail.return_logistics.tracking_no || "-"}` : "-" }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-if="inboundAttachments.length" class="card">
|
||
<view class="row attachment-card-head">
|
||
<view class="attachment-card-copy">
|
||
<view class="card-title">入库附件</view>
|
||
<view class="card-desc">仓管入库时提交的拆包图片和视频，可点击预览。</view>
|
||
</view>
|
||
<text class="tag attachment-count">{{ inboundAttachments.length }}个</text>
|
||
</view>
|
||
<view class="attachment-grid">
|
||
<view v-for="item in inboundAttachments" :key="item.file_url" class="attachment-tile">
|
||
<view class="attachment-preview" @click="previewInboundAttachment(item)">
|
||
<image v-if="isImageAsset(item)" class="attachment-thumb" :src="item.thumbnail_url || item.file_url" mode="aspectFill" />
|
||
<template v-else-if="isVideoAsset(item)">
|
||
<image v-if="item.thumbnail_url" class="attachment-thumb" :src="item.thumbnail_url" mode="aspectFill" />
|
||
<view v-else class="attachment-video-thumb">
|
||
<text class="attachment-video-label">视频</text>
|
||
</view>
|
||
</template>
|
||
<view v-else class="attachment-file-thumb">附件</view>
|
||
<view v-if="isVideoAsset(item)" class="attachment-play" @click.stop="previewInboundAttachment(item)">▶</view>
|
||
</view>
|
||
<view class="attachment-meta">
|
||
<text class="attachment-name">{{ item.name || item.file_id }}</text>
|
||
<text class="attachment-type">{{ attachmentTypeLabel(item) }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-if="detail.report_summary" class="card">
|
||
<view class="row">
|
||
<view>
|
||
<view class="card-title">报告摘要</view>
|
||
<view class="card-desc">{{ detail.report_summary.report_status_text || detail.report_summary.report_status }}</view>
|
||
</view>
|
||
<button class="btn btn--ghost" @click="openReportDetail">查看报告</button>
|
||
</view>
|
||
<view class="meta-grid">
|
||
<view class="meta-item">
|
||
<view class="meta-label">报告编号</view>
|
||
<view class="meta-value">{{ detail.report_summary.report_no }}</view>
|
||
</view>
|
||
<view class="meta-item">
|
||
<view class="meta-label">报告标题</view>
|
||
<view class="meta-value">{{ detail.report_summary.report_title }}</view>
|
||
</view>
|
||
<view class="meta-item">
|
||
<view class="meta-label">发布时间</view>
|
||
<view class="meta-value">{{ detail.report_summary.publish_time || "-" }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="card">
|
||
<view class="card-title">流转时间线</view>
|
||
<view class="timeline">
|
||
<view v-for="item in timeline" :key="`${item.node_text}-${item.occurred_at}`" class="timeline-item">
|
||
<view class="timeline-item__head">
|
||
<view class="timeline-item__title">{{ item.node_text }}</view>
|
||
<view class="timeline-item__time">{{ item.occurred_at }}</view>
|
||
</view>
|
||
<view class="timeline-item__desc">{{ item.node_desc }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-if="activeInboundVideo" class="video-preview-mask" @click="closeInboundVideo">
|
||
<view class="video-preview-panel" @click.stop>
|
||
<view class="video-preview-head">
|
||
<text class="video-preview-title">{{ activeInboundVideo.name || "入库视频" }}</text>
|
||
<text class="video-preview-close" @click="closeInboundVideo">关闭</text>
|
||
</view>
|
||
<video class="video-preview-player" :src="activeInboundVideo.file_url" :poster="activeInboundVideo.thumbnail_url || ''" controls autoplay />
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
.order-title-row {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 14rpx;
|
||
margin-top: 18rpx;
|
||
}
|
||
|
||
.order-title {
|
||
flex: 1;
|
||
min-width: 0;
|
||
margin-top: 0;
|
||
overflow-wrap: anywhere;
|
||
word-break: break-all;
|
||
}
|
||
|
||
.copy-order-button {
|
||
position: relative;
|
||
flex: 0 0 auto;
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
margin-top: 2rpx;
|
||
border: 1px solid var(--work-border);
|
||
border-radius: var(--work-radius-sm);
|
||
background: #ffffff;
|
||
}
|
||
|
||
.copy-order-button--active {
|
||
background: var(--work-card-muted);
|
||
}
|
||
|
||
.copy-order-button__icon {
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
width: 36rpx;
|
||
height: 40rpx;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
|
||
.copy-order-button__sheet {
|
||
position: absolute;
|
||
width: 26rpx;
|
||
height: 30rpx;
|
||
border: 3rpx solid var(--work-text);
|
||
border-radius: 5rpx;
|
||
background: #ffffff;
|
||
}
|
||
|
||
.copy-order-button__sheet--back {
|
||
left: 1rpx;
|
||
top: 1rpx;
|
||
border-color: var(--work-text-soft);
|
||
}
|
||
|
||
.copy-order-button__sheet--front {
|
||
right: 1rpx;
|
||
bottom: 1rpx;
|
||
}
|
||
|
||
.timeline {
|
||
display: grid;
|
||
gap: 16rpx;
|
||
margin-top: 18rpx;
|
||
}
|
||
|
||
.timeline-item {
|
||
padding: 18rpx;
|
||
border-radius: var(--work-radius-sm);
|
||
background: var(--work-card-muted);
|
||
}
|
||
|
||
.timeline-item__head {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.timeline-item__title {
|
||
color: var(--work-text);
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.timeline-item__time,
|
||
.timeline-item__desc {
|
||
color: var(--work-text-soft);
|
||
font-size: 24rpx;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.attachment-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
gap: 14rpx;
|
||
margin-top: 18rpx;
|
||
}
|
||
|
||
.meta-item--wide {
|
||
grid-column: 1 / -1;
|
||
}
|
||
|
||
.transfer-code-value {
|
||
color: var(--work-warning);
|
||
font-weight: 900;
|
||
word-break: break-all;
|
||
}
|
||
|
||
.attachment-card-head {
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.attachment-card-copy {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.attachment-count {
|
||
flex: 0 0 auto;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.attachment-tile {
|
||
min-width: 0;
|
||
}
|
||
|
||
.attachment-preview {
|
||
position: relative;
|
||
width: 100%;
|
||
aspect-ratio: 1;
|
||
overflow: hidden;
|
||
border: 1px solid var(--work-border);
|
||
border-radius: var(--work-radius-sm);
|
||
background: var(--work-card-muted);
|
||
}
|
||
|
||
.attachment-thumb {
|
||
display: block;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.attachment-video-thumb,
|
||
.attachment-file-thumb {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.attachment-video-thumb {
|
||
background: linear-gradient(135deg, #f8fafc 0%, #e8edf3 100%);
|
||
color: var(--work-text);
|
||
}
|
||
|
||
.attachment-video-label {
|
||
font-size: 24rpx;
|
||
font-weight: 900;
|
||
}
|
||
|
||
.attachment-file-thumb {
|
||
color: var(--work-text-soft);
|
||
font-size: 24rpx;
|
||
font-weight: 800;
|
||
}
|
||
|
||
.attachment-play {
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
width: 54rpx;
|
||
height: 54rpx;
|
||
margin-left: -27rpx;
|
||
margin-top: -27rpx;
|
||
border-radius: 50%;
|
||
background: rgba(32, 33, 36, 0.72);
|
||
color: #ffffff;
|
||
font-size: 28rpx;
|
||
line-height: 54rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.attachment-meta {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) auto;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
margin-top: 8rpx;
|
||
}
|
||
|
||
.attachment-name {
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
color: var(--work-text);
|
||
font-size: 22rpx;
|
||
font-weight: 700;
|
||
line-height: 1.35;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.attachment-type {
|
||
min-height: 34rpx;
|
||
padding: 0 10rpx;
|
||
border-radius: var(--work-radius-pill);
|
||
background: var(--work-info-soft);
|
||
color: var(--work-info);
|
||
font-size: 20rpx;
|
||
font-weight: 700;
|
||
line-height: 34rpx;
|
||
}
|
||
|
||
.video-preview-mask {
|
||
position: fixed;
|
||
z-index: 20;
|
||
inset: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 32rpx;
|
||
background: rgba(0, 0, 0, 0.58);
|
||
}
|
||
|
||
.video-preview-panel {
|
||
width: 100%;
|
||
overflow: hidden;
|
||
border-radius: var(--work-radius);
|
||
background: #ffffff;
|
||
}
|
||
|
||
.video-preview-head {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 18rpx;
|
||
padding: 22rpx 24rpx;
|
||
}
|
||
|
||
.video-preview-title {
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
color: var(--work-text);
|
||
font-size: 28rpx;
|
||
font-weight: 800;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.video-preview-close {
|
||
flex: 0 0 auto;
|
||
color: var(--work-info);
|
||
font-size: 26rpx;
|
||
font-weight: 800;
|
||
}
|
||
|
||
.video-preview-player {
|
||
display: block;
|
||
width: 100%;
|
||
height: 58vh;
|
||
background: #000000;
|
||
}
|
||
</style>
|