fix:公告详情显示图片
This commit is contained in:
weiwei committed
1 parent
88e5660b29
commit
66dbcc9f65
1 file changed
+169
-168
@@ -1,206 +1,207 @@
|
||||
<template>
|
||||
<view class="notice-detail">
|
||||
<view class="detail-header">
|
||||
<view class="title">
|
||||
<text v-if="detail.isTop === '1'" class="top-tag">置顶</text>
|
||||
{{ detail.title }}
|
||||
</view>
|
||||
<view class="meta">
|
||||
<text class="type-tag" :class="getTypeClass(detail.type)">{{ getTypeLabel(detail.type) }}</text>
|
||||
<text class="time">{{ formatTime(detail.createTime) }}</text>
|
||||
<text class="view-count">浏览 {{ detail.viewCount }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="detail-content">
|
||||
<rich-text :nodes="detail.description || ''"></rich-text>
|
||||
</view>
|
||||
|
||||
<view v-if="detail.attachments && detail.attachments.length > 0" class="attachments">
|
||||
<view class="attachment-title">附件</view>
|
||||
<view
|
||||
v-for="(file, index) in detail.attachments"
|
||||
:key="index"
|
||||
class="attachment-item"
|
||||
@click="downloadFile(file)"
|
||||
>
|
||||
<text class="file-name">{{ file.name }}</text>
|
||||
<text class="file-size">{{ formatFileSize(file.size) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="notice-detail">
|
||||
<view class="detail-header">
|
||||
<view class="title">
|
||||
<text v-if="detail.isTop === '1'" class="top-tag">置顶</text>
|
||||
{{ detail.title }}
|
||||
</view>
|
||||
<view class="meta">
|
||||
<text class="type-tag" :class="getTypeClass(detail.type)">{{ getTypeLabel(detail.type) }}</text>
|
||||
<text class="time">{{ formatTime(detail.createTime) }}</text>
|
||||
<text class="view-count">浏览 {{ detail.viewCount }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="detail-content">
|
||||
<rich-text :nodes="nodes || ''"></rich-text>
|
||||
</view>
|
||||
|
||||
<view v-if="detail.attachments && detail.attachments.length > 0" class="attachments">
|
||||
<view class="attachment-title">附件</view>
|
||||
<view v-for="(file, index) in detail.attachments" :key="index" class="attachment-item" @click="downloadFile(file)">
|
||||
<text class="file-name">{{ file.name }}</text>
|
||||
<text class="file-size">{{ formatFileSize(file.size) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import { noticeApi } from '@/sheep/api'
|
||||
import { computed, ref } from "vue"
|
||||
import { onLoad } from "@dcloudio/uni-app"
|
||||
import { noticeApi } from "@/sheep/api"
|
||||
|
||||
const detail = ref<any>({})
|
||||
|
||||
const nodes = computed(() => {
|
||||
return detail.value.description?.replaceAll(`<img src="/api`, `<img src="https://stgl.pj.gov.cn/api`)
|
||||
})
|
||||
|
||||
function getTypeLabel(type: string) {
|
||||
const typeMap: Record<string, string> = {
|
||||
'1': '重要',
|
||||
'2': '一般',
|
||||
'3': '活动'
|
||||
}
|
||||
return typeMap[type] || '一般'
|
||||
const typeMap: Record<string, string> = {
|
||||
"1": "重要",
|
||||
"2": "一般",
|
||||
"3": "活动",
|
||||
}
|
||||
return typeMap[type] || "一般"
|
||||
}
|
||||
|
||||
function getTypeClass(type: string) {
|
||||
const classMap: Record<string, string> = {
|
||||
'1': 'type-important',
|
||||
'2': 'type-general',
|
||||
'3': 'type-activity'
|
||||
}
|
||||
return classMap[type] || 'type-general'
|
||||
const classMap: Record<string, string> = {
|
||||
"1": "type-important",
|
||||
"2": "type-general",
|
||||
"3": "type-activity",
|
||||
}
|
||||
return classMap[type] || "type-general"
|
||||
}
|
||||
|
||||
function formatTime(time: string) {
|
||||
if (!time) return ''
|
||||
return new Date(time).toLocaleString()
|
||||
if (!time) return ""
|
||||
return new Date(time).toLocaleString()
|
||||
}
|
||||
|
||||
function formatFileSize(size: number) {
|
||||
if (size < 1024) {
|
||||
return size + 'B'
|
||||
} else if (size < 1024 * 1024) {
|
||||
return (size / 1024).toFixed(1) + 'KB'
|
||||
} else {
|
||||
return (size / (1024 * 1024)).toFixed(1) + 'MB'
|
||||
}
|
||||
if (size < 1024) {
|
||||
return size + "B"
|
||||
} else if (size < 1024 * 1024) {
|
||||
return (size / 1024).toFixed(1) + "KB"
|
||||
} else {
|
||||
return (size / (1024 * 1024)).toFixed(1) + "MB"
|
||||
}
|
||||
}
|
||||
|
||||
function downloadFile(file: any) {
|
||||
uni.downloadFile({
|
||||
url: file.url,
|
||||
success: (res) => {
|
||||
if (res.statusCode === 200) {
|
||||
uni.openDocument({
|
||||
filePath: res.tempFilePath,
|
||||
success: () => {
|
||||
console.log('打开文档成功')
|
||||
},
|
||||
fail: () => {
|
||||
uni.showToast({ title: '无法打开此文件', icon: 'none' })
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
fail: () => {
|
||||
uni.showToast({ title: '下载失败', icon: 'none' })
|
||||
}
|
||||
})
|
||||
uni.downloadFile({
|
||||
url: file.url,
|
||||
success: (res) => {
|
||||
if (res.statusCode === 200) {
|
||||
uni.openDocument({
|
||||
filePath: res.tempFilePath,
|
||||
success: () => {
|
||||
console.log("打开文档成功")
|
||||
},
|
||||
fail: () => {
|
||||
uni.showToast({ title: "无法打开此文件", icon: "none" })
|
||||
},
|
||||
})
|
||||
}
|
||||
},
|
||||
fail: () => {
|
||||
uni.showToast({ title: "下载失败", icon: "none" })
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
onLoad(async (options: any) => {
|
||||
const id = options.id
|
||||
if (!id) return
|
||||
|
||||
try {
|
||||
// 增加浏览量
|
||||
await noticeApi.addNoticeView(id)
|
||||
// 获取详情
|
||||
const response: any = await noticeApi.getNoticeDetail(id)
|
||||
if (response.code === 0 && response.data) {
|
||||
detail.value = response.data
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取公告详情失败:', error)
|
||||
uni.showToast({ title: '获取详情失败', icon: 'none' })
|
||||
}
|
||||
const id = options.id
|
||||
if (!id) return
|
||||
|
||||
try {
|
||||
// 增加浏览量
|
||||
await noticeApi.addNoticeView(id)
|
||||
// 获取详情
|
||||
const response: any = await noticeApi.getNoticeDetail(id)
|
||||
if (response.code === 0 && response.data) {
|
||||
detail.value = response.data
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("获取公告详情失败:", error)
|
||||
uni.showToast({ title: "获取详情失败", icon: "none" })
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.notice-detail {
|
||||
padding: 32rpx;
|
||||
background: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
padding: 32rpx;
|
||||
background: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.detail-header {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 8rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.top-tag {
|
||||
background: #ffebee;
|
||||
color: #d32f2f;
|
||||
font-size: 22rpx;
|
||||
border-radius: 8rpx;
|
||||
padding: 2rpx 12rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: #999;
|
||||
font-size: 24rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.view-count {
|
||||
margin-left: 24rpx;
|
||||
}
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 8rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.top-tag {
|
||||
background: #ffebee;
|
||||
color: #d32f2f;
|
||||
font-size: 22rpx;
|
||||
border-radius: 8rpx;
|
||||
padding: 12rpx 12rpx;
|
||||
margin-right: 12rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: #999;
|
||||
font-size: 24rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.view-count {
|
||||
margin-left: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-content {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
line-height: 1.8;
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
line-height: 1.8;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.attachments {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 32rpx;
|
||||
|
||||
.attachment-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.attachment-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16rpx 0;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
font-size: 28rpx;
|
||||
color: #007aff;
|
||||
flex: 1;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.file-size {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 32rpx;
|
||||
|
||||
.attachment-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.attachment-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16rpx 0;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
font-size: 28rpx;
|
||||
color: #007aff;
|
||||
flex: 1;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.file-size {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
Reference in new issue
Block a user