hyapi-consoleweb/src/pages/certification/components/PlatformSelect.vue

<template>
  <div class="platform-select">
    <div class="platform-select__header">
      <h2 class="platform-select__title">选择签署平台</h2>
      <p class="platform-select__desc">
        企业信息已审核通过，请选择企业认证与合同签署使用的平台。选定后不可更改。
      </p>
    </div>

    <div class="platform-select__grid">
      <button
        v-for="item in platforms"
        :key="item.platform"
        type="button"
        class="platform-card"
        :class="{ 'is-active': selected === item.platform, 'is-disabled': !item.available }"
        :disabled="!item.available || submitting"
        @click="selected = item.platform"
      >
        <span class="platform-card__name">{{ item.name }}</span>
        <span class="platform-card__desc">{{ item.description }}</span>
      </button>
    </div>

    <div class="platform-select__actions">
      <el-button type="primary" size="large" :loading="submitting" :disabled="!selected" @click="confirm">
        确认并开始企业认证
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { certificationApi } from '@/api/index.js'
import { ElMessage } from 'element-plus'
import { onMounted, ref } from 'vue'

const emit = defineEmits(['selected'])

const platforms = ref([])
const selected = ref('')
const submitting = ref(false)

onMounted(async () => {
  try {
    const res = await certificationApi.getSignPlatforms()
    // 前端暂时只开放法大大，隐藏 e签宝
    platforms.value = (res?.data?.platforms || []).filter((p) => p.platform === 'fadada')
    if (platforms.value.length === 1) {
      selected.value = platforms.value[0].platform
    }
  } catch (e) {
    ElMessage.error(e?.message || '获取签署平台失败')
  }
})

async function confirm() {
  if (!selected.value) return
  submitting.value = true
  try {
    const res = await certificationApi.selectSignPlatform({ sign_platform: selected.value })
    ElMessage.success('已选择签署平台')
    emit('selected', res?.data)
  } catch (e) {
    ElMessage.error(e?.message || '选择签署平台失败')
  } finally {
    submitting.value = false
  }
}
</script>

<style scoped>
.platform-select {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 20px 48px;
}

.platform-select__header {
  margin-bottom: 28px;
  text-align: center;
}

.platform-select__title {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 600;
  color: #1f2937;
}

.platform-select__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #6b7280;
}

.platform-select__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  max-width: 360px;
  margin: 0 auto;
}

.platform-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 20px;
  text-align: left;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.platform-card:hover:not(.is-disabled) {
  border-color: #2563eb;
}

.platform-card.is-active {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.platform-card.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.platform-card__name {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
}

.platform-card__desc {
  font-size: 13px;
  line-height: 1.5;
  color: #6b7280;
}

.platform-select__actions {
  margin-top: 28px;
  text-align: center;
}

@media (max-width: 640px) {
  .platform-select__grid {
    grid-template-columns: 1fr;
  }
}
</style>