addf

2026-07-21 15:53:43 +08:00
parent 0761f71316
commit 480c46f15b
10 changed files with 641 additions and 168 deletions
--- a/src/pages/certification/components/PlatformSelect.vue
+++ b/src/pages/certification/components/PlatformSelect.vue
@@ -0,0 +1,152 @@
+<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()
+    platforms.value = res?.data?.platforms || []
+    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: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.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>