更新:增加新闻详情页面

This commit is contained in:
2025-12-01 16:35:44 +08:00
parent 1d7d00b6b6
commit 4b706bb811
3 changed files with 155 additions and 0 deletions

27
api/modules/news.ts Normal file
View File

@@ -0,0 +1,27 @@
import { mainClient } from '@/api/clients/main'
import type { IApiResponse } from '@/api/types'
export const newsApi = {
/**
* 获取新闻详情
*/
getNewsDetail: async (newsId: string | number) => {
const res = await mainClient.request<IApiResponse<any>>({
url: `common/message/getMessageById?id=${newsId}`,
method: 'POST'
})
return res
},
/**
* 获取太湖之光文章详情
*/
getTaihuWelfareArticleDetail: async (newsId: string | number) => {
const res = await mainClient.request<IApiResponse<any>>({
url: 'common/taihuWelfare/getTaihuWelfareArticleDetail',
method: 'POST',
data: { id: newsId }
})
return res
}
}

View File

@@ -193,6 +193,12 @@
"navigationStyle": "custom", "navigationStyle": "custom",
"navigationBarTitleText": "%order.orderDetails%" "navigationBarTitleText": "%order.orderDetails%"
} }
}, {
"path": "pages/news/details",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "新闻详情"
}
}, { }, {
"path": "uni_modules/uni-upgrade-center-app/pages/upgrade-popup", "path": "uni_modules/uni-upgrade-center-app/pages/upgrade-popup",
"style": { "style": {

122
pages/news/details.vue Normal file
View File

@@ -0,0 +1,122 @@
<template>
<view>
<!-- 自定义导航栏 -->
<nav-bar :title="$t('news.newsDetail')" />
<web-view v-if="urlVisible" :webview-styles="{ progress: { color: '#55aaff' } }" :src="surl"></web-view>
<view v-else class="box">
<view class="title">{{ news.title }}</view>
<view
class="content"
v-html="formattedContent"
></view>
</view>
</view>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { newsApi } from '@/api/modules/news'
const newsId = ref<string | number | null>(null)
const type = ref<number | null>(null)
const urlVisible = ref(false)
const surl = ref('')
const source = ref('')
onLoad((e: any) => {
newsId.value = e.newsId
type.value = Number(e.type)
surl.value = e.url || ''
source.value = e.source || ''
if(type.value == 1 && surl.value != ''){
urlVisible.value = true
} else {
getData()
}
// APP 设置导航栏按钮
// #ifdef APP-PLUS
// const pages = getCurrentPages()
// const page = pages[pages.length - 1]
// const currentWebview = page.$getAppWebview()
// currentWebview.setStyle({
// titleNView: {
// buttons: [{
// float: 'right',
// type: 'close',
// onclick: () => {
// uni.navigateBack({ delta: 1 })
// }
// }]
// }
// })
// #endif
})
// 新闻详情
const news = ref({
title: '',
content: ''
})
// 获取新闻详情
const getData = async () => {
let res = null
if (source.value === 'taihuzhiguang') {
res = await newsApi.getTaihuWelfareArticleDetail(newsId.value)
} else {
res = await newsApi.getNewsDetail(newsId.value)
}
news.value.title = res.result?.title || ''
news.value.content = res.result?.content || ''
}
// 格式化富文本内容
const formatRichText = (html: string) => {
if (!html) return ""
let newContent = html.replace(/<img[^>]*>/gi, (match) => {
match = match.replace(/style="[^"]+"/gi, '')
match = match.replace(/width="[^"]+"/gi, '')
match = match.replace(/height="[^"]+"/gi, '')
return match
})
newContent = newContent.replace(/style="[^"]+"/gi, (match) => {
match = match.replace(/width:[^;]+;/gi, 'max-width:100%;')
return match
})
newContent = newContent.replace(/<br[^>]*\/>/gi, '')
newContent = newContent.replace(
/\<img/gi,
'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"'
)
return newContent
}
// 格式化后内容
const formattedContent = computed(() => formatRichText(news.value.content))
</script>
<style lang="scss" scoped>
.box {
background-color: #fff;
padding: 10px;
min-height: calc(100vh - 270rpx);
}
.title {
font-size: 32rpx;
font-weight: bold;
text-align: center;
}
.content {
font-size: 26rpx;
line-height: 48rpx;
margin-top: 10rpx;
}
</style>