rtliveCompany/pages_task/components/ShortVideoAudit.vue

<template>
  <view class="short-video-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.videoTitle || '-' }}</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.isOriginal ? '是' : '否' }}</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.videoUrl">
      <view class="section-header">
        <view class="section-indicator"></view>
        <text class="section-title">视频预览</text>
      </view>
      <view class="video-container">
        <video 
          :src="data.videoUrl" 
          :poster="data.coverImageUrl || ''"
          style="width: 100%; height: 400rpx; background-color: #000;"
          controls
          @error="videoError"
        ></video>
      </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: 'ShortVideoAudit',
  props: {
    data: {
      type: Object,
      default: null
    }
  },
  methods: {
    // 视频播放错误处理
    videoError(err) {
      console.error('视频播放错误:', err)
    },
    
    // 预览图片
    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;
      }
    }
  }

  .video-container {
    margin-top: 16rpx;
    border-radius: 8rpx;
    overflow: hidden;
  }

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

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