weicw-dshsa
4491613902
轮播图原先只读 linkUrl 渲染 <a>，而后台「轮播图管理」的跳转是
linkType + linkUrl/linkTargetId 三元组：配「文章详情 / 产品详情」时
linkUrl 为空，前端拿不到地址，图片就渲染成不可点的纯 <img>，
运营配了也点不动。
- utils 新增 getBannerTarget()：linkType 2 → /article/{id}、
3 → /product/{id}、1 → linkUrl；类型缺省但地址非空时按外链兜底
（兼容只存了地址的老数据）；字段名兼容 link / linkUrl / link_url
- 新增 isExternalUrl()：http(s)、//host、mailto 等视为站外
- getBannerLink() 保留为 getBannerTarget() 的薄封装，对外行为不变
- HeroSection：图片按目标渲染 NuxtLink（站内目标当前页跳转）/
<a target="_blank">（外链）/ 纯 <img>（未配置跳转，保持不可点）
- CmsBanner 补 linkType / linkUrl / linkTargetId 字段声明
首页 4 张图（政府采购代理 / 投融资服务 / AI数智化 / 工程代理）
已在后台配置为「产品详情」跳转。
335 lines
13 KiB
Vue
335 lines
13 KiB
Vue
<template>
|
||
<section class="relative overflow-hidden text-white group">
|
||
<!-- 模式 B：有轮播图且后台开启 Banner 轮播 → 轮播图作为全屏背景 + 暗色蒙版 -->
|
||
<template v-if="bannerMode">
|
||
<div class="absolute inset-0 z-0">
|
||
<!-- 轮播图（绝对定位叠放，靠 opacity 交叉淡入） -->
|
||
<div
|
||
v-for="(item, i) in bannerItems"
|
||
:key="item.banner.id || i"
|
||
class="absolute inset-0 transition-opacity duration-1000 ease-in-out"
|
||
:class="i === currentBannerIndex ? 'opacity-100' : 'opacity-0 pointer-events-none'"
|
||
>
|
||
<!-- 后台配了站内目标（文章详情 / 产品详情）→ 当前页跳转 -->
|
||
<NuxtLink
|
||
v-if="item.target && !item.target.external"
|
||
:to="item.target.href"
|
||
class="block w-full h-full"
|
||
>
|
||
<img
|
||
:src="bannerImg(item.banner)"
|
||
:alt="item.banner.title || ''"
|
||
class="w-full h-full object-cover"
|
||
>
|
||
</NuxtLink>
|
||
<!-- 后台配了外链 → 新标签页打开 -->
|
||
<a
|
||
v-else-if="item.target"
|
||
:href="item.target.href"
|
||
target="_blank"
|
||
rel="noopener"
|
||
class="block w-full h-full"
|
||
>
|
||
<img
|
||
:src="bannerImg(item.banner)"
|
||
:alt="item.banner.title || ''"
|
||
class="w-full h-full object-cover"
|
||
>
|
||
</a>
|
||
<!-- 后台未配置跳转 → 纯图，不可点 -->
|
||
<img
|
||
v-else
|
||
:src="bannerImg(item.banner)"
|
||
:alt="item.banner.title || ''"
|
||
class="w-full h-full object-cover"
|
||
>
|
||
</div>
|
||
<!-- 品牌蓝蒙版（左重右轻，保证左侧文案可读） -->
|
||
<div class="absolute inset-0 bg-gradient-to-r pointer-events-none" />
|
||
</div>
|
||
</template>
|
||
|
||
<!-- 模式 A：无轮播图 → 蓝渐变 + 柔光球装饰（原方案兜底） -->
|
||
<template v-else>
|
||
<div class="absolute inset-0 z-0 bg-gradient-to-br from-[#1a6dff] to-[#0d4fb8] anim-gradient" />
|
||
<div class="anim-blob w-72 h-72 bg-white/25 -top-16 -left-10" />
|
||
<div class="anim-blob anim-blob--2 w-80 h-80 bg-sky-300/30 -bottom-24 right-0" />
|
||
</template>
|
||
|
||
<!-- 左右箭头（多图时，hover 显示） -->
|
||
<template v-if="bannerMode && banners.length > 1">
|
||
<button
|
||
type="button"
|
||
aria-label="上一张"
|
||
class="absolute left-3 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-black/30 hover:bg-black/50 text-white flex items-center justify-center opacity-0 group-hover:opacity-100 transition z-30"
|
||
@click="prev"
|
||
>
|
||
<svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
|
||
</svg>
|
||
</button>
|
||
<button
|
||
type="button"
|
||
aria-label="下一张"
|
||
class="absolute right-3 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-black/30 hover:bg-black/50 text-white flex items-center justify-center opacity-0 group-hover:opacity-100 transition z-30"
|
||
@click="next"
|
||
>
|
||
<svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
||
</svg>
|
||
</button>
|
||
|
||
<!-- 文字切换指示器 -->
|
||
<div
|
||
class="absolute bottom-8 left-1/2 -translate-x-1/2 z-30 flex flex-wrap justify-center gap-3 max-w-[90%] px-4 py-2 rounded-full bg-black/20 backdrop-blur-sm"
|
||
@mouseenter="stopAuto"
|
||
@mouseleave="startAuto"
|
||
>
|
||
<button
|
||
v-for="(b, i) in banners"
|
||
:key="'nav-' + (b.id || i)"
|
||
type="button"
|
||
:aria-label="b.title || ('切换到第 ' + (i + 1) + ' 张')"
|
||
class="px-4 py-1.5 text-sm rounded-full transition border whitespace-nowrap"
|
||
:class="i === currentBannerIndex
|
||
? 'bg-[#1a6dff] border-[#1a6dff] text-white font-semibold'
|
||
: 'bg-white/10 border-white/30 text-white hover:bg-white/20'"
|
||
@click="goTo(i)"
|
||
>
|
||
{{ b.title || ('图片 ' + (i + 1)) }}
|
||
</button>
|
||
</div>
|
||
</template>
|
||
|
||
<!-- 内容层（不使用 :key remount，靠 watch+transition 切换文案） -->
|
||
<div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-20 py-20 lg:py-28 pointer-events-none">
|
||
<div class="grid lg:grid-cols-12 gap-12 items-center w-full">
|
||
<div class="lg:col-span-7 max-w-2xl transition-opacity duration-500 ease-in-out" :class="{ 'opacity-0': textFading }">
|
||
<h1
|
||
class="text-3xl sm:text-4xl lg:text-5xl font-bold leading-tight mb-6"
|
||
data-reveal
|
||
>
|
||
{{ heroTitle }}
|
||
</h1>
|
||
<p
|
||
class="text-base sm:text-lg text-blue-100 mb-8 leading-relaxed line-clamp-2"
|
||
data-reveal
|
||
data-reveal-delay="120"
|
||
>
|
||
{{ heroSubtitle }}
|
||
</p>
|
||
<div class="flex flex-wrap gap-4" data-reveal data-reveal-delay="240">
|
||
<button
|
||
type="button"
|
||
class="inline-flex items-center justify-center px-6 py-3 bg-white text-blue-600 font-semibold rounded-lg hover:bg-blue-50 transition-colors anim-shimmer pointer-events-auto"
|
||
@click="openConsult()"
|
||
>
|
||
免费咨询
|
||
</button>
|
||
<NuxtLink
|
||
v-if="newsNav"
|
||
:to="newsLink"
|
||
class="inline-flex items-center justify-center px-6 py-3 border-2 border-white text-white font-semibold rounded-lg hover:bg-white/10 transition-colors pointer-events-auto"
|
||
>
|
||
查看动态
|
||
</NuxtLink>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="showHeroFeatures" class="hidden lg:flex lg:col-span-5 justify-center" data-reveal data-reveal-delay="360">
|
||
<div class="relative w-full max-w-lg">
|
||
<div class="absolute inset-0 bg-white/10 rounded-3xl transform rotate-3" />
|
||
<div class="relative bg-white/20 backdrop-blur-sm rounded-3xl p-8 border border-white/20">
|
||
<div class="space-y-4">
|
||
<div v-for="feature in features" :key="feature" class="flex items-center gap-3">
|
||
<div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center">
|
||
<svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||
</svg>
|
||
</div>
|
||
<span class="text-blue-50">{{ feature }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
/**
|
||
* 模板 7 - Hero 主视觉区（支持 CMS 轮播图作为背景 + 文案跟随切换）
|
||
*
|
||
* 数据源：GET /api/banner?position=home_slider（代理 cms_banner_group 表）。
|
||
* 双模式二选一：
|
||
* - 有轮播图：图片作为全屏背景 + 品牌蓝蒙版 + 左侧文案(从 banner.title/subtitle 取)/按钮/右侧特性卡片 +
|
||
* 自动轮播(5s) + 左右箭头/指示点；轮播切换时文案淡入淡出过渡；
|
||
* - 无轮播图：回退到原蓝渐变 + 柔光球方案。
|
||
*
|
||
* 文案优先级：当前 banner 的 title/subtitle → siteInfo.slogan/comments → siteName 拼接 → 硬编码兜底。
|
||
* 即使某张 banner 未配文案也不会出现空白。
|
||
*
|
||
* 点击行为：点击轮播图按后台「轮播图管理」配置的跳转类型跳转
|
||
* （linkType：1 外链、2 文章详情、3 产品详情，目标由 linkUrl / linkTargetId 决定）：
|
||
* - 站内目标（文章 / 产品详情）走 NuxtLink 当前页跳转；
|
||
* - 外链新标签页打开；
|
||
* - 未配置跳转的图片保持纯图不可点（不渲染空的可点区域）。
|
||
*/
|
||
import type { CmsNavigation, CmsBanner, ApiEnvelope, PageResult } from '~/types'
|
||
import { ensureFullUrl } from '~/utils/image'
|
||
import { getNavLink, getBannerTarget } from '~/utils'
|
||
|
||
interface Props {
|
||
/** 是否启用 Banner 轮播背景；false 时即使有轮播图也回退到蓝渐变 */
|
||
showBanner?: boolean
|
||
/** 是否显示首屏右侧特性卡片 */
|
||
showHeroFeatures?: boolean
|
||
}
|
||
|
||
const props = withDefaults(defineProps<Props>(), {
|
||
showBanner: true,
|
||
showHeroFeatures: true
|
||
})
|
||
|
||
const { siteInfo, siteName, navigations, fetchSiteInfo } = useSite()
|
||
const { openConsult } = useConsult()
|
||
|
||
await fetchSiteInfo()
|
||
|
||
/** 轮播图数据（SSR 预取，首屏即有） */
|
||
const { data: bannerRes } = await useFetch<ApiEnvelope<PageResult<CmsBanner>> | PageResult<CmsBanner>>('/api/banner', {
|
||
query: { position: 'home_slider' }
|
||
})
|
||
const banners = computed<CmsBanner[]>(() => {
|
||
const d = bannerRes.value as (ApiEnvelope<PageResult<CmsBanner>> | PageResult<CmsBanner>) | null
|
||
if (!d) return []
|
||
const list = ((d as ApiEnvelope<PageResult<CmsBanner>>)?.data?.list
|
||
?? (d as PageResult<CmsBanner>)?.list
|
||
?? []) as CmsBanner[]
|
||
return list
|
||
.filter((b) => hasImage(b) && b.deleted !== 1 && b.status !== 2)
|
||
.sort((a, b) => (a.sortNum ?? 0) - (b.sortNum ?? 0))
|
||
})
|
||
|
||
/** 是否进入轮播图模式：有可用轮播图且后台开启 Banner 轮播开关 */
|
||
const bannerMode = computed(() => props.showBanner && banners.value.length > 0)
|
||
|
||
/**
|
||
* 轮播项 + 解析好的点击目标（后台「轮播图管理」配置的跳转）。
|
||
* target 为 null 表示该图未配置跳转，此时渲染纯图不可点。
|
||
*/
|
||
const bannerItems = computed(() => banners.value.map((b) => ({
|
||
banner: b,
|
||
target: getBannerTarget(b)
|
||
})))
|
||
|
||
/** 当前帧索引 */
|
||
const currentBannerIndex = ref(0)
|
||
|
||
/** 文案淡出/淡入控制（watch currentBannerIndex 触发，不用 :key remount） */
|
||
const textFading = ref(false)
|
||
let fadeTimer: ReturnType<typeof setTimeout> | null = null
|
||
|
||
watch(currentBannerIndex, () => {
|
||
// 先淡出 → 等 300ms 文案已更新 → 再淡入
|
||
textFading.value = true
|
||
clearTimeout(fadeTimer!)
|
||
fadeTimer = setTimeout(() => {
|
||
textFading.value = false
|
||
}, 300)
|
||
})
|
||
|
||
let bannerTimer: ReturnType<typeof setInterval> | null = null
|
||
|
||
function startAuto() {
|
||
if (banners.value.length > 1) {
|
||
bannerTimer = setInterval(() => {
|
||
currentBannerIndex.value = (currentBannerIndex.value + 1) % banners.value.length
|
||
}, 5000)
|
||
}
|
||
}
|
||
function stopAuto() {
|
||
if (bannerTimer) { clearInterval(bannerTimer); bannerTimer = null }
|
||
}
|
||
|
||
onMounted(() => { startAuto() })
|
||
onBeforeUnmount(() => { stopAuto(); clearTimeout(fadeTimer!) })
|
||
|
||
function prev() {
|
||
const n = banners.value.length
|
||
currentBannerIndex.value = (currentBannerIndex.value - 1 + n) % n
|
||
}
|
||
function next() {
|
||
const n = banners.value.length
|
||
currentBannerIndex.value = (currentBannerIndex.value + 1) % n
|
||
}
|
||
function goTo(i: number) {
|
||
currentBannerIndex.value = i
|
||
}
|
||
|
||
/** 取轮播图地址（兼容 image/imageUrl/pic/url，并提升 OSS 压缩宽度防大屏发虚） */
|
||
function bannerImg(b: CmsBanner): string {
|
||
const raw = ensureFullUrl(b.image || b.imageUrl || b.pic || b.url || '')
|
||
return raw.replace(/resize,w_\d+/, 'resize,w_1920')
|
||
}
|
||
|
||
/** 是否有可用图片 */
|
||
function hasImage(b: CmsBanner): boolean {
|
||
return !!(b.image || b.imageUrl || b.pic || b.url)
|
||
}
|
||
|
||
/** 当前活跃的轮播项 */
|
||
const currentBanner = computed<CmsBanner | undefined>(() => banners.value[currentBannerIndex.value])
|
||
|
||
/**
|
||
* 标题：优先取当前 banner 的 title；
|
||
* 无值时回退 siteInfo.slogan → siteName 拼接 → 硬编码兜底。
|
||
* 保证任何情况下都不为空。
|
||
*/
|
||
const heroTitle = computed(() => {
|
||
const bt = currentBanner.value?.title
|
||
if (bannerMode.value && bt && bt.trim()) {
|
||
return bt.trim()
|
||
}
|
||
return (siteInfo.value?.slogan?.trim())
|
||
|| (siteName.value ? `欢迎来到 ${siteName.value}` : '专注企业数字化官网建设')
|
||
})
|
||
|
||
/**
|
||
* 副标题：优先取当前 banner 的 subtitle；
|
||
* 无值时回退 siteInfo.comments → 硬编码兜底。
|
||
* 保证任何情况下都不为空。
|
||
*/
|
||
const heroSubtitle = computed(() => {
|
||
const bs = currentBanner.value?.subtitle
|
||
if (bannerMode.value && bs && bs.trim()) {
|
||
return bs.trim()
|
||
}
|
||
return (siteInfo.value?.comments?.trim())
|
||
|| '快速搭建品牌展示、产品发布与客户咨询一体化官网，助力企业数字化转型与业务增长。'
|
||
})
|
||
|
||
const newsNav = computed<CmsNavigation | undefined>(() => {
|
||
const navs = navigations.value || []
|
||
return navs.find((n) => n.model === 'article')
|
||
})
|
||
|
||
/** 「查看动态」按钮链接：走标准 getNavLink 优先级（url > path），不硬编码 */
|
||
const newsLink = computed(() => getNavLink(newsNav.value))
|
||
|
||
/** 右侧特性卡片文案：优先读后台 setting.features.heroFeatures，未配置回退模板默认值 */
|
||
const { heroFeatures } = useFeatures([])
|
||
const features = computed<string[]>(() => {
|
||
const hf = heroFeatures.value
|
||
if (Array.isArray(hf) && hf.length) return hf
|
||
return [
|
||
'多模板一键切换',
|
||
'响应式多端适配',
|
||
'SEO/GEO 友好',
|
||
'独立域名绑定'
|
||
]
|
||
})
|
||
</script>
|