314 行
7.5 KiB
Plaintext
314 行
7.5 KiB
Plaintext
<template>
|
|
<view class="case-page" :style="pageTheme">
|
|
<view v-if="state.loading" class="case-skeleton">
|
|
<view class="skeleton-line line-title"></view>
|
|
<view class="skeleton-media"></view>
|
|
<view class="skeleton-line"></view>
|
|
<view class="skeleton-line line-short"></view>
|
|
</view>
|
|
|
|
<view v-else-if="state.empty" class="case-empty">
|
|
<text class="case-empty-text">{{ copy.empty }}</text>
|
|
<button class="primary-cta-btn" @click="handleBack">
|
|
<text class="primary-cta-btn-text">{{ copy.back }}</text>
|
|
</button>
|
|
</view>
|
|
|
|
<scroll-view v-else class="case-scroll" :scroll-y="true">
|
|
<view class="case-content">
|
|
<text class="case-title">{{ state.title }}</text>
|
|
|
|
<swiper
|
|
v-if="state.images.length > 1"
|
|
class="case-swiper"
|
|
:indicator-dots="true"
|
|
:autoplay="false"
|
|
circular
|
|
>
|
|
<swiper-item v-for="img in state.images" :key="img">
|
|
<image class="case-media" :src="img" mode="aspectFill" />
|
|
</swiper-item>
|
|
</swiper>
|
|
<image
|
|
v-else-if="state.images.length === 1"
|
|
class="case-media case-media-single"
|
|
:src="state.images[0]"
|
|
mode="aspectFill"
|
|
/>
|
|
|
|
<text v-if="state.content !== ''" class="case-body">{{ state.content }}</text>
|
|
|
|
<view v-if="state.kpis.length > 0" class="kpi-row">
|
|
<view v-for="kpi in state.kpis" :key="kpi.label" class="kpi-card">
|
|
<text class="kpi-value">{{ kpi.value }}</text>
|
|
<text class="kpi-label">{{ kpi.label }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="state.pdfUrl !== ''" class="ext-link-row">
|
|
<text class="ext-link-label">{{ copy.pdf }}</text>
|
|
<text class="ext-link-url">{{ state.pdfUrl }}</text>
|
|
</view>
|
|
<view v-if="state.youtubeUrl !== ''" class="ext-link-row">
|
|
<text class="ext-link-label">{{ copy.youtube }}</text>
|
|
<text class="ext-link-url">{{ state.youtubeUrl }}</text>
|
|
</view>
|
|
|
|
<view class="case-bottom-spacer"></view>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<view v-if="!state.loading && !state.empty" class="case-cta-bar">
|
|
<button class="primary-cta-btn" @click="handleConsult">
|
|
<text class="primary-cta-btn-text">{{ copy.cta }}</text>
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import { utsLightColors, utsRadius, utsSpacing } from '../../common/tokens.uts';
|
|
import {
|
|
CASE_DETAIL_COPY,
|
|
createCaseDetailState,
|
|
applyCaseDetailOptions,
|
|
loadCaseDetail,
|
|
openCaseExchange,
|
|
goCaseBack,
|
|
CaseDetailPageOptions,
|
|
} from './useCaseDetail.uts';
|
|
|
|
const pageTheme: Record<string, string> = {
|
|
'--oc-primary': utsLightColors.primary,
|
|
'--oc-primary-soft': utsLightColors.primarySoft,
|
|
'--oc-bg': utsLightColors.bg,
|
|
'--oc-surface': utsLightColors.surface,
|
|
'--oc-border': utsLightColors.border,
|
|
'--oc-text': utsLightColors.text,
|
|
'--oc-text-2': utsLightColors.text2,
|
|
'--oc-radius-btn': utsRadius.button,
|
|
'--oc-radius-card': utsRadius.card,
|
|
'--oc-space-8': utsSpacing.space8,
|
|
'--oc-space-12': utsSpacing.space12,
|
|
'--oc-space-16': utsSpacing.space16,
|
|
'--oc-space-24': utsSpacing.space24,
|
|
};
|
|
|
|
const copy = CASE_DETAIL_COPY;
|
|
const state = reactive(createCaseDetailState());
|
|
|
|
function handleConsult(): void {
|
|
openCaseExchange(state.cardId);
|
|
}
|
|
|
|
function handleBack(): void {
|
|
goCaseBack();
|
|
}
|
|
|
|
onLoad((options: CaseDetailPageOptions) => {
|
|
applyCaseDetailOptions(state, options);
|
|
loadCaseDetail(state);
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.case-page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
background-color: var(--oc-surface, #F7F8FA);
|
|
}
|
|
|
|
.case-scroll {
|
|
flex: 1;
|
|
}
|
|
|
|
.case-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: var(--oc-space-16, 16px);
|
|
}
|
|
|
|
.case-title {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color: var(--oc-text, #101828);
|
|
line-height: 1.25;
|
|
margin-bottom: var(--oc-space-16, 16px);
|
|
}
|
|
|
|
.case-swiper {
|
|
height: 220px;
|
|
border-radius: var(--oc-radius-card, 16px);
|
|
overflow: hidden;
|
|
margin-bottom: var(--oc-space-16, 16px);
|
|
border: 1px solid var(--oc-border, #E3E7ED);
|
|
}
|
|
|
|
.case-media {
|
|
width: 100%;
|
|
height: 220px;
|
|
background-color: var(--oc-surface, #F7F8FA);
|
|
}
|
|
|
|
.case-media-single {
|
|
border-radius: var(--oc-radius-card, 16px);
|
|
border: 1px solid var(--oc-border, #E3E7ED);
|
|
margin-bottom: var(--oc-space-16, 16px);
|
|
}
|
|
|
|
.case-body {
|
|
font-size: 16px;
|
|
color: var(--oc-text, #101828);
|
|
line-height: 1.6;
|
|
margin-bottom: var(--oc-space-24, 24px);
|
|
}
|
|
|
|
.kpi-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
margin-bottom: var(--oc-space-16, 16px);
|
|
}
|
|
|
|
.kpi-card {
|
|
flex: 1;
|
|
min-width: 96px;
|
|
background-color: var(--oc-bg, #FFFFFF);
|
|
border: 1px solid var(--oc-border, #E3E7ED);
|
|
border-radius: var(--oc-radius-card, 16px);
|
|
padding: var(--oc-space-16, 16px);
|
|
margin-inline-end: var(--oc-space-8, 8px);
|
|
margin-bottom: var(--oc-space-8, 8px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.kpi-value {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color: var(--oc-primary, #0B5CFF);
|
|
line-height: 1.25;
|
|
margin-bottom: var(--oc-space-8, 8px);
|
|
}
|
|
|
|
.kpi-label {
|
|
font-size: 12px;
|
|
color: var(--oc-text-2, #667085);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.ext-link-row {
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: var(--oc-bg, #FFFFFF);
|
|
border: 1px solid var(--oc-border, #E3E7ED);
|
|
border-radius: var(--oc-radius-card, 16px);
|
|
padding: var(--oc-space-16, 16px);
|
|
margin-bottom: var(--oc-space-12, 12px);
|
|
}
|
|
|
|
.ext-link-label {
|
|
font-size: 12px;
|
|
color: var(--oc-text-2, #667085);
|
|
margin-bottom: var(--oc-space-8, 8px);
|
|
}
|
|
|
|
.ext-link-url {
|
|
font-size: 14px;
|
|
color: var(--oc-primary, #0B5CFF);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.case-bottom-spacer {
|
|
height: calc(88px + env(safe-area-inset-bottom, 0px));
|
|
}
|
|
|
|
.case-skeleton {
|
|
padding: var(--oc-space-24, 24px) var(--oc-space-16, 16px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.skeleton-line {
|
|
height: 16px;
|
|
background-color: var(--oc-border, #E3E7ED);
|
|
border-radius: var(--oc-radius-btn, 12px);
|
|
margin-bottom: var(--oc-space-12, 12px);
|
|
}
|
|
|
|
.line-title {
|
|
width: 60%;
|
|
height: 24px;
|
|
}
|
|
|
|
.line-short {
|
|
width: 40%;
|
|
}
|
|
|
|
.skeleton-media {
|
|
height: 180px;
|
|
background-color: var(--oc-border, #E3E7ED);
|
|
border-radius: var(--oc-radius-card, 16px);
|
|
margin: var(--oc-space-16, 16px) 0;
|
|
}
|
|
|
|
.case-empty {
|
|
margin: 40px var(--oc-space-16, 16px);
|
|
padding: var(--oc-space-24, 24px);
|
|
background-color: var(--oc-bg, #FFFFFF);
|
|
border: 1px solid var(--oc-border, #E3E7ED);
|
|
border-radius: var(--oc-radius-card, 16px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.case-empty-text {
|
|
font-size: 16px;
|
|
color: var(--oc-text, #101828);
|
|
line-height: 1.6;
|
|
margin-bottom: var(--oc-space-24, 24px);
|
|
text-align: center;
|
|
}
|
|
|
|
.case-cta-bar {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
padding: 12px var(--oc-space-16, 16px) calc(16px + env(safe-area-inset-bottom, 0px)) var(--oc-space-16, 16px);
|
|
background-color: var(--oc-bg, #FFFFFF);
|
|
border-top: 1px solid var(--oc-border, #E3E7ED);
|
|
box-sizing: border-box;
|
|
z-index: 100;
|
|
}
|
|
|
|
.primary-cta-btn {
|
|
height: 48px;
|
|
min-height: 44px;
|
|
background-color: var(--oc-primary, #0B5CFF);
|
|
border-radius: var(--oc-radius-btn, 12px);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
border-width: 0;
|
|
transition: opacity 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
}
|
|
|
|
.primary-cta-btn:active {
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.primary-cta-btn-text {
|
|
color: var(--oc-bg, #FFFFFF);
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.case-empty .primary-cta-btn {
|
|
max-width: 240px;
|
|
}
|
|
</style>
|