front-end/hdApp/src/admin/picText/viewerDemo.vue

<template>
  <view class="demo-page">
    <view class="header">
      <text class="title">富文本预览组件演示</text>
    </view>

    <view class="viewer-container">
      <rich-media-viewer 
      :content="demoContent" 
      :startScroll="250"
      :threshold="450"
    />
    </view>

    <view class="action-buttons">
      <button class="demo-btn" @click="clearContent">清空内容</button>
      <button class="demo-btn primary" @click="loadSampleData">加载示例数据</button>
      <button class="demo-btn secondary" @click="openPreviewPage">新页面预览</button>
    </view>
  </view>
</template>

<script>
import RichMediaViewer from '../../components/RichMediaViewer/index.vue';

export default {
  name: 'RichMediaViewerDemo',
  components: {
    RichMediaViewer
  },
  data() {
    return {
      demoContent: []
    };
  },
  methods: {
    clearContent() {
      this.demoContent = [];
    },

    loadSampleData() {
      this.demoContent = [
        {
          type: 1,
          content: 'https://commimg.pddpic.com/monica/2025-07-23/950edee8-e9f6-4ed9-9a20-70751dd43654.jpeg.suffix.jpeg'
        },
        {
          type: 3,
          content: '这是一个高级的富文本预览组件演示。它支持大图、小图网格和文本的完美展示，同时提供了优雅的图片预览功能。'
        },
        {
          type: 2,
          content: [
            'https://commimg.pddpic.com/monica/2025-07-23/d85bf082-abda-4725-b5f5-93c9800647d8.jpeg.suffix.jpeg',
            'https://commimg.pddpic.com/monica/2025-07-23/950edee8-e9f6-4ed9-9a20-70751dd43654.jpeg.suffix.jpeg',
            'https://commimg.pddpic.com/monica/2025-07-23/c3b8894a-52ee-4962-b879-5a311e761375.jpeg.suffix.jpeg',
            'https://commimg.pddpic.com/monica/2025-07-23/0beeb89e-7e0a-4755-9ed3-6b5d139023ab.jpeg.suffix.jpeg',
            'https://commimg.pddpic.com/monica/2025-07-23/4d299be0-5782-4b3f-84a7-cdd49da703f2.jpeg.suffix.jpeg',
            'https://commimg.pddpic.com/monica/2025-07-23/d85bf082-abda-4725-b5f5-93c9800647d8.jpeg.suffix.jpeg'
          ]
        },
        {
          type: 3,
          content:
            '小图支持点击放大预览，可以左右滑动查看多张图片。预览界面提供了优雅的交互体验和清晰的图片展示效果。\n文本内容支持换行显示，保持良好的阅读体验。'
        },
        {
          type: 1,
          content: 'https://commimg.pddpic.com/monica/2025-07-23/c3b8894a-52ee-4962-b879-5a311e761375.jpeg.suffix.jpeg'
        }
      ];
    },

    openPreviewPage() {
      if (this.demoContent.length === 0) {
        uni.showToast({
          title: '请先加载示例数据',
          icon: 'none'
        });
        return;
      }

      // 准备预览数据
      const previewData = {
        title: '预览组件演示',
        content: this.demoContent
      };

      // 通过全局数据传递
      const app = getApp();
      app.globalData = app.globalData || {};
      app.globalData.previewData = previewData;

      // 跳转到预览页面
      uni.navigateTo({
        url: './preview'
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.demo-page {
  min-height: 100vh;
  padding: 8rpx;
  background-color: #f5f5f5;
}

.header {
  text-align: center;
  margin-bottom: 30rpx;

  .title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
  }
}

.viewer-container {
  margin-bottom: 30rpx;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
}

.action-buttons {
  display: flex;
  gap: 20rpx;
  margin-top: 30rpx;

  .demo-btn {
    flex: 1;
    height: 80rpx;
    border-radius: 10rpx;
    font-size: 28rpx;
    background-color: #fff;
    border: 2rpx solid #e5e5e5;

    &.primary {
      background-color: #007aff;
      color: white;
      border-color: #007aff;
    }

    &.secondary {
      background-color: #34c759;
      color: white;
      border-color: #34c759;
    }
  }
}
</style>