Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | <script setup lang="ts">
import { computed } from "vue";
import { RouterLink, useRoute } from "vue-router";
import { PjPageContainer } from "@plain-journal/ui";
import type { AfterSaleAccessContext } from "../entities/after-sale";
import { AfterSaleWorkspace } from "../features/after-sale-workflow";
import { useSessionStore } from "../features/customer-session";
const route = useRoute();
const session = useSessionStore();
const afterSaleNo = computed(() => String(route.params.afterSaleNo ?? ""));
const access = computed<AfterSaleAccessContext>(() => ({
authenticated: session.authenticated,
ownerId: session.profile?.id ?? null,
accessToken: session.accessToken,
}));
</script>
<template>
<PjPageContainer as="section" class="after-sale-detail-page">
<nav class="content-path" aria-label="当前位置">
<RouterLink to="/after-sales">售后服务</RouterLink>
<span aria-hidden="true">/</span>
<span>售后详情</span>
</nav>
<header class="after-sale-page-header">
<div>
<p>售后 {{ afterSaleNo }}</p>
<h1>售后详情</h1>
</div>
<RouterLink class="text-action" to="/after-sales">返回售后列表</RouterLink>
</header>
<AfterSaleWorkspace :after-sale-no="afterSaleNo" :access="access" />
</PjPageContainer>
</template>
<style scoped>
.after-sale-detail-page {
padding-block: var(--pj-space-6) var(--pj-space-8);
}
.after-sale-page-header {
display: flex;
align-items: end;
justify-content: space-between;
gap: var(--pj-space-5);
margin-bottom: var(--pj-space-6);
}
.after-sale-page-header p {
margin: 0 0 var(--pj-space-2);
color: var(--pj-text-secondary);
font-size: var(--pj-font-size-sm);
overflow-wrap: anywhere;
}
.after-sale-page-header h1 {
margin: 0;
font-size: var(--pj-font-size-xl);
font-weight: 520;
letter-spacing: -0.04em;
}
@media (max-width: 48rem) {
.after-sale-page-header {
align-items: flex-start;
flex-direction: column;
}
}
@media (max-width: 32rem) {
.after-sale-detail-page {
padding-top: var(--pj-space-5);
}
}
</style>
|