englishread-front/subPages/home/richtext.vue

<template>
  <view class="richtext-container">
    <!-- 状态栏安全区域 -->
    <uv-status-bar></uv-status-bar>
    

    
    <!-- 富文本内容区域 -->
    <view class="content-wrapper">
      <view class="content-container">
        <!-- 使用 uv-parse 组件渲染富文本 -->
        <uv-parse 
          v-if="htmlContent"
          :content="htmlContent"
          :tag-style="tagStyle"
          :show-with-animation="true"
          :animation-duration="300"
        ></uv-parse>
        
        <!-- 加载状态 -->
        <view v-else class="loading-container">
          <uv-loading-icon mode="circle"></uv-loading-icon>
          <text class="loading-text">内容加载中...</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      htmlContent: '',
      // 富文本样式配置
      tagStyle: {
        p: 'margin: 16rpx 0; line-height: 1.6; color: #333;',
        img: 'max-width: 100%; height: auto; border-radius: 8rpx; margin: 16rpx 0;',
        h1: 'font-size: 36rpx; font-weight: bold; margin: 24rpx 0 16rpx 0; color: #222;',
        h2: 'font-size: 32rpx; font-weight: bold; margin: 20rpx 0 12rpx 0; color: #333;',
        h3: 'font-size: 28rpx; font-weight: bold; margin: 16rpx 0 8rpx 0; color: #444;',
        strong: 'font-weight: bold; color: #222;',
        em: 'font-style: italic; color: #666;',
        ul: 'margin: 16rpx 0; padding-left: 32rpx;',
        ol: 'margin: 16rpx 0; padding-left: 32rpx;',
        li: 'margin: 8rpx 0; line-height: 1.5;',
        blockquote: 'margin: 16rpx 0; padding: 16rpx; background: #f5f5f5; border-left: 4rpx solid #ddd; border-radius: 4rpx;',
        code: 'background: #f5f5f5; padding: 4rpx 8rpx; border-radius: 4rpx; font-family: monospace;',
        pre: 'background: #f5f5f5; padding: 16rpx; border-radius: 8rpx; overflow-x: auto; margin: 16rpx 0;'
      }
    }
  },
  
  onLoad(options) {
    // 获取传递的富文本内容
    if (options.content) {
      this.htmlContent = decodeURIComponent(options.content)
    } else {
      uni.showToast({
        title: '内容加载失败',
        icon: 'error'
      })
      setTimeout(() => {
        this.goBack()
      }, 1500)
    }
  },
  
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack({
        delta: 1
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.richtext-container {
  min-height: 100vh;
  background: #fff;
}

.content-wrapper {
  padding: 0 32rpx 40rpx;
}

.content-container {
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 0;
  
  .loading-text {
    margin-top: 24rpx;
    font-size: 28rpx;
    color: #999;
  }
}

// 富文本内容样式优化
:deep(.uv-parse) {
  font-size: 28rpx;
  line-height: 1.6;
  color: #333;
  
  // 图片样式
  img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8rpx;
    margin: 16rpx 0;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  }
  
  // 段落样式
  p {
    margin: 16rpx 0;
    text-align: justify;
    word-break: break-word;
  }
  
  // 标题样式
  h1, h2, h3, h4, h5, h6 {
    margin: 24rpx 0 16rpx 0;
    font-weight: bold;
    line-height: 1.4;
  }
  
  // 列表样式
  ul, ol {
    margin: 16rpx 0;
    padding-left: 32rpx;
    
    li {
      margin: 8rpx 0;
      line-height: 1.5;
    }
  }
  
  // 引用样式
  blockquote {
    margin: 16rpx 0;
    padding: 16rpx;
    background: #f8f9fa;
    border-left: 4rpx solid $primary-color;
    border-radius: 4rpx;
    font-style: italic;
  }
  
  // 代码样式
  code {
    background: #f1f3f4;
    padding: 4rpx 8rpx;
    border-radius: 4rpx;
    font-family: 'Courier New', monospace;
    font-size: 24rpx;
  }
  
  pre {
    background: #f1f3f4;
    padding: 16rpx;
    border-radius: 8rpx;
    overflow-x: auto;
    margin: 16rpx 0;
    
    code {
      background: none;
      padding: 0;
    }
  }
}
</style>