ruoyi-miniapp/sub/owner/job-detail.vue

<template>
  <view class="jobInfo-detail">

    
    <!-- 详情内容区 -->
    <view class="content-wrap">
      <view class="jobInfo-title">{{ jobInfoDetail.title }}</view>
      <view class="jobInfo-time">生效时间：{{ jobInfoDetail.jobDate }}</view>
      
      <!-- 富文本内容 -->
      <view class="jobInfo-content">
        <rich-text :nodes="jobInfoDetail.context"></rich-text>
      </view>
    </view>
  </view>
</template>

<script>
import { jobInfoApi } from '@/api/jobinfo/index.js'

export default {
  data() {
    return {
      id: '', // 政策ID
      jobInfoDetail: {
        name: '',
        createTime: '',
        context: ''
      }
    }
  },
  onLoad(options) {
    if (options.id) {
      this.id = options.id
      this.getjobInfoDetail()
    }
  },
  methods: {
    // 获取详情数据
    async getjobInfoDetail() {
      try {
        const res = await jobInfoApi.getjobInfo(this.id)
        if (res.code === 0) {
          this.jobInfoDetail = {
            ...res.data,
            jobDate: this.formatTime(res.data.jobDate),
            // 处理富文本内容，确保样式正确显示
            context: this.formatRichText(res.data.context)
          }
        }
      } catch (error) {
        uni.showToast({
          title: '获取详情失败',
          icon: 'none'
        })
      }
    },
    // 格式化时间
    formatTime(time) {
      if (!time) return ''
      const date = new Date(time)
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
    },
    // 处理富文本内容
    formatRichText(html) {
      if (!html) return ''
      // 添加样式以确保图片自适应
      return html.replace(/<img/gi, '<img style="max-width:100%;height:auto;display:block;"')
    },
    // 返回上一页
    handleBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss">
.jobInfo-detail {
  height: 100vh;
  background: #fff;
  overflow-y: auto;

  .nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 88rpx;
    background: #fff;
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    border-bottom: 1rpx solid #eee;
    z-index: 100;
    
    .back-btn {
      font-size: 28rpx;
      color: #333;
    }
    
    .title {
      flex: 1;
      text-align: center;
      font-size: 32rpx;
      font-weight: bold;
      padding-right: 60rpx;
    }
  }
  
  .content-wrap {
    padding: 30rpx 30rpx 30rpx;
    
    .jobInfo-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 20rpx;
    }
    
    .jobInfo-time {
      font-size: 24rpx;
      color: #999;
      margin-bottom: 40rpx;
    }
    
    .jobInfo-content {
      font-size: 28rpx;
      line-height: 1.8;
      color: #333;
      
      :deep(img) {
        max-width: 100%;
        height: auto;
      }
      
      :deep(p) {
        margin-bottom: 20rpx;
      }
    }
  }
}
</style>