rtliveCompany/pages_task/components/SpeakerAudit.vue

<template>
  <view class="speaker-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.companyUserVO && data.companyUserVO.companyName ? data.companyUserVO.companyName : '-' }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">医生</text>
          <text class="info-value">{{ data.docterVO && data.docterVO.doctorName ? data.docterVO.doctorName : '-' }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">学术头衔</text>
          <text class="info-value">{{ data.docterVO && data.docterVO.jobTitle ? data.docterVO.jobTitle : '-' }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">学位</text>
          <text class="info-value">{{ data.docterVO && data.docterVO.degree ? data.docterVO.degree : '-' }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">学术研究</text>
          <text class="info-value">{{ data.docterVO && data.docterVO.academicResearch ? data.docterVO.academicResearch : '-' }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">申请级别</text>
          <text class="info-value">{{ data.docterVO && data.docterVO.applyLevel ? data.docterVO.applyLevel : '-' }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">临床年数</text>
          <text class="info-value">{{ data.docterVO && data.docterVO.clinicalYears ? data.docterVO.clinicalYears : '-' }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">国际论文/著作</text>
          <text class="info-value">{{ data.docterVO && data.docterVO.internationalPapers ? data.docterVO.internationalPapers : '-' }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">全国论文/著作</text>
          <text class="info-value">{{ data.docterVO && data.docterVO.nationalPapers ? data.docterVO.nationalPapers : '-' }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">学术任职</text>
          <text class="info-value">{{ data.docterVO && data.docterVO.academicPositions ? data.docterVO.academicPositions : '-' }}</text>
        </view>
      </view>
    </view>

    <!-- 证明材料 -->
    <view class="info-section" v-if="(data.docterVO && data.docterVO.licenseImage) || (data.docterVO && data.docterVO.titleCertImage)">
      <view class="section-header">
        <view class="section-indicator"></view>
        <text class="section-title">证明材料</text>
      </view>
      <view class="proof-materials">
        <!-- 执业证书 -->
        <view class="material-item" v-if="data.docterVO && data.docterVO.licenseImage" @click="previewImage(data.docterVO.licenseImage, [data.docterVO.licenseImage])">
          <image 
            :src="data.docterVO.licenseImage" 
            style="width: 200rpx; height: 200rpx;"
            mode="aspectFill"
          ></image>
          <text class="material-name">执业证书</text>
        </view>
        <!-- 职称证书 -->
        <view class="material-item" v-if="data.docterVO && data.docterVO.titleCertImage" @click="previewImage(data.docterVO.titleCertImage, [data.docterVO.titleCertImage])">
          <image 
            :src="data.docterVO.titleCertImage" 
            style="width: 200rpx; height: 200rpx;"
            mode="aspectFill"
          ></image>
          <text class="material-name">职称证书</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'SpeakerAudit',
  props: {
    data: {
      type: Object,
      default: null
    }
  },
  methods: {
    // 预览图片
    previewImage(current, urls) {
      uni.previewImage({
        urls: urls,
        current: current
      })
    }
  }
}
</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;
      }
    }
  }

  .proof-materials {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;

    .material-item {
      width: 200rpx;
      margin-bottom: 20rpx;
      cursor: pointer;

      image {
        border-radius: 8rpx;
        margin-bottom: 10rpx;
      }

      .material-name {
        font-size: 24rpx;
        color: #666;
        text-align: center;
        word-break: break-all;
      }
    }
  }
}
</style>