增加了手机操作端
This commit is contained in:
wushumin
215
work-app/src/pages/order/detail.vue
Normal file
215
work-app/src/pages/order/detail.vue
Normal file
@@ -0,0 +1,215 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from "vue";
|
||||
import { onLoad, onShow } from "@dcloudio/uni-app";
|
||||
import { adminApi, type AdminOrderDetail } from "../../api/admin";
|
||||
import { showErrorToast } 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 pageTitle = computed(() => detail.value?.order_info.order_no || "订单详情");
|
||||
|
||||
const timeline = computed(() => detail.value?.timeline || []);
|
||||
|
||||
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 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(" / ");
|
||||
}
|
||||
|
||||
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="title">{{ pageTitle }}</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>
|
||||
</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="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>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user