front/src/views/h5/admin-center/orders/detail.vue
zzh e5175e6cc1
All checks were successful
Build and Deploy Front / deploy (push) Successful in 6m4s
feat: H5 门户切换与充值审核,订单编辑支持仓库件重尺及 COS 资源代理修复
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-10-15 19:53:24 +08:00

98 lines
2.2 KiB
Vue

<template>
<div class="h5-order-detail-page">
<H5AdminOrderDetailSheet
:key="detailKey"
:visible="sheetVisible && !editVisible"
:order-id="orderId"
:initial-tab="initialTab"
@update:visible="onDetailVisible"
@edit="openEdit"
/>
<H5PlaceOrderSheet
v-if="editVisible"
v-model:visible="editVisible"
:order-id="editOrderId"
variant="admin"
@success="onEditSuccess"
/>
</div>
</template>
<script lang="ts" setup>
import { computed, defineAsyncComponent, onMounted, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import H5AdminOrderDetailSheet from '../components/H5AdminOrderDetailSheet.vue';
defineOptions({ name: 'H5AdminOrderDetail' });
const H5PlaceOrderSheet = defineAsyncComponent(
() => import('@/views/h5/customer-center/components/H5PlaceOrderSheet.vue'),
);
const route = useRoute();
const router = useRouter();
const sheetVisible = ref(true);
const editVisible = ref(false);
const editOrderId = ref<number | string | null>(null);
const detailKey = ref(0);
const orderId = computed(() => String(route.params.id || ''));
const initialTab = computed(() => {
const tab = String(route.query.tab || '');
if (tab === 'track' || tab === 'fee' || tab === 'overview') return tab;
return 'overview' as const;
});
function leave() {
if (window.history.length > 1) {
router.back();
return;
}
router.replace('/h5/admin/orders');
}
function onDetailVisible(visible: boolean) {
if (!visible && !editVisible.value) {
sheetVisible.value = false;
}
}
function openEdit(id: number | string) {
if (id == null || id === '') return;
editOrderId.value = id;
editVisible.value = true;
}
function onEditSuccess() {
editVisible.value = false;
editOrderId.value = null;
detailKey.value += 1;
sheetVisible.value = true;
}
watch(sheetVisible, (visible) => {
if (!visible && !editVisible.value) leave();
});
watch(editVisible, (visible) => {
if (!visible) {
editOrderId.value = null;
sheetVisible.value = true;
}
});
onMounted(() => {
sheetVisible.value = true;
});
</script>
<style lang="less" scoped>
.h5-order-detail-page {
min-height: 100%;
min-height: 100dvh;
background: #f5f7f8;
}
</style>