<template> 
 | 
  <a-card 
 | 
    class="general-card" 
 | 
    :title="$t('userSetting.certification.title.record')" 
 | 
    :header-style="{ border: 'none' }" 
 | 
  > 
 | 
    <a-table v-if="renderData.length" :data="renderData"> 
 | 
      <template #columns> 
 | 
        <a-table-column 
 | 
          :title="$t('userSetting.certification.columns.certificationType')" 
 | 
        > 
 | 
          <template #cell> 
 | 
            {{ $t('userSetting.certification.cell.certificationType') }} 
 | 
          </template> 
 | 
        </a-table-column> 
 | 
        <a-table-column 
 | 
          :title="$t('userSetting.certification.columns.certificationContent')" 
 | 
          data-index="certificationContent" 
 | 
        /> 
 | 
        <a-table-column :title="$t('userSetting.certification.columns.status')"> 
 | 
          <template #cell="{ record }"> 
 | 
            <p v-if="record.status === 0"> 
 | 
              <span class="circle"></span> 
 | 
              <span>{{ $t('userSetting.certification.cell.auditing') }}</span> 
 | 
            </p> 
 | 
            <p v-if="record.status === 1"> 
 | 
              <span class="circle pass"></span> 
 | 
              <span>{{ $t('userSetting.certification.cell.pass') }}</span> 
 | 
            </p> 
 | 
          </template> 
 | 
        </a-table-column> 
 | 
        <a-table-column 
 | 
          :title="$t('userSetting.certification.columns.time')" 
 | 
          data-index="time" 
 | 
        /> 
 | 
        <a-table-column 
 | 
          :title="$t('userSetting.certification.columns.operation')" 
 | 
        > 
 | 
          <template #cell="{ record }"> 
 | 
            <a-space> 
 | 
              <a-button type="text"> 
 | 
                {{ $t('userSetting.certification.button.check') }} 
 | 
              </a-button> 
 | 
              <a-button v-if="record.status === 0" type="text"> 
 | 
                {{ $t('userSetting.certification.button.withdraw') }} 
 | 
              </a-button> 
 | 
            </a-space> 
 | 
          </template> 
 | 
        </a-table-column> 
 | 
      </template> 
 | 
    </a-table> 
 | 
  </a-card> 
 | 
</template> 
 | 
  
 | 
<script lang="ts" setup> 
 | 
  import { PropType } from 'vue'; 
 | 
  import { CertificationRecord } from '@/api/user-center'; 
 | 
  
 | 
  defineProps({ 
 | 
    renderData: { 
 | 
      type: Array as PropType<CertificationRecord>, 
 | 
      default() { 
 | 
        return []; 
 | 
      }, 
 | 
    }, 
 | 
  }); 
 | 
</script> 
 | 
  
 | 
<style scoped lang="less"> 
 | 
  :deep(.arco-table-th) { 
 | 
    &:last-child { 
 | 
      .arco-table-th-item-title { 
 | 
        margin-left: 16px; 
 | 
      } 
 | 
    } 
 | 
  } 
 | 
</style> 
 |