625 行
16 KiB
Vue
625 行
16 KiB
Vue
<template>
|
||
<div v-if="story" class="page-story-detail">
|
||
<LayoutPageHero
|
||
:title="story.title"
|
||
:subtitle="story.subtitle"
|
||
:breadcrumbs="[{ text: '客户故事', to: '/stories' }, { text: story.familyType }]"
|
||
/>
|
||
|
||
<section class="section">
|
||
<div class="container">
|
||
<div class="story-layout">
|
||
<!-- 主内容 -->
|
||
<main class="story-main">
|
||
<!-- 故事元信息 -->
|
||
<div class="story-meta">
|
||
<span class="story-meta__family">{{ story.familyType }}</span>
|
||
<span v-if="story.childrenAge && !story.childrenAge.includes('⚠️')" class="story-meta__children">孩子 {{ story.childrenAge }}</span>
|
||
<span v-if="story.fromCity && story.fromCity !== '⚠️待填'" class="story-meta__city">来自 {{ story.fromCity }}</span>
|
||
<span class="story-meta__date">{{ story.travelDate }}</span>
|
||
<span v-if="story.tripProduct" class="story-meta__product">{{ story.tripProduct }}</span>
|
||
</div>
|
||
|
||
<!-- 小红书来源信息 -->
|
||
<div v-if="story.author" class="story-source">
|
||
<span class="story-source__author">{{ story.author }}</span>
|
||
<span v-if="story.authorPlatform" class="story-source__platform">{{ story.authorPlatform }}</span>
|
||
<span v-if="story.likes" class="story-source__likes">{{ story.likes }} 赞</span>
|
||
</div>
|
||
|
||
<!-- 配图建议 -->
|
||
<div v-if="story.imageHints" class="story-image-placeholder">
|
||
<div class="story-image-placeholder__inner">
|
||
<span class="story-image-placeholder__icon">📷</span>
|
||
<p class="story-image-placeholder__hint">{{ story.imageHints }}</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 故事摘要 -->
|
||
<div class="story-summary">
|
||
<p>{{ story.summary }}</p>
|
||
</div>
|
||
|
||
<!-- 小红书搜索提示（直链需要token，引导用户搜索） -->
|
||
<div v-if="story.authorPlatform === '小红书' && story.title" class="story-source-link">
|
||
<span class="story-source-link__tip">📱 在小红书搜索「{{ story.title }}」可查看原帖</span>
|
||
</div>
|
||
|
||
<!-- 故事章节 -->
|
||
<div v-if="story.sections && story.sections.length" class="story-sections">
|
||
<div
|
||
v-for="(section, index) in story.sections"
|
||
:key="index"
|
||
class="story-section"
|
||
>
|
||
<h2 class="story-section__heading">{{ section.heading }}</h2>
|
||
<p class="story-section__content">{{ section.content }}</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 印象深刻的瞬间 -->
|
||
<div v-if="story.keyMoments && story.keyMoments.length" class="story-moments">
|
||
<h2 class="story-moments__title">印象深刻的瞬间</h2>
|
||
<div class="story-moments__list">
|
||
<div
|
||
v-for="(moment, index) in story.keyMoments"
|
||
:key="index"
|
||
class="moment-item"
|
||
>
|
||
<span class="moment-item__icon">✨</span>
|
||
<p class="moment-item__text">{{ moment }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 来源声明 -->
|
||
<div v-if="story.disclaimer" class="story-disclaimer">
|
||
<p>{{ story.disclaimer }}</p>
|
||
</div>
|
||
|
||
<!-- 标签 -->
|
||
<div class="story-tags">
|
||
<span class="story-tags__label">标签：</span>
|
||
<span v-for="tag in story.tags" :key="tag" class="story-tag">{{ tag }}</span>
|
||
</div>
|
||
|
||
<!-- 前后导航 -->
|
||
<div class="story-nav">
|
||
<NuxtLink
|
||
v-if="prevStory"
|
||
:to="`/stories/${prevStory.id}`"
|
||
class="story-nav__item story-nav__item--prev"
|
||
>
|
||
<span class="story-nav__label">上一个故事</span>
|
||
<span class="story-nav__title">{{ prevStory.title }}</span>
|
||
</NuxtLink>
|
||
<NuxtLink
|
||
v-if="nextStory"
|
||
:to="`/stories/${nextStory.id}`"
|
||
class="story-nav__item story-nav__item--next"
|
||
>
|
||
<span class="story-nav__label">下一个故事</span>
|
||
<span class="story-nav__title">{{ nextStory.title }}</span>
|
||
</NuxtLink>
|
||
</div>
|
||
</main>
|
||
|
||
<!-- 侧边栏 -->
|
||
<aside class="story-sidebar">
|
||
<!-- 咨询 CTA -->
|
||
<div class="sidebar-card sidebar-card--cta">
|
||
<h3 class="sidebar-card__title">想要一段类似的旅行？</h3>
|
||
<p class="sidebar-card__desc">联系呼籁定制师，一对一规划专属家庭行程。</p>
|
||
<CommonInternalLink to="/contact" text="免费咨询定制师" />
|
||
</div>
|
||
|
||
<!-- 所有故事 -->
|
||
<div class="sidebar-card">
|
||
<h3 class="sidebar-card__title">更多家庭故事</h3>
|
||
<ul class="sidebar-stories">
|
||
<li
|
||
v-for="s in detailStories"
|
||
:key="s.id"
|
||
class="sidebar-story"
|
||
:class="{ 'sidebar-story--active': s.id === story.id }"
|
||
>
|
||
<NuxtLink :to="`/stories/${s.id}`" class="sidebar-story__link">
|
||
<span class="sidebar-story__family">{{ s.familyType }}</span>
|
||
<span class="sidebar-story__title">{{ s.title }}</span>
|
||
</NuxtLink>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- 快速链接 -->
|
||
<div class="sidebar-card">
|
||
<h3 class="sidebar-card__title">相关内容</h3>
|
||
<div class="sidebar-links">
|
||
<CommonInternalLink to="/reviews" text="查看更多客户评价" />
|
||
<CommonInternalLink to="/products" text="旅行产品详情" />
|
||
<CommonInternalLink to="/faq" text="常见问答" />
|
||
<CommonInternalLink to="/about" text="关于呼籁" />
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<!-- 404 -->
|
||
<div v-else class="page-not-found">
|
||
<div class="container">
|
||
<h1>故事不存在</h1>
|
||
<NuxtLink to="/stories">返回客户故事列表</NuxtLink>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import storiesData from '~/data/stories.json'
|
||
import { useBreadcrumbSchema, useCustomerStorySchema } from '~/composables/useJsonLd'
|
||
|
||
const route = useRoute()
|
||
const allStories = storiesData.stories
|
||
// 只有原创故事（有 content 字段）才有详情页
|
||
const detailStories = allStories.filter(s => s.content)
|
||
const story = allStories.find(s => s.id === route.params.id)
|
||
|
||
if (!story) {
|
||
throw createError({ statusCode: 404, statusMessage: '故事不存在' })
|
||
}
|
||
|
||
// SEO
|
||
useHead({
|
||
title: story.seo?.title || story.title,
|
||
meta: [
|
||
{ name: 'description', content: story.seo?.description || story.summary },
|
||
{ name: 'keywords', content: story.seo?.keywords || (story.tags || []).join(',') },
|
||
{ name: 'author', content: story.authorName || '呼籁旅行' },
|
||
{ name: 'article:published_time', content: story.travelDate + '-01T00:00:00+08:00' },
|
||
{ name: 'geo.region', content: 'CN-NM' },
|
||
{ name: 'geo.placename', content: '呼伦贝尔' },
|
||
{ property: 'og:title', content: story.seo?.title || story.title },
|
||
{ property: 'og:description', content: story.seo?.description || story.summary },
|
||
{ property: 'og:type', content: 'article' },
|
||
{ property: 'og:url', content: `https://1814.love/stories/${story.id}` },
|
||
{ property: 'og:site_name', content: '呼籁旅行' },
|
||
{ property: 'og:locale', content: 'zh_CN' },
|
||
],
|
||
link: [
|
||
{ rel: 'canonical', href: `https://1814.love/stories/${story.id}` },
|
||
],
|
||
})
|
||
|
||
useBreadcrumbSchema([
|
||
{ text: '首页', to: '/' },
|
||
{ text: '客户故事', to: '/stories' },
|
||
{ text: story.familyType },
|
||
{ text: story.title },
|
||
])
|
||
|
||
useCustomerStorySchema(story)
|
||
|
||
// 上下篇（仅在有详情页的故事之间切换）
|
||
const currentIndex = detailStories.findIndex(s => s.id === story.id)
|
||
const prevStory = currentIndex > 0 ? detailStories[currentIndex - 1] : null
|
||
const nextStory = currentIndex < detailStories.length - 1 ? detailStories[currentIndex + 1] : null
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.story-layout {
|
||
display: grid;
|
||
grid-template-columns: 1fr;
|
||
gap: @space-2xl;
|
||
|
||
.respond-lg({
|
||
grid-template-columns: 1fr 300px;
|
||
align-items: start;
|
||
});
|
||
}
|
||
|
||
.story-main {
|
||
min-width: 0;
|
||
}
|
||
|
||
// 元信息
|
||
.story-meta {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: @space-sm;
|
||
margin-bottom: @space-lg;
|
||
font-size: @font-size-sm;
|
||
}
|
||
|
||
.story-meta__family {
|
||
padding: 3px @space-sm;
|
||
background: @color-primary;
|
||
color: #fff;
|
||
border-radius: @border-radius-sm;
|
||
font-size: @font-size-xs;
|
||
font-weight: @font-weight-medium;
|
||
}
|
||
|
||
.story-meta__children,
|
||
.story-meta__city,
|
||
.story-meta__date {
|
||
color: @color-text-muted;
|
||
}
|
||
|
||
.story-meta__product {
|
||
color: @color-primary;
|
||
font-weight: @font-weight-medium;
|
||
font-size: @font-size-xs;
|
||
padding: 2px @space-sm;
|
||
background: @color-primary-bg;
|
||
border-radius: @border-radius-full;
|
||
}
|
||
|
||
// 占位提示
|
||
.story-placeholder-notice {
|
||
background: #fef9e7;
|
||
border: 1px solid #f39c12;
|
||
border-radius: @border-radius-md;
|
||
padding: @space-md @space-lg;
|
||
font-size: @font-size-sm;
|
||
color: #7d6608;
|
||
margin-bottom: @space-xl;
|
||
}
|
||
|
||
// 配图占位
|
||
.story-image-placeholder {
|
||
margin-bottom: @space-xl;
|
||
border-radius: @border-radius-lg;
|
||
overflow: hidden;
|
||
aspect-ratio: 16 / 7;
|
||
background: @color-primary-bg;
|
||
border: 2px dashed @color-primary-lighter;
|
||
|
||
&__inner {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 100%;
|
||
padding: @space-xl;
|
||
gap: @space-md;
|
||
}
|
||
|
||
&__icon {
|
||
font-size: 36px;
|
||
}
|
||
|
||
&__hint {
|
||
font-size: @font-size-sm;
|
||
color: @color-text-muted;
|
||
text-align: center;
|
||
line-height: @line-height-base;
|
||
margin: 0;
|
||
}
|
||
}
|
||
|
||
// 摘要
|
||
.story-summary {
|
||
padding: @space-lg;
|
||
background: @color-primary-bg;
|
||
border-left: 4px solid @color-primary;
|
||
border-radius: 0 @border-radius-md @border-radius-md 0;
|
||
margin-bottom: @space-xl;
|
||
|
||
p {
|
||
margin: 0;
|
||
font-size: @font-size-md;
|
||
color: @color-text-secondary;
|
||
line-height: @line-height-base;
|
||
}
|
||
}
|
||
|
||
// 故事章节
|
||
.story-sections {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: @space-xl;
|
||
margin-bottom: @space-2xl;
|
||
}
|
||
|
||
.story-section {
|
||
&__heading {
|
||
font-size: @font-size-xl;
|
||
font-weight: @font-weight-bold;
|
||
color: @color-text-primary;
|
||
margin: 0 0 @space-md;
|
||
padding-bottom: @space-sm;
|
||
border-bottom: 2px solid @color-primary-bg;
|
||
}
|
||
|
||
&__content {
|
||
font-size: @font-size-base;
|
||
color: @color-text-secondary;
|
||
line-height: @line-height-base;
|
||
margin: 0;
|
||
}
|
||
}
|
||
|
||
// 印象瞬间
|
||
.story-moments {
|
||
background: @color-bg-gray;
|
||
border-radius: @border-radius-lg;
|
||
padding: @space-xl;
|
||
margin-bottom: @space-2xl;
|
||
|
||
&__title {
|
||
font-size: @font-size-lg;
|
||
font-weight: @font-weight-bold;
|
||
color: @color-text-primary;
|
||
margin: 0 0 @space-lg;
|
||
}
|
||
|
||
&__list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: @space-md;
|
||
}
|
||
}
|
||
|
||
.moment-item {
|
||
display: flex;
|
||
gap: @space-md;
|
||
align-items: flex-start;
|
||
|
||
&__icon {
|
||
font-size: 18px;
|
||
flex-shrink: 0;
|
||
padding-top: 2px;
|
||
}
|
||
|
||
&__text {
|
||
font-size: @font-size-sm;
|
||
color: @color-text-secondary;
|
||
line-height: @line-height-base;
|
||
margin: 0;
|
||
}
|
||
}
|
||
|
||
// 标签
|
||
.story-tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: @space-sm;
|
||
margin-top: @space-2xl;
|
||
padding-top: @space-lg;
|
||
border-top: 1px solid @color-border;
|
||
margin-bottom: @space-xl;
|
||
}
|
||
|
||
.story-tags__label {
|
||
font-size: @font-size-sm;
|
||
color: @color-text-muted;
|
||
}
|
||
|
||
.story-tag {
|
||
padding: 3px @space-sm;
|
||
background: @color-primary-bg;
|
||
color: @color-primary;
|
||
border-radius: @border-radius-sm;
|
||
font-size: @font-size-xs;
|
||
}
|
||
|
||
// 前后导航
|
||
.story-nav {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: @space-md;
|
||
padding-top: @space-lg;
|
||
border-top: 1px solid @color-border;
|
||
|
||
&__item {
|
||
padding: @space-md;
|
||
background: @color-bg-white;
|
||
border: 1px solid @color-border;
|
||
border-radius: @border-radius-md;
|
||
text-decoration: none;
|
||
transition: all @transition-base;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: @space-xs;
|
||
|
||
&:hover {
|
||
border-color: @color-primary;
|
||
background: @color-primary-bg;
|
||
}
|
||
|
||
&--next {
|
||
text-align: right;
|
||
}
|
||
}
|
||
|
||
&__label {
|
||
font-size: @font-size-xs;
|
||
color: @color-text-muted;
|
||
}
|
||
|
||
&__title {
|
||
font-size: @font-size-sm;
|
||
color: @color-text-primary;
|
||
line-height: @line-height-tight;
|
||
.text-clamp(2);
|
||
}
|
||
}
|
||
|
||
// 侧边栏
|
||
.story-sidebar {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: @space-lg;
|
||
position: sticky;
|
||
top: 90px;
|
||
}
|
||
|
||
.sidebar-card {
|
||
background: @color-bg-white;
|
||
border: 1px solid @color-border;
|
||
border-radius: @border-radius-lg;
|
||
padding: @space-lg;
|
||
|
||
&--cta {
|
||
background: @color-primary-bg;
|
||
border-color: @color-primary-lighter;
|
||
}
|
||
|
||
&__title {
|
||
font-size: @font-size-base;
|
||
font-weight: @font-weight-bold;
|
||
color: @color-text-primary;
|
||
margin: 0 0 @space-sm;
|
||
}
|
||
|
||
&__desc {
|
||
font-size: @font-size-sm;
|
||
color: @color-text-secondary;
|
||
line-height: @line-height-base;
|
||
margin: 0 0 @space-md;
|
||
}
|
||
}
|
||
|
||
.sidebar-stories {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
}
|
||
|
||
.sidebar-story {
|
||
&--active .sidebar-story__link {
|
||
background: @color-primary-bg;
|
||
color: @color-primary;
|
||
}
|
||
|
||
&__link {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
padding: @space-sm;
|
||
border-radius: @border-radius-sm;
|
||
text-decoration: none;
|
||
transition: background @transition-fast;
|
||
|
||
&:hover {
|
||
background: @color-primary-bg;
|
||
}
|
||
}
|
||
|
||
&__family {
|
||
font-size: @font-size-xs;
|
||
color: @color-primary;
|
||
}
|
||
|
||
&__title {
|
||
font-size: @font-size-sm;
|
||
color: @color-text-secondary;
|
||
line-height: @line-height-tight;
|
||
.text-clamp(2);
|
||
}
|
||
}
|
||
|
||
.sidebar-links {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: @space-sm;
|
||
}
|
||
|
||
// 小红书来源信息
|
||
.story-source {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: @space-sm;
|
||
margin-bottom: @space-lg;
|
||
|
||
&__author {
|
||
font-size: @font-size-sm;
|
||
font-weight: @font-weight-medium;
|
||
color: @color-text-secondary;
|
||
}
|
||
|
||
&__platform {
|
||
font-size: @font-size-xs;
|
||
padding: 2px @space-sm;
|
||
background: #ff2442;
|
||
color: #fff;
|
||
border-radius: @border-radius-full;
|
||
font-weight: @font-weight-medium;
|
||
}
|
||
|
||
&__likes {
|
||
font-size: @font-size-xs;
|
||
color: @color-text-muted;
|
||
|
||
&::before {
|
||
content: '❤️ ';
|
||
}
|
||
}
|
||
}
|
||
|
||
// 查看原文链接
|
||
.story-source-link {
|
||
margin-bottom: @space-xl;
|
||
|
||
&__tip {
|
||
font-size: @font-size-sm;
|
||
color: @color-text-secondary;
|
||
background: @color-bg-gray;
|
||
padding: @space-xs @space-sm;
|
||
border-radius: @border-radius-sm;
|
||
display: inline-block;
|
||
}
|
||
|
||
&__a {
|
||
font-size: @font-size-sm;
|
||
color: #ff2442;
|
||
text-decoration: none;
|
||
font-weight: @font-weight-medium;
|
||
transition: opacity @transition-fast;
|
||
|
||
&:hover {
|
||
opacity: 0.8;
|
||
text-decoration: underline;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 来源声明
|
||
.story-disclaimer {
|
||
margin-top: @space-xl;
|
||
padding: @space-md @space-lg;
|
||
background: @color-bg-gray;
|
||
border-radius: @border-radius-md;
|
||
border-left: 3px solid @color-border;
|
||
|
||
p {
|
||
margin: 0;
|
||
font-size: @font-size-xs;
|
||
color: @color-text-muted;
|
||
line-height: @line-height-base;
|
||
}
|
||
}
|
||
|
||
// 404
|
||
.page-not-found {
|
||
text-align: center;
|
||
padding: @space-3xl 0;
|
||
|
||
h1 {
|
||
margin-bottom: @space-lg;
|
||
}
|
||
|
||
a {
|
||
color: @color-primary;
|
||
}
|
||
}
|
||
</style>
|