5 changed files with 190 additions and 5 deletions
@ -0,0 +1,169 @@ |
|||
<template> |
|||
<div class="banner-detail-page"> |
|||
<div class="detail-content"> |
|||
<h1 class="detail-title">{{ detail.title }}</h1> |
|||
|
|||
<div class="detail-meta"> |
|||
<span class="detail-source">{{ detail.source }}</span> |
|||
<span class="detail-time">{{ detail.time }}</span> |
|||
</div> |
|||
|
|||
<div class="detail-images" v-if="detail.imageUrl"> |
|||
<img |
|||
:src="baseUrl + detail.imageUrl" |
|||
alt="" |
|||
@click="previewImage" |
|||
/> |
|||
</div> |
|||
|
|||
<div class="detail-body" v-if="detail.content" v-html="detail.content"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup name="bannerDetail"> |
|||
import { ref, onMounted } from 'vue'; |
|||
import { useRouter, useRoute } from 'vue-router'; |
|||
import { showToast, showImagePreview } from 'vant'; |
|||
import 'vant/es/toast/style'; |
|||
import 'vant/es/image-preview/style'; |
|||
import { baseUrl } from '@/config/env'; |
|||
import { getCarouselBannerDetail } from '@/api/enterprise'; |
|||
|
|||
const router = useRouter(); |
|||
const route = useRoute(); |
|||
|
|||
const detail = ref({ |
|||
id: '', |
|||
title: '', |
|||
source: '', |
|||
time: '', |
|||
imageUrl: '', |
|||
content: '', |
|||
}); |
|||
|
|||
const loading = ref(false); |
|||
|
|||
const fetchDetail = () => { |
|||
const id = route.query.id; |
|||
if (!id) { |
|||
showToast('缺少详情ID'); |
|||
router.back(); |
|||
return; |
|||
} |
|||
|
|||
loading.value = true; |
|||
getCarouselBannerDetail( |
|||
{ id,target_platform:'1' }, |
|||
(res) => { |
|||
loading.value = false; |
|||
if (res.code === 200 && res.data) { |
|||
detail.value = { |
|||
id: res.data.id || '', |
|||
title: res.data.title || '', |
|||
source: res.data.source || '', |
|||
time: res.data.time || '', |
|||
imageUrl: res.data.imageUrl || '', |
|||
content: res.data.content || '', |
|||
}; |
|||
} else { |
|||
showToast(res.message || '获取详情失败'); |
|||
} |
|||
}, |
|||
(err) => { |
|||
loading.value = false; |
|||
showToast(err.message || '获取详情失败'); |
|||
} |
|||
); |
|||
}; |
|||
|
|||
onMounted(() => { |
|||
fetchDetail(); |
|||
}); |
|||
|
|||
const onClickLeft = () => { |
|||
router.back(); |
|||
}; |
|||
|
|||
const previewImage = () => { |
|||
showImagePreview({ |
|||
images: [baseUrl + detail.value.imageUrl], |
|||
startPosition: 0, |
|||
}); |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.banner-detail-page { |
|||
display: flex; |
|||
flex-direction: column; |
|||
height: 100%; |
|||
background-color: #fff; |
|||
|
|||
.detail-content { |
|||
flex: 1; |
|||
overflow-y: auto; |
|||
padding: 0.4rem 0.4rem 0.6rem; |
|||
} |
|||
} |
|||
|
|||
:deep(.van-nav-bar) { |
|||
background-color: #fff; |
|||
} |
|||
|
|||
:deep(.van-nav-bar__title) { |
|||
font-size: 0.45rem; |
|||
font-weight: 600; |
|||
color: #333; |
|||
} |
|||
|
|||
:deep(.van-nav-bar__text) { |
|||
font-size: 0.35rem; |
|||
color: #333; |
|||
} |
|||
|
|||
:deep(.van-nav-bar .van-icon) { |
|||
color: #333; |
|||
} |
|||
|
|||
.detail-title { |
|||
font-size: 0.55rem; |
|||
font-weight: bold; |
|||
color: #1a1a1a; |
|||
line-height: 1.5; |
|||
margin-bottom: 0.25rem; |
|||
} |
|||
|
|||
.detail-meta { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 0.4rem; |
|||
|
|||
.detail-source { |
|||
font-size: 0.3rem; |
|||
color: #2d94fa; |
|||
margin-right: 0.3rem; |
|||
} |
|||
|
|||
.detail-time { |
|||
font-size: 0.3rem; |
|||
color: #999; |
|||
} |
|||
} |
|||
|
|||
.detail-images { |
|||
margin-bottom: 0.4rem; |
|||
|
|||
img { |
|||
width: 100%; |
|||
border-radius: 0.2rem; |
|||
} |
|||
} |
|||
|
|||
.detail-body { |
|||
font-size: 0.37rem; |
|||
color: #333; |
|||
line-height: 1.8; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue