chongqing-app/src/pages/announcement/noticeDetail.vue

<template>
    <home-container :customStyle="{ background: 'none' }" :customHomeStyle="{ overflow: 'hidden' }">
        <view class="detail-container" v-if="detailData">
            <!-- 公告标题 -->
            <view class="title">{{ detailData.noticeTitle }}</view>
            
            <!-- 发布信息 -->
            <view class="meta-info">
                <text class="author">{{ detailData.createUser || '管理员' }}</text>
                <text class="date">{{ formatDate(detailData.createTime) }}</text>
            </view>
            
            <!-- 分隔线 -->
            <view class="divider"></view>
            
            <!-- 富文本内容 -->
            <view class="content" v-html="detailData.noticeContent"></view>
        </view>
        
        <!-- 加载状态 -->
        <view v-else class="loading">加载中...</view>
    </home-container>
</template>

<script>
import HomeContainer from "@/components/HomeContainer.vue";
import { getNoticeDetail } from "@/api/announcement/announcement.js";


export default {
    components: {
        HomeContainer
    },
    data() {
        return {
            detailData: null,
            loading: true
        };
    },
    onLoad(options) {
        
        // 从路由参数中获取公告ID
        if (options && options.id) {
            this.getDetailData(options.id);
        } else {
            console.error('公告ID不存在');
            uni.showToast({
                title: '获取公告详情失败',
                icon: 'none'
            });
        }
    },
    methods: {
        // 格式化日期
        formatDate(timeString) {
            if (!timeString) return '';
            const date = new Date(timeString);
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            const hour = String(date.getHours()).padStart(2, '0');
            const minute = String(date.getMinutes()).padStart(2, '0');
            return `${year}-${month}-${day} ${hour}:${minute}`;
        },
        
        // 处理富文本中的图片
        handleRichTextImages(html) {
            if (!html) return '';
            
            // 为所有img标签添加style="width:90%"，同时保留原有的style属性
            return html.replace(/<img([^>]+)>/g, (match, attributes) => {
                // 检查是否已有style属性
                if (attributes.includes('style=')) {
                    // 如果已有style属性，在其末尾添加width设置
                    return `<img${attributes.replace(/style=["']([^"']*)["']/, (styleMatch, styleValue) => {
                        return `style="${styleValue} width:90%;"`;
                    })}>`;
                } else {
                    // 如果没有style属性，添加一个包含width设置的style属性
                    return `<img${attributes} style="width:90%;">`;
                }
            });
        },

        // 获取公告详情数据
        async getDetailData(id) {
            try {
                this.loading = true;
                const response = await getNoticeDetail(id);
                
                // 深拷贝响应数据
                this.detailData = JSON.parse(JSON.stringify(response.data));
                
                // 处理noticeContent中的图片样式
                if (this.detailData.noticeContent) {
                    this.detailData.noticeContent = this.handleRichTextImages(this.detailData.noticeContent);
                }
            } catch (error) {
                console.error('获取公告详情失败:', error);
                uni.showToast({
                    title: '获取公告详情失败',
                    icon: 'none'
                });
            } finally {
                this.loading = false;
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.detail-container {
    padding: 32rpx;
    background-color: #ffffff;
    min-height: calc(100vh - 177rpx);
    box-sizing: border-box;
    
    // 标题样式
    .title {
        font-size: 36rpx;
        font-weight: bold;
        color: #333333;
        line-height: 52rpx;
        margin-bottom: 24rpx;
    }
    
    // 元信息样式
    .meta-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24rpx;
        
        .author,
        .date {
            font-size: 28rpx;
            color: #666666;
        }
    }
    
    // 分隔线样式
    .divider {
        height: 1rpx;
        background-color: #e5e5e5;
        margin: 32rpx 0;
    }
    
    // 富文本内容样式
    .content {
        font-size: 28rpx;
        color: #333333;
        line-height: 48rpx;
        
        // 富文本内部样式
        :deep() {
            p {
                margin-bottom: 20rpx;
            }
            img {
                max-width: 100%;
                height: auto;
                margin: 16rpx 0;
            }
            a {
                color: #007aff;
                text-decoration: underline;
            }
        }
    }
}

// 加载状态样式
.loading {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400rpx;
    font-size: 28rpx;
    color: #999999;
}
</style>