rtliveCompany/pages_task/components/ArticleAudit.vue

<template>
  <view class="article-audit" v-if="data">
    <!-- 文章审核表单 -->
    <view class="info-section">
      <view class="section-header">
        <view class="section-indicator"></view>
        <text class="section-title">文章信息</text>
      </view>
      <view class="info-list">
        <!-- 基本信息 -->
        <view class="info-item">
          <text class="info-label">标题</text>
          <text class="info-value">{{ data.title || '-' }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">公司</text>
          <text class="info-value">{{ data.companyName || '-' }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">作者</text>
          <text class="info-value">{{ data.authorName || '-' }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">分组</text>
          <text class="info-value">{{ data.groupName || '-' }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">标签</text>
          <text class="info-value">{{ data.tags || '-' }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">摘要</text>
          <text class="info-value">{{ data.summary || '-' }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">上下架</text>
          <text class="info-value">{{ data.isPublish ? '上架' : '下架' }}</text>
        </view>
      </view>
    </view>

    <!-- 文章内容 -->
    <view class="info-section" v-if="data.articleContent || data.articleUrl">
      <view class="section-header">
        <view class="section-indicator"></view>
        <text class="section-title">文章内容</text>
      </view>
      <view class="article-content" v-if="data.articleContent">
        <!-- 直接显示文章内容 -->
        <view class="content-preview" @click="browseArticle">
          <rich-text :nodes="data.articleContent"></rich-text>
          <view class="browse-btn">
            <text>点击浏览全文</text>
          </view>
        </view>
      </view>
      <view class="article-url" v-else-if="data.articleUrl">
        <!-- 文章链接 -->
        <view class="url-container" @click="openArticleUrl(data.articleUrl)">
          <text class="url-text">{{ data.articleUrl }}</text>
          <view class="open-btn">
            <text>打开链接</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 封面图 -->
    <view class="info-section" v-if="data.coverImageUrl">
      <view class="section-header">
        <view class="section-indicator"></view>
        <text class="section-title">封面图</text>
      </view>
      <view class="image-container">
        <image 
          :src="data.coverImageUrl" 
          style="width: 200rpx; height: 200rpx;"
          mode="aspectFill"
          @click="previewImage(data.coverImageUrl)"
        ></image>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ArticleAudit',
  props: {
    data: {
      type: Object,
      default: null
    }
  },
  methods: {
    // 浏览文章
    browseArticle() {
      if (this.data.articleContent) {
        // 这里可以实现浏览全文的逻辑，例如打开新页面或弹窗显示完整文章
        uni.showToast({
          title: '浏览文章功能开发中',
          icon: 'none'
        })
      }
    },
    
    // 打开文章链接
    openArticleUrl(url) {
      if (url) {
        uni.navigateTo({
          url: `/pages/common/webview?url=${encodeURIComponent(url)}`
        })
      }
    },
    
    // 预览图片
    previewImage(url) {
      uni.previewImage({
        urls: [url],
        current: url
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.info-section {
  margin-bottom: 24rpx;
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;

  .section-header {
    display: flex;
    align-items: center;
    margin-bottom: 24rpx;

    .section-indicator {
      width: 8rpx;
      height: 32rpx;
      background: #388BFF;
      border-radius: 4rpx;
      margin-right: 16rpx;
    }

    .section-title {
      font-size: 32rpx;
      font-weight: 500;
      color: #333;
    }
  }

  .info-list {
    .info-item {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 20rpx;
      padding-bottom: 20rpx;
      border-bottom: 1rpx solid #F0F0F0;

      &:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
      }

      .info-label {
        font-size: 28rpx;
        color: #666;
        width: 200rpx;
      }

      .info-value {
        font-size: 28rpx;
        color: #333;
        flex: 1;
        text-align: right;
        word-break: break-all;
      }
    }
  }

  .article-content {
    .content-preview {
      border: 1rpx solid #F0F0F0;
      border-radius: 8rpx;
      padding: 20rpx;
      background-color: #F9F9F9;
      cursor: pointer;

      rich-text {
        font-size: 28rpx;
        color: #333;
      }

      .browse-btn {
        margin-top: 20rpx;
        text-align: center;
        color: #388BFF;
        font-size: 28rpx;
      }
    }
  }

  .article-url {
    .url-container {
      border: 1rpx solid #F0F0F0;
      border-radius: 8rpx;
      padding: 20rpx;
      background-color: #F9F9F9;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .url-text {
        font-size: 28rpx;
        color: #388BFF;
        flex: 1;
        word-break: break-all;
      }

      .open-btn {
        margin-left: 20rpx;
        padding: 10rpx 20rpx;
        background-color: #388BFF;
        color: #fff;
        border-radius: 4rpx;
        font-size: 24rpx;
      }
    }
  }

  .image-container {
    margin-top: 16rpx;
    display: flex;
    gap: 16rpx;

    image {
      border-radius: 8rpx;
      cursor: pointer;
    }
  }
}
</style>